doclink_web/project-specs/UI_PLAN.md

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