Revised Implementation Plan - UI/UX Refactoring & Role-Based Workflows

Refactor the existing CHS Lite UI design to be more flexible, user-friendly, and visually premium using shadcn/ui and Tailwind CSS v4 patterns. The system will use Green as its main theme color (referencing Synergy Housing Societies ERP).

User Review Required

Proposed UI Architecture models

1. Housing Society Member (User) Navigation

• Default Login Landing Page: /profile (shows user’s own Member Details, S3 documents, and Telegram link).
• Navigation Tabs:
  1. Dashboard (/): Lightweight notices board and recent gate alerts.
  2. Invoices (/invoices): Separate page for invoices list.
  3. Visitors (/visitors): Guest bookings and logs.
  4. Requests (/service-requests): Service request portal.
  5. Notices (/notices): Notice board.
  6. Profile (/profile): Member details and logout.

2. Security Flow

• Default Login Landing Page: / (which will display the Visitors list directly).
• Navigation Tabs:
  1. Home/Visitors (/): Visitors log list. No register/create buttons are visible.
  2. Profile (/profile): Loads security staff’s own member details and logout.

3. System, Admin, & Manager Homepage (Module Categorization)

• Sales:
  • Invoices (/invoices)
  • Service Charges (/admin/service-charges)
  • Service Groups (/admin/service-groups)
• Purchase:
  • Vendors (/admin/vendors)
  • Vendor Bills (/admin/bills)
• Finance:
  • Accounts (/admin/accounts)
  • Vouchers (/admin/vouchers)
  • Journal Vouchers (/admin/journal-vouchers)
  • Opening Balances (/admin/opening-balances)
  • Investments (/admin/investments)
• Utilities:
  • Members (/admin/members)
  • Visitors (/visitors)
  • Notices (/notices)
  • Service Requests (/service-requests)
  • Email Templates (/admin/std-instructions)
  • Societies (/admin/societies - visible to System only)

Proposed Changes

Theme Updates

[MODIFY] globals.css

• Change --primary and --primary-foreground in :root and .dark blocks:
  • Light mode: --primary to oklch(0.52 0.18 142) (rich green/emerald), --primary-foreground to oklch(0.99 0 0) (white).
  • Dark mode: --primary to oklch(0.76 0.18 142) (vibrant bright green), --primary-foreground to oklch(0.15 0 0) (dark gray).

Login Page Updates

[MODIFY] login/page.tsx

• Redesign the card and background with subtle green gradients and premium styling.
• Theme Switcher: Render the ThemeToggle component absolute in the top-right corner.
• Synergy Link: Add a link at the bottom of the card or card description:
  • Text: "New to Synergy ERP? Learn how to connect your society or contact us" linking to https://erpcrystal.in/synergy-housing-societies-erp.

Navigation Updates

[MODIFY] bottom-nav.tsx & sidebar.tsx

• Update dynamic navigation rendering:
  • Security: Home (/ - Visitors), Profile (/profile).
  • User (Resident): Profile (/profile), Dashboard (/), Invoices (/invoices), Visitors (/visitors), Requests (/service-requests), Notices (/notices).
  • System, Admin, Manager: Home (/), Members (/admin/members), Vendors (/admin/vendors), Profile (/profile).
• Update BottomNav styling to handle 6 columns cleanly (use responsive grids).

Home/Dashboard Updates

[MODIFY] page.tsx

• Redirects on Login / Landing:
  • Inside useEffect, if standard user (user.role === "User"), redirect on first load to /profile (if navigating from login). If they explicitly click the Dashboard navigation tab, show the lightweight dashboard at /.
  • If user.role === "Security", render the visitors list directly on the home page / with a “View Only” restriction.
• Admin/Manager Dashboard Categorization:
  • Reorganize dashboard modules into 4 distinct cards/sections labeled Sales, Purchase, Finance, and Utilities using premium grids and clean layout styling.

Visitors Page Updates

[MODIFY] visitors/page.tsx

• Security Action Restrictions:
  • Hide the “Register” button if isSecurity is true.
  • Disable any edit/status action options if isSecurity is true.

Profile Page Updates

[MODIFY] profile/page.tsx

• Remove ThemeToggle row (now located on Login page).
• Security & Resident Member Details Profile:
  • If user role is User (Resident) or Security:
    • Fetch user’s member details using getMember(user.memberId).
    • Render their Profile summary, Additional Info, and S3 Document Manager directly on /profile.
  • Else (Admin/System/Manager):
    • Render the standard management profile page (Society switcher, Financial year switcher, Sign out).

Verification Plan

Manual Verification

1. Login Page Visuals & Theme Toggle:
   • Check green styling.
   • Verify theme toggle works on login page.
   • Verify link to https://erpcrystal.in/synergy-housing-societies-erp is visible and functional.
2. Housing Society Member Login:
   • Log in and verify redirect to /profile.
   • Verify /profile loads member details and document uploader.
   • Verify Dashboard, Invoices, Visitors, Requests, and Notices are separate options in bottom navigation.
3. Security Personnel Login:
   • Log in and verify immediate rendering of the Visitors list at /.
   • Verify no “Register” or edit actions are available on the visitors list.
   • Verify /profile loads the security user’s member details.
4. Admin/Manager Dashboard:
   • Verify categories (Sales, Purchase, Finance, Utilities) are divided cleanly.
   • welcome page and then login page