Add project rebuild specs

project-specs/UI_PLAN.md

@@ -0,0 +1,81 @@
+# UI Plan
+
+Goal:
+- Rebuild the current app into a responsive product
+- Keep the workflow familiar, but stop forcing a mobile-only layout on desktop
+
+## Layout Strategy
+
+### Mobile
+
+- Use a single-column layout
+- Prefer bottom navigation for primary destinations
+- Use drawers only for secondary navigation
+- Convert dense tables into stacked cards
+- Keep form controls full width
+
+### Desktop
+
+- Use a persistent sidebar
+- Use a top header for page title and actions
+- Split the screen into content + detail when needed
+- Show lists as tables or master-detail panels
+- Use two-column forms where the data density justifies it
+
+## Proposed Shell
+
+Common shell components:
+
+1. App header
+2. Sidebar or bottom nav
+3. Page title and breadcrumb area
+4. Content container
+5. Optional right-side detail panel
+
+## Screen-Level Guidance
+
+### Login
+
+- Centered card on desktop
+- Full-width padded form on mobile
+
+### Dashboard
+
+- Desktop: stats row, recent activity, action shortcuts
+- Mobile: stacked cards
+
+### Order List
+
+- Desktop: searchable table with filters
+- Mobile: card list with summary and action button
+
+### Order Detail
+
+- Desktop: master-detail layout
+- Mobile: sectioned accordion or tabs
+
+### Result/Historical Result
+
+- Desktop: chart or summary panel on top, list/table below
+- Mobile: compact summary cards first, details later
+
+### Pendaftaran Pasien
+
+- Desktop: stepper or multi-column form
+- Mobile: step-by-step single column flow
+
+### FPP
+
+- Desktop: filter panel + result panel
+- Mobile: collapsible filter block and list cards
+
+### Change Password
+
+- Simple form in both layouts
+- Keep validation inline
+
+### Pesan Khusus
+
+- Modal on desktop
+- Full-screen sheet or dedicated page on mobile
+