82 lines
1.7 KiB
Markdown
82 lines
1.7 KiB
Markdown
# 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
|
|
|