**Prepared by:** Oditha

**Date:** 23 January 2026

**Version:** 1.0

**Reference:** [FRD - HoReCa Field Operations & Workflow Management](https://www.notion.so/FRD-HoReCa-Field-Operations-Workflow-Management-2f7cd2773bc548c9a2595d856f15ac15?pvs=21)

---

## Overview

This document provides detailed wireframe specifications for the **System Admin Portal** of the Lion HoReCa Excellence system. The admin portal is built on the existing **Commercial Excellence Laravel System Admin** platform.

---

## Design Principles

### Layout & Navigation

-   Responsive design using Bootstrap 5 or Tailwind CSS
-   Collapsible sidebar navigation (mobile-friendly)
-   Breadcrumb navigation for deep hierarchies
-   Sticky header with user profile and notifications
-   Role-based menu visibility

### Visual Hierarchy

-   Primary actions: Blue buttons (Create, Save, Submit)
-   Secondary actions: Gray buttons (Cancel, Back)
-   Destructive actions: Red buttons (Delete, Deactivate)
-   Success states: Green badges/alerts
-   Warning states: Yellow badges/alerts
-   Error states: Red badges/alerts

### Data Display

-   Data tables: Sortable, filterable, paginated (25/50/100 per page)
-   Form validation: Real-time with clear inline error messages
-   Confirmation dialogs: For all destructive actions
-   Loading states: Spinner overlays for async operations

---

## Global Layout Structure

### Header (Top Bar)

**Height:** 60px

**Background:** Primary brand color

**Left Section:**

-   Logo (clickable, links to dashboard)
-   Workspace name: "Lion HoReCa Excellence"

**Right Section:**

-   Search bar (global search)
-   Notification bell icon with badge count
-   User avatar with dropdown:
    -   Profile
    -   Settings
    -   Logout

### Sidebar Navigation (Left Panel)

**Width:** 250px (collapsed: 60px)

**Background:** Dark gray (#2C3E50)

**Menu Structure:**

-   **Dashboard** (icon: 📊)
-   **Workflow Management** (icon: 🔄)
    -   Workflows
    -   Workflow Group Templates
-   **Outlet Management** (icon: 🏪)
    -   Outlets
    -   Brands
    -   Equipment Types
-   **POSM Module** (icon: 📋)
    -   POSM Norms
    -   Audit Schedule
    -   Audit Reports
-   **Service Requests** (icon: 🛠️)
    -   Categories
    -   Templates
    -   All Requests
-   **Reports** (icon: 📈)
    -   Visit Coverage
    -   Workflow Compliance
    -   POSM Audits
    -   Service Requests
    -   Brand Availability
    -   Competitor Intelligence
    -   Red Flags
-   **User Management** (icon: 👥)
    -   Users
    -   Roles & Permissions
-   **System Settings** (icon: ⚙️)

**Active state:** Highlighted with accent color, left border indicator

### Main Content Area

**Padding:** 24px

**Background:** Light gray (#F5F7FA)

**Typical structure:**

1. Page header (title + actions)
2. Filters/search (if applicable)
3. Content (table, form, dashboard widgets)
4. Pagination (if applicable)

---

## Page Wireframes

### 1. Dashboard Page

**Route:** `/admin/dashboard`

**Access:** All admin users (role-based data filtering)

#### Layout

**Page Header**

-   Title: "Dashboard"
-   Date range selector (dropdown):
    -   Today
    -   Last 7 days
    -   Last 30 days
    -   Custom (date picker)
-   Refresh button (icon)
-   Export button (PDF)

**KPI Cards Section** (Top Row)

4 cards in a row (responsive: 2x2 on tablet, stacked on mobile)

**Card 1: Outlets Visited Today**

-   Large number (e.g., 42)
-   Trend indicator: ↑ 12% vs yesterday (green) or ↓ 8% (red)
-   Icon: 🏪

**Card 2: Workflows Completed Today**

-   Large number (e.g., 156)
-   Completion rate: 89% (progress bar)
-   Icon: ✅

**Card 3: Pending Service Requests**

-   Large number (e.g., 23)
-   SLA breach count: 5 (red badge)
-   Icon: 🛠️

**Card 4: Overdue POSM Audits**

-   Large number (e.g., 8)
-   Clickable to drill down
-   Icon: ⚠️

**Visualizations Section** (Middle)

**Row 1: Two columns**

**Left Column (60%):**

**Visit Coverage Chart**

-   Type: Bar chart
-   X-axis: Users (LSR/TM names)
-   Y-axis: Outlet count
-   Two bars per user: Assigned (gray) vs Visited (blue)
-   Hover: Show exact numbers
-   Legend: Top right

**Right Column (40%):**

**Service Request Status**

-   Type: Pie chart
-   Segments: Open, In Progress, Resolved, Closed
-   Colors: Gray, Blue, Yellow, Green
-   Center: Total count
-   Hover: Show percentage

**Row 2: Full Width**

**Workflow Completion Trend**

-   Type: Line chart
-   X-axis: Dates (based on selected range)
-   Y-axis: Workflow count
-   Line color: Blue
-   Fill: Light blue gradient
-   Data points: Clickable

**Row 3: Full Width**

**Brand Availability Score**

-   Type: Horizontal bar chart
-   Y-axis: Brand names
-   X-axis: Availability percentage (0-100%)
-   Color: Green (>90%), Yellow (70-90%), Red (<70%)
-   Show percentage value at end of each bar

**Red Flags Section** (Bottom)

**Section Header:**

-   Title: "Red Flags" with warning icon
-   Badge count: Total red flags

**Tabs:**

-   Overdue POSM Audits (badge count)
-   SLA Breached (badge count)
-   Must-Have Brand Stockouts (badge count)
-   Unvisited Outlets (badge count)
-   Pending High Priority SRs (badge count)
-   Geolocation Issues (badge count)

**Tab Content: Data Table**

-   Columns vary per tab
-   Example (Overdue Audits):
    -   Outlet Name
    -   Assigned TM
    -   Scheduled Date
    -   Due Date
    -   Days Overdue (red badge)
    -   Actions (View, Escalate)
-   Click row to navigate to detail

---

### 2. Workflow Management - Workflows List

**Route:** `/admin/workflows`

**Access:** System Administrator

#### Layout

**Page Header**

-   Title: "Workflows"
-   Button: "+ Create Workflow" (primary, right-aligned)

**Filters Bar**

-   Search box: "Search by name..."
-   Filter by Category: Dropdown (All, Impulse, Cooler, Branding, Pouring Material, Competitor, Audit, Custom)
-   Filter by Status: Dropdown (All, Active, Inactive)
-   Clear Filters button

**Data Table**

**Columns:**

1. Icon (colored, small)
2. Workflow Name (bold, clickable)
3. Category (badge with color)
4. Steps Count (e.g., "8 steps")
5. Status (toggle switch: Active/Inactive)
6. Used In Templates (count, clickable)
7. Last Updated (date)
8. Actions (dropdown):
    - Edit
    - Duplicate
    - View Details
    - Delete (if not used in templates)

**Row Actions:**

-   Click row to open detail view
-   Toggle status inline (with confirmation)

**Pagination:**

-   Bottom center
-   Show: "Showing 1-25 of 143 workflows"
-   Per page selector: 25, 50, 100
-   Previous/Next buttons

---

### 3. Workflow Management - Create/Edit Workflow

**Route:** `/admin/workflows/create` or `/admin/workflows/{id}/edit`

**Access:** System Administrator

#### Layout

**Page Header**

-   Title: "Create Workflow" or "Edit Workflow: [Name]"
-   Breadcrumb: Dashboard > Workflows > Create/Edit
-   Actions (right):
    -   Cancel (secondary)
    -   Save Draft (secondary)
    -   Save & Activate (primary)

**Form Layout: Tabbed Interface**

**Tab 1: Basic Information**

**Section: Workflow Details**

-   Field: Workflow Name (text input, required, max 100 chars)
-   Field: Description (textarea, optional, max 500 chars, character counter)
-   Field: Category (dropdown, required):
    -   Options: Impulse, Cooler, Branding, Pouring Material, Competitor, Audit, Custom
-   Field: Icon (emoji picker)
-   Field: Color (color picker with preset swatches)
-   Field: Status (radio buttons: Active / Inactive)

**Validation:**

-   Unique workflow name check on blur
-   Required fields highlighted in red if empty on submit

**Tab 2: Workflow Steps**

**Header Section:**

-   Button: "+ Add Step" (primary)
-   Info text: "Drag to reorder steps"

**Steps List: Accordion View**

Each step displayed as collapsible card with drag handle:

**Step Card Header (Collapsed):**

-   Drag handle icon (left)
-   Step number badge (e.g., "1")
-   Step name (bold)
-   Question type badge (Selection / Text Area)
-   Mandatory badge (if applicable)
-   Actions (right): Edit, Duplicate, Delete
-   Expand/collapse icon

**Step Card Body (Expanded):**

**Basic Fields:**

-   Field: Step Name (text input, required, max 100 chars)
-   Field: Step Description (textarea, optional, max 300 chars)
-   Field: Instructions (rich text editor, optional)
-   Field: Question Type (radio buttons):
    -   Selection
    -   Text Area

**If Question Type = Selection:**

-   Field: Selection Type (radio buttons):
    -   Yes/No
    -   Single Choice
    -   Multiple Choice
-   Field: Options (repeater field):
    -   Each option has:
        -   Option text (text input)
        -   Option value (auto-generated or custom)
        -   "+ Add Option" button
        -   Delete option button

**Configuration Options:**

-   Checkbox: Mandatory Step (cannot skip)
-   Checkbox: Allow Skip (show if not mandatory)
    -   If checked: Field "Skip Reason Options" (repeater)
-   Checkbox: Enable Remarks Field
-   Checkbox: Require Photo
    -   If checked: Field "Photo Count" (number input, 1-10)
-   Field: Sample Photo (file upload, optional)
    -   Shows preview if uploaded

**Service Request Trigger Section:**

-   Checkbox: "Trigger Service Request"
-   If checked:
    -   Field: Trigger On (dropdown, select step option)
    -   Field: Service Request Category (dropdown)
    -   Field: Service Request Template (dropdown, filtered by category)

**Actions:**

-   Save Step (primary)
-   Cancel (secondary)

**Empty State** (No steps added):

-   Illustration
-   Text: "No steps added yet"
-   Button: "+ Add Your First Step"

**Tab 3: Conditional Logic**

**Header Section:**

-   Button: "+ Add Condition" (primary)
-   Info text: "Define when steps should be shown based on previous responses"

**Visual Flow Builder:**

Display workflow steps as connected nodes:

**Node Structure:**

-   Step number and name
-   Question type icon
-   Conditional branches (if any) shown as arrows

**Add Condition Interface:**

-   Field: "Show step" (dropdown, select target step)
-   Field: "If step" (dropdown, select condition step)
-   Field: "Answer" (dropdown, options from condition step)
-   Field: Logic Operator (dropdown: AND / OR, if multiple conditions)
-   Button: "+ Add Another Condition" (for AND/OR logic)
-   Button: Save Condition

**Existing Conditions List:**

-   Show as cards with condition description
-   Example: "Show Step 5 IF Step 3 = No"
-   Actions: Edit, Delete

**Validation:**

-   System validates no circular dependencies on save
-   Show warning if circular logic detected

**Empty State:**

-   Illustration
-   Text: "No conditional logic defined"
-   Subtext: "All steps will be shown in sequence"

**Tab 4: Preview**

**Preview Mode:**

-   Shows workflow as it would appear in mobile app
-   Step-by-step wizard simulation
-   Test conditional logic interactively
-   Non-functional (no data saved)

**Preview Controls:**

-   Restart Preview button
-   Close Preview button

---

### 4. Workflow Management - Workflow Group Templates List

**Route:** `/admin/workflow-templates`

**Access:** System Administrator

#### Layout

**Page Header**

-   Title: "Workflow Group Templates"
-   Button: "+ Create Template" (primary)

**Filters Bar**

-   Search box: "Search by name..."
-   Filter by Status: Dropdown (All, Active, Inactive)
-   Clear Filters button

**Data Table**

**Columns:**

1. Icon (colored)
2. Template Name (bold, clickable)
3. Workflows Count (e.g., "4 workflows")
4. Outlets Using (count, clickable)
5. Status (toggle switch)
6. Last Updated
7. Actions:
    - Edit
    - Duplicate
    - View Outlets
    - Delete (if no outlets using)

**Card View Toggle** (Alternative display mode)

-   Grid of cards (3 per row)
-   Each card shows:
    -   Icon and name
    -   Workflow list (bullet points)
    -   Outlet count
    -   Edit button

---

### 5. Workflow Management - Create/Edit Template

**Route:** `/admin/workflow-templates/create` or `/admin/workflow-templates/{id}/edit`

**Access:** System Administrator

#### Layout

**Page Header**

-   Title: "Create Template" or "Edit Template: [Name]"
-   Actions:
    -   Cancel
    -   Save

**Form Layout: Two-Column**

**Left Column (40%): Template Details**

**Section: Basic Information**

-   Field: Template Name (required)
-   Field: Description (textarea)
-   Field: Icon (emoji picker)
-   Field: Color (color picker)
-   Field: Status (toggle: Active/Inactive)

**Preview Panel:**

-   Shows template as it will appear
-   Updates in real-time

**Right Column (60%): Workflows**

**Section Header:**

-   Title: "Workflows in Template"
-   Button: "+ Add Workflow"

**Add Workflow Interface:**

-   Dropdown: Select workflow from available workflows
-   Checkbox: Mandatory (user must complete)
-   Field: Execution Order (number input, or auto-increment)
-   Button: Add

**Added Workflows List: Sortable Table**

**Columns:**

1. Drag handle
2. Order # (editable inline)
3. Workflow Name (with icon)
4. Category badge
5. Mandatory (checkbox, toggleable)
6. Actions: Remove

**Drag to reorder:**

-   Visual feedback on drag
-   Order numbers update automatically

**Empty State:**

-   Text: "No workflows added yet"
-   Button: "+ Add Your First Workflow"

**Bottom Actions:**

-   Preview Template (opens modal with mobile view)
-   Save Template

---

### 6. Outlet Management - Outlets List

**Route:** `/admin/outlets`

**Access:** System Administrator, Regional/Territory Managers (filtered by hierarchy)

#### Layout

**Page Header**

-   Title: "Outlets"
-   Buttons (right):
    -   Import CSV (secondary)
    -   Export (secondary)
    -   -   Create Outlet (primary)

**Filters Bar** (Collapsible)

-   Search: "Search by name or address..."
-   Filter: Territory (dropdown, hierarchical)
-   Filter: Region (dropdown)
-   Filter: Outlet Type (dropdown)
-   Filter: Status (dropdown: All, Active, Inactive)
-   Filter: Assigned User (dropdown with search)
-   Filter: Template (dropdown)
-   Show Advanced Filters (expands more options)
-   Clear All Filters button

**Advanced Filters** (When expanded):

-   Has Overdue Audit (checkbox)
-   Has Pending SR (checkbox)
-   Last Visited (date range picker)
-   Distance from location (requires geolocation permission)

**Data Table**

**Columns:**

1. Outlet Name (bold, clickable)
2. Outlet Type (badge)
3. Address (truncated, tooltip shows full)
4. Territory
5. Template Name
6. Assigned LSR (user avatar + name)
7. Last Visit (date, relative time)
8. Status Indicators (icons):
    - ⚠️ Overdue audit
    - 🛠️ Pending SR
    - ✅ All clear
9. Status (toggle: Active/Inactive)
10. Actions:
    - Edit
    - View Details
    - Assign Template
    - Deactivate/Activate

**Bulk Actions:**

-   Checkbox in header to select all
-   Checkbox per row
-   Bulk actions bar (appears when rows selected):
    -   Assign Template
    -   Change Status
    -   Export Selected
    -   Delete Selected

**Map View Toggle:**

-   Button: "Show on Map"
-   Opens map view with outlet markers
-   Click marker to see outlet details
-   Filter outlets visible on map

---

### 7. Outlet Management - Create/Edit Outlet

**Route:** `/admin/outlets/create` or `/admin/outlets/{id}/edit`

**Access:** System Administrator

#### Layout

**Page Header**

-   Title: "Create Outlet" or "Edit Outlet: [Name]"
-   Breadcrumb: Dashboard > Outlets > Create/Edit
-   Actions:
    -   Cancel
    -   Save

**Form Layout: Tabbed Interface**

**Tab 1: Basic Information**

**Section: Outlet Details**

-   Field: Outlet Name (required)
-   Field: Outlet Type (dropdown: Restaurant, Hotel, Café, Bar, Other)
-   Field: Contact Phone (optional)
-   Field: Contact Email (optional)
-   Field: Status (toggle: Active/Inactive)

**Section: Location**

-   Field: Address (textarea, required)
-   Field: Latitude (number input, required)
-   Field: Longitude (number input, required)
-   Button: "Pick on Map" (opens map modal)
-   Map preview (shows marker at coordinates)

**Section: Assignment**

-   Field: Territory (dropdown, hierarchical)
-   Field: Region (dropdown)
-   Field: Assigned LSR (dropdown with search, required)
-   Field: Assigned TM (auto-populated from LSR hierarchy, editable)
-   Field: Assigned SM (auto-populated from TM hierarchy, editable)

**Info:** Hierarchy chain displayed visually:

LSR → TM → SM

**Tab 2: Workflow Configuration**

**Section: Template Assignment**

-   Field: Workflow Group Template (dropdown, required)
-   Info: Shows preview of workflows in selected template

**Section: Workflow Customization**

For each workflow in template:

**Workflow Card:**

-   Header: Workflow name with icon
-   Toggle: Enable/Disable this workflow
-   If enabled:
    -   Expandable section: "Customize Steps"
    -   List of steps with enable/disable toggles
    -   Button: "+ Add Custom Step"

**Custom Step Interface** (Modal):

-   Same fields as workflow step creation
-   Option to insert at position

**Tab 3: Brand Configuration**

**Section: Must-Have Brands**

-   Multi-select dropdown: Select brands (from brand master)
-   Selected brands shown as chips with remove button
-   Empty state: "No must-have brands configured"

**Section: Optional Brands**

-   Multi-select dropdown: Select brands
-   Selected brands shown as chips
-   Empty state: "No optional brands configured"

**Info Panel:**

-   "Must-have brands will trigger alerts if reported unavailable"

**Tab 4: Equipment & Materials**

**Section: Coolers**

-   Button: "+ Add Cooler"
-   Table:
    -   Columns: Type, Quantity, Serial Numbers, Actions
    -   Inline editing

**Add Cooler Form:**

-   Field: Cooler Type (dropdown)
-   Field: Quantity (number)
-   Field: Serial Numbers (textarea, one per line, optional)
-   Save / Cancel

**Section: Branding Materials**

-   Button: "+ Add Material"
-   Table: Type, Quantity, Actions

**Section: Pouring Materials**

-   Button: "+ Add Material"
-   Table: Type, Quantity, Actions

**Tab 5: History** (Edit mode only)

**Timeline View:**

-   All changes to outlet record
-   Visit history (last 10 visits)
-   Workflow execution summary
-   Service requests related to outlet

**Filter Timeline:**

-   All Activity
-   Visits Only
-   Config Changes Only
-   Service Requests Only

---

### 8. POSM Module - Norms Management

**Route:** `/admin/posm/norms`

**Access:** System Administrator

#### Layout

**Page Header**

-   Title: "POSM Norms"
-   Buttons:
    -   Import CSV
    -   Export
    -   -   Add Material

**Info Panel:**

-   Text: "Define standard quantities of POSM materials per outlet type"
-   Link: "View version history"

**Norms Table**

**Filter:**

-   Dropdown: Filter by Outlet Type (All, Restaurant, Hotel, Café, Bar)

**Columns:**

1. Material Name
2. Category (Signage, Cooler, Branding, Pouring)
3. Restaurant (quantity)
4. Hotel (quantity)
5. Café (quantity)
6. Bar (quantity)
7. Actions (Edit, Delete)

**Inline Editing:**

-   Double-click quantity cell to edit
-   Enter to save, Esc to cancel

**Add Material Form** (Modal):

-   Field: Material Name
-   Field: Category (dropdown)
-   For each outlet type:
    -   Field: Standard Quantity (number)
-   Save / Cancel

**Version Control Section:**

-   Current Version badge
-   Effective Date
-   Button: "Create New Version" (saves current as historical)
-   Link: "View Version History"

---

### 9. POSM Module - Audit Schedule

**Route:** `/admin/posm/audit-schedule`

**Access:** System Administrator, TMs, SMs

#### Layout

**Page Header**

-   Title: "POSM Audit Schedule"
-   Button: "Generate Manual Audit" (for exceptions)

**View Switcher:**

-   List View (default)
-   Calendar View

**Filters:**

-   Search by outlet name
-   Filter by Status: All, Scheduled, In Progress, Completed, Overdue
-   Filter by TM (dropdown)
-   Date Range

**Data Table (List View)**

**Columns:**

1. Outlet Name
2. Assigned TM
3. Scheduled Date
4. Due Date (scheduled + 5 days)
5. Status (badge: Scheduled, Completed, Overdue)
6. Days Until Due (countdown, red if overdue)
7. Last Completed (date)
8. Actions:
    - View Details
    - Mark Complete (TM only)
    - Flag Issue

**Row Highlighting:**

-   Overdue: Red background
-   Due today: Yellow background
-   Completed: Green checkmark

**Calendar View:**

-   Monthly calendar
-   Each date shows audit count
-   Click date to see audits scheduled
-   Color coding: Green (completed), Yellow (scheduled), Red (overdue)

---

### 10. Service Requests - All Requests

**Route:** `/admin/service-requests`

**Access:** All users (filtered by role)

#### Layout

**Page Header**

-   Title: "Service Requests"
-   Button: "+ Create Manual Request" (optional)

**Filters Bar:**

-   Search: "Search by title, outlet, or ID..."
-   Filter: Status (dropdown: All, Open, In Progress, Resolved, Closed, Cancelled)
-   Filter: Category (dropdown)
-   Filter: Priority (dropdown: All, Low, Medium, High, Critical)
-   Filter: Assigned To (dropdown with search)
-   Filter: Created Date (date range)
-   Show SLA Breached Only (checkbox)

**Data Table**

**Columns:**

1. SR ID (e.g., SR-00123)
2. Title (clickable)
3. Category (badge)
4. Outlet Name
5. Created By (user avatar + name)
6. Assigned To (user avatar + name)
7. Priority (colored badge)
8. Status (badge with color)
9. SLA Due (countdown, red if breached)
10. Created Date
11. Actions:
    - View Details
    - Update Status
    - Reassign

**Row Highlighting:**

-   SLA breached: Red border on left
-   High/Critical priority: Bold text

**Kanban View Toggle:**

-   Button: "Show Kanban"
-   Columns: Open, In Progress, Resolved, Closed
-   Drag cards to change status
-   Card shows: ID, title, outlet, assigned to, SLA countdown

---

### 11. Service Request Detail Page

**Route:** `/admin/service-requests/{id}`

**Access:** Creator, assigned user, admins

#### Layout

**Page Header**

-   Breadcrumb: Dashboard > Service Requests > SR-00123
-   Title: SR-00123
-   Status badge (large)
-   Actions (right):
    -   Update Status (dropdown button)
    -   Reassign
    -   Print
    -   Close

**Two-Column Layout**

**Left Column (70%)**

**Section: Request Details**

-   Title (editable inline)
-   Description (rich text, read-only)
-   Category badge
-   Priority badge
-   Outlet name (link to outlet)
-   Related workflow (link)
-   Related step (if applicable)

**Section: Activity Log**

-   Timeline view (reverse chronological)
-   Each activity shows:
    -   User avatar
    -   Action description
    -   Timestamp (relative)
    -   Old value → New value (if status change)
    -   Comments (if any)

**Add Comment:**

-   Textarea
-   File attachment button
-   Submit button

**Right Column (30%)**

**Section: Status & Assignment**

-   Current Status (large badge)
-   Change Status (dropdown):
    -   Options based on current status
    -   Confirmation required
-   Assigned To (user card)
-   Reassign button

**Section: Timeline**

-   Created: Date/time
-   SLA Due: Date/time with countdown
-   Resolved: Date/time (if applicable)
-   Closed: Date/time (if applicable)
-   Total Resolution Time: X hours/days

**Section: Context**

-   Created By (user card)
-   Outlet Details (card with link)
-   Workflow Context (if applicable)
-   Attachments (thumbnail gallery)

---

### 12. Reports - Visit Coverage

**Route:** `/admin/reports/visit-coverage`

**Access:** All admin users (role-based filtering)

#### Layout

**Page Header**

-   Title: "Visit Coverage Report"
-   Buttons:
    -   Export CSV
    -   Export PDF
    -   Schedule Report (email)

**Filters Panel:**

-   Date Range (required)
-   User (dropdown: All, or select LSR/TM/SM)
-   Territory (dropdown)
-   Outlet Type (dropdown)
-   Apply Filters button

**Summary Cards:**

-   Total Outlets Assigned
-   Total Outlets Visited
-   Coverage % (large, colored)
-   Avg Visits per Outlet

**Drill-Down Hierarchy:**

-   Buttons: National → Region → Territory → SM → TM → LSR → Outlet
-   Breadcrumb shows current level

**Data Table**

**Columns (vary by hierarchy level):**

At LSR level:

1. LSR Name
2. Outlets Assigned
3. Outlets Visited
4. Coverage %
5. Total Visits
6. Avg Time per Visit
7. Last Visit Date
8. Actions: Drill Down

At Outlet level:

1. Outlet Name
2. Visit Date
3. Check-In Time
4. Check-Out Time
5. Time Spent
6. Workflows Completed
7. Visit Outcome
8. Geolocation Status
9. Actions: View Details

**Visualizations:**

-   Coverage % trend chart (line chart over time)
-   Top Performers table (LSRs with highest coverage)
-   Bottom Performers table (LSRs with lowest coverage)

---

### 13. Reports - Red Flags Dashboard

**Route:** `/admin/reports/red-flags`

**Access:** All admin users

#### Layout

**Page Header**

-   Title: "Red Flags Dashboard"
-   Auto-refresh toggle (every 15 min)
-   Last Updated timestamp
-   Export button

**Summary Cards** (Top Row)

6 cards showing count per category:

1. Overdue POSM Audits
2. SLA Breached Service Requests
3. Must-Have Brand Stockouts
4. Unvisited Outlets
5. Pending High Priority SRs
6. Geolocation Compliance Issues

**Each card:**

-   Large count (colored based on severity)
-   Icon
-   Click to filter table below

**Tabs:**

-   All Red Flags (default, shows all)
-   One tab per category

**Data Table** (Content varies per tab)

**Example: Overdue POSM Audits Tab**

**Columns:**

1. Outlet Name (clickable)
2. Outlet Type
3. Territory
4. Assigned TM (user card)
5. Scheduled Date
6. Due Date
7. Days Overdue (red badge)
8. Actions:
    - View Audit
    - Escalate (sends notification to SM)
    - Assign to Another TM

**Example: SLA Breached Tab**

**Columns:**

1. SR ID (clickable)
2. Title
3. Category
4. Outlet
5. Assigned To
6. SLA Due
7. Hours Overdue
8. Actions:
    - View SR
    - Escalate
    - Reassign

**Escalation Action:**

-   Modal opens
-   Select user to escalate to (dropdown)
-   Add comment (textarea)
-   Send button
-   Notification sent to selected user

---

## Form Patterns

### Validation States

**Default State:**

-   Border: Light gray
-   Label: Dark gray

**Focus State:**

-   Border: Blue
-   Label: Blue

**Error State:**

-   Border: Red
-   Label: Red
-   Error message below field (red text, icon)

**Success State:**

-   Border: Green
-   Checkmark icon (right side)

**Disabled State:**

-   Background: Light gray
-   Border: Gray
-   Cursor: not-allowed

### Required Fields

-   Asterisk (\*) next to label
-   Or "Required" badge

### Help Text

-   Below field
-   Gray italic text
-   Icon: ℹ️

### Field Groups

-   Group related fields with visual border
-   Group title
-   Collapsible if appropriate

---

## Component Library

### Buttons

**Primary Button:**

-   Background: Blue (#3498DB)
-   Text: White
-   Hover: Darker blue
-   Icon support (left or right)

**Secondary Button:**

-   Background: Gray (#95A5A6)
-   Text: White
-   Hover: Darker gray

**Destructive Button:**

-   Background: Red (#E74C3C)
-   Text: White
-   Hover: Darker red
-   Confirmation required

**Ghost Button:**

-   Background: Transparent
-   Border: Gray
-   Text: Gray
-   Hover: Light gray background

**Button Sizes:**

-   Small: 32px height
-   Medium: 40px height (default)
-   Large: 48px height

### Badges

**Status Badges:**

-   Active: Green background, white text
-   Inactive: Gray background, white text
-   Pending: Yellow background, dark text
-   Error: Red background, white text

**Count Badges:**

-   Small circular badge
-   Red for alerts/warnings
-   Blue for info

### Modals

**Structure:**

-   Overlay: Semi-transparent dark background
-   Modal: White box, centered
-   Header: Title + close button
-   Body: Content
-   Footer: Action buttons (right-aligned)

**Sizes:**

-   Small: 400px width
-   Medium: 600px width (default)
-   Large: 800px width
-   Full-screen: For complex forms

### Tables

**Header:**

-   Background: Light gray
-   Bold text
-   Sortable columns: Arrow icon
-   Filterable columns: Filter icon

**Rows:**

-   Alternating row colors (zebra striping) optional
-   Hover: Light blue background
-   Selected: Blue background, white text

**Pagination:**

-   Center-aligned
-   Show page numbers: 1 2 3 ... 10
-   Previous/Next buttons
-   Page size selector

### Dropdowns

**Single Select:**

-   Click to open
-   Search within dropdown (if many options)
-   Selected option highlighted

**Multi-Select:**

-   Checkboxes for each option
-   "Select All" option
-   Selected count badge
-   Chip display of selected items below

### Date Pickers

**Single Date:**

-   Calendar popup
-   Month/year selector
-   Today button
-   Clear button

**Date Range:**

-   Start date and end date fields
-   Calendar shows both dates highlighted
-   Preset ranges: Today, Last 7 days, Last 30 days, This month

### Toast Notifications

**Position:** Top-right corner

**Types:**

-   Success: Green, checkmark icon
-   Error: Red, X icon
-   Warning: Yellow, exclamation icon
-   Info: Blue, info icon

**Behavior:**

-   Auto-dismiss after 5 seconds
-   Manual dismiss: X button
-   Stack multiple toasts

---

## Responsive Behavior

### Desktop (>1200px)

-   Full sidebar visible
-   Multi-column layouts
-   All features accessible

### Tablet (768px - 1200px)

-   Collapsible sidebar (hamburger menu)
-   Two-column layouts become single column
-   Tables scroll horizontally if needed

### Mobile (<768px)

-   Sidebar hidden (hamburger menu)
-   All single-column layouts
-   Tables converted to card view
-   Simplified filters (collapsible)
-   Floating action buttons for primary actions

---

## Accessibility

-   WCAG 2.1 AA compliance
-   Keyboard navigation support (tab order)
-   Focus indicators visible
-   ARIA labels for screen readers
-   Color contrast ratios: Minimum 4.5:1
-   Alt text for all images
-   Form labels properly associated

---

**Document Status:** Final

**Next Steps:** Share with UI/UX team and frontend developers for implementation