@burdenoff/microfe-housingvista 2026.510.105

package/dist/housingvista/pages/properties/PropertyDetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyDetailPage.js","names":[],"sources":["../../../../src/housingvista/pages/properties/PropertyDetailPage.tsx"],"sourcesContent":["/**\n * HousingVista Property Detail Page\n * Full property detail view with image gallery, specs, amenities, documents, owner info.\n * Migrated from legacy housingvista-frontend property-detail.tsx\n * @module housingvista\n */\n\nimport { useState, useMemo } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  MapPin,\n  Bed,\n  Bath,\n  Square,\n  Car,\n  Heart,\n  Share2,\n  Phone,\n  Mail,\n  CheckCircle,\n  Calendar,\n  DollarSign,\n  TrendingUp,\n  Shield,\n  Eye,\n  Star,\n  ChevronLeft,\n  ChevronRight,\n  MessageCircle,\n  FileText,\n  Building,\n} from 'lucide-react';\nimport { Breadcrumbs, StatusBadge, EmptyState, PropertyCard } from '../../components';\nimport type { BreadcrumbItem } from '../../components';\nimport { useProperties } from '../../hooks';\nimport { cn, formatCurrency, formatNumber, formatDate } from '../../utils/helpers';\nimport type { Property } from '../../types';\n\n// ---- Status badge variant map ----\nconst statusVariantMap: Record<string, 'success' | 'warning' | 'error' | 'info' | 'default' | 'muted'> = {\n  for_sale: 'success',\n  for_rent: 'info',\n  sold: 'muted',\n  rented: 'muted',\n  under_contract: 'warning',\n  off_market: 'error',\n};\n\n// ---- Tab definitions ----\ntype TabId = 'details' | 'amenities' | 'location' | 'documents';\nconst tabs: { id: TabId; label: string }[] = [\n  { id: 'details', label: 'Details' },\n  { id: 'amenities', label: 'Amenities' },\n  { id: 'location', label: 'Location' },\n  { id: 'documents', label: 'Documents' },\n];\n\nexport const PropertyDetailPage = () => {\n  const { id } = useParams<{ id: string }>();\n  const navigate = useNavigate();\n  const { data: properties, loading } = useProperties();\n\n  const property = useMemo(() => properties.find((p) => p.id === id) ?? null, [properties, id]);\n  const similarProperties = useMemo(() => properties.filter((p) => p.id !== id).slice(0, 3), [properties, id]);\n\n  const [currentImageIndex, setCurrentImageIndex] = useState(0);\n  const [isFavorited, setIsFavorited] = useState(false);\n  const [activeTab, setActiveTab] = useState<TabId>('details');\n\n  // ---- Loading ----\n  if (loading) {\n    return (\n      <div className=\"flex items-center justify-center p-12\">\n        <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground border-t-foreground\" />\n      </div>\n    );\n  }\n\n  // ---- Not Found ----\n  if (!property) {\n    return (\n      <div className=\"p-6\">\n        <EmptyState\n          icon={<Building className=\"h-12 w-12\" />}\n          title=\"Property Not Found\"\n          description=\"The property you're looking for doesn't exist or has been removed.\"\n          action={\n            <button\n              onClick={() => navigate('../')}\n              className=\"inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background\"\n            >\n              <ArrowLeft className=\"h-4 w-4\" />\n              Back to Properties\n            </button>\n          }\n        />\n      </div>\n    );\n  }\n\n  const breadcrumbs: BreadcrumbItem[] = [{ label: 'Properties', href: '../' }, { label: property.title }];\n\n  const formatPrice = (price: Property['price']) => {\n    const amount = formatCurrency(price.amount, price.currency);\n    if (price.type === 'rent' && price.period) return `${amount}/${price.period.replace('ly', '')}`;\n    return amount;\n  };\n\n  const nextImage = () => setCurrentImageIndex((prev) => (prev === property.images.length - 1 ? 0 : prev + 1));\n  const prevImage = () => setCurrentImageIndex((prev) => (prev === 0 ? property.images.length - 1 : prev - 1));\n\n  const handleShare = () => {\n    if (navigator.share) {\n      navigator.share({ title: property.title, text: property.description, url: window.location.href });\n    } else {\n      navigator.clipboard.writeText(window.location.href);\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Breadcrumbs + Back */}\n      <Breadcrumbs items={breadcrumbs} />\n\n      {/* Header */}\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <button\n          onClick={() => navigate('../')}\n          className=\"inline-flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" />\n          Back\n        </button>\n        <StatusBadge\n          label={property.status.replace('_', ' ')}\n          variant={statusVariantMap[property.status] ?? 'default'}\n          dot\n        />\n        {property.verificationStatus === 'verified' && <StatusBadge label=\"Verified\" variant=\"success\" dot />}\n        {property.price.negotiable && <StatusBadge label=\"Negotiable\" variant=\"info\" />}\n      </div>\n\n      {/* Image Gallery */}\n      {property.images.length > 0 && (\n        <div className=\"relative overflow-hidden rounded-xl border border-border\">\n          <img\n            src={property.images[currentImageIndex]?.url}\n            alt={property.images[currentImageIndex]?.title ?? property.title}\n            className=\"h-80 w-full object-cover sm:h-96\"\n          />\n          {property.images.length > 1 && (\n            <>\n              <button\n                onClick={prevImage}\n                className=\"absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70\"\n              >\n                <ChevronLeft className=\"h-5 w-5\" />\n              </button>\n              <button\n                onClick={nextImage}\n                className=\"absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70\"\n              >\n                <ChevronRight className=\"h-5 w-5\" />\n              </button>\n              <div className=\"absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2\">\n                {property.images.map((_, index) => (\n                  <button\n                    key={index}\n                    className={cn('h-2 w-2 rounded-full', index === currentImageIndex ? 'bg-white' : 'bg-white/50')}\n                    onClick={() => setCurrentImageIndex(index)}\n                  />\n                ))}\n              </div>\n            </>\n          )}\n          {/* Overlay actions */}\n          <div className=\"absolute right-4 top-4 flex gap-2\">\n            <button\n              onClick={() => setIsFavorited(!isFavorited)}\n              className=\"rounded-full bg-card/80 p-2 backdrop-blur-sm transition-colors hover:bg-card\"\n            >\n              <Heart className={cn('h-5 w-5', isFavorited ? 'fill-red-500 text-red-500' : 'text-muted-foreground')} />\n            </button>\n            <button\n              onClick={handleShare}\n              className=\"rounded-full bg-card/80 p-2 backdrop-blur-sm transition-colors hover:bg-card\"\n            >\n              <Share2 className=\"h-5 w-5 text-muted-foreground\" />\n            </button>\n          </div>\n          <div className=\"absolute bottom-4 right-4\">\n            <span className=\"rounded-md bg-black/60 px-2 py-1 text-xs font-medium text-white\">\n              {currentImageIndex + 1} / {property.images.length}\n            </span>\n          </div>\n        </div>\n      )}\n\n      {/* Main Content Grid */}\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n        {/* Left: Main content */}\n        <div className=\"space-y-6 lg:col-span-2\">\n          {/* Title + Price + Key Specs */}\n          <div className=\"rounded-lg border border-border bg-card p-6\">\n            <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n              <div>\n                <h1 className=\"text-2xl font-bold text-foreground\">{property.title}</h1>\n                <div className=\"mt-2 flex items-center text-muted-foreground\">\n                  <MapPin className=\"mr-1.5 h-4 w-4 shrink-0\" />\n                  <span className=\"text-sm\">\n                    {property.location.address}, {property.location.neighborhood}, {property.location.city}\n                  </span>\n                </div>\n              </div>\n              <div className=\"text-right\">\n                <div className=\"text-2xl font-bold text-foreground\">{formatPrice(property.price)}</div>\n                {property.price.pricePerSqft && (\n                  <div className=\"text-sm text-muted-foreground\">\n                    {formatCurrency(property.price.pricePerSqft)}/sqft\n                  </div>\n                )}\n              </div>\n            </div>\n\n            {/* Key Specs */}\n            <div className=\"mt-6 grid grid-cols-2 gap-4 border-t border-border pt-6 sm:grid-cols-4\">\n              {property.specifications.bedrooms != null && (\n                <div className=\"flex items-center gap-2 text-sm text-foreground\">\n                  <Bed className=\"h-5 w-5 text-muted-foreground\" />\n                  <span>\n                    {property.specifications.bedrooms} Bed{property.specifications.bedrooms > 1 ? 's' : ''}\n                  </span>\n                </div>\n              )}\n              {property.specifications.bathrooms != null && (\n                <div className=\"flex items-center gap-2 text-sm text-foreground\">\n                  <Bath className=\"h-5 w-5 text-muted-foreground\" />\n                  <span>\n                    {property.specifications.bathrooms} Bath{property.specifications.bathrooms > 1 ? 's' : ''}\n                  </span>\n                </div>\n              )}\n              <div className=\"flex items-center gap-2 text-sm text-foreground\">\n                <Square className=\"h-5 w-5 text-muted-foreground\" />\n                <span>{formatNumber(property.specifications.totalArea)} sqft</span>\n              </div>\n              {property.specifications.parking != null && property.specifications.parking > 0 && (\n                <div className=\"flex items-center gap-2 text-sm text-foreground\">\n                  <Car className=\"h-5 w-5 text-muted-foreground\" />\n                  <span>{property.specifications.parking} Parking</span>\n                </div>\n              )}\n            </div>\n\n            {/* Description */}\n            <div className=\"mt-6 border-t border-border pt-6\">\n              <h3 className=\"mb-3 text-base font-semibold text-foreground\">Description</h3>\n              <p className=\"text-sm leading-relaxed text-muted-foreground\">{property.description}</p>\n            </div>\n          </div>\n\n          {/* Tabbed Content */}\n          <div className=\"rounded-lg border border-border bg-card\">\n            <div className=\"border-b border-border\">\n              <nav className=\"flex space-x-6 overflow-x-auto px-6\">\n                {tabs.map((tab) => (\n                  <button\n                    key={tab.id}\n                    onClick={() => setActiveTab(tab.id)}\n                    className={cn(\n                      'whitespace-nowrap border-b-2 py-3 text-sm font-medium transition-colors',\n                      activeTab === tab.id\n                        ? 'border-foreground text-foreground'\n                        : 'border-transparent text-muted-foreground hover:text-foreground'\n                    )}\n                  >\n                    {tab.label}\n                  </button>\n                ))}\n              </nav>\n            </div>\n\n            <div className=\"p-6\">\n              {/* Details Tab */}\n              {activeTab === 'details' && (\n                <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2\">\n                  <div>\n                    <h4 className=\"mb-3 text-sm font-semibold text-foreground\">Property Information</h4>\n                    <dl className=\"space-y-2 text-sm\">\n                      <div className=\"flex justify-between\">\n                        <dt className=\"text-muted-foreground\">Property Type</dt>\n                        <dd className=\"font-medium capitalize text-foreground\">{property.type}</dd>\n                      </div>\n                      <div className=\"flex justify-between\">\n                        <dt className=\"text-muted-foreground\">Category</dt>\n                        <dd className=\"font-medium capitalize text-foreground\">{property.category}</dd>\n                      </div>\n                      {property.specifications.ageOfProperty != null && (\n                        <div className=\"flex justify-between\">\n                          <dt className=\"text-muted-foreground\">Age of Property</dt>\n                          <dd className=\"font-medium text-foreground\">{property.specifications.ageOfProperty} years</dd>\n                        </div>\n                      )}\n                      <div className=\"flex justify-between\">\n                        <dt className=\"text-muted-foreground\">Furnishing</dt>\n                        <dd className=\"font-medium capitalize text-foreground\">\n                          {property.specifications.furnishingStatus?.replace('_', ' ')}\n                        </dd>\n                      </div>\n                      {property.specifications.facing && (\n                        <div className=\"flex justify-between\">\n                          <dt className=\"text-muted-foreground\">Facing</dt>\n                          <dd className=\"font-medium text-foreground\">{property.specifications.facing}</dd>\n                        </div>\n                      )}\n                      {property.specifications.floors != null && (\n                        <div className=\"flex justify-between\">\n                          <dt className=\"text-muted-foreground\">Floor</dt>\n                          <dd className=\"font-medium text-foreground\">\n                            {property.specifications.floors} of {property.specifications.totalFloors}\n                          </dd>\n                        </div>\n                      )}\n                    </dl>\n                  </div>\n                  <div>\n                    <h4 className=\"mb-3 text-sm font-semibold text-foreground\">Area Details</h4>\n                    <dl className=\"space-y-2 text-sm\">\n                      <div className=\"flex justify-between\">\n                        <dt className=\"text-muted-foreground\">Total Area</dt>\n                        <dd className=\"font-medium text-foreground\">\n                          {formatNumber(property.specifications.totalArea)} sqft\n                        </dd>\n                      </div>\n                      {property.specifications.carpetArea && (\n                        <div className=\"flex justify-between\">\n                          <dt className=\"text-muted-foreground\">Carpet Area</dt>\n                          <dd className=\"font-medium text-foreground\">\n                            {formatNumber(property.specifications.carpetArea)} sqft\n                          </dd>\n                        </div>\n                      )}\n                      {property.specifications.builtUpArea && (\n                        <div className=\"flex justify-between\">\n                          <dt className=\"text-muted-foreground\">Built-up Area</dt>\n                          <dd className=\"font-medium text-foreground\">\n                            {formatNumber(property.specifications.builtUpArea)} sqft\n                          </dd>\n                        </div>\n                      )}\n                      {property.price.pricePerSqft && (\n                        <div className=\"flex justify-between\">\n                          <dt className=\"text-muted-foreground\">Price per sqft</dt>\n                          <dd className=\"font-medium text-foreground\">{formatCurrency(property.price.pricePerSqft)}</dd>\n                        </div>\n                      )}\n                    </dl>\n                  </div>\n                </div>\n              )}\n\n              {/* Amenities Tab */}\n              {activeTab === 'amenities' && (\n                <div>\n                  {property.amenities.length > 0 ? (\n                    <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n                      {property.amenities.map((amenity) => (\n                        <div key={amenity.id} className=\"flex items-center gap-2 rounded-lg bg-muted/50 p-3\">\n                          <CheckCircle className=\"h-4 w-4 text-emerald-600 dark:text-emerald-400\" />\n                          <span className=\"text-sm text-foreground\">{amenity.name}</span>\n                        </div>\n                      ))}\n                    </div>\n                  ) : (\n                    <p className=\"text-sm text-muted-foreground\">No amenities listed for this property.</p>\n                  )}\n\n                  {/* Features */}\n                  {property.features.length > 0 && (\n                    <div className=\"mt-6 border-t border-border pt-6\">\n                      <h4 className=\"mb-3 text-sm font-semibold text-foreground\">Additional Features</h4>\n                      <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2\">\n                        {property.features.map((feature) => (\n                          <div key={feature.id} className=\"flex items-center gap-2 text-sm text-foreground\">\n                            <CheckCircle className=\"h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400\" />\n                            <span>{feature.name}</span>\n                            <span className=\"text-xs text-muted-foreground\">({feature.category})</span>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              )}\n\n              {/* Location Tab */}\n              {activeTab === 'location' && (\n                <div className=\"space-y-4\">\n                  <div>\n                    <div className=\"mb-1 text-xs text-muted-foreground\">Full Address</div>\n                    <div className=\"text-sm font-medium text-foreground\">{property.location.address}</div>\n                  </div>\n                  <div className=\"grid grid-cols-1 gap-4 text-sm sm:grid-cols-3\">\n                    <div>\n                      <div className=\"mb-1 text-xs text-muted-foreground\">Neighborhood</div>\n                      <div className=\"font-medium text-foreground\">{property.location.neighborhood}</div>\n                    </div>\n                    <div>\n                      <div className=\"mb-1 text-xs text-muted-foreground\">City, State</div>\n                      <div className=\"font-medium text-foreground\">\n                        {property.location.city}, {property.location.state}\n                      </div>\n                    </div>\n                    <div>\n                      <div className=\"mb-1 text-xs text-muted-foreground\">PIN / ZIP</div>\n                      <div className=\"font-medium text-foreground\">{property.location.pincode}</div>\n                    </div>\n                  </div>\n\n                  {/* Landmarks */}\n                  {property.location.landmarks.length > 0 && (\n                    <div className=\"border-t border-border pt-4\">\n                      <h4 className=\"mb-2 text-xs font-medium text-muted-foreground\">Nearby Landmarks</h4>\n                      <div className=\"flex flex-wrap gap-2\">\n                        {property.location.landmarks.map((landmark) => (\n                          <span key={landmark} className=\"rounded-full bg-muted px-3 py-1 text-xs text-foreground\">\n                            {landmark}\n                          </span>\n                        ))}\n                      </div>\n                    </div>\n                  )}\n\n                  {/* Map Placeholder */}\n                  <div className=\"flex h-64 items-center justify-center rounded-lg bg-muted\">\n                    <div className=\"text-center text-muted-foreground\">\n                      <MapPin className=\"mx-auto mb-2 h-8 w-8\" />\n                      <p className=\"text-sm\">Interactive map will be displayed here</p>\n                      <p className=\"text-xs\">\n                        Lat: {property.location.coordinates.latitude}, Lng: {property.location.coordinates.longitude}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              )}\n\n              {/* Documents Tab */}\n              {activeTab === 'documents' && (\n                <div>\n                  {property.documents.length > 0 ? (\n                    <div className=\"space-y-3\">\n                      {property.documents.map((doc) => (\n                        <div\n                          key={doc.id}\n                          className=\"flex items-center justify-between rounded-lg border border-border p-3\"\n                        >\n                          <div className=\"flex items-center gap-3\">\n                            <FileText className=\"h-5 w-5 text-muted-foreground\" />\n                            <div>\n                              <p className=\"text-sm font-medium text-foreground\">{doc.name}</p>\n                              <p className=\"text-xs text-muted-foreground\">\n                                Uploaded {formatDate(doc.uploadedAt.toISOString())}\n                              </p>\n                            </div>\n                          </div>\n                          <StatusBadge\n                            label={doc.verificationStatus}\n                            variant={\n                              doc.verificationStatus === 'verified'\n                                ? 'success'\n                                : doc.verificationStatus === 'pending'\n                                  ? 'warning'\n                                  : 'error'\n                            }\n                          />\n                        </div>\n                      ))}\n                    </div>\n                  ) : (\n                    <p className=\"text-sm text-muted-foreground\">No documents available for this property.</p>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Right Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Contact Owner */}\n          <div className=\"rounded-lg border border-border bg-card p-5\">\n            <h3 className=\"mb-4 text-base font-semibold text-foreground\">Contact Owner</h3>\n            <div className=\"mb-4 flex items-center gap-3\">\n              <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground\">\n                {property.owner.name\n                  .split(' ')\n                  .map((n) => n[0])\n                  .join('')}\n              </div>\n              <div>\n                <div className=\"flex items-center gap-1.5 text-sm font-medium text-foreground\">\n                  {property.owner.name}\n                  {property.owner.verified && <CheckCircle className=\"h-3.5 w-3.5 text-emerald-600\" />}\n                </div>\n                <div className=\"text-xs text-muted-foreground\">Property Owner</div>\n              </div>\n            </div>\n            <div className=\"space-y-2\">\n              <button className=\"flex w-full items-center justify-center gap-2 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90\">\n                <Phone className=\"h-4 w-4\" />\n                Call Owner\n              </button>\n              <button className=\"flex w-full items-center justify-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted\">\n                <Mail className=\"h-4 w-4\" />\n                Send Message\n              </button>\n              <button className=\"flex w-full items-center justify-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted\">\n                <MessageCircle className=\"h-4 w-4\" />\n                Start Chat\n              </button>\n            </div>\n          </div>\n\n          {/* Quick Actions */}\n          <div className=\"rounded-lg border border-border bg-card p-5\">\n            <h3 className=\"mb-4 text-base font-semibold text-foreground\">Quick Actions</h3>\n            <div className=\"space-y-2\">\n              <button className=\"flex w-full items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted\">\n                <Calendar className=\"h-4 w-4\" />\n                Schedule Viewing\n              </button>\n              <button className=\"flex w-full items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted\">\n                <DollarSign className=\"h-4 w-4\" />\n                Make Offer\n              </button>\n              <button className=\"flex w-full items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted\">\n                <TrendingUp className=\"h-4 w-4\" />\n                Investment Analysis\n              </button>\n              <button className=\"flex w-full items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted\">\n                <Shield className=\"h-4 w-4\" />\n                Request Inspection\n              </button>\n            </div>\n          </div>\n\n          {/* Property Stats */}\n          <div className=\"rounded-lg border border-border bg-card p-5\">\n            <h3 className=\"mb-4 text-base font-semibold text-foreground\">Property Stats</h3>\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center justify-between text-sm\">\n                <div className=\"flex items-center gap-2 text-muted-foreground\">\n                  <Eye className=\"h-4 w-4\" /> Views\n                </div>\n                <span className=\"font-medium text-foreground\">1,234</span>\n              </div>\n              <div className=\"flex items-center justify-between text-sm\">\n                <div className=\"flex items-center gap-2 text-muted-foreground\">\n                  <Heart className=\"h-4 w-4\" /> Favorites\n                </div>\n                <span className=\"font-medium text-foreground\">89</span>\n              </div>\n              <div className=\"flex items-center justify-between text-sm\">\n                <div className=\"flex items-center gap-2 text-muted-foreground\">\n                  <Calendar className=\"h-4 w-4\" /> Listed\n                </div>\n                <span className=\"font-medium text-foreground\">{formatDate(property.createdAt.toISOString())}</span>\n              </div>\n              <div className=\"flex items-center justify-between text-sm\">\n                <div className=\"flex items-center gap-2 text-muted-foreground\">\n                  <Star className=\"h-4 w-4\" /> Rating\n                </div>\n                <span className=\"font-medium text-foreground\">4.8/5</span>\n              </div>\n            </div>\n          </div>\n\n          {/* Similar Properties */}\n          {similarProperties.length > 0 && (\n            <div className=\"rounded-lg border border-border bg-card p-5\">\n              <h3 className=\"mb-4 text-base font-semibold text-foreground\">Similar Properties</h3>\n              <div className=\"space-y-3\">\n                {similarProperties.map((sp) => (\n                  <button\n                    key={sp.id}\n                    onClick={() => navigate(`../${sp.id}`)}\n                    className=\"flex w-full items-start gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:bg-muted/50\"\n                  >\n                    {sp.images[0] && (\n                      <img src={sp.images[0].url} alt={sp.title} className=\"h-14 w-14 rounded object-cover\" />\n                    )}\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"truncate text-sm font-medium text-foreground\">{sp.title}</div>\n                      <div className=\"text-sm font-semibold text-foreground\">{formatCurrency(sp.price.amount)}</div>\n                      <div className=\"truncate text-xs text-muted-foreground\">\n                        {sp.location.neighborhood}, {sp.location.city}\n                      </div>\n                    </div>\n                  </button>\n                ))}\n              </div>\n              <button\n                onClick={() => navigate('../')}\n                className=\"mt-3 w-full rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted\"\n              >\n                View All Properties\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAwCA,IAAM,IAAmG;CACvG,UAAU;CACV,UAAU;CACV,MAAM;CACN,QAAQ;CACR,gBAAgB;CAChB,YAAY;CACb,EAIK,IAAuC;CAC3C;EAAE,IAAI;EAAW,OAAO;EAAW;CACnC;EAAE,IAAI;EAAa,OAAO;EAAa;CACvC;EAAE,IAAI;EAAY,OAAO;EAAY;CACrC;EAAE,IAAI;EAAa,OAAO;EAAa;CACxC,EAEY,UAA2B;CACtC,IAAM,EAAE,UAAO,GAA2B,EACpC,IAAW,GAAa,EACxB,EAAE,MAAM,GAAY,eAAY,GAAe,EAE/C,IAAW,QAAc,EAAW,MAAM,MAAM,EAAE,OAAO,EAAG,IAAI,MAAM,CAAC,GAAY,EAAG,CAAC,EACvF,IAAoB,QAAc,EAAW,QAAQ,MAAM,EAAE,OAAO,EAAG,CAAC,MAAM,GAAG,EAAE,EAAE,CAAC,GAAY,EAAG,CAAC,EAEtG,CAAC,GAAmB,KAAwB,EAAS,EAAE,EACvD,CAAC,GAAa,KAAkB,EAAS,GAAM,EAC/C,CAAC,GAAW,KAAgB,EAAgB,UAAU;AAoD5D,QAjDI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD,EAAK,WAAU,0FAA2F,CAAA;EACtG,CAAA,GAKL,IAyCH,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,GAAD,EAAa,OAtBqB,CAAC;IAAE,OAAO;IAAc,MAAM;IAAO,EAAE,EAAE,OAAO,EAAS,OAAO,CAAC,EAsBhE,CAAA;GAGnC,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MACE,eAAe,EAAS,MAAM;MAC9B,WAAU;gBAFZ,CAIE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,OAE1B;;KACT,kBAAC,GAAD;MACE,OAAO,EAAS,OAAO,QAAQ,KAAK,IAAI;MACxC,SAAS,EAAiB,EAAS,WAAW;MAC9C,KAAA;MACA,CAAA;KACD,EAAS,uBAAuB,cAAc,kBAAC,GAAD;MAAa,OAAM;MAAW,SAAQ;MAAU,KAAA;MAAM,CAAA;KACpG,EAAS,MAAM,cAAc,kBAAC,GAAD;MAAa,OAAM;MAAa,SAAQ;MAAS,CAAA;KAC3E;;GAGL,EAAS,OAAO,SAAS,KACxB,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MACE,KAAK,EAAS,OAAO,IAAoB;MACzC,KAAK,EAAS,OAAO,IAAoB,SAAS,EAAS;MAC3D,WAAU;MACV,CAAA;KACD,EAAS,OAAO,SAAS,KACxB,kBAAA,GAAA,EAAA,UAAA;MACE,kBAAC,UAAD;OACE,eA5CU,GAAsB,MAAU,MAAS,IAAI,EAAS,OAAO,SAAS,IAAI,IAAO,EAAG;OA6C9F,WAAU;iBAEV,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;OAC5B,CAAA;MACT,kBAAC,UAAD;OACE,eAnDU,GAAsB,MAAU,MAAS,EAAS,OAAO,SAAS,IAAI,IAAI,IAAO,EAAG;OAoD9F,WAAU;iBAEV,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA;OAC7B,CAAA;MACT,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAS,OAAO,KAAK,GAAG,MACvB,kBAAC,UAAD;QAEE,WAAW,EAAG,wBAAwB,MAAU,IAAoB,aAAa,cAAc;QAC/F,eAAe,EAAqB,EAAM;QAC1C,EAHK,EAGL,CACF;OACE,CAAA;MACL,EAAA,CAAA;KAGL,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,eAAe,EAAe,CAAC,EAAY;OAC3C,WAAU;iBAEV,kBAAC,GAAD,EAAO,WAAW,EAAG,WAAW,IAAc,8BAA8B,wBAAwB,EAAI,CAAA;OACjG,CAAA,EACT,kBAAC,UAAD;OACE,eAzEc;AACxB,QAAI,UAAU,QACZ,UAAU,MAAM;SAAE,OAAO,EAAS;SAAO,MAAM,EAAS;SAAa,KAAK,OAAO,SAAS;SAAM,CAAC,GAEjG,UAAU,UAAU,UAAU,OAAO,SAAS,KAAK;;OAsE3C,WAAU;iBAEV,kBAAC,GAAD,EAAQ,WAAU,iCAAkC,CAAA;OAC7C,CAAA,CACL;;KACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACG,IAAoB;QAAE;QAAI,EAAS,OAAO;QACtC;;MACH,CAAA;KACF;;GAIR,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CAEE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;SAAI,WAAU;mBAAsC,EAAS;SAAW,CAAA,EACxE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,2BAA4B,CAAA,EAC9C,kBAAC,QAAD;UAAM,WAAU;oBAAhB;WACG,EAAS,SAAS;WAAQ;WAAG,EAAS,SAAS;WAAa;WAAG,EAAS,SAAS;WAC7E;YACH;WACF,EAAA,CAAA,EACN,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;sBAjHR,MAA6B;WAChD,IAAM,IAAS,EAAe,EAAM,QAAQ,EAAM,SAAS;AAE3D,kBADI,EAAM,SAAS,UAAU,EAAM,SAAe,GAAG,EAAO,GAAG,EAAM,OAAO,QAAQ,MAAM,GAAG,KACtF;aA8GsE,EAAS,MAAM;UAAO,CAAA,EACtF,EAAS,MAAM,gBACd,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACG,EAAe,EAAS,MAAM,aAAa,EAAC,QACzC;YAEJ;WACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACG,EAAS,eAAe,YAAY,QACnC,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAK,WAAU,iCAAkC,CAAA,EACjD,kBAAC,QAAD,EAAA,UAAA;WACG,EAAS,eAAe;WAAS;WAAK,EAAS,eAAe,WAAW,IAAI,MAAM;WAC/E,EAAA,CAAA,CACH;;SAEP,EAAS,eAAe,aAAa,QACpC,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,iCAAkC,CAAA,EAClD,kBAAC,QAAD,EAAA,UAAA;WACG,EAAS,eAAe;WAAU;WAAM,EAAS,eAAe,YAAY,IAAI,MAAM;WAClF,EAAA,CAAA,CACH;;SAER,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,iCAAkC,CAAA,EACpD,kBAAC,QAAD,EAAA,UAAA,CAAO,EAAa,EAAS,eAAe,UAAU,EAAC,QAAY,EAAA,CAAA,CAC/D;;SACL,EAAS,eAAe,WAAW,QAAQ,EAAS,eAAe,UAAU,KAC5E,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAK,WAAU,iCAAkC,CAAA,EACjD,kBAAC,QAAD,EAAA,UAAA,CAAO,EAAS,eAAe,SAAQ,WAAe,EAAA,CAAA,CAClD;;SAEJ;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA+C;SAAgB,CAAA,EAC7E,kBAAC,KAAD;SAAG,WAAU;mBAAiD,EAAS;SAAgB,CAAA,CACnF;;OACF;SAGN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAK,KAAK,MACT,kBAAC,UAAD;SAEE,eAAe,EAAa,EAAI,GAAG;SACnC,WAAW,EACT,2EACA,MAAc,EAAI,KACd,sCACA,iEACL;mBAEA,EAAI;SACE,EAVF,EAAI,GAUF,CACT;QACE,CAAA;OACF,CAAA,EAEN,kBAAC,OAAD;OAAK,WAAU;iBAAf;QAEG,MAAc,aACb,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;UAAI,WAAU;oBAA6C;UAAyB,CAAA,EACpF,kBAAC,MAAD;UAAI,WAAU;oBAAd;WACE,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,MAAD;aAAI,WAAU;uBAAwB;aAAkB,CAAA,EACxD,kBAAC,MAAD;aAAI,WAAU;uBAA0C,EAAS;aAAU,CAAA,CACvE;;WACN,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,MAAD;aAAI,WAAU;uBAAwB;aAAa,CAAA,EACnD,kBAAC,MAAD;aAAI,WAAU;uBAA0C,EAAS;aAAc,CAAA,CAC3E;;WACL,EAAS,eAAe,iBAAiB,QACxC,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,MAAD;aAAI,WAAU;uBAAwB;aAAoB,CAAA,EAC1D,kBAAC,MAAD;aAAI,WAAU;uBAAd,CAA6C,EAAS,eAAe,eAAc,SAAW;eAC1F;;WAER,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,MAAD;aAAI,WAAU;uBAAwB;aAAe,CAAA,EACrD,kBAAC,MAAD;aAAI,WAAU;uBACX,EAAS,eAAe,kBAAkB,QAAQ,KAAK,IAAI;aACzD,CAAA,CACD;;WACL,EAAS,eAAe,UACvB,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,MAAD;aAAI,WAAU;uBAAwB;aAAW,CAAA,EACjD,kBAAC,MAAD;aAAI,WAAU;uBAA+B,EAAS,eAAe;aAAY,CAAA,CAC7E;;WAEP,EAAS,eAAe,UAAU,QACjC,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,MAAD;aAAI,WAAU;uBAAwB;aAAU,CAAA,EAChD,kBAAC,MAAD;aAAI,WAAU;uBAAd;cACG,EAAS,eAAe;cAAO;cAAK,EAAS,eAAe;cAC1D;eACD;;WAEL;YACD,EAAA,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;UAAI,WAAU;oBAA6C;UAAiB,CAAA,EAC5E,kBAAC,MAAD;UAAI,WAAU;oBAAd;WACE,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,MAAD;aAAI,WAAU;uBAAwB;aAAe,CAAA,EACrD,kBAAC,MAAD;aAAI,WAAU;uBAAd,CACG,EAAa,EAAS,eAAe,UAAU,EAAC,QAC9C;eACD;;WACL,EAAS,eAAe,cACvB,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,MAAD;aAAI,WAAU;uBAAwB;aAAgB,CAAA,EACtD,kBAAC,MAAD;aAAI,WAAU;uBAAd,CACG,EAAa,EAAS,eAAe,WAAW,EAAC,QAC/C;eACD;;WAEP,EAAS,eAAe,eACvB,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,MAAD;aAAI,WAAU;uBAAwB;aAAkB,CAAA,EACxD,kBAAC,MAAD;aAAI,WAAU;uBAAd,CACG,EAAa,EAAS,eAAe,YAAY,EAAC,QAChD;eACD;;WAEP,EAAS,MAAM,gBACd,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,MAAD;aAAI,WAAU;uBAAwB;aAAmB,CAAA,EACzD,kBAAC,MAAD;aAAI,WAAU;uBAA+B,EAAe,EAAS,MAAM,aAAa;aAAM,CAAA,CAC1F;;WAEL;YACD,EAAA,CAAA,CACF;;QAIP,MAAc,eACb,kBAAC,OAAD,EAAA,UAAA,CACG,EAAS,UAAU,SAAS,IAC3B,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAS,UAAU,KAAK,MACvB,kBAAC,OAAD;UAAsB,WAAU;oBAAhC,CACE,kBAAC,GAAD,EAAa,WAAU,kDAAmD,CAAA,EAC1E,kBAAC,QAAD;WAAM,WAAU;qBAA2B,EAAQ;WAAY,CAAA,CAC3D;YAHI,EAAQ,GAGZ,CACN;SACE,CAAA,GAEN,kBAAC,KAAD;SAAG,WAAU;mBAAgC;SAA0C,CAAA,EAIxF,EAAS,SAAS,SAAS,KAC1B,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,MAAD;UAAI,WAAU;oBAA6C;UAAwB,CAAA,EACnF,kBAAC,OAAD;UAAK,WAAU;oBACZ,EAAS,SAAS,KAAK,MACtB,kBAAC,OAAD;WAAsB,WAAU;qBAAhC;YACE,kBAAC,GAAD,EAAa,WAAU,sDAAuD,CAAA;YAC9E,kBAAC,QAAD,EAAA,UAAO,EAAQ,MAAY,CAAA;YAC3B,kBAAC,QAAD;aAAM,WAAU;uBAAhB;cAAgD;cAAE,EAAQ;cAAS;cAAQ;;YACvE;aAJI,EAAQ,GAIZ,CACN;UACE,CAAA,CACF;WAEJ,EAAA,CAAA;QAIP,MAAc,cACb,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;WAAK,WAAU;qBAAqC;WAAkB,CAAA,EACtE,kBAAC,OAAD;WAAK,WAAU;qBAAuC,EAAS,SAAS;WAAc,CAAA,CAClF,EAAA,CAAA;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;aAAK,WAAU;uBAAqC;aAAkB,CAAA,EACtE,kBAAC,OAAD;aAAK,WAAU;uBAA+B,EAAS,SAAS;aAAmB,CAAA,CAC/E,EAAA,CAAA;YACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;aAAK,WAAU;uBAAqC;aAAiB,CAAA,EACrE,kBAAC,OAAD;aAAK,WAAU;uBAAf;cACG,EAAS,SAAS;cAAK;cAAG,EAAS,SAAS;cACzC;eACF,EAAA,CAAA;YACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;aAAK,WAAU;uBAAqC;aAAe,CAAA,EACnE,kBAAC,OAAD;aAAK,WAAU;uBAA+B,EAAS,SAAS;aAAc,CAAA,CAC1E,EAAA,CAAA;YACF;;UAGL,EAAS,SAAS,UAAU,SAAS,KACpC,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,MAAD;YAAI,WAAU;sBAAiD;YAAqB,CAAA,EACpF,kBAAC,OAAD;YAAK,WAAU;sBACZ,EAAS,SAAS,UAAU,KAAK,MAChC,kBAAC,QAAD;aAAqB,WAAU;uBAC5B;aACI,EAFI,EAEJ,CACP;YACE,CAAA,CACF;;UAIR,kBAAC,OAAD;WAAK,WAAU;qBACb,kBAAC,OAAD;YAAK,WAAU;sBAAf;aACE,kBAAC,GAAD,EAAQ,WAAU,wBAAyB,CAAA;aAC3C,kBAAC,KAAD;cAAG,WAAU;wBAAU;cAA0C,CAAA;aACjE,kBAAC,KAAD;cAAG,WAAU;wBAAb;eAAuB;eACf,EAAS,SAAS,YAAY;eAAS;eAAQ,EAAS,SAAS,YAAY;eACjF;;aACA;;WACF,CAAA;UACF;;QAIP,MAAc,eACb,kBAAC,OAAD,EAAA,UACG,EAAS,UAAU,SAAS,IAC3B,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAS,UAAU,KAAK,MACvB,kBAAC,OAAD;UAEE,WAAU;oBAFZ,CAIE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAU,WAAU,iCAAkC,CAAA,EACtD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;YAAG,WAAU;sBAAuC,EAAI;YAAS,CAAA,EACjE,kBAAC,KAAD;YAAG,WAAU;sBAAb,CAA6C,aACjC,EAAW,EAAI,WAAW,aAAa,CAAC,CAChD;cACA,EAAA,CAAA,CACF;cACN,kBAAC,GAAD;WACE,OAAO,EAAI;WACX,SACE,EAAI,uBAAuB,aACvB,YACA,EAAI,uBAAuB,YACzB,YACA;WAER,CAAA,CACE;YAtBC,EAAI,GAsBL,CACN;SACE,CAAA,GAEN,kBAAC,KAAD;SAAG,WAAU;mBAAgC;SAA6C,CAAA,EAExF,CAAA;QAEJ;SACF;QACF;QAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,MAAD;SAAI,WAAU;mBAA+C;SAAkB,CAAA;QAC/E,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBACZ,EAAS,MAAM,KACb,MAAM,IAAI,CACV,KAAK,MAAM,EAAE,GAAG,CAChB,KAAK,GAAG;UACP,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACG,EAAS,MAAM,MACf,EAAS,MAAM,YAAY,kBAAC,GAAD,EAAa,WAAU,gCAAiC,CAAA,CAChF;aACN,kBAAC,OAAD;UAAK,WAAU;oBAAgC;UAAoB,CAAA,CAC/D,EAAA,CAAA,CACF;;QACN,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,UAAD;WAAQ,WAAU;qBAAlB,CACE,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA,EAAA,aAEtB;;UACT,kBAAC,UAAD;WAAQ,WAAU;qBAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,eAErB;;UACT,kBAAC,UAAD;WAAQ,WAAU;qBAAlB,CACE,kBAAC,GAAD,EAAe,WAAU,WAAY,CAAA,EAAA,aAE9B;;UACL;;QACF;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;kBAA+C;QAAkB,CAAA,EAC/E,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,UAAD;UAAQ,WAAU;oBAAlB,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAAA,mBAEzB;;SACT,kBAAC,UAAD;UAAQ,WAAU;oBAAlB,CACE,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,EAAA,aAE3B;;SACT,kBAAC,UAAD;UAAQ,WAAU;oBAAlB,CACE,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,EAAA,sBAE3B;;SACT,kBAAC,UAAD;UAAQ,WAAU;oBAAlB,CACE,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA,EAAA,qBAEvB;;SACL;UACF;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;kBAA+C;QAAmB,CAAA,EAChF,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAK,WAAU,WAAY,CAAA,EAAA,SACvB;cACN,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAY,CAAA,CACtD;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA,EAAA,aACzB;cACN,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAS,CAAA,CACnD;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAAA,UAC5B;cACN,kBAAC,QAAD;WAAM,WAAU;qBAA+B,EAAW,EAAS,UAAU,aAAa,CAAC;WAAQ,CAAA,CAC/F;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,UACxB;cACN,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAY,CAAA,CACtD;;SACF;UACF;;MAGL,EAAkB,SAAS,KAC1B,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,MAAD;SAAI,WAAU;mBAA+C;SAAuB,CAAA;QACpF,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAkB,KAAK,MACtB,kBAAC,UAAD;UAEE,eAAe,EAAS,MAAM,EAAG,KAAK;UACtC,WAAU;oBAHZ,CAKG,EAAG,OAAO,MACT,kBAAC,OAAD;WAAK,KAAK,EAAG,OAAO,GAAG;WAAK,KAAK,EAAG;WAAO,WAAU;WAAmC,CAAA,EAE1F,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACE,kBAAC,OAAD;aAAK,WAAU;uBAAgD,EAAG;aAAY,CAAA;YAC9E,kBAAC,OAAD;aAAK,WAAU;uBAAyC,EAAe,EAAG,MAAM,OAAO;aAAO,CAAA;YAC9F,kBAAC,OAAD;aAAK,WAAU;uBAAf;cACG,EAAG,SAAS;cAAa;cAAG,EAAG,SAAS;cACrC;;YACF;aACC;YAdF,EAAG,GAcD,CACT;SACE,CAAA;QACN,kBAAC,UAAD;SACE,eAAe,EAAS,MAAM;SAC9B,WAAU;mBACX;SAEQ,CAAA;QACL;;MAEJ;OACF;;GACF;MAlhBJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD,EAAU,WAAU,aAAc,CAAA;GACxC,OAAM;GACN,aAAY;GACZ,QACE,kBAAC,UAAD;IACE,eAAe,EAAS,MAAM;IAC9B,WAAU;cAFZ,CAIE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,qBAE1B;;GAEX,CAAA;EACE,CAAA"}

package/dist/housingvista/pages/rental/RentalManagementPage.d.ts

@@ -0,0 +1,2 @@
+export declare function RentalManagementPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RentalManagementPage.d.ts.map

package/dist/housingvista/pages/rental/RentalManagementPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RentalManagementPage.d.ts","sourceRoot":"","sources":["../../../../src/housingvista/pages/rental/RentalManagementPage.tsx"],"names":[],"mappings":"AAoDA,wBAAgB,oBAAoB,4CAmOnC"}

package/dist/housingvista/pages/rental/RentalManagementPage.js

@@ -0,0 +1,296 @@
+import { formatCurrency as e, formatDate as t } from "../../utils/helpers.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { StatCard as r } from "../../components/StatCard.js";
+import { DataTable as i } from "../../components/DataTable.js";
+import { StatusBadge as a } from "../../components/StatusBadge.js";
+import { EmptyState as o } from "../../components/EmptyState.js";
+import { FilterBar as s } from "../../components/FilterBar.js";
+import "../../components/index.js";
+import { useRentalUnits as c } from "../../hooks/index.js";
+import { useMemo as l, useState as u } from "react";
+import { AlertCircle as d, Bell as f, Calendar as p, CheckCircle as m, Clock as h, DollarSign as g, FileText as _, Home as v, Plus as y, TrendingUp as b, Users as x } from "lucide-react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/housingvista/pages/rental/RentalManagementPage.tsx
+function w(e) {
+	switch (e) {
+		case "occupied": return "success";
+		case "vacant": return "warning";
+		case "notice_period": return "info";
+		case "maintenance": return "error";
+		default: return "muted";
+	}
+}
+function T(e) {
+	switch (e) {
+		case "paid": return "success";
+		case "pending": return "warning";
+		case "overdue": return "error";
+		default: return "muted";
+	}
+}
+function E() {
+	let { data: E } = c(), [D, O] = u(""), k = l(() => {
+		if (!D) return E;
+		let e = D.toLowerCase();
+		return E.filter((t) => t.propertyTitle.toLowerCase().includes(e) || t.tenantName.toLowerCase().includes(e) || t.unitNumber.toLowerCase().includes(e));
+	}, [E, D]), A = l(() => ({
+		totalUnits: E.length,
+		occupied: E.filter((e) => e.status === "occupied").length,
+		vacant: E.filter((e) => e.status === "vacant").length,
+		monthlyIncome: E.filter((e) => e.status === "occupied" || e.status === "notice_period").reduce((e, t) => e + t.monthlyRent, 0)
+	}), [E]), j = l(() => {
+		let e = E.filter((e) => e.paymentStatus === "paid").length;
+		return {
+			paid: e,
+			pending: E.filter((e) => e.paymentStatus === "pending").length,
+			overdue: E.filter((e) => e.paymentStatus === "overdue").length,
+			collectionRate: E.length > 0 ? e / E.length * 100 : 0
+		};
+	}, [E]);
+	return /* @__PURE__ */ C(n, {
+		title: "Rental Management",
+		description: "Comprehensive property and tenant management dashboard",
+		actions: /* @__PURE__ */ C("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ C("button", {
+				className: "inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90",
+				children: [/* @__PURE__ */ S(y, { className: "h-4 w-4" }), "Add Tenant"]
+			}), /* @__PURE__ */ C("button", {
+				className: "inline-flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted",
+				children: [/* @__PURE__ */ S(_, { className: "h-4 w-4" }), "Generate Agreement"]
+			})]
+		}),
+		children: [
+			/* @__PURE__ */ C("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ S(r, {
+						label: "Total Units",
+						value: A.totalUnits,
+						icon: /* @__PURE__ */ S(v, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ S(r, {
+						label: "Occupied",
+						value: A.occupied,
+						icon: /* @__PURE__ */ S(x, { className: "h-4 w-4" }),
+						trend: "up",
+						change: 5
+					}),
+					/* @__PURE__ */ S(r, {
+						label: "Vacant",
+						value: A.vacant,
+						icon: /* @__PURE__ */ S(v, { className: "h-4 w-4" }),
+						trend: A.vacant > 0 ? "down" : "stable",
+						change: A.vacant > 0 ? -10 : 0
+					}),
+					/* @__PURE__ */ S(r, {
+						label: "Monthly Income",
+						value: A.monthlyIncome,
+						prefix: "$",
+						icon: /* @__PURE__ */ S(g, { className: "h-4 w-4" }),
+						trend: "up",
+						change: 8
+					})
+				]
+			}),
+			/* @__PURE__ */ C("div", {
+				className: "rounded-lg border border-border bg-card p-5 shadow-sm",
+				children: [/* @__PURE__ */ S("h3", {
+					className: "mb-4 text-lg font-semibold text-foreground",
+					children: "Rent Collection"
+				}), /* @__PURE__ */ C("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+					children: [
+						/* @__PURE__ */ C("div", {
+							className: "flex items-center gap-3 rounded-lg bg-emerald-50 p-4 dark:bg-emerald-900/20",
+							children: [/* @__PURE__ */ S(m, { className: "h-5 w-5 text-emerald-600 dark:text-emerald-400" }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+								className: "text-sm text-muted-foreground",
+								children: "Paid"
+							}), /* @__PURE__ */ S("p", {
+								className: "text-xl font-bold text-emerald-600 dark:text-emerald-400",
+								children: j.paid
+							})] })]
+						}),
+						/* @__PURE__ */ C("div", {
+							className: "flex items-center gap-3 rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20",
+							children: [/* @__PURE__ */ S(h, { className: "h-5 w-5 text-amber-600 dark:text-amber-400" }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+								className: "text-sm text-muted-foreground",
+								children: "Pending"
+							}), /* @__PURE__ */ S("p", {
+								className: "text-xl font-bold text-amber-600 dark:text-amber-400",
+								children: j.pending
+							})] })]
+						}),
+						/* @__PURE__ */ C("div", {
+							className: "flex items-center gap-3 rounded-lg bg-red-50 p-4 dark:bg-red-900/20",
+							children: [/* @__PURE__ */ S(d, { className: "h-5 w-5 text-red-600 dark:text-red-400" }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+								className: "text-sm text-muted-foreground",
+								children: "Overdue"
+							}), /* @__PURE__ */ S("p", {
+								className: "text-xl font-bold text-red-600 dark:text-red-400",
+								children: j.overdue
+							})] })]
+						}),
+						/* @__PURE__ */ C("div", {
+							className: "flex items-center gap-3 rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20",
+							children: [/* @__PURE__ */ S(b, { className: "h-5 w-5 text-blue-600 dark:text-blue-400" }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+								className: "text-sm text-muted-foreground",
+								children: "Collection Rate"
+							}), /* @__PURE__ */ C("p", {
+								className: "text-xl font-bold text-blue-600 dark:text-blue-400",
+								children: [j.collectionRate.toFixed(0), "%"]
+							})] })]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ C("div", {
+				className: "grid grid-cols-2 gap-3 sm:grid-cols-4",
+				children: [
+					/* @__PURE__ */ C("button", {
+						className: "flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-4 text-center transition-colors hover:bg-muted",
+						children: [/* @__PURE__ */ S(f, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+							className: "text-sm font-medium text-foreground",
+							children: "Send Reminders"
+						}), /* @__PURE__ */ C("p", {
+							className: "text-xs text-muted-foreground",
+							children: [j.pending + j.overdue, " pending"]
+						})] })]
+					}),
+					/* @__PURE__ */ C("button", {
+						className: "flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-4 text-center transition-colors hover:bg-muted",
+						children: [/* @__PURE__ */ S(g, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+							className: "text-sm font-medium text-foreground",
+							children: "Collect Rent"
+						}), /* @__PURE__ */ C("p", {
+							className: "text-xs text-muted-foreground",
+							children: [j.overdue, " overdue"]
+						})] })]
+					}),
+					/* @__PURE__ */ C("button", {
+						className: "flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-4 text-center transition-colors hover:bg-muted",
+						children: [/* @__PURE__ */ S(_, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+							className: "text-sm font-medium text-foreground",
+							children: "Generate Report"
+						}), /* @__PURE__ */ S("p", {
+							className: "text-xs text-muted-foreground",
+							children: "Monthly"
+						})] })]
+					}),
+					/* @__PURE__ */ C("button", {
+						className: "flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-4 text-center transition-colors hover:bg-muted",
+						children: [/* @__PURE__ */ S(p, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+							className: "text-sm font-medium text-foreground",
+							children: "Schedule Visit"
+						}), /* @__PURE__ */ S("p", {
+							className: "text-xs text-muted-foreground",
+							children: "Property"
+						})] })]
+					})
+				]
+			}),
+			/* @__PURE__ */ C("div", { children: [
+				/* @__PURE__ */ S("h2", {
+					className: "mb-4 text-lg font-semibold text-foreground",
+					children: "Tenant Directory"
+				}),
+				/* @__PURE__ */ S(s, {
+					searchValue: D,
+					onSearchChange: O,
+					searchPlaceholder: "Search units, tenants..."
+				}),
+				/* @__PURE__ */ S("div", {
+					className: "mt-4",
+					children: k.length > 0 ? /* @__PURE__ */ S(i, {
+						columns: [
+							{
+								key: "unitNumber",
+								header: "Unit",
+								render: (e) => /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("div", {
+									className: "font-medium text-foreground",
+									children: e.propertyTitle
+								}), /* @__PURE__ */ C("div", {
+									className: "text-xs text-muted-foreground",
+									children: ["Unit ", e.unitNumber]
+								})] })
+							},
+							{
+								key: "tenantName",
+								header: "Tenant",
+								render: (e) => e.tenantName ? /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("div", {
+									className: "font-medium text-foreground",
+									children: e.tenantName
+								}), /* @__PURE__ */ S("div", {
+									className: "text-xs text-muted-foreground",
+									children: e.tenantEmail
+								})] }) : /* @__PURE__ */ S("span", {
+									className: "text-muted-foreground",
+									children: "-"
+								})
+							},
+							{
+								key: "leaseStart",
+								header: "Lease Start",
+								render: (e) => e.leaseStart ? /* @__PURE__ */ S("span", {
+									className: "text-sm text-foreground",
+									children: t(e.leaseStart)
+								}) : /* @__PURE__ */ S("span", {
+									className: "text-muted-foreground",
+									children: "-"
+								})
+							},
+							{
+								key: "leaseEnd",
+								header: "Lease End",
+								render: (e) => e.leaseEnd ? /* @__PURE__ */ S("span", {
+									className: "text-sm text-foreground",
+									children: t(e.leaseEnd)
+								}) : /* @__PURE__ */ S("span", {
+									className: "text-muted-foreground",
+									children: "-"
+								})
+							},
+							{
+								key: "monthlyRent",
+								header: "Rent",
+								render: (t) => /* @__PURE__ */ S("span", {
+									className: "font-medium text-foreground",
+									children: e(t.monthlyRent)
+								})
+							},
+							{
+								key: "status",
+								header: "Status",
+								render: (e) => /* @__PURE__ */ C("div", {
+									className: "flex flex-col gap-1",
+									children: [/* @__PURE__ */ S(a, {
+										label: e.status.replace("_", " "),
+										variant: w(e.status)
+									}), /* @__PURE__ */ S(a, {
+										label: e.paymentStatus,
+										variant: T(e.paymentStatus)
+									})]
+								})
+							}
+						],
+						data: k,
+						keyField: "id",
+						pageSize: 10
+					}) : /* @__PURE__ */ S(o, {
+						icon: /* @__PURE__ */ S(x, { className: "h-12 w-12" }),
+						title: "No rental units found",
+						description: "Try adjusting your search criteria or add a new tenant.",
+						action: /* @__PURE__ */ C("button", {
+							className: "inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90",
+							children: [/* @__PURE__ */ S(y, { className: "h-4 w-4" }), "Add Tenant"]
+						})
+					})
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { E as RentalManagementPage };
+
+//# sourceMappingURL=RentalManagementPage.js.map

package/dist/housingvista/pages/rental/RentalManagementPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RentalManagementPage.js","names":[],"sources":["../../../../src/housingvista/pages/rental/RentalManagementPage.tsx"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport {\n  Home,\n  Users,\n  DollarSign,\n  TrendingUp,\n  Plus,\n  FileText,\n  Calendar,\n  Bell,\n  CheckCircle,\n  AlertCircle,\n  Clock,\n} from 'lucide-react';\nimport { PageLayout } from '../../components';\nimport { StatCard } from '../../components';\nimport { DataTable, type Column } from '../../components';\nimport { StatusBadge } from '../../components';\nimport { FilterBar } from '../../components';\nimport { EmptyState } from '../../components';\nimport { useRentalUnits } from '../../hooks';\nimport { cn, formatCurrency, formatDate } from '../../utils/helpers';\nimport type { RentalUnit } from '../../types';\n\nfunction getStatusVariant(status: RentalUnit['status']): 'success' | 'warning' | 'error' | 'info' | 'muted' {\n  switch (status) {\n    case 'occupied':\n      return 'success';\n    case 'vacant':\n      return 'warning';\n    case 'notice_period':\n      return 'info';\n    case 'maintenance':\n      return 'error';\n    default:\n      return 'muted';\n  }\n}\n\nfunction getPaymentVariant(status: RentalUnit['paymentStatus']): 'success' | 'warning' | 'error' | 'muted' {\n  switch (status) {\n    case 'paid':\n      return 'success';\n    case 'pending':\n      return 'warning';\n    case 'overdue':\n      return 'error';\n    default:\n      return 'muted';\n  }\n}\n\nexport function RentalManagementPage() {\n  const { data: rentalUnits } = useRentalUnits();\n  const [search, setSearch] = useState('');\n\n  const filtered = useMemo(() => {\n    if (!search) return rentalUnits;\n    const q = search.toLowerCase();\n    return rentalUnits.filter(\n      (u) =>\n        u.propertyTitle.toLowerCase().includes(q) ||\n        u.tenantName.toLowerCase().includes(q) ||\n        u.unitNumber.toLowerCase().includes(q)\n    );\n  }, [rentalUnits, search]);\n\n  const stats = useMemo(() => {\n    const totalUnits = rentalUnits.length;\n    const occupied = rentalUnits.filter((u) => u.status === 'occupied').length;\n    const vacant = rentalUnits.filter((u) => u.status === 'vacant').length;\n    const monthlyIncome = rentalUnits\n      .filter((u) => u.status === 'occupied' || u.status === 'notice_period')\n      .reduce((sum, u) => sum + u.monthlyRent, 0);\n    return { totalUnits, occupied, vacant, monthlyIncome };\n  }, [rentalUnits]);\n\n  const rentCollectionStats = useMemo(() => {\n    const paid = rentalUnits.filter((u) => u.paymentStatus === 'paid').length;\n    const pending = rentalUnits.filter((u) => u.paymentStatus === 'pending').length;\n    const overdue = rentalUnits.filter((u) => u.paymentStatus === 'overdue').length;\n    const collectionRate = rentalUnits.length > 0 ? (paid / rentalUnits.length) * 100 : 0;\n    return { paid, pending, overdue, collectionRate };\n  }, [rentalUnits]);\n\n  const tenantColumns: Column<RentalUnit>[] = [\n    {\n      key: 'unitNumber',\n      header: 'Unit',\n      render: (item) => (\n        <div>\n          <div className=\"font-medium text-foreground\">{item.propertyTitle}</div>\n          <div className=\"text-xs text-muted-foreground\">Unit {item.unitNumber}</div>\n        </div>\n      ),\n    },\n    {\n      key: 'tenantName',\n      header: 'Tenant',\n      render: (item) =>\n        item.tenantName ? (\n          <div>\n            <div className=\"font-medium text-foreground\">{item.tenantName}</div>\n            <div className=\"text-xs text-muted-foreground\">{item.tenantEmail}</div>\n          </div>\n        ) : (\n          <span className=\"text-muted-foreground\">-</span>\n        ),\n    },\n    {\n      key: 'leaseStart',\n      header: 'Lease Start',\n      render: (item) =>\n        item.leaseStart ? (\n          <span className=\"text-sm text-foreground\">{formatDate(item.leaseStart)}</span>\n        ) : (\n          <span className=\"text-muted-foreground\">-</span>\n        ),\n    },\n    {\n      key: 'leaseEnd',\n      header: 'Lease End',\n      render: (item) =>\n        item.leaseEnd ? (\n          <span className=\"text-sm text-foreground\">{formatDate(item.leaseEnd)}</span>\n        ) : (\n          <span className=\"text-muted-foreground\">-</span>\n        ),\n    },\n    {\n      key: 'monthlyRent',\n      header: 'Rent',\n      render: (item) => <span className=\"font-medium text-foreground\">{formatCurrency(item.monthlyRent)}</span>,\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      render: (item) => (\n        <div className=\"flex flex-col gap-1\">\n          <StatusBadge label={item.status.replace('_', ' ')} variant={getStatusVariant(item.status)} />\n          <StatusBadge label={item.paymentStatus} variant={getPaymentVariant(item.paymentStatus)} />\n        </div>\n      ),\n    },\n  ];\n\n  return (\n    <PageLayout\n      title=\"Rental Management\"\n      description=\"Comprehensive property and tenant management dashboard\"\n      actions={\n        <div className=\"flex items-center gap-2\">\n          <button className=\"inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90\">\n            <Plus className=\"h-4 w-4\" />\n            Add Tenant\n          </button>\n          <button className=\"inline-flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted\">\n            <FileText className=\"h-4 w-4\" />\n            Generate Agreement\n          </button>\n        </div>\n      }\n    >\n      {/* Stats Row */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard label=\"Total Units\" value={stats.totalUnits} icon={<Home className=\"h-4 w-4\" />} />\n        <StatCard label=\"Occupied\" value={stats.occupied} icon={<Users className=\"h-4 w-4\" />} trend=\"up\" change={5} />\n        <StatCard\n          label=\"Vacant\"\n          value={stats.vacant}\n          icon={<Home className=\"h-4 w-4\" />}\n          trend={stats.vacant > 0 ? 'down' : 'stable'}\n          change={stats.vacant > 0 ? -10 : 0}\n        />\n        <StatCard\n          label=\"Monthly Income\"\n          value={stats.monthlyIncome}\n          prefix=\"$\"\n          icon={<DollarSign className=\"h-4 w-4\" />}\n          trend=\"up\"\n          change={8}\n        />\n      </div>\n\n      {/* Rent Collection Section */}\n      <div className=\"rounded-lg border border-border bg-card p-5 shadow-sm\">\n        <h3 className=\"mb-4 text-lg font-semibold text-foreground\">Rent Collection</h3>\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <div className=\"flex items-center gap-3 rounded-lg bg-emerald-50 p-4 dark:bg-emerald-900/20\">\n            <CheckCircle className=\"h-5 w-5 text-emerald-600 dark:text-emerald-400\" />\n            <div>\n              <p className=\"text-sm text-muted-foreground\">Paid</p>\n              <p className=\"text-xl font-bold text-emerald-600 dark:text-emerald-400\">{rentCollectionStats.paid}</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-3 rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20\">\n            <Clock className=\"h-5 w-5 text-amber-600 dark:text-amber-400\" />\n            <div>\n              <p className=\"text-sm text-muted-foreground\">Pending</p>\n              <p className=\"text-xl font-bold text-amber-600 dark:text-amber-400\">{rentCollectionStats.pending}</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-3 rounded-lg bg-red-50 p-4 dark:bg-red-900/20\">\n            <AlertCircle className=\"h-5 w-5 text-red-600 dark:text-red-400\" />\n            <div>\n              <p className=\"text-sm text-muted-foreground\">Overdue</p>\n              <p className=\"text-xl font-bold text-red-600 dark:text-red-400\">{rentCollectionStats.overdue}</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-3 rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20\">\n            <TrendingUp className=\"h-5 w-5 text-blue-600 dark:text-blue-400\" />\n            <div>\n              <p className=\"text-sm text-muted-foreground\">Collection Rate</p>\n              <p className=\"text-xl font-bold text-blue-600 dark:text-blue-400\">\n                {rentCollectionStats.collectionRate.toFixed(0)}%\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Quick Actions */}\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <button className=\"flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-4 text-center transition-colors hover:bg-muted\">\n          <Bell className=\"h-5 w-5 text-muted-foreground\" />\n          <div>\n            <p className=\"text-sm font-medium text-foreground\">Send Reminders</p>\n            <p className=\"text-xs text-muted-foreground\">\n              {rentCollectionStats.pending + rentCollectionStats.overdue} pending\n            </p>\n          </div>\n        </button>\n        <button className=\"flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-4 text-center transition-colors hover:bg-muted\">\n          <DollarSign className=\"h-5 w-5 text-muted-foreground\" />\n          <div>\n            <p className=\"text-sm font-medium text-foreground\">Collect Rent</p>\n            <p className=\"text-xs text-muted-foreground\">{rentCollectionStats.overdue} overdue</p>\n          </div>\n        </button>\n        <button className=\"flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-4 text-center transition-colors hover:bg-muted\">\n          <FileText className=\"h-5 w-5 text-muted-foreground\" />\n          <div>\n            <p className=\"text-sm font-medium text-foreground\">Generate Report</p>\n            <p className=\"text-xs text-muted-foreground\">Monthly</p>\n          </div>\n        </button>\n        <button className=\"flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-4 text-center transition-colors hover:bg-muted\">\n          <Calendar className=\"h-5 w-5 text-muted-foreground\" />\n          <div>\n            <p className=\"text-sm font-medium text-foreground\">Schedule Visit</p>\n            <p className=\"text-xs text-muted-foreground\">Property</p>\n          </div>\n        </button>\n      </div>\n\n      {/* Tenant List */}\n      <div>\n        <h2 className=\"mb-4 text-lg font-semibold text-foreground\">Tenant Directory</h2>\n        <FilterBar searchValue={search} onSearchChange={setSearch} searchPlaceholder=\"Search units, tenants...\" />\n        <div className=\"mt-4\">\n          {filtered.length > 0 ? (\n            <DataTable columns={tenantColumns} data={filtered} keyField=\"id\" pageSize={10} />\n          ) : (\n            <EmptyState\n              icon={<Users className=\"h-12 w-12\" />}\n              title=\"No rental units found\"\n              description=\"Try adjusting your search criteria or add a new tenant.\"\n              action={\n                <button className=\"inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90\">\n                  <Plus className=\"h-4 w-4\" />\n                  Add Tenant\n                </button>\n              }\n            />\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/housingvista/pages/settings/ProfilePage.d.ts

@@ -0,0 +1,2 @@
+export declare function ProfilePage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProfilePage.d.ts.map

package/dist/housingvista/pages/settings/ProfilePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePage.d.ts","sourceRoot":"","sources":["../../../../src/housingvista/pages/settings/ProfilePage.tsx"],"names":[],"mappings":"AAaA,wBAAgB,WAAW,4CA0N1B"}

package/dist/housingvista/pages/settings/ProfilePage.js

@@ -0,0 +1,172 @@
+import { cn as e } from "../../utils/helpers.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import "../../components/index.js";
+import { useState as n } from "react";
+import { Camera as r, Edit as i, Mail as a, Phone as o, Save as s, User as c, X as l } from "lucide-react";
+import { useNavigate as u } from "react-router-dom";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/housingvista/pages/settings/ProfilePage.tsx
+function p() {
+	u();
+	let [p, m] = n(!1), h = {
+		firstName: "John",
+		lastName: "Doe",
+		email: "john.doe@example.com",
+		phone: "+1-555-0101",
+		avatar: "https://i.pravatar.cc/150?u=1",
+		role: "Property Owner"
+	}, [g, _] = n({
+		firstName: h.firstName,
+		lastName: h.lastName,
+		email: h.email,
+		phone: h.phone
+	}), [v, y] = n({ ...g }), b = (e, t) => {
+		_((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, x = () => {
+		y({ ...g }), m(!1), alert("Profile updated successfully!");
+	}, S = () => {
+		_({ ...v }), m(!1);
+	}, C = `${g.firstName.charAt(0)}${g.lastName.charAt(0)}`.toUpperCase();
+	return /* @__PURE__ */ f(t, {
+		title: "My Profile",
+		description: "View and manage your personal information",
+		actions: p ? /* @__PURE__ */ f("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ f("button", {
+				onClick: S,
+				className: "inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-muted",
+				children: [/* @__PURE__ */ d(l, { className: "h-3.5 w-3.5" }), "Cancel"]
+			}), /* @__PURE__ */ f("button", {
+				onClick: x,
+				className: "inline-flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-colors hover:bg-foreground/90",
+				children: [/* @__PURE__ */ d(s, { className: "h-3.5 w-3.5" }), "Save Changes"]
+			})]
+		}) : /* @__PURE__ */ f("button", {
+			onClick: () => m(!0),
+			className: "inline-flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-colors hover:bg-foreground/90",
+			children: [/* @__PURE__ */ d(i, { className: "h-3.5 w-3.5" }), "Edit Profile"]
+		}),
+		children: [/* @__PURE__ */ d("div", {
+			className: "rounded-lg border border-border bg-card p-6",
+			children: /* @__PURE__ */ f("div", {
+				className: "flex flex-col items-center gap-4 sm:flex-row sm:items-start",
+				children: [/* @__PURE__ */ f("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ d("div", {
+						className: "flex h-24 w-24 items-center justify-center overflow-hidden rounded-full bg-muted text-2xl font-bold text-foreground",
+						children: h.avatar ? /* @__PURE__ */ d("img", {
+							src: h.avatar,
+							alt: `${g.firstName} ${g.lastName}`,
+							className: "h-full w-full object-cover"
+						}) : C
+					}), p && /* @__PURE__ */ d("button", {
+						onClick: () => alert("Photo upload would open here"),
+						className: "absolute -bottom-1 -right-1 flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-foreground text-background transition-colors hover:bg-foreground/90",
+						children: /* @__PURE__ */ d(r, { className: "h-3.5 w-3.5" })
+					})]
+				}), /* @__PURE__ */ f("div", {
+					className: "flex-1 text-center sm:text-left",
+					children: [
+						/* @__PURE__ */ f("h2", {
+							className: "text-xl font-semibold text-foreground",
+							children: [
+								g.firstName,
+								" ",
+								g.lastName
+							]
+						}),
+						/* @__PURE__ */ f("div", {
+							className: "mt-1 flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3",
+							children: [/* @__PURE__ */ f("span", {
+								className: "flex items-center justify-center gap-1 text-sm text-muted-foreground sm:justify-start",
+								children: [/* @__PURE__ */ d(a, { className: "h-3.5 w-3.5" }), g.email]
+							}), /* @__PURE__ */ f("span", {
+								className: "flex items-center justify-center gap-1 text-sm text-muted-foreground sm:justify-start",
+								children: [/* @__PURE__ */ d(o, { className: "h-3.5 w-3.5" }), g.phone]
+							})]
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "mt-2",
+							children: /* @__PURE__ */ f("span", {
+								className: "inline-flex items-center gap-1 rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-foreground",
+								children: [/* @__PURE__ */ d(c, { className: "h-3 w-3" }), h.role]
+							})
+						})
+					]
+				})]
+			})
+		}), /* @__PURE__ */ f("div", {
+			className: "rounded-lg border border-border bg-card p-6",
+			children: [
+				/* @__PURE__ */ d("h3", {
+					className: "mb-4 text-base font-semibold text-foreground",
+					children: "Personal Information"
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "grid gap-5 sm:grid-cols-2",
+					children: [
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+							className: "mb-1.5 block text-sm font-medium text-foreground",
+							children: "First Name"
+						}), /* @__PURE__ */ d("input", {
+							type: "text",
+							value: g.firstName,
+							onChange: (e) => b("firstName", e.target.value),
+							disabled: !p,
+							className: e("h-10 w-full rounded-md border px-3 text-sm text-foreground transition-colors", p ? "border-border bg-background focus:outline-none focus:ring-2 focus:ring-ring" : "border-transparent bg-muted/50 cursor-not-allowed")
+						})] }),
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+							className: "mb-1.5 block text-sm font-medium text-foreground",
+							children: "Last Name"
+						}), /* @__PURE__ */ d("input", {
+							type: "text",
+							value: g.lastName,
+							onChange: (e) => b("lastName", e.target.value),
+							disabled: !p,
+							className: e("h-10 w-full rounded-md border px-3 text-sm text-foreground transition-colors", p ? "border-border bg-background focus:outline-none focus:ring-2 focus:ring-ring" : "border-transparent bg-muted/50 cursor-not-allowed")
+						})] }),
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+							className: "mb-1.5 block text-sm font-medium text-foreground",
+							children: "Email"
+						}), /* @__PURE__ */ d("input", {
+							type: "email",
+							value: g.email,
+							onChange: (e) => b("email", e.target.value),
+							disabled: !p,
+							className: e("h-10 w-full rounded-md border px-3 text-sm text-foreground transition-colors", p ? "border-border bg-background focus:outline-none focus:ring-2 focus:ring-ring" : "border-transparent bg-muted/50 cursor-not-allowed")
+						})] }),
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+							className: "mb-1.5 block text-sm font-medium text-foreground",
+							children: "Phone"
+						}), /* @__PURE__ */ d("input", {
+							type: "tel",
+							value: g.phone,
+							onChange: (e) => b("phone", e.target.value),
+							disabled: !p,
+							className: e("h-10 w-full rounded-md border px-3 text-sm text-foreground transition-colors", p ? "border-border bg-background focus:outline-none focus:ring-2 focus:ring-ring" : "border-transparent bg-muted/50 cursor-not-allowed")
+						})] })
+					]
+				}),
+				p && /* @__PURE__ */ f("div", {
+					className: "mt-6 flex items-center gap-3 border-t border-border pt-5",
+					children: [/* @__PURE__ */ f("button", {
+						onClick: x,
+						className: "inline-flex items-center gap-1.5 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90",
+						children: [/* @__PURE__ */ d(s, { className: "h-4 w-4" }), "Save Changes"]
+					}), /* @__PURE__ */ d("button", {
+						onClick: S,
+						className: "inline-flex items-center gap-1.5 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted",
+						children: "Cancel"
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { p as ProfilePage };
+
+//# sourceMappingURL=ProfilePage.js.map