society-management-mygate

byONKAR GHOTALE

You are a senior full-stack engineer and UI/UX designer. Build a complete, production-quality "Society Management Software" (like MyGate Dashboard) using ONLY pure HTML, CSS and vanilla JavaScript (ES6 modules). No frameworks, no build tools. Data is stored in localStorage through a single data-service layer (store.js) so that it can later be swapped for a REST API (Spring Boot + MySQL) without touching UI code. PRODUCT NAME: SocietyPro (editable in settings) ROLES: Society Admin, Accountant, Resident, Security Guard. Role-based sidebar and permissions. Seed demo logins for each. LAYOUT (match modern SaaS dashboard): - Left slim icon sidebar (collapsible, tooltips, red dot for pending items) - Top bar: Search Settings (Ctrl+K command palette), Society name selector, Financial Year dropdown (FY 2026-2027), user profile menu - Main area: card-based dashboard, right column "What's New" + stats - Fully responsive (desktop, tablet, mobile), light + dark theme - Design: clean, rounded 16px cards, soft shadows, pill buttons, Inter font, primary color indigo, accent amber, status colors for paid/pending/overdue DASHBOARD: 1. Shortcuts (user-editable, pill buttons) + Smart Suggestions row 2. Actions Pending cards with counts and arrows: New Users, Move In/Out, Escalated Tickets, Payment Intimations, plus Refresh Data with "Last refreshed" time 3. Defaulters table (Name, Flat, Amount, View All) 4. Society Stats (total flats, occupied, residents, collection % this month, expenses, bank balance) with charts (canvas/SVG, no libraries) 5. Notice highlights, "Ask AI" floating button opening a chat panel (rule-based answers from app data, e.g. "who has not paid?") MODULES (each with list, search, filters, add/edit/delete modal, pagination, CSV export): 1. Society setup: wings/towers, floors, flats (area sqft, type, owner/tenant, parking), residents, family members 2. Manage Admins and role permissions 3. Notice Board: create, category, pin, expiry, read counts 4. Helpdesk Complaints: raise ticket, category, priority, assign, status timeline, auto escalation after N hours to Escalated Tickets 5. Amenity Bookings: amenities, slots, calendar view, charges, approve/reject, clash prevention 6. Entry-Exit Report: visitors, delivery, staff, vehicles; guard screen for pre-approve, check-in/out, date filters 7. Asset PPM Calendar: assets, preventive maintenance schedule, calendar, vendor, due reminders, history 8. New Users and Move In/Out approval workflows ACCOUNTING MODULE (double-entry, important): - Chart of Accounts (Assets, Liabilities, Income, Expense, Equity) with defaults for an Indian housing society (Maintenance Income, Sinking Fund, Repair Fund, Water Charges, Parking, Non-Occupancy Charges, Interest on Late Payment, Electricity, Security Salary, Housekeeping, Lift AMC, Bank, Cash) - Maintenance Bill generator: monthly/quarterly, rules per flat type (fixed, per sqft, mixed), arrears carry forward, late fee/interest %, GST optional, bulk generate for all flats, bill preview + printable PDF (window.print) - Dues Tracker: per flat outstanding, ageing (0-30, 31-60, 61-90, 90+), send reminder (generate WhatsApp link with prefilled message) - Receipt Register: record payments (cash, cheque, UPI, NEFT), auto receipt number, allocate to bills, advance payments, printable receipt - Payment Intimations: resident submits payment proof, admin/accountant approves or rejects, which auto-creates receipt - Invoice History and Vendor Payments: vendor master, purchase invoices, TDS optional, payment vouchers, approval - Journal / Voucher entries (payment, receipt, journal, contra) with debit=credit validation - Ledger Statements: any account or flat, date range, opening/closing balance, running balance - Reports: Trial Balance, Income and Expenditure, Balance Sheet, Bank Reconciliation, Collection Report, Defaulters Report with Excel(CSV) and print-PDF export - Financial year handling: FY switch filters all data, year-end closing with opening balances carried forward, lock closed periods - Audit log of every accounting change (who, when, old/new) CODE STRUCTURE: /index.html, /login.html /css/ (variables.css, base.css, layout.css, components.css, pages/*.css) /js/core/ (router.js hash-based, store.js, auth.js, utils.js, ui.js for modal/toast/table/datepicker) /js/modules/ (dashboard, flats, notices, helpdesk, amenities, visitors, assets, accounting/*.js) /data/seed.js (realistic Indian demo data: 120 flats, names, amounts in ₹ with Indian number formatting) RULES: - Clean reusable components (DataTable, Modal, Form builder, Toast, Charts) - Validate all forms, show empty states and loading skeletons - Accessible (labels, keyboard nav, focus states) - Comment code, no placeholders, no "TODO", all features working - Currency ₹ with Indian grouping (1,23,456.00), dates DD/MM/YYYY DELIVERY: Build in phases. START WITH PHASE 1: full folder structure, design system, layout shell (sidebar, topbar, command palette, theme), router, store.js, auth with 4 roles, and the complete Dashboard with seed data. After finishing, stop and wait for me to say "next phase" for the next module.