\n {isLogin ? 'Welcome Back' : 'Create Account'}\n

\n \n ×\n \n

\n\n

\n {!isLogin && (\n

\n \n First Name\n \n \n

\n \n Last Name\n \n \n

\n )}\n\n

\n \n Email Address\n \n \n

\n\n

\n \n Password\n \n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n \n {loading ? (\n

\n {isLogin ? 'Signing In...' : 'Creating Account...'}\n

\n ) : (\n isLogin ? 'Sign In' : 'Create Account'\n )}\n \n \n\n

\n {isLogin ? \"Don't have an account?\" : \"Already have an account?\"}\n {\n setIsLogin(!isLogin);\n setError('');\n setFormData({ email: '', password: '', firstName: '', lastName: '' });\n }}\n className=\"ml-2 text-purple-600 hover:text-purple-800 font-semibold\"\n >\n {isLogin ? 'Sign Up' : 'Sign In'}\n \n

\n );\n}",[],[249,256,263,270],[249,256,263],{"_107":278,"_100":279,"_152":280,"_154":257,"_155":138,"_156":281,"_158":159,"_109":282,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":283,"_103":292},"70f00b72-3fbd-11f0-a676-76b3cceeab13","Favorites","f85a3f1c-bb76-4ed6-b25e-cdc06585263d",22,["D",1748874332452],[284],{"_107":285,"_100":286,"_152":287,"_154":280,"_155":138,"_156":281,"_158":159,"_109":288,"_104":31,"_161":179,"_163":289,"_164":27,"_165":-5,"_166":290,"_103":291},"70efea16-3fbd-11f0-a676-76b3cceeab13","FavoritesView.tsx","70efeaca-3fbd-11f0-a676-76b3cceeab13",["D",1748874332452],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Apartment, User } from \"../../../shared/types.ts\";\nimport ApartmentCard from \"../Listings/ApartmentCard.tsx\";\n\ninterface FavoritesViewProps {\n user: User | null;\n onSelectApartment: (apartment: Apartment) => void;\n onLoginRequired: () => void;\n}\n\nexport default function FavoritesView({ user, onSelectApartment, onLoginRequired }: FavoritesViewProps) {\n const [favorites, setFavorites] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n if (user) {\n loadFavorites();\n }\n }, [user]);\n\n const loadFavorites = async () => {\n if (!user) return;\n\n setLoading(true);\n setError(null);\n \n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch('/api/users/favorites', {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n\n if (!response.ok) {\n throw new Error('Failed to load favorites');\n }\n\n const data = await response.json();\n setFavorites(data.favorites || []);\n } catch (err) {\n setError('Failed to load your favorite apartments');\n console.error('Error loading favorites:', err);\n } finally {\n setLoading(false);\n }\n };\n\n const removeFavorite = async (apartmentId: string) => {\n if (!user) return;\n\n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch('/api/users/favorites', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify({\n apartmentId,\n action: 'remove'\n })\n });\n\n if (response.ok) {\n setFavorites(prev => prev.filter(apt => apt.id !== apartmentId));\n }\n } catch (error) {\n console.error('Error removing favorite:', error);\n }\n };\n\n // If user is not logged in\n if (!user) {\n return (\n

🔒

Login Required

\n Please log in to view and manage your favorite apartments.\n

\n \n Login to View Favorites\n \n

\n );\n }\n\n // Loading state\n if (loading) {\n return (\n

\n Loading your favorites...\n

\n );\n }\n\n // Error state\n if (error) {\n return (\n

⚠️

Error Loading Favorites

{error}

\n \n Try Again\n \n

\n );\n }\n\n // Empty favorites state\n if (favorites.length === 0) {\n return (\n

💝

No Favorites Yet

\n Start exploring apartments and save your favorites by clicking the heart icon on any listing.\n

\n window.location.href = '#search'}\n className=\"bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors\"\n >\n Browse Apartments\n \n

\n );\n }\n\n // Favorites list\n return (\n

\n {/* Header */}\n

Your Favorite Apartments

\n You have {favorites.length} favorite apartment{favorites.length !== 1 ? 's' : ''}\n

\n\n {/* Favorites Grid */}\n

\n {favorites.map((apartment) => (\n

\n \n \n {/* Remove from favorites button */}\n removeFavorite(apartment.id)}\n className=\"absolute top-3 right-3 bg-red-500 text-white p-2 rounded-full hover:bg-red-600 transition-colors shadow-lg\"\n title=\"Remove from favorites\"\n >\n \n \n

\n ))}\n

\n\n {/* Actions */}\n

\n \n Refresh Favorites\n \n \n {\n if (favorites.length > 0) {\n // Create a simple comparison view\n const comparisonData = favorites.map(apt => ({\n title: apt.title,\n price: apt.price,\n bedrooms: apt.bedrooms,\n bathrooms: apt.bathrooms,\n sqft: apt.sqft\n }));\n \n console.log('Comparison Data:', comparisonData);\n alert(`Comparison data logged to console for ${favorites.length} apartments`);\n }\n }}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors\"\n disabled={favorites.length === 0}\n >\n Compare Favorites\n \n

\n );\n}",[],[249,256,279,286],[249,256,279],{"_107":294,"_100":295,"_152":296,"_154":257,"_155":138,"_156":297,"_158":159,"_109":298,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":299,"_103":327},"a5e4ae12-3fb5-11f0-b8ec-76b3cceeab13","Listings","0baac559-1c72-4131-95b2-8a3ed1631cfd",18,["D",1748870985323],[300,310,318],{"_107":301,"_100":302,"_152":303,"_154":296,"_155":138,"_156":304,"_158":159,"_109":305,"_104":306,"_161":179,"_163":307,"_164":27,"_165":-5,"_166":308,"_103":309},"81d51266-3fbd-11f0-ad22-76b3cceeab13","ApartmentCard.tsx","b498cb14-3fb5-11f0-8b27-76b3cceeab13",25,["D",1748874360795],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Apartment, User } from \"../../../shared/types.ts\";\nimport { formatPrice, formatAddress } from \"../../../shared/utils.ts\";\n\ninterface ApartmentCardProps {\n apartment: Apartment;\n onSelect?: (apartment: Apartment) => void;\n onClick?: () => void;\n user: User | null;\n onLoginRequired: () => void;\n showFavoriteButton?: boolean;\n}\n\nexport default function ApartmentCard({ \n apartment, \n onSelect, \n onClick, \n user, \n onLoginRequired, \n showFavoriteButton = true \n}: ApartmentCardProps) {\n const [isFavorited, setIsFavorited] = useState(false);\n const [favoriteLoading, setFavoriteLoading] = useState(false);\n\n // Check if apartment is favorited\n useEffect(() => {\n if (user) {\n checkFavoriteStatus();\n }\n }, [user, apartment.id]);\n\n const checkFavoriteStatus = async () => {\n if (!user) return;\n \n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch(`/api/users/favorites/${apartment.id}`, {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n const data = await response.json();\n if (data.success) {\n setIsFavorited(data.favorited);\n }\n } catch (error) {\n console.error('Error checking favorite status:', error);\n }\n };\n\n const handleFavoriteToggle = async (e: React.MouseEvent) => {\n e.stopPropagation();\n \n if (!user) {\n onLoginRequired();\n return;\n }\n\n setFavoriteLoading(true);\n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch('/api/users/favorites', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify({\n apartmentId: apartment.id,\n action: isFavorited ? 'remove' : 'add'\n })\n });\n\n const data = await response.json();\n if (data.success) {\n setIsFavorited(!isFavorited);\n }\n } catch (error) {\n console.error('Error toggling favorite:', error);\n } finally {\n setFavoriteLoading(false);\n }\n };\n\n const handleCardClick = () => {\n if (onSelect) {\n onSelect(apartment);\n } else if (onClick) {\n onClick();\n }\n };\n\n return (\n

\n {/* Image */}\n

\n {\n (e.target as HTMLImageElement).src = 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=800';\n }}\n />\n \n {/* Favorite Button */}\n \n {favoriteLoading ? '⏳' : (isFavorited ? '❤️' : '🤍')}\n \n\n {/* Price Badge */}\n

\n {formatPrice(apartment.price)}/mo\n

\n\n {/* Content */}\n

\n {apartment.title}\n

\n \n

\n 📍 {formatAddress(apartment)}\n

\n\n {/* Details */}\n

\n 🛏️ {apartment.bedrooms === 0 ? 'Studio' : `${apartment.bedrooms} bed`}\n 🚿 {apartment.bathrooms} bath\n

\n {apartment.squareFeet && (\n 📐 {apartment.squareFeet.toLocaleString()} sq ft\n )}\n

\n\n {/* Amenities Preview */}\n {apartment.amenities.length > 0 && (\n

\n {apartment.amenities.slice(0, 3).map((amenity) => (\n \n {amenity}\n \n ))}\n {apartment.amenities.length > 3 && (\n \n +{apartment.amenities.length - 3} more\n \n )}\n

\n )}\n\n {/* Description Preview */}\n

\n {apartment.description}\n

\n );\n}",[],[249,256,295,302],{"_107":311,"_100":312,"_152":313,"_154":296,"_155":138,"_156":297,"_158":159,"_109":314,"_104":31,"_161":179,"_163":315,"_164":27,"_165":-5,"_166":316,"_103":317},"a5e4a7a0-3fb5-11f0-b8ec-76b3cceeab13","ApartmentGrid.tsx","a5e4a89a-3fb5-11f0-b8ec-76b3cceeab13",["D",1748870985323],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Apartment, User } from \"../../../shared/types.ts\";\nimport ApartmentCard from \"./ApartmentCard.tsx\";\n\ninterface ApartmentGridProps {\n apartments: Apartment[];\n onSelectApartment: (apartment: Apartment) => void;\n user: User | null;\n onLoginRequired: () => void;\n}\n\nexport default function ApartmentGrid({ \n apartments, \n onSelectApartment, \n user, \n onLoginRequired \n}: ApartmentGridProps) {\n if (apartments.length === 0) {\n return (\n

🏠

\n No apartments found\n

\n Try adjusting your search filters to see more results.\n

\n );\n }\n\n return (\n

\n Available Apartments ({apartments.length})\n

\n Showing {apartments.length} result{apartments.length !== 1 ? 's' : ''}\n

\n\n

\n {apartments.map((apartment) => (\n onSelectApartment(apartment)}\n user={user}\n onLoginRequired={onLoginRequired}\n />\n ))}\n

\n );\n}",[],[249,256,295,312],{"_107":319,"_100":320,"_152":321,"_154":296,"_155":138,"_156":322,"_158":159,"_109":323,"_104":31,"_161":179,"_163":324,"_164":27,"_165":-5,"_166":325,"_103":326},"4a3ef9d4-3fbd-11f0-9ec9-76b3cceeab13","ApartmentModal.tsx","4a3efab0-3fbd-11f0-9ec9-76b3cceeab13",20,["D",1748874267540],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Apartment, User } from \"../../../shared/types.ts\";\n\ninterface ApartmentModalProps {\n apartment: Apartment;\n onClose: () => void;\n user: User | null;\n onLoginRequired: () => void;\n}\n\nexport default function ApartmentModal({ apartment, onClose, user, onLoginRequired }: ApartmentModalProps) {\n const [isFavorite, setIsFavorite] = useState(false);\n const [loading, setLoading] = useState(false);\n const [currentImageIndex, setCurrentImageIndex] = useState(0);\n\n useEffect(() => {\n if (user) {\n checkIfFavorite();\n }\n }, [user, apartment.id]);\n\n const checkIfFavorite = async () => {\n if (!user) return;\n \n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch('/api/users/favorites', {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n \n if (response.ok) {\n const data = await response.json();\n setIsFavorite(data.favorites.some((fav: any) => fav.id === apartment.id));\n }\n } catch (error) {\n console.error('Error checking favorite status:', error);\n }\n };\n\n const toggleFavorite = async () => {\n if (!user) {\n onLoginRequired();\n return;\n }\n\n setLoading(true);\n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch('/api/users/favorites', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify({\n apartmentId: apartment.id,\n action: isFavorite ? 'remove' : 'add'\n })\n });\n\n if (response.ok) {\n setIsFavorite(!isFavorite);\n }\n } catch (error) {\n console.error('Error toggling favorite:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const nextImage = () => {\n setCurrentImageIndex((prev) => \n prev === apartment.images.length - 1 ? 0 : prev + 1\n );\n };\n\n const prevImage = () => {\n setCurrentImageIndex((prev) => \n prev === 0 ? apartment.images.length - 1 : prev - 1\n );\n };\n\n return (\n

\n {/* Header */}\n

{apartment.title}

\n \n ×\n \n

\n\n {/* Image Gallery */}\n

\n \n \n {apartment.images.length > 1 && (\n <>\n \n ←\n \n \n →\n \n \n {/* Image indicators */}\n

\n {apartment.images.map((_, index) => (\n setCurrentImageIndex(index)}\n className={`w-2 h-2 rounded-full ${\n index === currentImageIndex ? 'bg-white' : 'bg-white bg-opacity-50'\n }`}\n />\n ))}\n

\n \n )}\n

\n\n {/* Content */}\n

${apartment.price}/month

{apartment.location}

\n \n \n {isFavorite ? '❤️' : '🤍'}\n \n

\n\n {/* Property Details */}\n

{apartment.bedrooms}

Bedrooms

{apartment.bathrooms}

Bathrooms

{apartment.sqft}

Sq Ft

{apartment.type}

Type

\n\n {/* Description */}\n

Description

{apartment.description}

\n\n {/* Amenities */}\n {apartment.amenities && apartment.amenities.length > 0 && (\n

Amenities

\n {apartment.amenities.map((amenity, index) => (\n

\n ✓\n {amenity}\n

\n ))}\n

\n )}\n\n {/* Contact Information */}\n

Contact Information

\n Phone: {apartment.contact?.phone || '(555) 123-4567'}\n

\n Email: {apartment.contact?.email || 'info@example.com'}\n

\n \n

\n \n \n

\n );\n}",[],[249,256,295,320],[249,256,295],{"_107":329,"_100":330,"_152":331,"_154":257,"_155":138,"_156":332,"_158":159,"_109":333,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":334,"_103":343},"5d72e47a-3fbd-11f0-ae23-76b3cceeab13","Map","a9783a84-2c4b-4eac-aeb7-a5ef455b3d86",21,["D",1748874299756],[335],{"_107":336,"_100":337,"_152":338,"_154":331,"_155":138,"_156":332,"_158":159,"_109":339,"_104":31,"_161":179,"_163":340,"_164":27,"_165":-5,"_166":341,"_103":342},"5d72ce68-3fbd-11f0-ae23-76b3cceeab13","MapView.tsx","5d72cf26-3fbd-11f0-ae23-76b3cceeab13",["D",1748874299756],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Apartment } from \"../../../shared/types.ts\";\n\ninterface MapViewProps {\n apartments: Apartment[];\n onSelectApartment: (apartment: Apartment) => void;\n}\n\nexport default function MapView({ apartments, onSelectApartment }: MapViewProps) {\n const [selectedApartment, setSelectedApartment] = useState(null);\n const [mapCenter, setMapCenter] = useState({ lat: 40.7128, lng: -74.0060 }); // Default to NYC\n\n // Simple map simulation using a grid layout\n // In a real app, you'd integrate with Google Maps, Mapbox, or similar\n const getApartmentPosition = (apartment: Apartment, index: number) => {\n // Create a simple grid layout for demonstration\n const gridSize = Math.ceil(Math.sqrt(apartments.length));\n const row = Math.floor(index / gridSize);\n const col = index % gridSize;\n \n return {\n x: (col / gridSize) * 100,\n y: (row / gridSize) * 100\n };\n };\n\n const handleMarkerClick = (apartment: Apartment) => {\n setSelectedApartment(apartment);\n };\n\n return (\n

\n {/* Map Header */}\n

Map View

\n Showing {apartments.length} apartments in the area\n

\n\n {/* Map Container */}\n

\n {/* Simulated Map Background */}\n

\n {/* Grid lines to simulate map */}\n \n \n {/* Simulated streets */}\n

\n\n {/* Apartment Markers */}\n {apartments.map((apartment, index) => {\n const position = getApartmentPosition(apartment, index);\n return (\n handleMarkerClick(apartment)}\n >\n {/* Marker */}\n

\n ${Math.floor(apartment.price / 100)}\n

\n \n {/* Tooltip on hover */}\n

\n {apartment.title}\n

\n );\n })}\n\n {/* Map Controls */}\n

\n \n \n

\n\n {/* Legend */}\n

Price Range

\n Apartments\n

\n\n {/* Selected Apartment Info */}\n {selectedApartment && (\n

{selectedApartment.title}

{selectedApartment.location}

${selectedApartment.price}/month

\n {selectedApartment.bedrooms} bed\n {selectedApartment.bathrooms} bath\n {selectedApartment.sqft} sq ft\n

\n \n

\n onSelectApartment(selectedApartment)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors\"\n >\n View Details\n \n setSelectedApartment(null)}\n className=\"bg-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-400 transition-colors\"\n >\n ×\n \n

\n )}\n\n {/* No apartments message */}\n {apartments.length === 0 && (\n

No apartments to display on map

Try adjusting your search filters

\n )}\n \n );\n}",[],[249,256,330,337],[249,256,330],{"_107":345,"_100":346,"_152":347,"_154":257,"_155":138,"_156":348,"_158":159,"_109":349,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":350,"_103":359},"9cb86d4c-3fb5-11f0-81db-76b3cceeab13","Search","07213abd-0e6b-484d-a3d6-58ed0716afb4",17,["D",1748870969935],[351],{"_107":352,"_100":353,"_152":354,"_154":347,"_155":138,"_156":348,"_158":159,"_109":355,"_104":31,"_161":179,"_163":356,"_164":27,"_165":-5,"_166":357,"_103":358},"9cb845e2-3fb5-11f0-81db-76b3cceeab13","SearchSection.tsx","9cb846be-3fb5-11f0-81db-76b3cceeab13",["D",1748870969935],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { AMENITIES } from \"../../../shared/types.ts\";\nimport { debounce } from \"../../../shared/utils.ts\";\n\ninterface SearchSectionProps {\n onSearch: (filters: any) => void;\n}\n\nexport default function SearchSection({ onSearch }: SearchSectionProps) {\n const [showFilters, setShowFilters] = useState(false);\n const [filters, setFilters] = useState({\n location: '',\n minPrice: '',\n maxPrice: '',\n bedrooms: '',\n bathrooms: '',\n amenities: [] as string[]\n });\n\n // Debounced search function\n const debouncedSearch = debounce((searchFilters: any) => {\n onSearch(searchFilters);\n }, 500);\n\n const handleFilterChange = (key: string, value: any) => {\n const newFilters = { ...filters, [key]: value };\n setFilters(newFilters);\n \n // Auto-search when filters change\n const searchFilters = Object.fromEntries(\n Object.entries(newFilters).filter(([_, v]) => \n v !== '' && v !== undefined && (Array.isArray(v) ? v.length > 0 : true)\n )\n );\n debouncedSearch(searchFilters);\n };\n\n const handleAmenityToggle = (amenity: string) => {\n const newAmenities = filters.amenities.includes(amenity)\n ? filters.amenities.filter(a => a !== amenity)\n : [...filters.amenities, amenity];\n \n handleFilterChange('amenities', newAmenities);\n };\n\n const clearFilters = () => {\n const clearedFilters = {\n location: '',\n minPrice: '',\n maxPrice: '',\n bedrooms: '',\n bathrooms: '',\n amenities: []\n };\n setFilters(clearedFilters);\n onSearch({});\n };\n\n return (\n

\n {/* Main Search Bar */}\n

\n \n 📍 Location (City, State, or ZIP)\n \n handleFilterChange('location', e.target.value)}\n placeholder=\"e.g., New York, NY or 10001\"\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n />\n

\n \n

\n setShowFilters(!showFilters)}\n className=\"bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition-colors flex items-center\"\n >\n 🔧 Filters\n {showFilters ? '▲' : '▼'}\n \n

\n\n {/* Advanced Filters */}\n {showFilters && (\n

\n {/* Price Range */}\n

\n \n 💰 Min Price\n \n handleFilterChange('minPrice', e.target.value)}\n placeholder=\"$1,000\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n />\n

\n\n

\n \n 💰 Max Price\n \n handleFilterChange('maxPrice', e.target.value)}\n placeholder=\"$5,000\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n />\n

\n\n {/* Bedrooms */}\n

\n \n 🛏️ Min Bedrooms\n \n handleFilterChange('bedrooms', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n >\n \n \n \n \n \n \n \n

\n\n {/* Bathrooms */}\n

\n \n 🚿 Min Bathrooms\n \n handleFilterChange('bathrooms', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n >\n \n \n \n \n \n \n \n

\n\n {/* Amenities */}\n

\n \n ✨ Amenities\n \n

\n {AMENITIES.map((amenity) => (\n \n handleAmenityToggle(amenity)}\n className=\"mr-2 rounded text-purple-600 focus:ring-purple-500\"\n />\n {amenity}\n \n ))}\n

\n\n {/* Filter Actions */}\n

\n \n Clear All Filters\n \n \n

\n {Object.values(filters).some(v => v !== '' && (Array.isArray(v) ? v.length > 0 : true)) && (\n 🔍 Filters applied - results update automatically\n )}\n

\n )}\n

\n );\n}",[],[249,256,346,353],[249,256,346],{"_107":361,"_100":362,"_152":363,"_154":257,"_155":138,"_156":364,"_158":159,"_109":365,"_104":241,"_161":242,"_163":366,"_164":27,"_165":-5,"_166":367,"_103":368},"e6a66784-3fbe-11f0-ae5c-76b3cceeab13","App.tsx","6e16acec-3fb5-11f0-9d87-76b3cceeab13",29,["D",1748874959439],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { User, Apartment } from \"../../shared/types.ts\";\nimport Header from \"./Header.tsx\";\nimport AuthModal from \"./Auth/AuthModal.tsx\";\nimport SearchSection from \"./Search/SearchSection.tsx\";\nimport ApartmentGrid from \"./Listings/ApartmentGrid.tsx\";\nimport ApartmentModal from \"./Listings/ApartmentModal.tsx\";\nimport MapView from \"./Map/MapView.tsx\";\nimport FavoritesView from \"./Favorites/FavoritesView.tsx\";\n\ninterface AppProps {\n initialData: any;\n}\n\ntype ViewMode = 'search' | 'map' | 'favorites';\n\nexport default function App({ initialData }: AppProps) {\n const [user, setUser] = useState(null);\n const [showAuthModal, setShowAuthModal] = useState(false);\n const [apartments, setApartments] = useState([]);\n const [selectedApartment, setSelectedApartment] = useState(null);\n const [loading, setLoading] = useState(false);\n const [viewMode, setViewMode] = useState('search');\n const [searchFilters, setSearchFilters] = useState({});\n\n // Check for existing auth token on load\n useEffect(() => {\n const token = localStorage.getItem('sbj_token');\n if (token) {\n // Verify token is still valid by making a test request\n fetch('/api/users/favorites', {\n headers: { 'Authorization': `Bearer ${token}` }\n })\n .then(response => {\n if (!response.ok) {\n localStorage.removeItem('sbj_token');\n localStorage.removeItem('sbj_user');\n } else {\n const userData = localStorage.getItem('sbj_user');\n if (userData) {\n setUser(JSON.parse(userData));\n }\n }\n })\n .catch(() => {\n localStorage.removeItem('sbj_token');\n localStorage.removeItem('sbj_user');\n });\n }\n }, []);\n\n // Load initial apartments\n useEffect(() => {\n loadApartments();\n }, []);\n\n const loadApartments = async (filters = {}) => {\n setLoading(true);\n try {\n const queryParams = new URLSearchParams();\n Object.entries(filters).forEach(([key, value]) => {\n if (value !== undefined && value !== '') {\n if (Array.isArray(value)) {\n queryParams.set(key, value.join(','));\n } else {\n queryParams.set(key, value.toString());\n }\n }\n });\n\n const response = await fetch(`/api/apartments/search?${queryParams}`);\n const data = await response.json();\n \n if (data.apartments) {\n setApartments(data.apartments);\n setSearchFilters(filters);\n }\n } catch (error) {\n console.error('Error loading apartments:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const handleLogin = (userData: User, token: string) => {\n setUser(userData);\n localStorage.setItem('sbj_token', token);\n localStorage.setItem('sbj_user', JSON.stringify(userData));\n setShowAuthModal(false);\n };\n\n const handleLogout = () => {\n setUser(null);\n localStorage.removeItem('sbj_token');\n localStorage.removeItem('sbj_user');\n setViewMode('search');\n };\n\n const handleSearch = (filters: any) => {\n loadApartments(filters);\n setViewMode('search');\n };\n\n const handleViewModeChange = (mode: ViewMode) => {\n setViewMode(mode);\n if (mode === 'search' && apartments.length === 0) {\n loadApartments();\n }\n };\n\n return (\n

setShowAuthModal(true)}\n onLogout={handleLogout}\n viewMode={viewMode}\n onViewModeChange={handleViewModeChange}\n />\n\n

\n {viewMode === 'search' && (\n <>\n \n \n {loading ? (\n

\n Searching apartments...\n

\n ) : (\n setShowAuthModal(true)}\n />\n )}\n \n )}\n\n {viewMode === 'map' && (\n \n )}\n\n {viewMode === 'favorites' && (\n setShowAuthModal(true)}\n />\n )}\n

\n\n {/* Modals */}\n {showAuthModal && (\n setShowAuthModal(false)}\n onLogin={handleLogin}\n />\n )}\n\n {selectedApartment && (\n setSelectedApartment(null)}\n user={user}\n onLoginRequired={() => setShowAuthModal(true)}\n />\n )}\n

\n );\n}",[],[249,256,362],{"_107":370,"_100":371,"_152":372,"_154":257,"_155":138,"_156":373,"_158":159,"_109":374,"_104":31,"_161":179,"_163":375,"_164":27,"_165":-5,"_166":376,"_103":377},"7c3cfe84-3fb5-11f0-ac87-76b3cceeab13","Header.tsx","7c3cff4c-3fb5-11f0-ac87-76b3cceeab13",15,["D",1748870915436],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { User } from \"../../shared/types.ts\";\n\ninterface HeaderProps {\n user: User | null;\n onLogin: () => void;\n onLogout: () => void;\n viewMode: 'search' | 'map' | 'favorites';\n onViewModeChange: (mode: 'search' | 'map' | 'favorites') => void;\n}\n\nexport default function Header({ user, onLogin, onLogout, viewMode, onViewModeChange }: HeaderProps) {\n return (\n

\n {/* Logo and Title */}\n

🏠

Saint Benedict Joseph

Find Your Perfect Apartment

\n\n {/* Navigation */}\n

\n onViewModeChange('search')}\n className={`px-4 py-2 rounded-lg transition-colors ${\n viewMode === 'search' \n ? 'bg-white text-purple-600 font-semibold' \n : 'hover:bg-white hover:bg-opacity-20'\n }`}\n >\n 🔍 Search\n \n \n onViewModeChange('map')}\n className={`px-4 py-2 rounded-lg transition-colors ${\n viewMode === 'map' \n ? 'bg-white text-purple-600 font-semibold' \n : 'hover:bg-white hover:bg-opacity-20'\n }`}\n >\n 🗺️ Map\n \n\n {user && (\n onViewModeChange('favorites')}\n className={`px-4 py-2 rounded-lg transition-colors ${\n viewMode === 'favorites' \n ? 'bg-white text-purple-600 font-semibold' \n : 'hover:bg-white hover:bg-opacity-20'\n }`}\n >\n ❤️ Favorites\n \n )}\n

\n\n {/* User Actions */}\n

\n {user ? (\n

{user.firstName} {user.lastName}

{user.email}

\n \n Logout\n \n

\n ) : (\n \n Login / Sign Up\n \n )}\n

\n\n {/* Mobile Navigation */}\n

\n onViewModeChange('search')}\n className={`flex-1 py-2 px-3 rounded-lg text-sm transition-colors ${\n viewMode === 'search' \n ? 'bg-white text-purple-600 font-semibold' \n : 'hover:bg-white hover:bg-opacity-20'\n }`}\n >\n 🔍 Search\n \n \n onViewModeChange('map')}\n className={`flex-1 py-2 px-3 rounded-lg text-sm transition-colors ${\n viewMode === 'map' \n ? 'bg-white text-purple-600 font-semibold' \n : 'hover:bg-white hover:bg-opacity-20'\n }`}\n >\n 🗺️ Map\n \n\n {user && (\n onViewModeChange('favorites')}\n className={`flex-1 py-2 px-3 rounded-lg text-sm transition-colors ${\n viewMode === 'favorites' \n ? 'bg-white text-purple-600 font-semibold' \n : 'hover:bg-white hover:bg-opacity-20'\n }`}\n >\n ❤️ Favorites\n \n )}\n

\n );\n}",[],[249,256,371],[249,256],{"_107":380,"_100":381,"_152":382,"_154":250,"_155":138,"_156":251,"_158":159,"_109":383,"_104":31,"_161":384,"_163":385,"_164":27,"_165":-5,"_166":386,"_103":387},"5cf14bca-3fb5-11f0-b474-76b3cceeab13","index.html","5cf14c7e-3fb5-11f0-b474-76b3cceeab13",["D",1748870862935],"file","\n\n\n \n \n Saint Benedict Joseph - Find Your Perfect Apartment\n \n \n 🏠\">\n \n\n\n

\n \n \n\n",[],[249,381],{"_107":389,"_100":390,"_152":391,"_154":250,"_155":138,"_156":392,"_158":159,"_109":393,"_104":241,"_161":242,"_163":394,"_164":27,"_165":-5,"_166":395,"_103":396},"acb24b60-3fbe-11f0-9001-76b3cceeab13","index.tsx","60dcd38a-3fb5-11f0-a6fa-76b3cceeab13",28,["D",1748874862210],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\n// Get initial data injected by the server\nconst initialData = (window as any).__INITIAL_DATA__ || {};\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[249,390],[249],{"_107":399,"_100":400,"_152":401,"_154":-5,"_155":138,"_156":306,"_158":159,"_109":402,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":403,"_103":421},"029a3a60-3fb5-11f0-8c58-76b3cceeab13","shared","db072c4b-6030-4b66-b59a-cd15b6428860",["D",1748870711365],[404,412],{"_107":405,"_100":406,"_152":407,"_154":401,"_155":138,"_156":306,"_158":159,"_109":408,"_104":31,"_161":179,"_163":409,"_164":27,"_165":-5,"_166":410,"_103":411},"029a3222-3fb5-11f0-8c58-76b3cceeab13","types.ts","029a32ea-3fb5-11f0-8c58-76b3cceeab13",["D",1748870711365],"// Shared TypeScript interfaces for the SBJ app\n\nexport interface User {\n id: number;\n email: string;\n firstName: string;\n lastName: string;\n createdAt: string;\n}\n\nexport interface Apartment {\n id: number;\n title: string;\n description: string;\n price: number;\n bedrooms: number;\n bathrooms: number;\n squareFeet: number;\n address: string;\n city: string;\n state: string;\n zipCode: string;\n latitude: number;\n longitude: number;\n amenities: string[];\n images: string[];\n available: boolean;\n createdAt: string;\n}\n\nexport interface SearchFilters {\n location?: string;\n minPrice?: number;\n maxPrice?: number;\n bedrooms?: number;\n bathrooms?: number;\n amenities?: string[];\n}\n\nexport interface UserFavorite {\n id: number;\n userId: number;\n apartmentId: number;\n createdAt: string;\n}\n\nexport interface AuthResponse {\n success: boolean;\n token?: string;\n user?: User;\n message?: string;\n}\n\nexport interface SearchResponse {\n apartments: Apartment[];\n total: number;\n page: number;\n limit: number;\n}\n\n// Common amenities list\nexport const AMENITIES = [\n 'Pool',\n 'Gym/Fitness Center',\n 'Parking',\n 'Laundry',\n 'Pet Friendly',\n 'Air Conditioning',\n 'Dishwasher',\n 'Balcony/Patio',\n 'In-Unit Washer/Dryer',\n 'Elevator',\n 'Doorman',\n 'Rooftop Access'\n] as const;\n\nexport type Amenity = typeof AMENITIES[number];",[],[400,406],{"_107":413,"_100":414,"_152":415,"_154":401,"_155":138,"_156":416,"_158":159,"_109":417,"_104":31,"_161":179,"_163":418,"_164":27,"_165":-5,"_166":419,"_103":420},"08928d50-3fb5-11f0-a8b7-76b3cceeab13","utils.ts","08928dfa-3fb5-11f0-a8b7-76b3cceeab13",4,["D",1748870721386],"// Shared utility functions\n\nexport function formatPrice(price: number): string {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }).format(price);\n}\n\nexport function formatAddress(apartment: { address: string; city: string; state: string; zipCode: string }): string {\n return `${apartment.address}, ${apartment.city}, ${apartment.state} ${apartment.zipCode}`;\n}\n\nexport function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {\n const R = 3959; // Earth's radius in miles\n const dLat = (lat2 - lat1) * Math.PI / 180;\n const dLon = (lon2 - lon1) * Math.PI / 180;\n const a = \n Math.sin(dLat/2) * Math.sin(dLat/2) +\n Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * \n Math.sin(dLon/2) * Math.sin(dLon/2);\n const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));\n return R * c;\n}\n\nexport function debounce any>(\n func: T,\n wait: number\n): (...args: Parameters) => void {\n let timeout: number | undefined;\n return (...args: Parameters) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => func(...args), wait);\n };\n}\n\nexport function validateEmail(email: string): boolean {\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n return emailRegex.test(email);\n}\n\nexport function generateId(): string {\n return Math.random().toString(36).substr(2, 9);\n}",[],[400,414],[400],{"_107":423,"_100":424,"_152":425,"_154":-5,"_155":138,"_156":426,"_158":159,"_109":427,"_104":31,"_161":384,"_163":428,"_164":27,"_165":-5,"_166":429,"_103":430},"fd38db76-3fb4-11f0-b506-76b3cceeab13","README.md","fd38dc2a-3fb4-11f0-b506-76b3cceeab13",2,["D",1748870702343],"# Saint Benedict Joseph (SBJ) - Apartment Search App\n\nA comprehensive apartment search application that helps users find and save their ideal rental properties.\n\n## Features\n\n- **User Authentication**: Secure login and registration system\n- **Location-based Search**: Search apartments by city, state, or zip code\n- **Advanced Filters**: Filter by price, bedrooms, bathrooms, and amenities\n- **Detailed Listings**: View photos, descriptions, pricing, and amenities\n- **Interactive Map**: See apartment locations on an integrated map\n- **Favorites System**: Save and manage favorite apartment listings\n- **Responsive Design**: Mobile-first design that works on all devices\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ ├── auth.ts # Authentication endpoints\n│ │ ├── apartments.ts # Apartment CRUD operations\n│ │ ├── users.ts # User management\n│ │ └── static.ts # Static file serving\n│ └── index.ts # Main API entry point\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── Auth/ # Authentication components\n│ │ ├── Search/ # Search and filter components\n│ │ ├── Listings/ # Apartment listing components\n│ │ └── Map/ # Map integration components\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Application styles\n└── shared/\n ├── types.ts # Shared TypeScript interfaces\n └── utils.ts # Shared utility functions\n```\n\n## Technology Stack\n\n- **Backend**: Hono.js (lightweight web framework)\n- **Database**: SQLite (Val Town hosted)\n- **Frontend**: React with TypeScript\n- **Styling**: TailwindCSS\n- **Maps**: Integrated mapping service\n- **Authentication**: JWT-based auth system\n\n## Getting Started\n\n1. The backend API is accessible at the root URL\n2. All frontend assets are served from `/frontend/`\n3. The app includes sample apartment data for testing\n4. User authentication is required for saving favorites\n\n## API Endpoints\n\n- `POST /api/auth/register` - User registration\n- `POST /api/auth/login` - User login\n- `GET /api/apartments/search` - Search apartments\n- `GET /api/apartments/:id` - Get apartment details\n- `POST /api/users/favorites` - Add/remove favorites\n- `GET /api/users/favorites` - Get user favorites\n\n## Environment Variables\n\nNo external API keys required - the app uses mock data and built-in services.",[],[424],{"_107":432,"_100":433,"_152":434,"_154":-5,"_155":138,"_156":435,"_158":159,"_109":436,"_104":426,"_161":242,"_163":437,"_164":27,"_165":-5,"_166":438,"_103":439},"7cfad27a-3fbe-11f0-9ab0-76b3cceeab13","main.tsx","7b94c9c2-3fb4-11f0-b565-76b3cceeab13",27,["D",1748874782155],"export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",[],[433],"files",[149,168,174,183,193,200,209,217,226,236,247,254,261,268,277,284,293,300,310,318,328,335,344,351,360,369,379,388,398,404,412,422,431],"counts",{"_444":31,"_445":241,"_446":31,"_447":31},"pulls","branches","forks","envVars","contents",[450,453,456,459,462],{"_107":150,"_100":151,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_109":451,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":452},["D",1748870750726],[151],{"_107":248,"_100":249,"_152":250,"_154":-5,"_155":138,"_156":251,"_158":159,"_109":454,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":455},["D",1748870862935],[249],{"_107":399,"_100":400,"_152":401,"_154":-5,"_155":138,"_156":306,"_158":159,"_109":457,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":458},["D",1748870711365],[400],{"_107":423,"_100":424,"_152":425,"_154":-5,"_155":138,"_156":426,"_158":159,"_109":460,"_104":31,"_161":384,"_163":428,"_164":27,"_165":-5,"_103":461},["D",1748870702343],[424],{"_107":432,"_100":433,"_152":434,"_154":-5,"_155":138,"_156":435,"_158":159,"_109":463,"_104":426,"_161":242,"_163":437,"_164":27,"_165":-5,"_103":464},["D",1748874782155],[433],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_98":99,"_100":101,"_102":42,"_105":471,"_475":476,"_637":31,"_638":159},{"_107":108,"_100":101,"_109":472,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":31,"_14":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_21":473,"_135":474,"_146":27},["D",1748870484831],{"_98":99,"_133":134},{"_104":137,"_100":42,"_107":138,"_139":108,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":101,"_145":99},"history",[477,482,487,492,497,504,509,517,525,533,541,546,554,562,570,578,583,592,599,607,614,619,624,629],{"_152":239,"_104":137,"_109":478,"_155":138,"_440":479},["D",1748875019016],[480],{"_107":237,"_155":138,"_152":239,"_100":238,"_163":243,"_161":242,"_104":241,"_154":153,"_109":478,"_156":137,"_165":-5,"_158":159,"_164":27,"_103":481},[151,238],{"_152":363,"_104":364,"_109":483,"_155":138,"_440":484},["D",1748874959439],[485],{"_107":361,"_155":138,"_152":363,"_100":362,"_163":366,"_161":242,"_104":241,"_154":257,"_109":483,"_156":364,"_165":-5,"_158":159,"_164":27,"_103":486},[249,256,362],{"_152":391,"_104":392,"_109":488,"_155":138,"_440":489},["D",1748874862210],[490],{"_107":389,"_155":138,"_152":391,"_100":390,"_163":394,"_161":242,"_104":241,"_154":250,"_109":488,"_156":392,"_165":-5,"_158":159,"_164":27,"_103":491},[249,390],{"_152":434,"_104":435,"_109":493,"_155":138,"_440":494},["D",1748874782155],[495],{"_107":432,"_155":138,"_152":434,"_100":433,"_163":437,"_161":242,"_104":426,"_154":-5,"_109":493,"_156":435,"_165":-5,"_158":159,"_164":27,"_103":496},[433],{"_152":434,"_104":498,"_109":499,"_155":138,"_440":500},26,["D",1748874778549],[501],{"_107":502,"_155":138,"_152":434,"_100":433,"_163":73,"_161":242,"_104":241,"_154":-5,"_109":499,"_156":498,"_165":-5,"_158":27,"_164":27,"_103":503},"7ad4c668-3fbe-11f0-af09-76b3cceeab13",[433],{"_152":303,"_104":304,"_109":505,"_155":138,"_440":506},["D",1748874360795],[507],{"_107":301,"_155":138,"_152":303,"_100":302,"_163":307,"_161":179,"_104":306,"_154":296,"_109":505,"_156":304,"_165":-5,"_158":159,"_164":27,"_103":508},[249,256,295,302],{"_152":303,"_104":510,"_109":511,"_155":138,"_440":512},24,["D",1748874354297],[513],{"_107":514,"_155":138,"_152":303,"_100":302,"_163":515,"_161":179,"_104":426,"_154":296,"_109":511,"_156":510,"_165":-5,"_158":27,"_164":27,"_103":516},"7df5d14e-3fbd-11f0-8659-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Apartment, User } from \"../../../shared/types.ts\";\nimport { formatPrice, formatAddress } from \"../../../shared/utils.ts\";\n\ninterface ApartmentCardProps {\n apartment: Apartment;\n onSelect?: (apartment: Apartment) => void;\n onClick?: () => void;\n user: User | null;\n onLoginRequired: () => void;\n showFavoriteButton?: boolean;\n}\n\nexport default function ApartmentCard({ \n apartment, \n onSelect, \n onClick, \n user, \n onLoginRequired, \n showFavoriteButton = true \n}: ApartmentCardProps) {\n const [isFavorited, setIsFavorited] = useState(false);\n const [favoriteLoading, setFavoriteLoading] = useState(false);\n\n // Check if apartment is favorited\n useEffect(() => {\n if (user) {\n checkFavoriteStatus();\n }\n }, [user, apartment.id]);\n\n const checkFavoriteStatus = async () => {\n if (!user) return;\n \n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch(`/api/users/favorites/${apartment.id}`, {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n const data = await response.json();\n if (data.success) {\n setIsFavorited(data.favorited);\n }\n } catch (error) {\n console.error('Error checking favorite status:', error);\n }\n };\n\n const handleFavoriteToggle = async (e: React.MouseEvent) => {\n e.stopPropagation();\n \n if (!user) {\n onLoginRequired();\n return;\n }\n\n setFavoriteLoading(true);\n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch('/api/users/favorites', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify({\n apartmentId: apartment.id,\n action: isFavorited ? 'remove' : 'add'\n })\n });\n\n const data = await response.json();\n if (data.success) {\n setIsFavorited(!isFavorited);\n }\n } catch (error) {\n console.error('Error toggling favorite:', error);\n } finally {\n setFavoriteLoading(false);\n }\n };\n\n const primaryImage = apartment.images[0] || 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=800';\n\n return (\n

\n {/* Image */}\n

\n {formatPrice(apartment.price)}/mo\n

\n\n {/* Content */}\n

\n {apartment.title}\n

\n \n

\n 📍 {formatAddress(apartment)}\n

\n\n {/* Details */}\n

\n 🛏️ {apartment.bedrooms === 0 ? 'Studio' : `${apartment.bedrooms} bed`}\n 🚿 {apartment.bathrooms} bath\n

\n {apartment.squareFeet && (\n 📐 {apartment.squareFeet.toLocaleString()} sq ft\n )}\n

\n\n {/* Amenities Preview */}\n {apartment.amenities.length > 0 && (\n

\n {apartment.amenities.slice(0, 3).map((amenity) => (\n \n {amenity}\n \n ))}\n {apartment.amenities.length > 3 && (\n \n +{apartment.amenities.length - 3} more\n \n )}\n

\n )}\n\n {/* Description Preview */}\n

\n {apartment.description}\n

\n );\n}",[249,256,295,302],{"_152":303,"_104":518,"_109":519,"_155":138,"_440":520},23,["D",1748874346801],[521],{"_107":522,"_155":138,"_152":303,"_100":302,"_163":523,"_161":179,"_104":241,"_154":296,"_109":519,"_156":518,"_165":-5,"_158":27,"_164":27,"_103":524},"797d9c82-3fbd-11f0-a309-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Apartment, User } from \"../../../shared/types.ts\";\nimport { formatPrice, formatAddress } from \"../../../shared/utils.ts\";\n\ninterface ApartmentCardProps {\n apartment: Apartment;\n onSelect?: (apartment: Apartment) => void;\n onClick?: () => void;\n user: User | null;\n onLoginRequired: () => void;\n showFavoriteButton?: boolean;\n}\n\nexport default function ApartmentCard({ apartment, onClick, user, onLoginRequired }: ApartmentCardProps) {\n const [isFavorited, setIsFavorited] = useState(false);\n const [favoriteLoading, setFavoriteLoading] = useState(false);\n\n // Check if apartment is favorited\n useEffect(() => {\n if (user) {\n checkFavoriteStatus();\n }\n }, [user, apartment.id]);\n\n const checkFavoriteStatus = async () => {\n if (!user) return;\n \n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch(`/api/users/favorites/${apartment.id}`, {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n const data = await response.json();\n if (data.success) {\n setIsFavorited(data.favorited);\n }\n } catch (error) {\n console.error('Error checking favorite status:', error);\n }\n };\n\n const handleFavoriteToggle = async (e: React.MouseEvent) => {\n e.stopPropagation();\n \n if (!user) {\n onLoginRequired();\n return;\n }\n\n setFavoriteLoading(true);\n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch('/api/users/favorites', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify({\n apartmentId: apartment.id,\n action: isFavorited ? 'remove' : 'add'\n })\n });\n\n const data = await response.json();\n if (data.success) {\n setIsFavorited(!isFavorited);\n }\n } catch (error) {\n console.error('Error toggling favorite:', error);\n } finally {\n setFavoriteLoading(false);\n }\n };\n\n const primaryImage = apartment.images[0] || 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=800';\n\n return (\n

\n {/* Image */}\n

\n {formatPrice(apartment.price)}/mo\n

\n\n {/* Content */}\n

\n {apartment.title}\n

\n \n

\n 📍 {formatAddress(apartment)}\n

\n\n {/* Details */}\n

\n 🛏️ {apartment.bedrooms === 0 ? 'Studio' : `${apartment.bedrooms} bed`}\n 🚿 {apartment.bathrooms} bath\n

\n {apartment.squareFeet && (\n 📐 {apartment.squareFeet.toLocaleString()} sq ft\n )}\n

\n\n {/* Amenities Preview */}\n {apartment.amenities.length > 0 && (\n

\n {apartment.amenities.slice(0, 3).map((amenity) => (\n \n {amenity}\n \n ))}\n {apartment.amenities.length > 3 && (\n \n +{apartment.amenities.length - 3} more\n \n )}\n

\n )}\n\n {/* Description Preview */}\n

\n {apartment.description}\n

\n );\n}",[249,256,295,302],{"_152":280,"_104":281,"_109":526,"_155":138,"_440":527},["D",1748874332452],[528,530],{"_107":278,"_155":138,"_152":280,"_100":279,"_163":-5,"_161":162,"_104":31,"_154":257,"_109":526,"_156":281,"_165":-5,"_158":159,"_164":27,"_103":529},[249,256,279],{"_107":285,"_155":138,"_152":287,"_100":286,"_163":289,"_161":179,"_104":31,"_154":280,"_109":531,"_156":281,"_165":-5,"_158":159,"_164":27,"_103":532},["D",1748874332452],[249,256,279,286],{"_152":331,"_104":332,"_109":534,"_155":138,"_440":535},["D",1748874299756],[536,538],{"_107":329,"_155":138,"_152":331,"_100":330,"_163":-5,"_161":162,"_104":31,"_154":257,"_109":534,"_156":332,"_165":-5,"_158":159,"_164":27,"_103":537},[249,256,330],{"_107":336,"_155":138,"_152":338,"_100":337,"_163":340,"_161":179,"_104":31,"_154":331,"_109":539,"_156":332,"_165":-5,"_158":159,"_164":27,"_103":540},["D",1748874299756],[249,256,330,337],{"_152":321,"_104":322,"_109":542,"_155":138,"_440":543},["D",1748874267540],[544],{"_107":319,"_155":138,"_152":321,"_100":320,"_163":324,"_161":179,"_104":31,"_154":296,"_109":542,"_156":322,"_165":-5,"_158":159,"_164":27,"_103":545},[249,256,295,320],{"_152":303,"_104":547,"_109":548,"_155":138,"_440":549},19,["D",1748871009996],[550],{"_107":551,"_155":138,"_152":303,"_100":302,"_163":552,"_161":179,"_104":31,"_154":296,"_109":548,"_156":547,"_165":-5,"_158":27,"_164":27,"_103":553},"b498ca2e-3fb5-11f0-8b27-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Apartment, User } from \"../../../shared/types.ts\";\nimport { formatPrice, formatAddress } from \"../../../shared/utils.ts\";\n\ninterface ApartmentCardProps {\n apartment: Apartment;\n onClick: () => void;\n user: User | null;\n onLoginRequired: () => void;\n}\n\nexport default function ApartmentCard({ apartment, onClick, user, onLoginRequired }: ApartmentCardProps) {\n const [isFavorited, setIsFavorited] = useState(false);\n const [favoriteLoading, setFavoriteLoading] = useState(false);\n\n // Check if apartment is favorited\n useEffect(() => {\n if (user) {\n checkFavoriteStatus();\n }\n }, [user, apartment.id]);\n\n const checkFavoriteStatus = async () => {\n if (!user) return;\n \n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch(`/api/users/favorites/${apartment.id}`, {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n const data = await response.json();\n if (data.success) {\n setIsFavorited(data.favorited);\n }\n } catch (error) {\n console.error('Error checking favorite status:', error);\n }\n };\n\n const handleFavoriteToggle = async (e: React.MouseEvent) => {\n e.stopPropagation();\n \n if (!user) {\n onLoginRequired();\n return;\n }\n\n setFavoriteLoading(true);\n try {\n const token = localStorage.getItem('sbj_token');\n const response = await fetch('/api/users/favorites', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${token}`\n },\n body: JSON.stringify({\n apartmentId: apartment.id,\n action: isFavorited ? 'remove' : 'add'\n })\n });\n\n const data = await response.json();\n if (data.success) {\n setIsFavorited(!isFavorited);\n }\n } catch (error) {\n console.error('Error toggling favorite:', error);\n } finally {\n setFavoriteLoading(false);\n }\n };\n\n const primaryImage = apartment.images[0] || 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=800';\n\n return (\n

\n {/* Image */}\n

\n {formatPrice(apartment.price)}/mo\n

\n\n {/* Content */}\n

\n {apartment.title}\n

\n \n

\n 📍 {formatAddress(apartment)}\n

\n\n {/* Details */}\n

\n 🛏️ {apartment.bedrooms === 0 ? 'Studio' : `${apartment.bedrooms} bed`}\n 🚿 {apartment.bathrooms} bath\n

\n {apartment.squareFeet && (\n 📐 {apartment.squareFeet.toLocaleString()} sq ft\n )}\n

\n\n {/* Amenities Preview */}\n {apartment.amenities.length > 0 && (\n

\n {apartment.amenities.slice(0, 3).map((amenity) => (\n \n {amenity}\n \n ))}\n {apartment.amenities.length > 3 && (\n \n +{apartment.amenities.length - 3} more\n \n )}\n

\n )}\n\n {/* Description Preview */}\n

\n {apartment.description}\n

\n );\n}",[249,256,295,302],{"_152":296,"_104":297,"_109":555,"_155":138,"_440":556},["D",1748870985323],[557,559],{"_107":294,"_155":138,"_152":296,"_100":295,"_163":-5,"_161":162,"_104":31,"_154":257,"_109":555,"_156":297,"_165":-5,"_158":159,"_164":27,"_103":558},[249,256,295],{"_107":311,"_155":138,"_152":313,"_100":312,"_163":315,"_161":179,"_104":31,"_154":296,"_109":560,"_156":297,"_165":-5,"_158":159,"_164":27,"_103":561},["D",1748870985323],[249,256,295,312],{"_152":347,"_104":348,"_109":563,"_155":138,"_440":564},["D",1748870969935],[565,567],{"_107":345,"_155":138,"_152":347,"_100":346,"_163":-5,"_161":162,"_104":31,"_154":257,"_109":563,"_156":348,"_165":-5,"_158":159,"_164":27,"_103":566},[249,256,346],{"_107":352,"_155":138,"_152":354,"_100":353,"_163":356,"_161":179,"_104":31,"_154":347,"_109":568,"_156":348,"_165":-5,"_158":159,"_164":27,"_103":569},["D",1748870969935],[249,256,346,353],{"_152":271,"_104":265,"_109":571,"_155":138,"_440":572},["D",1748870941422],[573,575],{"_107":269,"_155":138,"_152":271,"_100":270,"_163":273,"_161":179,"_104":31,"_154":264,"_109":571,"_156":265,"_165":-5,"_158":159,"_164":27,"_103":574},[249,256,263,270],{"_107":262,"_155":138,"_152":264,"_100":263,"_163":-5,"_161":162,"_104":31,"_154":257,"_109":576,"_156":265,"_165":-5,"_158":159,"_164":27,"_103":577},["D",1748870941422],[249,256,263],{"_152":372,"_104":373,"_109":579,"_155":138,"_440":580},["D",1748870915436],[581],{"_107":370,"_155":138,"_152":372,"_100":371,"_163":375,"_161":179,"_104":31,"_154":257,"_109":579,"_156":373,"_165":-5,"_158":159,"_164":27,"_103":582},[249,256,371],{"_152":363,"_104":258,"_109":584,"_155":138,"_440":585},["D",1748870891697],[586,589],{"_107":587,"_155":138,"_152":363,"_100":362,"_163":366,"_161":179,"_104":31,"_154":257,"_109":584,"_156":258,"_165":-5,"_158":27,"_164":27,"_103":588},"6e16ac38-3fb5-11f0-9d87-76b3cceeab13",[249,256,362],{"_107":255,"_155":138,"_152":257,"_100":256,"_163":-5,"_161":162,"_104":31,"_154":250,"_109":590,"_156":258,"_165":-5,"_158":159,"_164":27,"_103":591},["D",1748870891697],[249,256],{"_152":391,"_104":593,"_109":594,"_155":138,"_440":595},13,["D",1748870869510],[596],{"_107":597,"_155":138,"_152":391,"_100":390,"_163":394,"_161":179,"_104":31,"_154":250,"_109":594,"_156":593,"_165":-5,"_158":27,"_164":27,"_103":598},"60dcd2cc-3fb5-11f0-a6fa-76b3cceeab13",[249,390],{"_152":250,"_104":251,"_109":600,"_155":138,"_440":601},["D",1748870862935],[602,604],{"_107":248,"_155":138,"_152":250,"_100":249,"_163":-5,"_161":162,"_104":31,"_154":-5,"_109":600,"_156":251,"_165":-5,"_158":159,"_164":27,"_103":603},[249],{"_107":380,"_155":138,"_152":382,"_100":381,"_163":385,"_161":384,"_104":31,"_154":250,"_109":605,"_156":251,"_165":-5,"_158":159,"_164":27,"_103":606},["D",1748870862935],[249,381],{"_152":239,"_104":608,"_109":609,"_155":138,"_440":610},11,["D",1748870848699],[611],{"_107":612,"_155":138,"_152":239,"_100":238,"_163":243,"_161":179,"_104":31,"_154":153,"_109":609,"_156":608,"_165":-5,"_158":27,"_164":27,"_103":613},"5474b176-3fb5-11f0-bc03-76b3cceeab13",[151,238],{"_152":220,"_104":221,"_109":615,"_155":138,"_440":616},["D",1748870839020],[617],{"_107":218,"_155":138,"_152":220,"_100":219,"_163":223,"_161":179,"_104":31,"_154":196,"_109":615,"_156":221,"_165":-5,"_158":159,"_164":27,"_103":618},[151,195,219],{"_152":229,"_104":230,"_109":620,"_155":138,"_440":621},["D",1748870829393],[622],{"_107":227,"_155":138,"_152":229,"_100":228,"_163":232,"_161":179,"_104":31,"_154":196,"_109":620,"_156":230,"_165":-5,"_158":159,"_164":27,"_103":623},[151,195,228],{"_152":203,"_104":204,"_109":625,"_155":138,"_440":626},["D",1748870818799],[627],{"_107":201,"_155":138,"_152":203,"_100":202,"_163":206,"_161":179,"_104":31,"_154":196,"_109":625,"_156":204,"_165":-5,"_158":159,"_164":27,"_103":628},[151,195,202],{"_152":196,"_104":197,"_109":630,"_155":138,"_440":631},["D",1748870802418],[632,634],{"_107":194,"_155":138,"_152":196,"_100":195,"_163":-5,"_161":162,"_104":31,"_154":153,"_109":630,"_156":197,"_165":-5,"_158":159,"_164":27,"_103":633},[151,195],{"_107":210,"_155":138,"_152":212,"_100":211,"_163":214,"_161":179,"_104":31,"_154":196,"_109":635,"_156":197,"_165":-5,"_158":159,"_164":27,"_103":636},["D",1748870802418],[151,195,211],"page","hasNext","routes/_app","actionData","errors"]

History