# SYSTEM_DESIGN.md - PHARMATRA UI, Design & Dynamics

## Design System
### Colors
| Token | Hex | Usage |
| --- | --- | --- |
| bg-primary | `#FFFFFF` | Main background/surfaces |
| bg-secondary | `#F3F6FA` | Page background, tables headers |
| brand-sky | `#87CEEB` | Accents, icons bg |
| text-primary | `#173B5E` | Headings, nav, primary text |
| text-secondary | `rgba(23,59,94,0.7)` | Descriptions |
| action | `#1687D9` | Buttons, links, active states |
| action-hover | `#1376c4` | Hover |
| border | `#E5E7EB` | Inputs, cards, dividers |
| success/warn/error | Tailwind defaults with context | Status |

### Typography
- Font: Inter/System stack via Tailwind
- Headings: font-semibold text-[#173B5E]
- Body: text-sm/base
- Labels: text-sm font-medium

### Spacing
- Consistent gap-2/4/6
- Card padding p-4/p-6
- Page padding p-4

## Layouts
### Auth Layout (AuthSimpleLayout)
- Centered card on light bg
- PHARMATRA logo mark (PT)
- Clean form styling

### App Layout (Sidebar)
- Collapsible sidebar with PHARMATRA logo
- Nav items: Dashboard, POS, Medicines, Inventory, Purchases, Suppliers, Prescriptions, Patients, Finance, Reports, Settings
- Header with breadcrumbs
- Main content area

### POS Layout (standalone, no sidebar)
- Full viewport
- Top bar with title + back link
- Two columns: product grid | cart/checkout
- Optimized for speed

## Component Patterns
### Tables
- Header bg-[#F3F6FA]
- Hover bg-[#F3F6FA]/50
- Borders, rounded corners
- Action buttons aligned right

### Forms
- Labels above inputs
- shadcn-vue inputs/selects/checkboxes
- Validation errors below fields
- Primary action button with action color

### Cards
- White bg, border, rounded-xl, shadow-sm
- Header with title

### Buttons
- Primary: bg-[#1687D9] text-white hover:bg-[#1376c4]
- Secondary: outline
- Ghost: subtle

### Status Badges
- Active/Available: green
- Low stock: orange
- Expired/Quarantined: red
- Pending: yellow/gray

## Page Dynamics
### Dashboard
- KPI cards (Sales, Products, Low Stock, Expiring)
- Recent transactions
- Low stock/expiry alerts

### Medicines
- List with search/filter
- Add/Edit form
- Flags for prescription/controlled

### Inventory
- Batch list with expiry dates
- Alerts for near-expiry/expired
- Stock movements

### POS
- Real-time search
- Cart add/update/remove
- Batch selection if multiple
- Totals auto-calculate
- Payment modal
- Receipt generation

### Purchases/GRN
- PO creation
- GRN with batch details/expiry
- Auto-update stock on receive

## Responsive Behavior
- Sidebar collapses to icon
- Tables scroll horizontally on small screens
- POS remains usable on desktop/tablet

## Interactions
- Hover states
- Loading spinners
- Toasts for success/error
- Confirm dialogs for destructive actions