SocietyPro is a complete, production-quality society management application for Indian housing societies, modelled on the modern SaaS dashboard experience of MyGate Dashboard. It serves four distinct working roles — Society Admin, Accountant, Resident, and Security Guard — through a role-based sidebar and permissions model, with seeded demo logins for each role.
The product is built with only pure HTML, CSS, and vanilla JavaScript (ES6 modules) — no frameworks and no build tools. All data is stored in localStorage through a single data-service layer (store.js) so that the persistence layer can later be swapped for a REST API (Spring Boot + MySQL) without touching UI code. The product name is SocietyPro, editable in settings.
Delivery is phased. Phase 1 delivers the full folder structure, the design system, the layout shell (sidebar, topbar, command palette, theme), the hash-based router, store.js, authentication with the four roles, and the complete Dashboard with seed data. After Phase 1 the build stops and waits for the user to say "next phase" before the next module is built.
The audience is the day-to-day operators of an Indian housing society: an admin juggling approvals, an accountant living in ledgers and dues ageing, a resident checking bills and notices, and a guard at the gate at 11pm.
SocietyPro is a browser-delivered application. The interface is a modern SaaS dashboard shell: a slim collapsible icon sidebar with tooltips and red pending dots, a top bar with a Ctrl+K command palette, society name selector, financial year dropdown (FY 2026-2027) and user profile menu, and a card-based main area with a right column for "What's New" and stats. It is fully responsive across desktop, tablet and mobile, and supports light and dark themes.
Four roles operate the product: Society Admin, Accountant, Resident, and Security Guard. The sidebar and permissions are role-based, and demo logins are seeded for each role.
Current accepted behavior spans:
Every module provides list, search, filters, add/edit/delete modal, pagination, and CSV export. Currency is ₹ with Indian grouping (1,23,456.00); dates are DD/MM/YYYY.
The provisioned infrastructure is a shared FastAPI backend process for application APIs and domain modules, a MariaDB database for application-owned persistent data, and a React frontend application UI. These services are the authoritative runnable inventory; they do not add product requirements or change access decisions. The current product's data layer is localStorage through store.js; the backend and database are the provisioned target for the later REST API swap (Spring Boot + MySQL is the user's stated future API, and the provisioned FastAPI/MariaDB services are the scaffold's shared backend and database).
Removed from scope
SocietyPro is delivered as a first-party browser application. The public entry is a Landing page that explains SocietyPro, its audience, and its society-management capabilities to an anonymous visitor. Returning users verify identity on Login; new residents and other independently starting users enroll on Sign Up, with approval remaining with the society workflow (New Users). Protected destinations — Dashboard, Society setup, Manage Admins, Notice Board, Helpdesk Complaints, Escalated Tickets, Amenity Bookings, Entry-Exit Report, Asset PPM Calendar, New Users, Move In/Out, the accounting destinations, and Settings — require an authenticated session and are role-restricted per the accepted access contract.
The selected society and financial year are established in the top bar before society and accounting data is filtered. Closed financial periods remain locked before accounting changes are accepted. Role permissions are evaluated before exposing protected destinations and durable records.
Current delivery is Phase 1: folder structure, design system, layout shell, router, store.js, four-role auth, and the complete Dashboard with seed data. The remaining modules and the accounting module are accepted current requirements delivered in subsequent phases after the user says "next phase". The localStorage-backed store.js is the current persistence boundary; the provisioned FastAPI backend and MariaDB database are the scaffold's shared services and the future REST API target, and the UI must not need to change when the data layer is swapped.
Not applicable — no reference directive declares content_source.
store.js; UI modules never touch localStorage directly. Failure/recovery: storage errors surface as toast with retry. Continuation: UI unchanged when the data layer is swapped.The creative direction is authoritative for this section. Muse: Rasmus Andersson — systematic product craft with an opinion. Headline: SocietyPro as a warm-paper instrument panel, not a template dashboard.
#F6F3EE (warm paper ground)#FFFFFF (cards)#E6E1D8#141517 (ink)#6B6A66#4F46E5 (indigo — active rail item, primary pill buttons, focus rings, chart series 1)#F5A524 (amber — pending status, Actions Pending count chips, Ask AI floating button)#1F8A5B, pending #F5A524, overdue #C0392B, info #4F46E5#141517 (graphite ground)#1D1E21#2A2B2F#F2EFE9#4F46E5#F5A524-0.02em, semibold 600 at dashboard scale, bold 700 only on page title and money hero; sentence case everywhere; all-caps only on 11px letterspaced micro-labels (e.g. ACTIONS PENDING, COLLECTION · THIS MONTH).clamp(28px, 4vw, 40px).No stock photography. The interface is the imagery: SVG sparklines, a collection donut, an expenses bar chart, a dues-ageing stacked bar, plus schematic icons drawn on a 24px grid with 1.5px strokes. Empty states get a small line diagram, not an illustration. The Ask AI panel uses a monospace transcript with answers rendered as mini tables pulled from app data.
The Dashboard is the hero and it is composed, not decorative. At 1280px the first screen opens with a wide paper-ground header band (full width, no card) where the page title "Good morning, Aarav" sits left in Inter Tight 28px over a single line of context ("Sunrise Heights · 120 flats · FY 2026-2027"), and to its right a row of three inline stat blocks separated by hairline vertical rules — Collection this month (₹18,42,500.00, JetBrains Mono 40px, indigo), Bank balance (₹64,10,220.00), Defaulters (9 flats, overdue red). Directly beneath, the shortcuts pill row and the Smart Suggestions row run edge to edge. The indigo appears as one solid 3px underline that spans the header band's full width and as the active rail bar — nowhere as a gradient or blob. Below the band the card grid begins on white, each card separated by hairlines rather than shadows. At 375px the stat blocks stack into three full-width rows with the money hero clamped to 28px, and the header band loses its underline to a 1px hairline.
Signature moves carried through the product:
Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: flat
prefers-reduced-motion drops all motion to instant state changes — underline and charts render fully drawn, palette opens without rise, theme switches without crossfade.store.js) over localStorage, swappable for a REST API (Spring Boot + MySQL) without touching UI code. (explicit) — Rationale: user hard constraint; isolates persistence.store.js, four-role auth, and complete Dashboard with seed data. (explicit) — Rationale: user hard constraint./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. (explicit)localStorage through store.js. (explicit)backend — shared FastAPI process for application APIs and domain modules.database — MariaDB for application-owned persistent data.frontend — React application UI.localStorage through store.js; the backend and database are the provisioned target for the later REST API swap.localStorage through store.js per the explicit user constraint. (required_inference)store.js) over localStorage. (explicit)store.js, four-role auth, and complete Dashboard with seed data. (explicit)
Society management for Indian housing societies — dues, ledgers, notices, helpdesk and gate activity in one instrument panel.
Nine modules, from the gate register to the trial balance — each one written for the person who actually uses it.
Shortcuts and Smart Suggestions, Actions Pending with counts, a defaulters table and society stats with SVG charts — all on one composed header band.
Wings and towers, floors and flats with area and type, owner or tenant, parking, residents and family members.
Publish notices with category, pinning, expiry and read counts so every resident sees what matters.
Raise a ticket with category, priority and assignee, follow a status timeline, and auto-escalate after N hours into Escalated Tickets.
Amenity calendar with slots and charges, approve or reject requests, and prevent double bookings with clash checks.
A guard screen for visitors, delivery, staff and vehicles — pre-approve, check in and out, and filter by date.
Track assets, schedule preventive maintenance with vendors, and keep due reminders and service history together.
New Users and Move In/Out requests move through one review flow, each with its own decision trail.
Every rupee posts twice. Bills, receipts, dues ageing and reports close back to a balanced ledger.
Who uses SocietyPro
Juggling new user and move in/out approvals, escalated complaints and the next committee meeting.
Living in the ledgers — dues ageing, receipts, vendor payments and the monthly collection report.
Checking the maintenance bill, settling dues and reading the notice board from their own login.
At the gate at 11pm, clearing visitors, deliveries and vehicles on one entry-exit screen.
Sunrise Heights · 120 flats · FY 2026-2027

Society management for Indian housing societies — dues, ledgers, notices, helpdesk and gate activity in one instrument panel.
Nine modules, from the gate register to the trial balance — each one written for the person who actually uses it.
Shortcuts and Smart Suggestions, Actions Pending with counts, a defaulters table and society stats with SVG charts — all on one composed header band.
Wings and towers, floors and flats with area and type, owner or tenant, parking, residents and family members.
Publish notices with category, pinning, expiry and read counts so every resident sees what matters.
Raise a ticket with category, priority and assignee, follow a status timeline, and auto-escalate after N hours into Escalated Tickets.
Amenity calendar with slots and charges, approve or reject requests, and prevent double bookings with clash checks.
A guard screen for visitors, delivery, staff and vehicles — pre-approve, check in and out, and filter by date.
Track assets, schedule preventive maintenance with vendors, and keep due reminders and service history together.
New Users and Move In/Out requests move through one review flow, each with its own decision trail.
Every rupee posts twice. Bills, receipts, dues ageing and reports close back to a balanced ledger.
Who uses SocietyPro
Juggling new user and move in/out approvals, escalated complaints and the next committee meeting.
Living in the ledgers — dues ageing, receipts, vendor payments and the monthly collection report.
Checking the maintenance bill, settling dues and reading the notice board from their own login.
At the gate at 11pm, clearing visitors, deliveries and vehicles on one entry-exit screen.
Sunrise Heights · 120 flats · FY 2026-2027
No comments yet. Be the first!