project-b85f9073 System Requirements Document

Introduction

This document outlines the system requirements for the PGOS Tenant Dashboard under the project name project-b85f9073. The goal is to create a single-page, mobile-first SaaS interface that is modern, responsive, and visually appealing, tailored for PG/hostel tenants.

System Overview

The PGOS Tenant Dashboard is designed to provide a comprehensive and interactive interface for tenants to manage their PG/hostel-related activities. The dashboard will be built using React, Vite, Tailwind CSS, Framer Motion, Lucide icons, and Supabase, ensuring a premium and modern user experience.

Functional Requirements as Story Points

• As a Tenant, I should be able to view a welcome section with my profile photo, tenant name, PG name, room number, bed number, joining date, and occupancy status.
• As a Tenant, I should be able to see a rent summary card with monthly rent details, amount paid, pending amount, due date, security deposit, payment status, and an animated payment progress bar.
• As a Tenant, I should be able to pay rent via UPI or upload cash-payment proof, with owner approval required before marking as paid.
• As a Tenant, I should be able to view payment history with month, amount, payment method, date, status, and downloadable receipt/invoice, with filters for Paid, Pending, Overdue, and Approval Pending.
• As a Tenant, I should be able to view room and bed information, including room photos, sharing type, amenities, roommates, room rent, electricity charges, and Wi-Fi details.
• As a Tenant, I should be able to select meals from a weekly food menu and save my choices in Supabase.
• As a Tenant, I should be able to create and track complaints with category, title, description, image upload, priority, status, owner response, and timeline.
• As a Tenant, I should be able to manage visitors with details like visitor name, phone number, relationship, visit date, entry/exit time, night-stay request, approval status, and charges.
• As a Tenant, I should be able to submit a notice for checkout with preferred date, reason, refund details, inspection status, owner approval, and request timeline.
• As a Tenant, I should be able to access documents such as rental agreement, Aadhaar/PAN documents, payment receipts, invoices, KYC documents, and house rules.
• As a Tenant, I should receive announcements and notifications for rent reminders, food updates, maintenance alerts, visitor approval, complaint updates, and PG notices.
• As a Tenant, I should be able to manage my profile with personal details, date of birth, phone number, email, permanent address, emergency contact, Aadhaar/PAN details, profile photo, and document upload.
• As a Tenant, I should be able to contact support with owner contact, manager contact, emergency numbers, WhatsApp support, call button, and help-ticket creation.
• As a Tenant, I should have quick-action buttons for Pay Rent, Raise Complaint, Select Meals, Add Visitor, Download Receipt, Submit Notice, and Contact Manager.
• As a Tenant, I should be able to view dashboard analytics showing payment status, complaint status, meals selected, visitor requests, remaining notice period, and unread notifications.

User Personas

• Tenant: The primary user who interacts with the dashboard to manage their PG/hostel activities.

Core User Flows

1. Tenant logs in -> views welcome section -> checks rent summary -> pays rent or uploads proof -> views payment history.
2. Tenant selects meals from the food menu -> saves choices -> receives notifications for meal updates.
3. Tenant creates a complaint -> uploads images -> tracks complaint status and owner response.
4. Tenant manages visitors -> submits visitor details -> receives approval status and applicable charges.
5. Tenant submits checkout notice -> selects preferred date -> tracks approval and refund status.
6. Tenant accesses documents -> downloads necessary files -> updates personal profile information.
7. Tenant contacts support -> uses quick-action buttons for various tasks -> views dashboard analytics.

Visuals Colors and Theme

• primary: #1E3A8A (Deep Blue)
• primary_light: #3B82F6 (Light Blue)
• secondary: #F59E0B (Amber)
• accent: #EF4444 (Red)
• highlight: #FBBF24 (Gold)
• bg: #F3F4F6 (Light Gray)
• surface: rgba(255, 255, 255, 0.8)
• text: #111827 (Dark Gray)
• text_muted: #6B7280 (Muted Gray)
• border: rgba(209, 213, 219, 0.2)

Signature Design Concept

Interactive Tenant Journey

The homepage will feature an interactive tenant journey map that visually represents the tenant's lifecycle in the PG. Using Framer Motion, the map will animate transitions between different stages: Welcome, Rent Payment, Meal Selection, Complaint Management, Visitor Management, and Checkout. Each stage will have clickable icons that expand to show detailed information and actions. The map will be responsive, adapting to both desktop and mobile views, and will include smooth animations and transitions to enhance user engagement.

Landing Hero Motion Brief

The landing hero will depict a dynamic illustration of a PG building with animated elements representing tenant activities. Using motion/react, the animation will show tenants moving in, paying rent, selecting meals, and interacting with PG services. The animation will loop every 10 seconds, with interactive elements that users can click to explore specific features. The scene will be designed to be visually appealing and informative, providing a clear overview of the dashboard's capabilities.

Interaction Model & Motion Direction

• Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals, hover transitions, and spring physics on interactive elements, providing a polished and engaging user experience.

Non-Functional Requirements

• The dashboard must be responsive and mobile-first, ensuring usability across devices.
• Ensure tenant-level security with Supabase Auth and Row Level Security.
• Implement real-time updates, loading states, form validation, error handling, and success notifications.
• The dashboard should be production-ready and installable as a PWA.

Tech Stack

• Frontend: React, Vite, Tailwind CSS, Framer Motion, Lucide icons
• Backend: Supabase (PostgreSQL database, Auth, Storage)
• Deployment: PWA

Assumptions and Constraints

• The dashboard will be developed as a single-page application.
• All data interactions will be managed through Supabase.
• The design will prioritize a clean and professional look suitable for PG/hostel tenants.

Glossary

• PG: Paying Guest
• PWA: Progressive Web App
• UPI: Unified Payments Interface
• SaaS: Software as a Service
• Supabase: An open-source Firebase alternative