# TANRAIL ONE — UI/UX & Navigation Specification

## 1. Global Navigation Concept
Because TANRAIL ONE handles multiple businesses, the UI must clearly communicate to the user *where* they currently are (Context) before they take any action.

### 1.1 The Context Switcher
- Located prominently in the Top Navigation Bar (e.g., top right or top left).
- Displays the currently active Business Unit and Branch (e.g., `Restaurant - Main Branch`).
- Clicking it opens a dropdown allowing the user to switch to other BUs/Branches they have permissions for.

## 2. Dashboard Architecture

### 2.1 The Gateway (Login Landing)
- If a user only has access to one BU, they bypass the gateway and land directly on that BU's dashboard.
- If a user has access to multiple BUs (or is an Executive), they land on a "Gateway" page to select their destination.

### 2.2 Executive Dashboard (Global Context)
- Only visible to Director/Executive roles.
- Shows consolidated KPI widgets: Total Revenue (Cross-BU), Overall Cash Position, High-level Expenses.
- Contains charts comparing BU performance (e.g., Restaurant vs. Catering).

### 2.3 Operational Dashboard (BU Context)
- Tailored to the active BU.
- **Restaurant Example:** Shows Active Tables, Pending Kitchen Orders, Today's Sales.
- **Catering Example:** Shows Upcoming Events this week, Outstanding Proposals, Preparation alerts.

## 3. Sidebar Navigation (Dynamic)
The left sidebar navigation is dynamic. It only renders links based on:
1. The enabled modules for the active Business Unit.
2. The user's permissions within that Business Unit.

**Structure:**
- 📊 Dashboard
- 📦 Master Data (Customers, Products)
- 🛒 Operations (Sales, Orders, Inventory)
- 💰 Finance (Invoices, Expenses)
- ⚙️ Settings (BU Config, Users)

*(If the user switches to the Restaurant BU, a specific "🍽️ Table Management" link appears. If they switch to Catering, it disappears, replaced by "📅 Events".)*

## 4. Common UI Patterns

### 4.1 Data Tables
- All listing pages must use a standardized Data Table component.
- **Required features:** Global Search, Column Sorting, Pagination, and Filter persistence (saving state in URL query params or local storage).

### 4.2 Forms & Modals
- Prefer Modals/Slide-overs for quick creation (e.g., "Add New Customer") so the user doesn't lose their context on the main page.
- Use full-page forms for complex, multi-step creations (e.g., "Create Catering Event").

### 4.3 Action Confirmation
- Destructive actions (Cancel Order, Void Invoice) must require a confirmation modal, and ideally require the user to input a "Reason" for the audit log.

## 5. Responsive Considerations
- **Management UI:** Optimized for Desktop/Tablet.
- **POS / Waiter UI:** Highly optimized for Tablet (iPad) and Mobile touch targets.
- **Driver / Delivery UI:** Strictly mobile-first.