+
+ Dashboard
+ Reservations
+ Payments
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/Payments.tsx b/components/Payments.tsx
new file mode 100644
index 00000000..47d87fdc
--- /dev/null
+++ b/components/Payments.tsx
@@ -0,0 +1,201 @@
+import { useState } from 'react';
+import { Card, CardContent } from './ui/card';
+import { Button } from './ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+import { Plus, DollarSign } from 'lucide-react';
+import { usePropertyData } from './PropertyDataContext';
+import { Badge } from './ui/badge';
+
+export function Payments() {
+ const { payments, tenants, addPayment } = usePropertyData();
+ const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+ const [formData, setFormData] = useState({
+ tenantId: '',
+ amount: '',
+ date: new Date().toISOString().split('T')[0],
+ method: 'bank-transfer',
+ status: 'paid',
+ });
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+
+ addPayment({
+ ...formData,
+ amount: parseFloat(formData.amount),
+ });
+
+ setIsAddDialogOpen(false);
+ setFormData({
+ tenantId: '',
+ amount: '',
+ date: new Date().toISOString().split('T')[0],
+ method: 'bank-transfer',
+ status: 'paid',
+ });
+ };
+
+ const getTenantName = (tenantId: string) => {
+ const tenant = tenants.find(t => t.id === tenantId);
+ return tenant?.name || 'Unknown Tenant';
+ };
+
+ return (
+
+
+
+
+
+ Welcome to Joyce Apartelle
+
+ Sign in to access your property management dashboard
+
+
+
+
+
+
+
+ ) : (
+
+
+ {payments.length === 0 ? (
+
+
+ )}
+
+ );
+}
diff --git a/components/PropertyDataContext.tsx b/components/PropertyDataContext.tsx
new file mode 100644
index 00000000..83b9f157
--- /dev/null
+++ b/components/PropertyDataContext.tsx
@@ -0,0 +1,276 @@
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+interface Property {
+ id: string;
+ address: string;
+ type: string;
+ bedrooms: number;
+ bathrooms: number;
+ rent: number;
+ status: string;
+}
+
+interface Tenant {
+ id: string;
+ name: string;
+ email: string;
+ phone: string;
+}
+
+interface Lease {
+ id: string;
+ propertyId: string;
+ tenantId: string;
+ startDate: string;
+ endDate: string;
+ monthlyRent: number;
+ deposit: number;
+ status: string;
+}
+
+interface Payment {
+ id: string;
+ tenantId: string;
+ amount: number;
+ date: string;
+ method: string;
+ status: string;
+}
+
+interface MaintenanceRequest {
+ id: string;
+ propertyId: string;
+ title: string;
+ description: string;
+ priority: string;
+ status: string;
+ date: string;
+}
+
+interface PropertyDataContextType {
+ properties: Property[];
+ tenants: Tenant[];
+ leases: Lease[];
+ payments: Payment[];
+ maintenanceRequests: MaintenanceRequest[];
+ addProperty: (property: Omit
+
+
+ {tenants.length === 0 ? (
+
+
+
+ Payments
+Track rent payments and transactions
+No tenants available
+Add tenants to start recording payments
+
+
+ ) : (
+ No payments recorded
+Start tracking rent payments
+
+
+
+
+ )}
+
+
+ );
+ }
+
+ // Room Details View
+ if (currentView === 'details' && selectedRoom) {
+ return (
+
+
+
+
+
+ Room Reservations
+Select a room to make a reservation
+
+
+
+
+ Vacant
+
+
+
+ Reserved
+
+
+
+ Occupied
+
+
+ {SAMPLE_ROOMS.map(room => (
+ handleRoomSelect(room)}
+ >
+
+
+
+
+
+ ))}
+
+
+
+ {room.status}
+
+
+
+ Room {room.number}
+ {room.type}
+
+
+
+
+
+ ₱{room.price}/night
+
+
+
+
+ );
+ }
+
+ // Guest Profile View
+ if (currentView === 'profile' && selectedRoom) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Select Check-in and Check-out Dates
+
+
+
+
+
+
+
+ Room Inclusions
+ Select additional amenities for your stay
+
+
+
+
+
+
+
+
+ {selectedRoom.status}
+
+
+
+ Room {selectedRoom.number}
+ {selectedRoom.type}
+
+
+
+
+
+
+
+ Up to {selectedRoom.capacity} guest(s)
+
+ Base Price
+ ₱{selectedRoom.price}/night
+
+
+
+
+
+
+
+
+
+
+ date < new Date()}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ date < (checkInDate || new Date())}
+ />
+
+
+
+
+ {AVAILABLE_INCLUSIONS.map(inclusion => (
+
+
+
+ ))}
+
+ handleInclusionToggle(inclusion.id)}
+ />
+
+
+ +₱{inclusion.price}/night
+
+
+
+ Booking Summary
+
+
+
+
+
+
+
+
+ Room
+ {selectedRoom.number}
+
+
+ Type
+ {selectedRoom.type}
+
+
+ Base Price
+ ₱{selectedRoom.price}/night
+
+ {selectedInclusions.length > 0 && (
+ <>
+
+
+
+ )}
+ Inclusions:
+ {selectedInclusions.map(id => { + const inclusion = AVAILABLE_INCLUSIONS.find(inc => inc.id === id); + return ( +
+ {inclusion?.name}
+ +₱{inclusion?.price}/night
+
+ );
+ })}
+
+
+
+ Total per night
+ ₱{calculateTotal()}
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return null;
+}
diff --git a/components/figma/ImageWithFallback.tsx b/components/figma/ImageWithFallback.tsx
new file mode 100644
index 00000000..0e26139b
--- /dev/null
+++ b/components/figma/ImageWithFallback.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+ 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes
+
+
+
+
+ Guest Profile
+ Please provide your information to complete the reservation
+
+
+
+
+
+
+
+
+
+
+ Reservation Summary
+
+
+
+
+
+
+
+
+ Room
+ {selectedRoom.number} - {selectedRoom.type}
+
+
+ Check-in
+ {checkInDate ? format(checkInDate, 'PP') : 'Not set'}
+
+
+ Check-out
+ {checkOutDate ? format(checkOutDate, 'PP') : 'Not set'}
+
+
+ Duration
+
+ {checkInDate && checkOutDate
+ ? `${Math.ceil((checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24))} night(s)`
+ : 'N/A'}
+
+
+ {selectedInclusions.length > 0 && (
+ <>
+
+
+
+ )}
+ Inclusions:
+ {selectedInclusions.map(id => { + const inclusion = AVAILABLE_INCLUSIONS.find(inc => inc.id === id); + return ( +
+ {inclusion?.icon}
+ {inclusion?.name}
+
+ );
+ })}
+
+
+
+ Rate per night
+ ₱{calculateTotal()}
+
+
+ Total Amount
+
+ ₱{checkInDate && checkOutDate
+ ? calculateTotal() * Math.ceil((checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24))
+ : calculateTotal()}
+
+
+
+
+
+
+
+
+ ) : (
+
+ 
+
+ {children}
+
+ {children}
+
+
+
+
+ );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps
+
+ {children}
+
+
+