# UI/UX SPECIFICATIONS

[← Về Overview](../../README.md) | [Next: Component Library →](./03-component-library.md)

---

## 17.1. Layout Structure

- **Header**: Logo, Navigation Menu, User Profile, Notifications
- **Sidebar**: Main Navigation (Collapsible)
- **Main Content Area**: Dynamic content based on route
- **Footer**: Copyright, Links

---

## 17.2. Key Pages & Components

### 17.2.1. Dashboard Pages

- **Executive Dashboard**:
    - KPI Cards (PR, Availability, Revenue, OPEX)
    - Portfolio Summary Chart
    - Alerts Summary
    - Recent Activities
    - Trend Charts (Line/Bar charts)
- **Operational Dashboard**:
    - Real-time Status Map
    - Work Order Status Cards
    - Asset Health Indicators
    - Performance Charts
- **Financial Dashboard**:
    - Revenue Trends Chart
    - Cost Breakdown (Pie/Donut chart)
    - Budget vs Actual (Bar chart)
    - ROI/IRR Metrics

### 17.2.2. Asset Management Pages

- **Asset List**: Table with filters, search, pagination
- **Asset Detail**: Tabs (Overview, Performance, History, Documents, Work Orders)
- **Asset Hierarchy Tree**: Expandable tree view
- **Asset Form**: Create/Edit form with validation

### 17.2.3. O&M Pages

- **Ticket List**: Kanban board or Table view, Filters
- **Ticket Detail**: Timeline, Comments, Attachments, Status updates
- **Work Order List**: Calendar view, List view, Filters
- **Work Order Detail**: Checklist, Photos, Signatures, Cost breakdown
- **PM Schedule**: Calendar view, List view

### 17.2.4. Inventory Pages

- **Inventory List**: Table with stock levels, Low stock alerts
- **Stock Transaction History**: Table with filters
- **Inventory Form**: Create/Edit with stock levels

### 17.2.5. Financial Pages

- **Budget List**: Table with variance indicators
- **Transaction List**: Table with filters, Export
- **Meter Reading Form**: Input form with validation
- **Financial Reports**: Charts and tables

### 17.2.6. Reporting Pages

- **Report Builder**: Drag-and-drop interface
- **Report List**: List of saved reports
- **Report Viewer**: PDF/Excel viewer

---

## 17.3. Common UI Components

- **Data Table**: Sortable, Filterable, Paginated, Exportable
- **Form Components**: Input, Select, DatePicker, FileUpload, RichTextEditor
- **Charts**: Line, Bar, Pie, Area, Gauge charts
- **Modals**: Confirm dialogs, Form modals
- **Notifications**: Toast notifications, In-app notifications
- **Loading States**: Skeleton loaders, Spinners
- **Empty States**: No data messages with actions

---

## 17.4. Responsive Design

- **Desktop**: Full feature set, Multi-column layouts
- **Tablet**: Adapted layouts, Touch-friendly
- **Mobile**: Simplified views, Bottom navigation, Swipe gestures

---

**Next**: [Component Library](./03-component-library.md)