mercy-tent

As a user, I want to use the frontend Login page so that I can sign in to mercy-tent. Implement the Login page based on the existing v2 JSX design (split-screen layout: BrandPanel on left with deep blue gradient, logo, tagline, value props, trust chips; LoginForm on right with role selector toggle for Tenant/Manager/Owner, email/phone input, password with show/hide, Forgot Password link, Sign In CTA, social login row). Includes MinimalNav and TrustFooter bands. Fully responsive — left panel hidden on mobile.

As a user, I want to use the frontend Home page so that I can view an interactive property map after login. Implement the Home page based on the existing v2 JSX design featuring an interactive property map with color-coded pins (tenant/manager/owner), hover animations, zoom/pan, day/night mode background shift, and micro-interactions that open property detail views. Includes TopBar navigation. Entry point after login for all roles.

As a user, I want to use the backend API for authentication so that I can sign in with my credentials and receive a role-specific JWT token (Tenant/Manager/Owner). Implement FastAPI endpoints: POST /auth/login (email+password or phone+OTP, returns JWT with role claim), POST /auth/logout, POST /auth/refresh. Role-based middleware to guard all subsequent API routes. MySQL user table with role column.

As an owner/manager, I want to use the backend API for properties so that I can manage property listings and view occupancy. FastAPI endpoints: GET /properties (owner/manager scoped), POST /properties, PUT /properties/{id}, GET /properties/{id}/analytics. MySQL schema for properties with address, owner, manager, occupancy status, monthly rent (INR), and metadata.

As a user, I want to use the frontend Dashboard page so that I can view an overview of my property activity. Implement the Dashboard page based on the existing v2 JSX design. Role-aware: Tenants see lease status, next payment, notices; Managers see rent collection status, tenant list, pending gate passes; Owners see analytics, billing summaries, reminders. Navigates to Lease, Payments, Gate Pass, Notices, Rent, Billing, Reminders, Properties, Tenants pages.

As a user, I want to use the backend API for gate passes so that tenants can request passes and managers can issue/approve them. FastAPI endpoints: POST /gate-passes (tenant request), GET /gate-passes (list by role), PUT /gate-passes/{id}/approve, PUT /gate-passes/{id}/reject. MongoDB collection for gate pass requests with visitor details, status, IST timestamps, and property reference.

As a user, I want to use the backend API for notices so that managers can broadcast updates and tenants can view them. FastAPI endpoints: GET /notices (role-filtered list), POST /notices (manager/owner only), PUT /notices/{id}/pin, POST /notices/{id}/acknowledge (tenant). MongoDB collection for notices with title, body, category, pinned flag, sender, recipients, read-receipts, and IST timestamps.

As a user, I want to use the backend API for lease management so that I can create, view, update, and terminate lease agreements. FastAPI endpoints: GET /leases (list), GET /leases/{id}, POST /leases, PUT /leases/{id}, DELETE /leases/{id}. MySQL schema for lease agreements with tenant, property, dates, rent amount (INR), status, and document references. Role-scoped access.

As a property manager, I want to use the frontend Tenants page so that I can view and manage all tenants across my properties. Implement the Tenants page based on the existing v2 JSX design. Includes a tenant roster with avatar, unit number, lease status badge, rent payment status, and quick-action links to Gate Pass and Notices. Search/filter by property and status. Links to individual tenant detail and Gate Pass pages.

As a tenant, I want to use the frontend Payments page so that I can pay rent securely and view my payment history. Implement the Payments page based on the existing v2 JSX design. Includes payment form with INR amounts, UPI/NEFT/card options, payment confirmation, and a payment history list with status badges (Paid/Pending/Overdue). Links from Dashboard and Lease page.

As a property manager, I want to use the frontend Leases page so that I can manage lease agreements for multiple tenants. Implement the Leases page based on the existing v2 JSX design. Includes lease list with status badges (Active/Pending/Expired), search and filter by property/tenant/status, lease detail view, renew/terminate actions, and document upload. Navigates to individual Lease detail page.

As an owner/tenant, I want to use the frontend Reminders page so that I can set and manage rent collection reminders. Implement the Reminders page based on the existing v2 JSX design. Includes reminder list with due date, recipient, status, create/edit/delete reminder form, recurrence settings (one-time/monthly), and IST timezone selector. Tenant view shows upcoming rent due reminders.

As an owner, I want to use the frontend Properties page so that I can view and manage all my properties. Implement the Properties page based on the existing v2 JSX design. Includes property cards with thumbnail, address, occupancy status, monthly rent (INR), and links to lease agreements and analytics. Filter by status (Occupied/Vacant/Maintenance). Navigates to Lease and Dashboard pages.

As an owner/manager, I want to use the frontend Rent page so that I can track and collect rent across all properties. Implement the Rent page based on the existing v2 JSX design. Includes a rent collection dashboard with per-property status (Paid/Pending/Overdue), bulk reminder send, INR amounts, IST due dates, and a monthly collection trend chart. Manager view shows per-tenant status.

As an owner, I want to use the frontend Billing page so that I can manage rent collection billing and invoices. Implement the Billing page based on the existing v2 JSX design. Includes billing summary cards (Total Collected, Pending, Overdue in INR), invoice list with download/preview actions, billing cycle settings, and payment method management. IST-aware due dates.

As a tenant, I want to use the frontend Lease page so that I can view my current lease agreement details. Implement the Lease page based on the existing v2 JSX design including: LeaseHeader banner, LeaseSidebar with property thumbnail and nav anchors, LeaseOverviewCard with INR metrics, LeaseTermsPanel accordion with AI summary, RentScheduleTable with status pills and Pay Now actions, LeaseDocuments grid, LeaseActivityLog timeline, and sticky LeaseActionBar with role-aware actions (Pay Rent, Request Gate Pass, View Notices for tenant). IST-aware dates throughout.

As a tenant/manager, I want to use the frontend Gate Pass page so that I can request or issue digital gate passes. Implement the Gate Pass page based on the existing v2 JSX design. Tenant view: request form (visitor name, date/time, purpose), active passes list, history. Manager view: incoming requests queue with approve/reject actions, issued passes list. IST timezone for all timestamps.

As a user, I want to use the frontend Notices page so that I can view or send property notices and updates. Implement the Notices page based on the existing v2 JSX design including: NavBar (deep blue), PageHeader with gradient and role-adaptive subtitle and stat chips, NoticeFilterBar with category tabs and sort/search, PinnedNoticesBanner with warm yellow accent cards and horizontal snap scroll on mobile, NoticesFeed with colored left-strip cards and unread indicators, NoticeDetailDrawer (bottom sheet mobile / right panel desktop), EmptyState, ComposeNoticeFAB for Manager/Owner roles, and Footer.

As a user, I want to use the AI API for lease analysis so that I can get an AI-generated plain-language summary of complex lease terms. Integrate Claude claude-opus-4-5 via Litellm for lease document analysis. Endpoint: POST /ai/lease-summary (accepts lease text, returns bullet-point summary). Wire to the 'AI Summary' pill button in the LeaseTermsPanel section. Use Langchain for document chunking and prompt orchestration.

As a user, I want to use the backend API for rent payments so that tenants can pay rent and owners/managers can track collections. FastAPI endpoints: GET /rent/schedule, POST /payments (initiate payment via UPI/NEFT), GET /payments/history, GET /rent/collection-status (manager/owner). MySQL schema for payment records with INR amounts, IST timestamps, status (Paid/Pending/Overdue).

As an owner, I want to use the backend API for billing and reminders so that I can manage invoices and schedule rent reminders. FastAPI endpoints: GET /billing/invoices, POST /billing/invoices, GET /billing/summary, POST /reminders, GET /reminders, PUT /reminders/{id}, DELETE /reminders/{id}. MySQL schema for invoices (INR, IST dates) and reminders (recurrence, recipient, status). Scheduler integration for automated reminder dispatch.

As a user, I want to use the backend notification service so that I receive push notifications for rent due dates, gate pass updates, and new notices. Implement a notification dispatcher using MongoDB for notification storage and a push delivery integration (FCM for Android/iOS). Triggered by rent schedule events, gate pass status changes, and notice creation. GET /notifications (unread count + list), POST /notifications/mark-read.

As a property manager, I want to use the backend API for tenant management so that I can view and manage all tenants across properties. FastAPI endpoints: GET /tenants (manager-scoped), GET /tenants/{id}, PUT /tenants/{id}, GET /tenants/{id}/payment-status. MySQL joins between users, leases, properties, and payments to return full tenant profiles with rent and lease status.

As a user, I want to use the AI API for smart reminders and the AI assistant so that I receive intelligent rent due reminders and can ask property-related questions. Integrate GPT via Litellm for conversational assistant (dashboard AI chat) and automated reminder message generation. Endpoints: POST /ai/reminder-message (generates personalized reminder text), POST /ai/chat (assistant Q&A). Langchain orchestration for context management.