# System Admin Web Portal - Wireframes # System Admin Web Portal - UI Specifications **Platform:** Responsive Web Admin Panel (Desktop, Tablet) **User Role:** System Administrator **Authentication:** Email + Password (Laravel Breeze) **Primary Use Cases:** Master data management, configuration, user management, monitoring **Reference:** [01 - System Admin Wireframe](https://www.notion.so/01-System-Admin-Wireframe-a207f916ff094481abd58d20a67ac14e?pvs=21) --- ## Screen Specifications ### SA-02: Dashboard **Route:** `/admin/dashboard` **Access:** All admin users (role-based data filtering) #### Layout **Page Header** - Title: "Dashboard" (32px on desktop, 24px on tablet, Inter Bold) - Date range selector (dropdown, right-aligned): - Today - Last 7 days - Last 30 days - Custom (date picker) - Refresh button (icon, right of date selector) - Export button (PDF, right-aligned) **KPI Cards Section** Four cards displayed in a single row (responsive: 2×2 grid on tablet, stacked on mobile). Each card measures 220px × 140px with white background, border-radius 8px, and subtle shadow. **Card 1: Products** - Icon: 📦 emoji (32px) - Large number: "245" (36px, bold, primary text color #212121) - Label: "Total" (14px, gray #757575) - Hover effect: Shadow increases slightly **Card 2: Outlets** - Icon: 📍 emoji (32px) - Large number: "189" (36px, bold) - Label: "Active" (14px, gray) **Card 3: Users** - Icon: 👥 emoji (32px) - Large number: "47" (36px, bold) - Label: "Active" (14px, gray) **Card 4: Events** - Icon: 🎯 emoji (32px) - Large number: "12" (36px, bold) - Label: "Active" (14px, gray) **Recent Activity Panel** Located below KPI cards, left column (60% width), white card background, 24px padding. **Components:** - Section title: "Recent Activity" (24px, Inter Semibold) - List of last 10 activities, each item containing: - Icon (20px, colored based on activity type) - Description text (14px, primary text): "New outlet added: ABC" - User attribution (14px, gray): "by John Doe" - Timestamp (12px, gray): "2 hours ago" - "View All Activity" button (bottom of card, text link, blue) - Auto-refresh: Every 30 seconds **Pending Approvals Panel** Right column (40% width), height 300px, white card. **Components:** - Section title: "Pending Approvals" (24px, Inter Semibold) - List of items requiring admin action: - Brief description (14px, primary text) - Additional details (12px, gray) - Each item clickable to navigate to detail - "View All" button (bottom) **System Health Bar** Full width, below activity panels, 48px height, white background. **Components:** - Status indicators with labels: - Database: ● Online (green dot #10B981, 8px) - API: ● Healthy (green dot) - Storage: 67% used (text with percentage) - Each indicator: 14px text, Inter Regular **Behavior:** - All cards are clickable to drill down to respective modules - Activity list updates in real-time - System health indicators refresh every minute --- ### SA-03: Products List **Route:** `/admin/products` **Access:** System Administrator #### Layout **Page Header** - Title: "Products Management" (32px, Inter Bold) - Action buttons (right-aligned): - "+ Add Product" (primary button, blue #3B82F6, white text, 40px height, 6px border-radius) - "Import CSV" (secondary button, white background, gray border, gray text) **Filters Bar** Positioned below header, full width, 16px vertical spacing. **Components:** - Search input: Placeholder "Search by SKU, name..." (300px width, 40px height, outlined) - Category dropdown: "Category ▾" (120px width) - Status dropdown: "Status ▾" (100px width) - Export button: "Export" (outline style, gray) **Data Table** White background card, 24px padding, border-radius 8px. **Table Columns:** 1. **SKU** (120px width): Product SKU code (14px, Inter Regular) 2. **Name** (250px width): Product name (14px, Inter Medium, clickable) 3. **Category** (150px width): Badge with category name (12px, colored background) 4. **Price** (120px width): Right-aligned, "LKR 250" format (14px, Inter Regular) 5. **Stock** (100px width): Right-aligned, unit count (14px) 6. **Actions** (60px width): Dropdown menu icon (•••) **Table Features:** - Header row: Light gray background #F1F5F9, bold text - Alternating row colors: White and #F8FAFC - Row hover: Light blue background #EFF6FF - Sortable columns: Click header to toggle ascending/descending (arrow indicator) - Sticky header: Remains visible on scroll **Actions Menu** (Dropdown on click •••): - View Details - Edit - Duplicate - Deactivate - Delete (red text) **Pagination** Bottom of table, center-aligned. **Components:** - Text: "Showing 1-25 of 245 products" (14px, gray) - Previous button: [◄] - Page numbers: [1] 2 3 ... 10 (current page highlighted) - Next button: [►] - Per page selector: Dropdown "25 ▾" (options: 25, 50, 100) **Behavior:** - Search: Live filtering with 300ms debounce - Click row: Navigate to product detail - Bulk select: Checkbox column appears when first item checked - Table updates: Smooth fade transition --- ### SA-04: Product Create/Edit **Route:** `/admin/products/create` or `/admin/products/{id}/edit` **Access:** System Administrator #### Layout **Page Header** - Breadcrumb: "Products > Create New Product" (14px, gray, clickable links) - Back link: "[← Back to Products]" (14px, blue, left-aligned) - Action buttons (right-aligned): - "Save" (primary button, blue, 40px height) - "Save & New" (secondary button, white background) **Form Title** - Text: "Create New Product" or "Edit Product: [Name]" (32px, Inter Bold) **Form Layout** Two-column layout: Image upload (left, 30%) and form fields (right, 70%). **Left Column: Product Image Section** White card, 24px padding, 200px width. **Components:** - Image preview area (180px × 180px, gray border, dashed if empty) - Upload button: "Upload Image" (outline style, full width, below preview) - File restrictions text: "Max 2MB, JPG/PNG" (12px, gray, Inter Regular) - Current image: Display with edit overlay on hover **Right Column: Form Fields** White card, 24px padding. **Section: Basic Information** **Field: SKU** (Required) - Label: "SKU *" (14px, Inter Medium, #212121) - Input: Text field, 40px height, placeholder "SKU-" - Validation: Must be unique, alphanumeric + dash only - Error message: Below field, red text #EF4444, 12px **Field: Product Name** (Required) - Label: "Product Name *" (14px, Inter Medium) - Input: Text field, 40px height, full width - Max length: 100 characters (counter shows: "45/100") **Field: Category** (Required) - Label: "Category *" (14px, Inter Medium) - Input: Dropdown, "Select category... ▾" placeholder - Options populated from categories table **Field: Description** (Optional) - Label: "Description" (14px, Inter Medium) - Input: Textarea, 3 rows, full width - Max length: 500 characters **Section: Pricing** Subheading: "Pricing" (18px, Inter Medium, 24px top margin) **Field: Unit Price** (Required) - Label: "Unit Price (LKR) *" (14px, Inter Medium) - Input: Number field, 40px height, 200px width - Validation: Numeric, minimum 0 - Prefix: "LKR" shown inside field (left side, gray) **Section: Inventory** Subheading: "Inventory" (18px, Inter Medium, 24px top margin) **Field: Initial Stock** (Optional) - Label: "Initial Stock" (14px, Inter Medium) - Input: Number field, 40px height, 150px width - Suffix: "units" (12px, gray, right side) **Field: Reorder Level** (Optional) - Label: "Reorder Level" (14px, Inter Medium) - Input: Number field, 40px height, 150px width - Suffix: "units" **Field: Unit of Measure** - Label: "Unit of Measure" (14px, Inter Medium) - Input: Dropdown, options: Each, Box, Case, Carton - Default: "Each" **Section: Status** Subheading: "Status" (18px, Inter Medium, 24px top margin) **Field: Status** (Required) - Radio buttons: - ○ Active (selected by default) - ○ Inactive - Radio button size: 20px, blue when selected **Required Fields Note** Text at bottom: "* Required fields" (12px, gray, italic) **Behavior:** - Real-time validation: On blur for each field - Error state: Red border, error message appears below field - Success state: Green checkmark icon appears in field (right side) - Save button: Disabled (gray) until all required fields valid - Confirmation: Show toast "Product saved successfully" on success --- ### SA-05: Outlets Management **Reference Implementation:** [01 - System Admin Wireframe](https://www.notion.so/01-System-Admin-Wireframe-a207f916ff094481abd58d20a67ac14e?pvs=21) Section 6 & 7 **Note:** This module uses the **Outlet Management structure from the HoReCa system**. Only POSM-specific modifications are documented below. #### POSM-Specific Changes to Outlet Management **Additional Tab in Outlet Create/Edit Form** When creating or editing an outlet, add the following tab after the standard HoReCa tabs: **Tab: POSM Configuration** Located after "Assignment" tab, before "History" tab. **Section: POSM Norms Assignment** This section allows linking outlets to POSM norm templates defined in the separate POSM Norms Management module (SA-12). **Components:** - Section title: "POSM Norms Assignment" (18px, Inter Medium) - Info text: "Assign POSM norms template based on outlet type and size" (14px, gray, with info icon) - Template selector: - Label: "POSM Norms Template" (14px, Inter Medium) - Dropdown: "Select template... ▾" - Options: Populated from POSM Norms Templates (SA-12) - Shows template name, outlet type, and product count in dropdown - Preview panel (appears when template selected): - Section title: "Template Preview" (16px, Inter Medium) - Read-only table showing products in selected template: - Columns: Product Name, Min Qty, Max Qty, Must Have (checkmark icon) - Max height: 300px, scrollable - Override toggle: - Checkbox: "Use custom norms for this outlet" - When checked: Template becomes editable for this specific outlet - Shows warning: "Custom norms will override template for this outlet only" **Validation:** - Template selection is optional but recommended - Warning shown if outlet type doesn't match template type - No template assigned: Yellow warning badge appears on outlet card in list view --- ### SA-09: Users List **Reference Implementation:** [01 - System Admin Wireframe](https://www.notion.so/01-System-Admin-Wireframe-a207f916ff094481abd58d20a67ac14e?pvs=21) Section 9 **Note:** This screen uses the **User Management structure from HoReCa**. Only hierarchy-related modifications are documented below. #### Hierarchy-Related Changes **Additional Filter:** - Add "Hierarchy Level" dropdown filter to filter bar - Options: All, SM, TM, LSR, DP, Admin - Filter affects visible columns in table **Modified Table Columns:** Add column between "Role" and "Territory": - **Reports To** (150px width): Shows immediate manager name with user icon - Clickable to navigate to manager's profile - Shows "—" for top-level users (SM, Admin) **Visual Hierarchy Indicator:** - Indent user names based on hierarchy level: - SM: No indent - TM: 16px left padding - LSR: 32px left padding - Add hierarchy icon before name (optional): - SM: ★ (star) - TM: ◆ (diamond) - LSR: ● (circle) --- ### SA-10: User Create/Edit **Reference Implementation:** [01 - System Admin Wireframe](https://www.notion.so/01-System-Admin-Wireframe-a207f916ff094481abd58d20a67ac14e?pvs=21) Section 10 **Note:** This screen uses the **User Create/Edit form from HoReCa**. Only hierarchy-related modifications are documented below. #### Hierarchy-Related Changes **Modified Section: Role & Assignment** Update the "Reports To" field behavior: **Field: Reports To** (Conditional) - Label: "Reports To *" (14px, Inter Medium) - Visibility: Shows when role is TM, LSR, or DP - Input: Dropdown with search functionality - Auto-filtering logic: - If role = TM: Show only SM users - If role = LSR: Show only TM users in same territory - If role = DP: Field hidden (DPs don't report in hierarchy) - Display format: "Name (Code) - Territory" in dropdown - Required field when visible **Hierarchy Preview Panel** Add new panel below "Role & Assignment" section: **Components:** - Section title: "Hierarchy Preview" (16px, Inter Medium) - Visual chain display (appears when "Reports To" is selected): - Format: "SM Name → TM Name → This User (LSR)" - Uses arrow icons (→) between levels - Each name clickable to view user profile - Light blue background #EFF6FF, 12px padding, 6px border-radius - Info text: "ℹ️ This user will report to [Manager Name] and inherit their territory assignment" (12px, gray) **Validation:** - Prevent circular hierarchy: Show error if selected manager reports to this user - Territory inheritance: Auto-populate territory from selected manager (if not already set) - Hierarchy depth check: Warn if creating hierarchy deeper than 3 levels --- ### SA-07: Events List **Route:** `/admin/events` **Access:** System Administrator #### Layout **Page Header** - Title: "Event Management" (32px, Inter Bold) - Action button (right-aligned): - "+ Create Event" (primary button, blue, 40px height) **Filters Bar** **Components:** - Search input: Placeholder "Search..." (250px width) - Status dropdown: "Status ▾" (120px width) - Options: All, Draft, Approved, Active, Completed, Cancelled - Date Range picker: "Date Range ▾" (180px width) - Supplier dropdown: "Supplier ▾" (150px width) **Data Table** White card, 24px padding. **Table Columns:** 1. **Code** (100px width): Event code (14px, Inter Medium, clickable) 2. **Event Name** (300px width): Event title (14px, Inter Medium, clickable) 3. **Date Range** (180px width): "Jan 15-17" format (14px, Inter Regular) 4. **Budget** (120px width): Right-aligned, "LKR 500K" format (14px) 5. **Status** (120px width): Colored badge 6. **Actions** (60px width): Dropdown menu icon **Status Badges:** - Draft: Gray background #F3F4F6, gray text #6B7280 - Approved: Blue background #DBEAFE, blue text #3B82F6 - Active: Green background #D1FAE5, green text #10B981 - Completed: Purple background #E9D5FF, purple text #9333EA - Cancelled: Red background #FEE2E2, red text #EF4444 **Table Features:** - Sortable columns - Row hover effect - Click row to navigate to event details **Pagination** - Bottom center, same format as Products List --- ### SA-08: Event Create/Edit **Route:** `/admin/events/create` or `/admin/events/{id}/edit` **Access:** System Administrator #### Layout **Page Header** - Breadcrumb: "Events > Create New Event" - Back link: "[← Back]" - Action buttons (right): - "Cancel" (secondary) - "Save" (primary) **Form Title** - Text: "Create New Event" or "Edit Event: [Name]" (32px, Inter Bold) **Tabbed Interface** Four tabs, each displayed as a separate view when selected: 1. Details 2. Budget Allocation 3. Deliveries 4. Returns **Tab 1: Event Details** **Section: Event Details** **Field: Event Code** (Auto-generated) - Label: "Event Code *" (14px, Inter Medium) - Input: Text field, 40px height, read-only, gray background - Value: Auto-generated on save (format: EVT-000001) **Field: Event Name** (Required) - Label: "Event Name *" - Input: Text field, full width, 40px height **Field: Description** (Optional) - Label: "Description" - Input: Textarea, 4 rows, full width **Field: Event Dates** (Required) - Label: "Event Dates *" - Two date pickers side by side: - Start Date: Date picker, format "DD/MM/YYYY ▾" - End Date: Date picker, format "DD/MM/YYYY ▾" - Validation: End date must be after start date **Section: Location** Subheading: "Location" (18px, Inter Medium, 24px top margin) **Field: Venue Name** (Optional) - Label: "Venue Name" - Input: Text field, 40px height **Field: Address** (Optional) - Label: "Address" - Input: Text field, 40px height **Field: Event Supplier** (Required) - Label: "Event Supplier *" - Input: Dropdown, "Select supplier... ▾" - Options: List of registered event suppliers from system **Field: Total Budget** (Required) - Label: "Total Budget (LKR) *" - Input: Number field, 40px height, 200px width - Format: Comma-separated thousands (e.g., "500,000") **Field: Status** (Required) - Label: "Status" - Radio buttons (horizontal layout): - ○ Draft - ○ Approved - ○ Active - ○ Completed - Default: Draft **Tab 2: Budget Allocation** **Budget Summary Panel** Displayed at top of tab, light gray background #F8FAFC, 16px padding. **Components:** - Total Budget: LKR 500,000 (18px, bold) - Allocated: LKR 425,000 (16px, blue text) - Remaining: LKR 75,000 (16px, green text if positive, red if negative) **Action Button** - "+ Add Budget Line" (outline button, blue border, full width, 40px height) **Budget Lines Table** White background, 16px vertical spacing from summary. **Table Columns:** 1. **Product/Item** (300px width): Product name (14px), SKU below (12px, gray) 2. **Qty** (80px width): Right-aligned number (14px) 3. **Unit Price** (120px width): Right-aligned, "LKR 250" format (14px) 4. **Total** (120px width): Right-aligned, calculated automatically (14px, bold) 5. **Actions** (80px width): "Edit" and "Remove" text links **Add Budget Line Modal** (Appears when "+ Add Budget Line" clicked) Modal: 600px width, centered. **Components:** - Modal title: "Add Budget Line" (20px, Inter Bold) - Close button (X icon, top right) - Product selector: - Label: "Select Product/Item *" - Dropdown with search: "Search products..." - Shows: Product name, SKU, category - Quantity input: - Label: "Quantity *" - Number field, 100px width - Increment/decrement buttons (±) - Unit price input: - Label: "Unit Price (LKR) *" - Number field, 150px width - Format: Comma-separated - Total display (read-only): - Label: "Total" - Text: Auto-calculated (Qty × Unit Price) - Bold, primary color - Action buttons: - "Cancel" (text button, left) - "Add" (primary button, right) **Validation:** - Show warning if total allocation exceeds total budget - Warning banner: Light orange background, warning icon, text "Budget exceeded by LKR [amount]" - Allow saving but highlight in red --- ### SA-11: Hierarchy Management **Route:** `/admin/hierarchy` **Access:** System Administrator #### Layout **Page Header** - Title: "Organizational Hierarchy" (32px, Inter Bold) - Action buttons (right): - "+ Add Node" (outline button) - "Edit" (text button, blue) **View Toggle** Horizontal tab selector below header: - "Tree View" (active by default) - "Table View" - "Export Structure" (button, right-aligned) **Tree View (Default)** Visual tree diagram showing organizational hierarchy. **Structure:** - National level (top): Single node, SM level - Regional level (middle): Multiple nodes, TM level, branching from national - Territory level (bottom): Multiple nodes, LSR level, branching from regional **Node Display:** Each node is a card (150px width × 100px height) with: - User avatar or role icon (32px, top) - Name (14px, Inter Medium, truncated if long) - Role badge (small, 12px, colored) - User count: "5 LSRs" (12px, gray) for TM nodes - Status indicator: ● Active (green) or ○ Inactive (gray) **Connections:** - Lines connecting nodes (1px, gray #D1D5DB) - Arrow indicators showing reporting direction (top → down) **Interaction:** - Click node: Highlight node, show details panel on right - Hover node: Show tooltip with full details - Drag & drop: Reorganize hierarchy (shows confirmation dialog) **Legend** Bottom left corner: - ● Active Node (green) - ○ Inactive Node (gray) - Color coding: SM (purple), TM (blue), LSR (green) **Details Panel** (Appears when node clicked) Right sidebar, 300px width, white background, slide-in animation. **Components:** - User name (20px, bold) - Role badge (large) - Contact info: Phone, email - Reports to: Manager name with link - Direct reports: List of users (scrollable if many) - Assigned entities: - Territories: Count and list - Outlets: Count - Action buttons: - "Edit User" (primary, full width) - "View Performance" (outline) - "Reassign" (text link) **Table View** Alternative view, activated by tab toggle. **Table Format:** Expandable/collapsible rows showing hierarchy. **Columns:** 1. **Name** (250px width): Indented based on level, expand/collapse arrow 2. **Role** (100px width): Badge 3. **Level** (80px width): SM/TM/LSR text 4. **Reports To** (150px width): Manager name 5. **Territory** (120px width): Territory name 6. **Outlets** (80px width): Count 7. **Status** (80px width): Active/Inactive toggle 8. **Actions** (80px width): Edit, View, Delete **Row Hierarchy:** - SM rows: Bold, no indent - TM rows: 16px indent, expandable to show LSRs - LSR rows: 32px indent, nested under TM **Behavior:** - Click arrow to expand/collapse subordinates - Sort by any column - Filter by role, territory, status --- ### SA-12: POSM Norms Management **Route:** `/admin/posm-norms` **Access:** System Administrator **Note:** This is a new standalone module for managing POSM norms templates, separate from outlet management. #### Layout **Page Header** - Title: "POSM Norms Management" (32px, Inter Bold) - Action button (right): - "+ Create Template" (primary button, blue) **Info Panel** Light blue background #EFF6FF, 16px padding, 6px border-radius, full width. **Components:** - Icon: ℹ️ (20px) - Text: "Define standard quantities of POSM materials per outlet type. Templates can be assigned to outlets in Outlet Management." (14px, #1E40AF) - Link: "View version history" (14px, blue, right-aligned) **Templates Table** White card, 24px padding, 16px vertical spacing from info panel. **Table Columns:** 1. **Template Name** (250px width): Template title (14px, Inter Medium, clickable) 2. **Outlet Types** (200px width): Comma-separated list or "Multiple" (14px, gray) 3. **Products** (100px width): Product count (14px, center-aligned) 4. **Created** (120px width): Date created (12px, gray) 5. **Last Modified** (120px width): Date modified (12px, gray) 6. **Status** (100px width): Active/Inactive toggle 7. **Actions** (80px width): Dropdown menu **Actions Menu:** - View Details - Edit - Duplicate - Export - Delete (red text, confirmation required) **Empty State:** - Icon: 📋 (80px, gray) - Text: "No POSM norms templates" (18px, bold) - Subtext: "Create your first template to define standard quantities" (14px, gray) - Button: "Create Template" (primary, centered) **Behavior:** - Click row: Navigate to template details (SA-13) - Search: Live filtering by template name - Sort: By name, date created, product count --- ### SA-13: POSM Norms Template Details/Edit **Route:** `/admin/posm-norms/{id}` or `/admin/posm-norms/create` **Access:** System Administrator #### Layout **Page Header** - Breadcrumb: "POSM Norms > [Template Name]" - Back link: "[← Back]" - Action buttons (right): - "Edit" (outline button) - switches to edit mode - "Duplicate" (outline button) - "Delete" (text button, red) **Template Info Section** White card, 24px padding. **Components:** - Template name (24px, Inter Bold) - Subtitle: "For: [Outlet Types]" (16px, gray) - Description (14px, regular, if available) - Created date (12px, gray) - Last modified (12px, gray) **When in Edit/Create Mode:** Add these fields at top of section: - **Field: Template Name** (Required) - Label: "Template Name *" - Input: Text field, 40px height, full width - **Field: Outlet Types** (Required) - Label: "Applicable Outlet Types *" - Input: Multi-select dropdown - Options: Hotel, Restaurant, Bar, Café, Other - Shows selected as chips below - **Field: Description** (Optional) - Label: "Description" - Input: Textarea, 3 rows **Products Section** **Section Title:** "POSM Products & Norms" (20px, Inter Semibold, 24px top margin) **Action Button** (Edit mode only): - "+ Add Product Line" (outline button, blue, 40px height, 24px bottom margin) **Products Table** Full width table with detailed norms configuration. **Table Columns:** 1. **Product** (200px width): Product name (14px, bold), SKU below (12px, gray) 2. **Category** (120px width): Badge (POSM, Equipment, Branding, etc.) 3. **Min** (80px width): Minimum quantity (14px, right-aligned, editable in edit mode) 4. **Max** (80px width): Maximum quantity (14px, right-aligned, editable in edit mode) 5. **Must Have** (80px width): Checkbox (center-aligned) 6. **Deviation OK** (120px width): Text (e.g., "±10%", "±1 unit", "None") 7. **Actions** (80px width): Edit icon, Remove icon (edit mode only) **View Mode:** - Read-only table - Alternating row colors - Must Have column shows checkmark icon (✓) or dash (—) **Edit Mode:** - Inline editing enabled - Number inputs for Min/Max columns - Checkbox toggles for Must Have column - Dropdown for Deviation OK: None, ±5%, ±10%, ±15%, ±20%, ±1 unit, ±2 units, Custom - Remove button (X icon) for each row **Add Product Line Modal** (Edit mode, when "+ Add Product Line" clicked) Modal: 600px width, centered. **Components:** - Modal title: "Add Product to Template" (20px, Inter Bold) - Close button (X icon) - Product selector: - Label: "Select Product *" - Dropdown with search - Shows: Product name, SKU, category - Filter by category - Min quantity: - Label: "Minimum Quantity *" - Number input, 100px width - Max quantity: - Label: "Maximum Quantity *" - Number input, 100px width - Validation: Must be ≥ Min quantity - Must Have checkbox: - Label: "Must Have Product" - Helper text: "Triggers alert if not available during audit" - Deviation tolerance: - Label: "Acceptable Deviation" - Dropdown: None, ±5%, ±10%, ±15%, ±20%, ±1 unit, ±2 units, Custom - If Custom: Show additional number input - Action buttons: - "Cancel" (text button) - "Add Product" (primary button) **Info Callouts** Below products table, two info boxes side by side: **Box 1: Must Have Explanation** - Background: Light blue #EFF6FF - Icon: ℹ️ - Text: "Must Have: Triggers alert if not available during audit" (14px, #1E40AF) **Box 2: Deviation Explanation** - Background: Light amber #FEF3C7 - Icon: ⚠️ - Text: "Deviation OK: Acceptable variance from min/max quantities" (14px, #92400E) **Usage Section** Below info boxes, light gray card, 16px padding. **Components:** - Text: "Outlets Using This Template: [23] outlets" (14px, gray) - Button: "View Outlets" (text link, blue) **Clicking "View Outlets":** Opens modal or navigates to filtered outlets list showing all outlets assigned this template. **Sticky Bottom Section** (Edit/Create mode only) Fixed at bottom, white background, border-top, 16px padding. **Components:** - Action buttons (right-aligned): - "Cancel" (text button) - discards changes - "Save Template" (primary button) - saves and returns to list **Validation:** - Template name: Required, unique - Outlet types: At least one selected - Products: At least one product added - Min/Max: Max must be ≥ Min - Show inline errors on validation failure --- ### SA-14: Reports Dashboard **Route:** `/admin/reports` **Access:** All admin users (role-based filtering) #### Layout **Page Header** - Title: "Reports & Analytics" (32px, Inter Bold) **Report Cards Grid** Grid layout: 3 columns on desktop, 2 on tablet, 1 on mobile. Each card: 300px × 200px, white background, 24px padding, 12px border-radius, shadow. **Card 1: Availability Report** - Icon: 📊 (48px, top) - Title: "Availability Report" (18px, Inter Semibold) - Description: "Product availability across outlets" (14px, gray, 2 lines max) - Button: "Generate Report" (outline button, blue, bottom of card) **Card 2: Inventory Report** - Icon: 📦 (48px) - Title: "Inventory Report" (18px, Inter Semibold) - Description: "Stock levels across locations" (14px, gray) - Button: "Generate Report" (outline button) **Card 3: Event Summary** - Icon: 🎯 (48px) - Title: "Event Summary" (18px, Inter Semibold) - Description: "Event budget vs actual usage" (14px, gray) - Button: "Generate Report" (outline button) **Card 4: User Activity** - Icon: 👥 (48px) - Title: "User Activity" (18px, Inter Semibold) - Description: "LSR visits and performance" (14px, gray) - Button: "Generate Report" (outline button) **Card 5: Order Tracking** - Icon: 📋 (48px) - Title: "Order Tracking" (18px, Inter Semibold) - Description: "Order fulfillment and delivery status" (14px, gray) - Button: "Generate Report" (outline button) **Card 6: Distribution** - Icon: 🚚 (48px) - Title: "Distribution" (18px, Inter Semibold) - Description: "DP performance and dispatch times" (14px, gray) - Button: "Generate Report" (outline button) **Recent Reports Section** Below cards grid, 32px vertical spacing. **Section Title:** "Recent Reports" (24px, Inter Semibold) **Reports Table** White card, 24px padding. **Table Columns:** 1. **Report Name** (300px width): Report title (14px, Inter Medium) 2. **Generated** (150px width): Date and time (14px, gray) 3. **By** (150px width): User name (14px, gray) 4. **Actions** (100px width): "View" and "Download" links **Table Features:** - Max 10 recent reports displayed - Click "View" to open report in new tab - "Download" saves report as PDF or Excel **Behavior:** - Click "Generate Report" on any card: Opens report configuration modal - Report configuration modal includes: - Date range selector - Filter options (specific to report type) - Format selector (PDF, Excel, CSV) - Generate button - Generated reports appear in "Recent Reports" section --- ### SA-15: Audit Logs **Route:** `/admin/audit-logs` **Access:** System Administrator only #### Layout **Page Header** - Title: "System Audit Logs" (32px, Inter Bold) - Action button (right): - "Export" (outline button, download icon) **Filters Bar** Full width, multiple filter options in single row. **Components:** - Date Range picker: "Date Range ▾" (180px width) - User dropdown: "User ▾" (150px width) - filterable list of all users - Action Type dropdown: "Action Type ▾" (150px width) - Options: All, Created, Updated, Deleted, Login, Logout, Approved, Rejected - Module dropdown: "Module ▾" (150px width) - Options: All, Products, Outlets, Users, Events, Orders, Settings - "Clear Filters" button (text button, blue, right) **Logs Table** White card, 24px padding, full width. **Table Columns:** 1. **Timestamp** (180px width): Full date/time (14px, Inter Regular, monospace) - Format: "Jan 31 14:23:15" 2. **User** (150px width): Username (14px, clickable) 3. **Action** (120px width): Action type (14px, colored badge) - Created: Green - Updated: Blue - Deleted: Red - Login: Gray - Approved: Green - Rejected: Orange 4. **Entity** (150px width): Entity type + name (14px, truncated) - Format: "Product: [Name]" 5. **IP Address** (120px width): IP (14px, monospace, gray) 6. **Details** (80px width): "View" link (14px, blue) **Table Features:** - Alternating row colors - Hover effect shows full entity name (tooltip) - Sticky header on scroll - Default sort: Most recent first - Click "View" to expand row with details **Expanded Row Details** When "View" clicked, row expands below with additional panel. **Panel Contents:** - Full details section (white background, 16px padding, border-left blue 4px) - Action: Full description (14px, bold) - User: Full name and email (14px) - Timestamp: Full timestamp with timezone (14px) - IP Address: Full IP (14px) - User Agent: Browser/device info (12px, gray, monospace) - Changes: JSON diff view (if applicable) - Before/after values shown in two columns - Added: Green highlight - Removed: Red highlight - Modified: Blue highlight - Close button: "Close" (text button, collapses row) **Pagination** Bottom of table, center-aligned. **Components:** - Text: "Showing 1-50 of 1,234 logs" (14px, gray) - Per page selector: "50 ▾" (options: 25, 50, 100) - Page numbers: [◄] [1] 2 3 ... 25 [►] **Behavior:** - Real-time log updates (new entries appear at top) - Export: Generates CSV with all filtered logs - Filters: Applied with 300ms debounce - Click user name: Navigate to user profile - Logs retained per workspace retention policy --- ## Interaction Patterns & Behavior ### Form Submission - All forms show loading state on submit button: Spinner icon + "Saving..." text - Button disabled during submission - Success: Green toast notification (top-right, 4 seconds auto-dismiss) - Error: Red toast notification (manual dismiss, with error details) ### Confirmations - All destructive actions (delete, deactivate) require confirmation modal - Modal: 400px width, centered, backdrop blur - Two buttons: "Cancel" (text button) and "Confirm" (filled, red for destructive) ### Data Loading - Initial page load: Full-page skeleton loader matching layout structure - Table loading: Skeleton rows (5 rows) with shimmer animation - Lazy loading: "Load More" button at bottom of infinite lists ### Search & Filters - Search: 300ms debounce, live filtering - Filters: Applied immediately on selection - Active filters shown as removable chips below filter bar - "Clear All Filters" button appears when any filter active ### Responsive Breakpoints - Desktop (> 1024px): Optimized layout, full sidebar, all columns visible - Tablet (768px - 1024px): Sidebar collapses to icons, tables scroll horizontally - Mobile (< 768px): Show message "Please use desktop for admin access" with optional redirect --- ## Accessibility Standards ### WCAG 2.1 AA Compliance - Color contrast: Minimum 4.5:1 for normal text, 3:1 for large text - Focus indicators: 2px blue outline (#3B82F6) on all interactive elements - Keyboard navigation: All features accessible via Tab/Shift+Tab - Screen readers: ARIA labels on all icons, buttons, and form fields - Alt text: Descriptive text for all non-text content - Form labels: Every input has associated