project-b85f9073

byYogesh Gowda (Yogesh)

Create a complete **PGOS Tenant Dashboard** as a single-page, mobile-first SaaS interface using React, Vite, Tailwind CSS, Framer Motion, Lucide icons, and Supabase. Design a premium, modern, rich UI with smooth page-load animations, hover effects, animated cards, progress indicators, counters, skeleton loaders, toast notifications, and responsive transitions. Keep the interface clean, professional, easy to understand, and suitable for PG/hostel tenants. Include a fixed sidebar on desktop and bottom navigation on mobile with: Dashboard, Payments, Food, Complaints, Visitors, Documents, Notice/Checkout, Profile, and Support. The dashboard must contain: 1. Tenant welcome section with profile photo, tenant name, PG name, room number, bed number, joining date, and occupancy status. 2. Rent summary card showing monthly rent, amount paid, pending amount, due date, security deposit, payment status, and an animated payment progress bar. 3. “Pay Rent” option supporting UPI or cash-payment proof upload. The owner must approve the submitted payment before it is marked as paid. 4. Payment history with month, amount, payment method, date, status, downloadable receipt, invoice, and filters for Paid, Pending, Overdue, and Approval Pending. 5. Room and bed information with room photos, sharing type, amenities, roommates, room rent, electricity charges, and Wi-Fi details. 6. Weekly food menu with breakfast, lunch, dinner, meal timings, and Eat/Skip selection for every meal. Save the tenant’s choices in Supabase. 7. Complaints section to create and track complaints with category, title, description, image upload, priority, status, owner response, and timeline. 8. Visitor management with visitor name, phone number, relationship, visit date, entry time, exit time, night-stay request, approval status, and applicable charges. 9. Notice and checkout section with notice submission, preferred checkout date, reason, refund details, inspection status, owner approval, and request timeline. 10. Documents section containing rental agreement, Aadhaar/PAN documents, payment receipts, invoices, KYC documents, house rules, and downloadable PDF files. 11. Announcements and notifications for rent reminders, food updates, maintenance alerts, visitor approval, complaint updates, and PG notices. 12. Profile section with personal details, date of birth, phone number, email, permanent address, emergency contact, Aadhaar/PAN details, profile photo, and document upload. 13. Support section with owner contact, manager contact, emergency numbers, WhatsApp support, call button, and help-ticket creation. 14. Quick-action buttons for Pay Rent, Raise Complaint, Select Meals, Add Visitor, Download Receipt, Submit Notice, and Contact Manager. 15. Dashboard analytics showing payment status, complaint status, meals selected, visitor requests, remaining notice period, and unread notifications. Connect every form, card, button, filter, upload, status, and action to real Supabase data. Use Supabase Auth, PostgreSQL database, Storage, Row Level Security, real-time updates, loading states, form validation, error handling, and success notifications. Do not use fake buttons, placeholder pages, static demo data, or non-working actions. Every option must be functional. Maintain tenant-level security so each tenant can only see and manage their own data. Make the complete dashboard production-ready, responsive, installable as a PWA, and visually rich without making it crowded.