function ContactSelector({ onSelect, onMultiSelect, recentContacts = [], syncedContacts = [], maxSelection = Infinity, isOffline = false, loading = false, error = null, selectedContacts = [] }) { const [searchQuery, setSearchQuery] = useState(""); const [selected, setSelected] = useState(selectedContacts); const [isRefreshing, setIsRefreshing] = useState(false); const handleSelect = (contact)=>{ if (selected.find((c)=>c.id === contact.id)) { const newSelected = selected.filter((c)=>c.id !== contact.id); setSelected(newSelected); onMultiSelect?.(newSelected); } else if (selected.length < maxSelection) { const newSelected = [ ...selected, contact ]; setSelected(newSelected); onMultiSelect?.(newSelected); } onSelect?.(contact); }; const filteredContacts = syncedContacts.filter((contact)=>contact.name.toLowerCase().includes(searchQuery.toLowerCase())); const handleRefresh = async ()=>{ setIsRefreshing(true); await new Promise((resolve)=>setTimeout(resolve, 1000)); setIsRefreshing(false); }; const handleQuickAction = (contact, action)=>{ if (typeof navigator !== "undefined" && navigator.vibrate) { navigator.vibrate(50); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm overflow-hidden", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-100", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", placeholder: "Search contacts...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "w-full pl-10 pr-4 py-2 bg-gray-50 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#dd0000] focus:bg-white transition-colors", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }))), isOffline && /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 bg-yellow-50 text-yellow-800 text-sm flex items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-wifi-slash mr-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Offline mode - showing cached contacts")), error && /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 bg-red-50 text-red-700 text-sm flex items-center", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, error)), /*#__PURE__*/ React.createElement("div", { className: "divide-y divide-gray-100", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, loading || isRefreshing ? /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, [ 1, 2, 3 ].map((i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "flex items-center space-x-4 animate-pulse", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 space-y-2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/3", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-3 bg-gray-200 rounded w-1/4", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }))))) : /*#__PURE__*/ React.createElement(React.Fragment, null, recentContacts.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-500 mb-3", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, "Recent Contacts"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 overflow-x-auto pb-2", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, recentContacts.map((contact)=>/*#__PURE__*/ React.createElement("button", { key: contact.id, onClick: ()=>handleSelect(contact), className: "flex flex-col items-center min-w-[72px]", __source: { fileName: "", lineNumber: 99, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 104, columnNumber: 23 }, __self: this }, contact.photoUrl ? /*#__PURE__*/ React.createElement("img", { src: contact.photoUrl, alt: contact.name, className: "w-12 h-12 rounded-full", __source: { fileName: "", lineNumber: 106, columnNumber: 27 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-[#dd0000] rounded-full flex items-center justify-center text-white text-xl", __source: { fileName: "", lineNumber: 112, columnNumber: 27 }, __self: this }, contact.name.charAt(0)), contact.verified && /*#__PURE__*/ React.createElement("div", { className: "absolute -bottom-1 -right-1 bg-green-500 text-white rounded-full w-5 h-5 flex items-center justify-center", __source: { fileName: "", lineNumber: 117, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-xs", __source: { fileName: "", lineNumber: 118, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "text-xs mt-1 text-gray-700 truncate max-w-[72px]", __source: { fileName: "", lineNumber: 122, columnNumber: 23 }, __self: this }, contact.name))))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[400px]", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, filteredContacts.map((contact)=>/*#__PURE__*/ React.createElement("div", { key: contact.id, className: "p-4 flex items-center justify-between hover:bg-gray-50 transition-colors", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center flex-1", __source: { fileName: "", lineNumber: 137, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 138, columnNumber: 21 }, __self: this }, contact.photoUrl ? /*#__PURE__*/ React.createElement("img", { src: contact.photoUrl, alt: contact.name, className: "w-12 h-12 rounded-full", __source: { fileName: "", lineNumber: 140, columnNumber: 25 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-[#dd0000] rounded-full flex items-center justify-center text-white text-xl", __source: { fileName: "", lineNumber: 146, columnNumber: 25 }, __self: this }, contact.name.charAt(0)), contact.verified && /*#__PURE__*/ React.createElement("div", { className: "absolute -bottom-1 -right-1 bg-green-500 text-white rounded-full w-5 h-5 flex items-center justify-center", __source: { fileName: "", lineNumber: 151, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-xs", __source: { fileName: "", lineNumber: 152, columnNumber: 27 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "ml-4 flex-1", __source: { fileName: "", lineNumber: 156, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 157, columnNumber: 23 }, __self: this }, contact.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 160, columnNumber: 23 }, __self: this }, contact.email || contact.phone))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 165, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleQuickAction(contact, "message"), className: "p-2 text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 166, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment", __source: { fileName: "", lineNumber: 170, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleQuickAction(contact, "call"), className: "p-2 text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 172, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone", __source: { fileName: "", lineNumber: 176, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelect(contact), className: `p-2 rounded-full border-2 transition-colors ${selected.find((c)=>c.id === contact.id) ? "border-[#dd0000] bg-[#dd0000] text-white" : "border-gray-300"}`, __source: { fileName: "", lineNumber: 178, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 186, columnNumber: 23 }, __self: this }))))), filteredContacts.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "p-8 text-center text-gray-500", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, "No contacts found"))))); } function ContactSelectorStory() { const recentContacts = [ { id: 1, name: "John Doe", email: "john@example.com", verified: true }, { id: 2, name: "Jane Smith", phone: "+1234567890", photoUrl: "/jane.jpg" }, { id: 3, name: "Mike Johnson", email: "mike@example.com", verified: true } ]; const syncedContacts = [ { id: 1, name: "John Doe", email: "john@example.com", verified: true }, { id: 2, name: "Jane Smith", phone: "+1234567890", photoUrl: "/jane.jpg" }, { id: 3, name: "Mike Johnson", email: "mike@example.com", verified: true }, { id: 4, name: "Sarah Wilson", phone: "+1987654321" }, { id: 5, name: "Tom Brown", email: "tom@example.com", verified: true } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-8 max-w-md mx-auto", __source: { fileName: "", lineNumber: 221, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 222, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 223, columnNumber: 9 }, __self: this }, "Default Contact Selector"), /*#__PURE__*/ React.createElement(ContactSelector, { recentContacts: recentContacts, syncedContacts: syncedContacts, onSelect: (contact)=>console.log("Selected:", contact), onMultiSelect: (contacts)=>console.log("Multi Selected:", contacts), __source: { fileName: "", lineNumber: 224, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 232, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 233, columnNumber: 9 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement(ContactSelector, { loading: true, recentContacts: [], syncedContacts: [], __source: { fileName: "", lineNumber: 234, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 237, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 238, columnNumber: 9 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement(ContactSelector, { error: "Failed to load contacts", recentContacts: [], syncedContacts: [], __source: { fileName: "", lineNumber: 239, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 246, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 247, columnNumber: 9 }, __self: this }, "Offline Mode"), /*#__PURE__*/ React.createElement(ContactSelector, { isOffline: true, recentContacts: recentContacts, syncedContacts: syncedContacts, __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 255, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 256, columnNumber: 9 }, __self: this }, "Limited Selection (Max 2)"), /*#__PURE__*/ React.createElement(ContactSelector, { maxSelection: 2, recentContacts: recentContacts, syncedContacts: syncedContacts, __source: { fileName: "", lineNumber: 257, columnNumber: 9 }, __self: this }))); } function LocationPicker({ onLocationSelect, initialLocation, recentLocations = [], nearbyLocations = [], offlineMapData, apiKey = "YOUR_MAPS_API_KEY", maxRecentLocations = 5, searchRadius = 5000, onError }) { const [currentLocation, setCurrentLocation] = useState(initialLocation); const [searchQuery, setSearchQuery] = useState(""); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [searchResults, setSearchResults] = useState([]); const [selectedLocation, setSelectedLocation] = useState(null); const [isOffline, setIsOffline] = useState(!navigator?.onLine); const [map, setMap] = useState(null); const [userLocation, setUserLocation] = useState(null); const mapRef = useRef(null); const searchInputRef = useRef(null); useEffect(()=>{ const handleOnline = ()=>setIsOffline(false); const handleOffline = ()=>setIsOffline(true); window.addEventListener("online", handleOnline); window.addEventListener("offline", handleOffline); getCurrentLocation(); return ()=>{ window.removeEventListener("online", handleOnline); window.removeEventListener("offline", handleOffline); }; }, []); const getCurrentLocation = async ()=>{ try { setIsLoading(true); const position = await new Promise((resolve, reject)=>{ navigator.geolocation.getCurrentPosition(resolve, reject); }); const location = { lat: position.coords.latitude, lng: position.coords.longitude }; setUserLocation(location); setCurrentLocation(location); initializeMap(location); } catch (err) { setError("Could not get your location. Please enable location services."); onError?.(err); } finally{ setIsLoading(false); } }; const initializeMap = (center)=>{ if (!mapRef.current) return; const newMap = new google.maps.Map(mapRef.current, { center, zoom: 14, styles: offlineMapData }); setMap(newMap); nearbyLocations.forEach((location)=>{ new google.maps.Marker({ position: { lat: location.lat, lng: location.lng }, map: newMap, icon: location.type === "ATM" ? "/atm-icon.png" : "/branch-icon.png", title: location.name }); }); }; const handleSearch = async ()=>{ if (!searchQuery.trim()) return; try { setIsLoading(true); const response = await fetch(`/api/location/track`, { method: "POST", body: JSON.stringify({ query: searchQuery, lat: currentLocation?.lat, lng: currentLocation?.lng, radius: searchRadius }) }); if (!response.ok) throw new Error("Search failed"); const data = await response.json(); setSearchResults(data.results); } catch (err) { setError("Search failed. Please try again."); onError?.(err); } finally{ setIsLoading(false); } }; const calculateDistance = (location1, location2)=>{ if (!location1 || !location2) return null; const R = 6371; const dLat = (location2.lat - location1.lat) * Math.PI / 180; const dLon = (location2.lng - location1.lng) * Math.PI / 180; const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(location1.lat * Math.PI / 180) * Math.cos(location2.lat * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return (R * c).toFixed(1); }; const handleLocationSelect = (location)=>{ setSelectedLocation(location); if (map) { map.panTo({ lat: location.lat, lng: location.lng }); map.setZoom(16); } onLocationSelect?.(location); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 136, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSearch(), placeholder: "Search locations...", className: "w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#dd0000] focus:border-transparent", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }), isLoading && /*#__PURE__*/ React.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-[#dd0000] border-t-transparent", __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this })))), error && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-50 text-red-700", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, error))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 h-[500px]", __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-auto p-4 border-r border-gray-200", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, recentLocations.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-500 mb-2", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "Recent Locations"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, recentLocations.map((location, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleLocationSelect(location), className: "w-full p-3 text-left bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", __source: { fileName: "", lineNumber: 175, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 180, columnNumber: 21 }, __self: this }, location.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 183, columnNumber: 21 }, __self: this }, calculateDistance(userLocation, location), "km away"))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-gray-500 mb-2", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, "Nearby Locations"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, nearbyLocations.map((location, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleLocationSelect(location), className: "w-full p-3 text-left bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${location.type === "ATM" ? "money-bill-wave" : "building"} text-[#dd0000] mr-2`, __source: { fileName: "", lineNumber: 204, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 207, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 208, columnNumber: 23 }, __self: this }, location.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 211, columnNumber: 23 }, __self: this }, calculateDistance(userLocation, location), "km away")))))))), /*#__PURE__*/ React.createElement("div", { className: "relative h-full", __source: { fileName: "", lineNumber: 222, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: mapRef, className: "absolute inset-0", __source: { fileName: "", lineNumber: 223, columnNumber: 11 }, __self: this }), isOffline && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 right-4 bg-yellow-50 text-yellow-800 p-3 rounded-lg shadow", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-wifi-slash mr-2", __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, "Offline mode - using cached map data"))))), selectedLocation && /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 236, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, selectedLocation.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, calculateDistance(userLocation, selectedLocation), "km away")), /*#__PURE__*/ React.createElement("a", { href: `https://www.google.com/maps/dir/?api=1&destination=${selectedLocation.lat},${selectedLocation.lng}`, target: "_blank", rel: "noopener noreferrer", className: "px-4 py-2 bg-[#dd0000] text-white rounded-lg hover:bg-[#cc0000] transition-colors", __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-directions mr-2", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }), "Navigate")))); } function LocationPickerStory() { const recentLocations = [ { name: "Main Branch", lat: 40.7128, lng: -74.006 }, { name: "Downtown ATM", lat: 40.7589, lng: -73.9851 } ]; const nearbyLocations = [ { name: "24/7 ATM", lat: 40.7128, lng: -74.006, type: "ATM" }, { name: "City Branch", lat: 40.7589, lng: -73.9851, type: "BRANCH" } ]; const offlineMapData = [ { elementType: "geometry", stylers: [ { color: "#f5f5f5" } ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 281, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 282, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 283, columnNumber: 9 }, __self: this }, "Default Location Picker"), /*#__PURE__*/ React.createElement(LocationPicker, { onLocationSelect: (location)=>console.log("Selected:", location), recentLocations: recentLocations, nearbyLocations: nearbyLocations, offlineMapData: offlineMapData, onError: (error)=>console.error("Error:", error), __source: { fileName: "", lineNumber: 284, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 293, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 294, columnNumber: 9 }, __self: this }, "Location Picker with Initial Location"), /*#__PURE__*/ React.createElement(LocationPicker, { initialLocation: { lat: 40.7128, lng: -74.006 }, recentLocations: recentLocations, nearbyLocations: nearbyLocations, offlineMapData: offlineMapData, onError: (error)=>console.error("Error:", error), __source: { fileName: "", lineNumber: 297, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 306, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 307, columnNumber: 9 }, __self: this }, "Location Picker with Error State"), /*#__PURE__*/ React.createElement(LocationPicker, { initialLocation: { lat: 40.7128, lng: -74.006 }, error: "Could not load location data", recentLocations: [], nearbyLocations: [], offlineMapData: offlineMapData, onError: (error)=>console.error("Error:", error), __source: { fileName: "", lineNumber: 310, columnNumber: 9 }, __self: this }))); } function CameraCapture({ onCapture, onError, documentType = "id", initialCamera = "back", quality = 0.8, aspectRatio = "4:3", guideColor = "#dd0000" }) { const [permission, setPermission] = useState(false); const [stream, setStream] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [camera, setCamera] = useState(initialCamera); const [flash, setFlash] = useState(false); const [orientation, setOrientation] = useState(window?.screen?.orientation?.type || "portrait"); const [preview, setPreview] = useState(null); const [isProcessing, setIsProcessing] = useState(false); const videoRef = useRef(null); const canvasRef = useRef(null); const previewCanvasRef = useRef(null); useEffect(()=>{ const handleOrientationChange = ()=>{ setOrientation(window.screen.orientation.type); }; if (typeof window !== "undefined") { window.screen?.orientation?.addEventListener("change", handleOrientationChange); return ()=>{ window.screen?.orientation?.removeEventListener("change", handleOrientationChange); if (stream) { stream.getTracks().forEach((track)=>track.stop()); } }; } }, [ stream ]); useEffect(()=>{ initializeCamera(); }, [ camera ]); const initializeCamera = async ()=>{ try { setLoading(true); const constraints = { video: { facingMode: camera === "front" ? "user" : "environment", aspectRatio: aspectRatio === "4:3" ? 4 / 3 : 16 / 9 } }; const mediaStream = await navigator.mediaDevices.getUserMedia(constraints); setStream(mediaStream); setPermission(true); setError(null); if (videoRef.current) { videoRef.current.srcObject = mediaStream; } } catch (err) { setError("Camera access denied or not available"); onError?.(err); } finally{ setLoading(false); } }; const toggleCamera = ()=>{ if (stream) { stream.getTracks().forEach((track)=>track.stop()); } setCamera((prev)=>prev === "front" ? "back" : "front"); }; const toggleFlash = ()=>{ if (stream) { const track = stream.getVideoTracks()[0]; const capabilities = track.getCapabilities(); if (capabilities.torch) { track.applyConstraints({ advanced: [ { torch: !flash } ] }); setFlash(!flash); } } }; const captureImage = async ()=>{ if (!videoRef.current || !canvasRef.current) return; setIsProcessing(true); try { const video = videoRef.current; const canvas = canvasRef.current; const context = canvas.getContext("2d"); canvas.width = video.videoWidth; canvas.height = video.videoHeight; context.drawImage(video, 0, 0); const processedCanvas = await detectEdges(canvas); const dataUrl = processedCanvas.toDataURL("image/jpeg", quality); setPreview(dataUrl); const response = await fetch("/api/documents/process", { method: "POST", body: JSON.stringify({ scanData: dataUrl, documentType }) }); if (!response.ok) { throw new Error("Failed to process document"); } const data = await response.json(); onCapture?.(data); } catch (err) { setError("Failed to process image"); onError?.(err); } finally{ setIsProcessing(false); } }; const detectEdges = async (sourceCanvas)=>{ const canvas = document.createElement("canvas"); canvas.width = sourceCanvas.width; canvas.height = sourceCanvas.height; const ctx = canvas.getContext("2d"); ctx.drawImage(sourceCanvas, 0, 0); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); return canvas; }; const retake = ()=>{ setPreview(null); setError(null); }; if (!permission && error) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-[400px] bg-gray-100 rounded-xl", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-4xl text-[#dd0000] mb-4", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-center px-4", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, error)); } return /*#__PURE__*/ React.createElement("div", { className: "relative bg-black rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 165, columnNumber: 5 }, __self: this }, loading && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 z-50", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this })), !preview ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("video", { ref: videoRef, autoPlay: true, playsInline: true, className: "w-full h-[400px] object-cover", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 border-2 border-dashed border-white/50 m-8 pointer-events-none", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 flex gap-2", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleCamera, className: "p-3 bg-black/50 rounded-full text-white hover:bg-black/75 transition-colors", disabled: loading, __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-camera-rotate ${loading ? "opacity-50" : ""}`, __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: toggleFlash, className: "p-3 bg-black/50 rounded-full text-white hover:bg-black/75 transition-colors", disabled: loading, __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-bolt ${flash ? "text-yellow-400" : ""} ${loading ? "opacity-50" : ""}`, __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2", __source: { fileName: "", lineNumber: 204, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: captureImage, disabled: loading || isProcessing, className: "w-16 h-16 rounded-full bg-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 disabled:opacity-50", __source: { fileName: "", lineNumber: 205, columnNumber: 13 }, __self: this }, isProcessing ? /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-4 border-[#dd0000] border-t-transparent mx-auto", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-[#dd0000] m-2", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this })))) : /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 219, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: preview, alt: "Captured document", className: "w-full h-[400px] object-contain bg-black", __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-0 right-0 flex justify-center gap-4", __source: { fileName: "", lineNumber: 225, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: retake, className: "px-6 py-3 bg-white text-black rounded-lg hover:bg-gray-100 transition-colors", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, "Retake"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onCapture?.(preview), className: "px-6 py-3 bg-[#dd0000] text-white rounded-lg hover:bg-[#cc0000] transition-colors", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, "Use Photo"))), /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, className: "hidden", __source: { fileName: "", lineNumber: 242, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("canvas", { ref: previewCanvasRef, className: "hidden", __source: { fileName: "", lineNumber: 243, columnNumber: 7 }, __self: this })); } function CameraCaptureStory() { const [capturedImage, setCapturedImage] = useState(null); const [error, setError] = useState(null); return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 253, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 254, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, "ID Document Scanner"), /*#__PURE__*/ React.createElement(CameraCapture, { documentType: "id", onCapture: (data)=>setCapturedImage(data), onError: (err)=>setError(err), __source: { fileName: "", lineNumber: 256, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 263, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 264, columnNumber: 9 }, __self: this }, "Passport Scanner"), /*#__PURE__*/ React.createElement(CameraCapture, { documentType: "passport", onCapture: (data)=>setCapturedImage(data), onError: (err)=>setError(err), aspectRatio: "16:9", __source: { fileName: "", lineNumber: 265, columnNumber: 9 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-50 text-red-700 rounded-xl", __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this }, error.message), capturedImage && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 rounded-xl", __source: { fileName: "", lineNumber: 280, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __self: this }, "Captured Image:"), /*#__PURE__*/ React.createElement("img", { src: capturedImage, alt: "Captured document", className: "w-full max-w-md mx-auto rounded", __source: { fileName: "", lineNumber: 282, columnNumber: 11 }, __self: this }))); } function MainComponent() { const [accountDetails, setAccountDetails] = useState(null); const [transactions, setTransactions] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); const [isVerified, setIsVerified] = useState(false); const [refreshing, setRefreshing] = useState(false); const { data: user } = useUser(); const [activeTab, setActiveTab] = useState("home"); const contentRef = useRef(null); const [startY, setStartY] = useState(0); const [pullDistance, setPullDistance] = useState(0); const [isOffline, setIsOffline] = useState(false); const [deferredPrompt, setDeferredPrompt] = useState(null); const [showInstallBanner, setShowInstallBanner] = useState(false); const [showBiometricPrompt, setShowBiometricPrompt] = useState(false); const [showNotificationPrompt, setShowNotificationPrompt] = useState(false); const [hasBiometrics, setHasBiometrics] = useState(false); const [hasNotifications, setHasNotifications] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [page, setPage] = useState(1); const [hasMore, setHasMore] = useState(true); const [longPressTimer, setLongPressTimer] = useState(null); const [selectedTransaction, setSelectedTransaction] = useState(null); const [showScanner, setShowScanner] = useState(false); const [showLocationPicker, setShowLocationPicker] = useState(false); const [showContactSelector, setShowContactSelector] = useState(false); const [currentLocation, setCurrentLocation] = useState(null); const [locationHistory, setLocationHistory] = useState([]); const [nearbyAtms, setNearbyAtms] = useState([]); const [contacts, setContacts] = useState([]); const [recentContacts, setRecentContacts] = useState([]); const [documentHistory, setDocumentHistory] = useState([]); const [contactSyncStatus, setContactSyncStatus] = useState("pending"); const navigate = (path)=>{ if (typeof window !== "undefined") { window.location.href = path; } }; useEffect(()=>{ if (!user) { navigate("/account/signin"); return; } checkVerification(); fetchAccountDetails(); setupPushNotifications(); setupBiometricAuth(); setupLocationTracking(); syncContacts(); const handleOffline = ()=>setIsOffline(true); const handleOnline = ()=>setIsOffline(false); if (typeof window !== "undefined") { window.addEventListener("offline", handleOffline); window.addEventListener("online", handleOnline); setIsOffline(!window.navigator.onLine); window.addEventListener("beforeinstallprompt", (e)=>{ e.preventDefault(); setDeferredPrompt(e); setShowInstallBanner(true); }); } return ()=>{ if (typeof window !== "undefined") { window.removeEventListener("offline", handleOffline); window.removeEventListener("online", handleOnline); } }; }, [ user ]); const handleTouchStart = (e)=>{ if (contentRef.current.scrollTop === 0) { setStartY(e.touches[0].clientY); } }; const handleTouchMove = (e)=>{ if (startY) { const currentY = e.touches[0].clientY; const distance = currentY - startY; if (distance > 0 && distance < 200) { setPullDistance(distance); } } }; const handleTouchEnd = async ()=>{ if (pullDistance > 100) { setRefreshing(true); await fetchAccountDetails(); } setPullDistance(0); setStartY(0); setRefreshing(false); }; const setupLocationTracking = async ()=>{ if ("geolocation" in navigator) { try { const position = await new Promise((resolve, reject)=>{ navigator.geolocation.getCurrentPosition(resolve, reject); }); const locationData = { latitude: position.coords.latitude, longitude: position.coords.longitude }; const deviceInfo = { device: navigator.userAgent, os: navigator.platform }; const response = await fetch("/api/location/track", { method: "POST", body: JSON.stringify({ locationData: JSON.stringify(locationData), deviceInfo: JSON.stringify(deviceInfo), ipAddress: "127.0.0.1" }) }); if (!response.ok) { throw new Error("Failed to track location"); } setCurrentLocation(locationData); } catch (error) { console.error("Error tracking location:", error); } } }; const syncContacts = async ()=>{ try { setContactSyncStatus("syncing"); const contacts = await navigator.contacts?.select([ "name", "email", "tel" ]); const formattedContacts = contacts.map((contact)=>({ name: contact.name[0], data: contact.email[0] || contact.tel[0], type: contact.email[0] ? "email" : "phone" })); const response = await fetch("/api/contacts/sync", { method: "POST", body: JSON.stringify({ contacts: formattedContacts }) }); if (!response.ok) { throw new Error("Failed to sync contacts"); } setContacts(formattedContacts); setContactSyncStatus("completed"); } catch (error) { console.error("Error syncing contacts:", error); setContactSyncStatus("failed"); } }; const handleDocumentCapture = async (scanData)=>{ try { const response = await fetch("/api/documents/process", { method: "POST", body: JSON.stringify({ scanData, documentType: "id" }) }); if (!response.ok) { throw new Error("Failed to process document"); } const result = await response.json(); setDocumentHistory((prev)=>[ ...prev, result ]); setShowScanner(false); } catch (error) { console.error("Error processing document:", error); setError("Failed to process document"); } }; const handleLocationSelect = async (location)=>{ setShowLocationPicker(false); setCurrentLocation(location); }; const handleContactSelect = async (contact)=>{ setShowContactSelector(false); setRecentContacts((prev)=>[ contact, ...prev.slice(0, 4) ]); }; const handleScanError = (error)=>{ console.error("Scan error:", error); setError("Failed to scan document"); setShowScanner(false); }; const setupPushNotifications = async ()=>{ if ("Notification" in window && Notification.permission === "default") { setShowNotificationPrompt(true); } }; const enablePushNotifications = async ()=>{ try { const permission = await Notification.requestPermission(); if (permission === "granted") { const registration = await navigator.serviceWorker.ready; const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: "YOUR_PUBLIC_VAPID_KEY" }); const response = await fetch("/api/notifications/register", { method: "POST", body: JSON.stringify({ subscription }) }); if (!response.ok) { throw new Error("Failed to register push notification"); } setHasNotifications(true); setShowNotificationPrompt(false); } } catch (error) { console.error("Error enabling notifications:", error); setError("Failed to enable notifications"); } }; const setupBiometricAuth = async ()=>{ if ("PublicKeyCredential" in window) { setShowBiometricPrompt(true); } }; const enableBiometricAuth = async ()=>{ try { const credential = await navigator.credentials.create({ publicKey: { challenge: new Uint8Array.from({ length: 32 }), rp: { name: "Your Bank" }, user: { id: new Uint8Array.from({ length: 16 }), name: user.email, displayName: user.name }, pubKeyCredParams: [ { type: "public-key", alg: -7 } ] } }); const response = await fetch("/api/auth/enable-biometric", { method: "POST", body: JSON.stringify({ publicKey: credential.publicKey }) }); if (!response.ok) { throw new Error("Failed to enable biometric authentication"); } setHasBiometrics(true); setShowBiometricPrompt(false); } catch (error) { console.error("Error enabling biometric auth:", error); setError("Failed to enable biometric authentication"); } }; const handleLongPress = (transaction)=>{ setSelectedTransaction(transaction); setLongPressTimer(setTimeout(()=>{ // Show action sheet or modal with options }, 500)); }; const handlePressEnd = ()=>{ if (longPressTimer) { clearTimeout(longPressTimer); setLongPressTimer(null); } }; const checkVerification = async ()=>{ try { const response = await fetch("/api/banking/verification-status"); const data = await response.json(); if (data.error) throw new Error(data.error); setIsVerified(data.isVerified); if (!data.hasAccount) { navigate("/welcome"); } } catch (err) { setError(err.message); } }; const fetchAccountDetails = async ()=>{ try { const response = await fetch("/api/get-account", { method: "POST", body: JSON.stringify({}) }); const data = await response.json(); if (data.error === "No active accounts found") { navigate("/welcome"); return; } if (data.error) throw new Error(data.error); setAccountDetails(data.account); await fetchTransactions(data.account.id); } catch (err) { setError(err.message); } finally{ setLoading(false); } }; const fetchTransactions = async (accountId)=>{ try { const response = await fetch("/api/get-transactions", { method: "POST", body: JSON.stringify({ accountId, page, search: searchTerm }) }); const data = await response.json(); if (data.error) throw new Error(data.error); setTransactions(page === 1 ? data.transactions : [ ...transactions, ...data.transactions ]); setHasMore(data.transactions.length === 20); } catch (err) { setError(err.message); } }; const formatCurrency = (amount, currency = "USD")=>{ return new Intl.NumberFormat("en-US", { style: "currency", currency: currency }).format(amount); }; const formatDate = (date)=>{ return new Date(date).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }); }; const shareTransaction = async (transaction)=>{ if (navigator.share) { try { await navigator.share({ title: "Transaction Details", text: `${transaction.transaction_type}: ${formatCurrency(transaction.amount)}`, url: window.location.href }); } catch (error) { console.error("Error sharing:", error); } } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 safe-top safe-bottom", __source: { fileName: "", lineNumber: 379, columnNumber: 5 }, __self: this }, isOffline && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 right-0 bg-yellow-50 text-yellow-800 p-4 text-center z-50 slide-in-top", __source: { fileName: "", lineNumber: 381, columnNumber: 9 }, __self: this }, "You are currently offline. Some features may be limited."), showInstallBanner && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 right-0 bg-white shadow-lg p-4 flex justify-between items-center z-40 slide-in-top", __source: { fileName: "", lineNumber: 387, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 388, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-[#dd0000] mr-3", __source: { fileName: "", lineNumber: 389, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 390, columnNumber: 13 }, __self: this }, "Install the app for a better experience")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 392, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowInstallBanner(false), className: "px-3 py-2 text-gray-600", __source: { fileName: "", lineNumber: 393, columnNumber: 13 }, __self: this }, "Not now"), /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ if (deferredPrompt) { await deferredPrompt.prompt(); const { outcome } = await deferredPrompt.userChoice; if (outcome === "accepted") { setShowInstallBanner(false); } setDeferredPrompt(null); } }, className: "px-4 py-2 bg-[#dd0000] text-white rounded-lg", __source: { fileName: "", lineNumber: 399, columnNumber: 13 }, __self: this }, "Install"))), showBiometricPrompt && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 419, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 m-4 max-w-sm w-full", __source: { fileName: "", lineNumber: 420, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 421, columnNumber: 13 }, __self: this }, "Enable Quick Balance"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-6", __source: { fileName: "", lineNumber: 422, columnNumber: 13 }, __self: this }, "Use your fingerprint or face to quickly check your balance"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 425, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowBiometricPrompt(false), className: "flex-1 px-4 py-2 text-gray-600 border rounded-lg", __source: { fileName: "", lineNumber: 426, columnNumber: 15 }, __self: this }, "Not Now"), /*#__PURE__*/ React.createElement("button", { onClick: enableBiometricAuth, className: "flex-1 px-4 py-2 bg-[#dd0000] text-white rounded-lg", __source: { fileName: "", lineNumber: 432, columnNumber: 15 }, __self: this }, "Enable")))), showNotificationPrompt && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 444, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 m-4 max-w-sm w-full", __source: { fileName: "", lineNumber: 445, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 446, columnNumber: 13 }, __self: this }, "Enable Notifications"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-6", __source: { fileName: "", lineNumber: 447, columnNumber: 13 }, __self: this }, "Get instant updates about your transactions and account activity"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 450, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowNotificationPrompt(false), className: "flex-1 px-4 py-2 text-gray-600 border rounded-lg", __source: { fileName: "", lineNumber: 451, columnNumber: 15 }, __self: this }, "Not Now"), /*#__PURE__*/ React.createElement("button", { onClick: enablePushNotifications, className: "flex-1 px-4 py-2 bg-[#dd0000] text-white rounded-lg", __source: { fileName: "", lineNumber: 457, columnNumber: 15 }, __self: this }, "Enable")))), /*#__PURE__*/ React.createElement("div", { ref: contentRef, className: "h-full overflow-auto pb-24", onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, __source: { fileName: "", lineNumber: 468, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto px-4 py-6", style: { transform: `translateY(${pullDistance}px)`, transition: pullDistance ? "none" : "transform 0.3s ease-out" }, __source: { fileName: "", lineNumber: 475, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 483, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 animate-pulse", __source: { fileName: "", lineNumber: 484, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-200 rounded w-1/3 mb-4", __source: { fileName: "", lineNumber: 485, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 486, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-gray-200 rounded w-1/2", __source: { fileName: "", lineNumber: 487, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-10 bg-gray-200 rounded w-3/4", __source: { fileName: "", lineNumber: 488, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 animate-pulse", __source: { fileName: "", lineNumber: 491, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-200 rounded w-1/4 mb-4", __source: { fileName: "", lineNumber: 492, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 493, columnNumber: 17 }, __self: this }, [ 1, 2, 3 ].map((i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 495, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 496, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-gray-200 rounded w-24", __source: { fileName: "", lineNumber: 497, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-32", __source: { fileName: "", lineNumber: 498, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-200 rounded w-20", __source: { fileName: "", lineNumber: 500, columnNumber: 23 }, __self: this })))))) : error ? /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-700 p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 507, columnNumber: 13 }, __self: this }, error) : isVerified ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6 mb-6 slide-in", __source: { fileName: "", lineNumber: 512, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-6", __source: { fileName: "", lineNumber: 513, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 514, columnNumber: 19 }, __self: this }, "Account Summary"), /*#__PURE__*/ React.createElement("span", { className: "text-base text-gray-500", __source: { fileName: "", lineNumber: 517, columnNumber: 19 }, __self: this }, "#", accountDetails?.account_number)), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 521, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 522, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-base text-gray-500 mb-2", __source: { fileName: "", lineNumber: 523, columnNumber: 21 }, __self: this }, "Current Balance"), /*#__PURE__*/ React.createElement("p", { className: "text-7xl md:text-8xl font-bold text-[#dd0000] tracking-tight", __source: { fileName: "", lineNumber: 526, columnNumber: 21 }, __self: this }, formatCurrency(accountDetails?.balance || 0, accountDetails?.currency))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 533, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 534, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-1", __source: { fileName: "", lineNumber: 535, columnNumber: 23 }, __self: this }, "Account Type"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-gray-900 capitalize", __source: { fileName: "", lineNumber: 536, columnNumber: 23 }, __self: this }, accountDetails?.account_type)), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 540, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-1", __source: { fileName: "", lineNumber: 541, columnNumber: 23 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-green-600 capitalize", __source: { fileName: "", lineNumber: 542, columnNumber: 23 }, __self: this }, accountDetails?.status))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6 slide-in", __source: { fileName: "", lineNumber: 550, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 551, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 552, columnNumber: 19 }, __self: this }, "Recent Transactions"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 555, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", placeholder: "Search transactions...", className: "pl-10 pr-4 py-2 border rounded-lg", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 556, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 563, columnNumber: 21 }, __self: this }))), transactions.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden", __source: { fileName: "", lineNumber: 567, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "divide-y divide-gray-100", __source: { fileName: "", lineNumber: 568, columnNumber: 21 }, __self: this }, transactions.map((transaction)=>/*#__PURE__*/ React.createElement("div", { key: transaction.id, className: "py-4 active:bg-gray-50 transition-colors duration-150", onTouchStart: ()=>handleLongPress(transaction), onTouchEnd: handlePressEnd, onTouchMove: handlePressEnd, __source: { fileName: "", lineNumber: 570, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center min-h-[60px]", __source: { fileName: "", lineNumber: 577, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 578, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-medium text-gray-900 mb-1", __source: { fileName: "", lineNumber: 579, columnNumber: 31 }, __self: this }, formatCurrency(transaction.amount, accountDetails?.currency)), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 585, columnNumber: 31 }, __self: this }, formatDate(transaction.created_at))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 589, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-4 py-2 rounded-full text-base font-medium ${transaction.transaction_type === "deposit" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`, __source: { fileName: "", lineNumber: 590, columnNumber: 31 }, __self: this }, transaction.transaction_type), /*#__PURE__*/ React.createElement("button", { onClick: ()=>shareTransaction(transaction), className: "p-2 text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 600, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt", __source: { fileName: "", lineNumber: 604, columnNumber: 33 }, __self: this }))))))), hasMore && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage(page + 1), className: "w-full py-4 text-[#dd0000] font-medium", __source: { fileName: "", lineNumber: 612, columnNumber: 23 }, __self: this }, "Load More")) : /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 text-gray-500", __source: { fileName: "", lineNumber: 621, columnNumber: 19 }, __self: this }, "No transactions found"))) : /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 628, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 629, columnNumber: 15 }, __self: this }, "Please verify your account"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 632, columnNumber: 15 }, __self: this }, "You need to verify your account to access banking features.")))), /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 left-0 right-0 bg-white shadow-lg pb-safe", __source: { fileName: "", lineNumber: 640, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-stretch h-[72px]", __source: { fileName: "", lineNumber: 641, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveTab("home"); navigate("/"); }, className: `flex flex-col items-center justify-center w-full min-h-[48px] transition-colors duration-200 active:bg-gray-100 ${activeTab === "home" ? "text-[#dd0000]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 642, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-home text-2xl ${activeTab === "home" ? "text-[#dd0000]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 650, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs mt-1", __source: { fileName: "", lineNumber: 653, columnNumber: 13 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveTab("scan"); setShowScanner(true); }, className: `flex flex-col items-center justify-center w-full min-h-[48px] transition-colors duration-200 active:bg-gray-100 ${activeTab === "scan" ? "text-[#dd0000]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 655, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-camera text-2xl ${activeTab === "scan" ? "text-[#dd0000]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 663, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs mt-1", __source: { fileName: "", lineNumber: 666, columnNumber: 13 }, __self: this }, "Scan")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveTab("location"); setShowLocationPicker(true); }, className: `flex flex-col items-center justify-center w-full min-h-[48px] transition-colors duration-200 active:bg-gray-100 ${activeTab === "location" ? "text-[#dd0000]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 668, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-map-marker-alt text-2xl ${activeTab === "location" ? "text-[#dd0000]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 676, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs mt-1", __source: { fileName: "", lineNumber: 679, columnNumber: 13 }, __self: this }, "ATMs")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveTab("contacts"); setShowContactSelector(true); }, className: `flex flex-col items-center justify-center w-full min-h-[48px] transition-colors duration-200 active:bg-gray-100 ${activeTab === "contacts" ? "text-[#dd0000]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 681, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-address-book text-2xl ${activeTab === "contacts" ? "text-[#dd0000]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 689, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs mt-1", __source: { fileName: "", lineNumber: 692, columnNumber: 13 }, __self: this }, "Contacts")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveTab("profile"); navigate("/profile"); }, className: `flex flex-col items-center justify-center w-full min-h-[48px] transition-colors duration-200 active:bg-gray-100 ${activeTab === "profile" ? "text-[#dd0000]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 694, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-user text-2xl ${activeTab === "profile" ? "text-[#dd0000]" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 702, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs mt-1", __source: { fileName: "", lineNumber: 705, columnNumber: 13 }, __self: this }, "Profile")))), showScanner && /*#__PURE__*/ React.createElement(CameraCapture, { onCapture: handleDocumentCapture, onError: handleScanError, documentType: "id", __source: { fileName: "", lineNumber: 711, columnNumber: 9 }, __self: this }), showLocationPicker && /*#__PURE__*/ React.createElement(LocationPicker, { onLocationSelect: handleLocationSelect, initialLocation: currentLocation, recentLocations: locationHistory, nearbyLocations: nearbyAtms, __source: { fileName: "", lineNumber: 719, columnNumber: 9 }, __self: this }), showContactSelector && /*#__PURE__*/ React.createElement(ContactSelector, { onSelect: handleContactSelect, recentContacts: recentContacts, syncedContacts: contacts, __source: { fileName: "", lineNumber: 728, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 735, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInTop { from { transform: translateY(-100%); } to { transform: translateY(0); } } .slide-in { animation: slideIn 0.3s ease-out; } .slide-in-top { animation: slideInTop 0.3s ease-out; } @media (display-mode: standalone) { .safe-top { padding-top: env(safe-area-inset, 0px); } .safe-bottom { padding-bottom: env(safe-area-inset, 0px); } } `)); }