SBM

Smart Building Management — multi-tier admin panel with role-based access for residents, service providers, and super-admins. Handles requests, maintenance, security, and finance.

year: 2024
role: Frontend Developer
duration: 5 months
live: —

> stack
  react · typescript · mui · react query

$cat summary.md

A three-role admin platform for residential and commercial building operators. One codebase serves residents (requests, bills), service providers (job queue, work logs), and super-admins (configuration, finance, audit). TypeScript everywhere, MUI for the dense forms, React Query for the cache.

$ls features/

01Three role dashboards from one component tree
02Service request lifecycle: open → assigned → in-progress → closed
03Maintenance scheduling and recurring task templates
04Security log with timestamped events and incident reports
05Finance: rent collection, expense tracking, balance sheets
06Audit trail across all role actions

$cat challenges.md

#01Permission complexity across roles

Every screen needed to know who's viewing AND what they can do. Hardcoding role checks per component would scale terribly across hundreds of forms.

#02Optimistic UX in a strict audit environment

Optimistic updates feel great but the audit log must reflect actual server state. Couldn't ship 'looks done' if it wasn't actually done.

#03Form density with MUI

Some screens have 30+ fields with conditional sections. Keeping them performant and the bundle small required careful component split.

$cat approach.md

→ 01Permission matrix as data

Roles × resources × actions = one declarative table. Components ask `can(role, resource, action)` instead of nesting role-conditionals. New role = one table row.

→ 02React Query's optimistic + rollback

Optimistic mutate on submit, server reconciles, automatic rollback on failure with an inline toast. Audit log only reflects post-server state — kept in a separate cache key.

→ 03Form schemas with `react-hook-form` + Zod

Each form is a Zod schema. Validation, types, and field rendering all derived from one source. Conditional fields are schema-driven, not JSX-driven.

$git log --oneline

c1f3a8bchore: scaffold + TS strict
e4d2b97feat: permission matrix + role context
a8c5e10feat: service request lifecycle
0b6d4f3feat: maintenance schedule + recurring
9f7e2a4feat: finance dashboards + audit trail
reviewmilestone: client review

$cat outcomes.md

✓Three role dashboards from one codebase, no duplication
✓TypeScript end-to-end — caught the permission edge cases at compile time
✓Currently in client review

$ls ../

← prev

Poslic/03

GOBBB/05

pritesh@portfolio: ~/case/sbm$