# 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