Chapter 20: Admin Portal
The Back Office Command Center
The Admin Portal is the web-based management interface for store managers, regional managers, and system administrators. It provides comprehensive control over inventory, products, employees, and reporting.
Technology Stack
| Component | Technology | Rationale |
|---|---|---|
| Framework | Blazor Server | Real-time updates, shared .NET codebase |
| Styling | Custom CSS + Bootstrap 5 | Consistent design system |
| State | Blazor component state + services | Simple, reactive |
| Real-time | SignalR (built-in) | Live dashboard updates |
| Charts | Chart.js or ApexCharts | Interactive visualizations |
Architecture Overview
┌─────────────────────────────────────────────────────────────────────┐
│ ADMIN PORTAL (Blazor Server) │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────┐│
│ │ HEADER ││
│ │ [Logo] [Breadcrumb] [Notifications] [Profile] ││
│ └─────────────────────────────────────────────────────────────────┘│
│ ┌────────────┬────────────────────────────────────────────────────┐│
│ │ │ ││
│ │ SIDEBAR │ CONTENT AREA ││
│ │ │ ││
│ │ Dashboard │ ┌──────────────────────────────────────────┐ ││
│ │ Inventory │ │ │ ││
│ │ Products │ │ Page Content │ ││
│ │ Employees │ │ │ ││
│ │ Reports │ │ │ ││
│ │ Settings │ └──────────────────────────────────────────┘ ││
│ │ │ ││
│ └────────────┴────────────────────────────────────────────────────┘│
│ ┌─────────────────────────────────────────────────────────────────┐│
│ │ STATUS BAR ││
│ └─────────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────────┘
Navigation Structure
ADMIN PORTAL
│
├── Dashboard (/dashboard)
│ ├── KPIs
│ ├── Alerts
│ └── Activity Feed
│
├── Inventory (/inventory)
│ ├── Stock Levels (/inventory/levels)
│ ├── Transfers (/inventory/transfers)
│ │ ├── Create Transfer
│ │ └── Transfer History
│ ├── Counts (/inventory/counts)
│ │ ├── New Count
│ │ ├── In Progress
│ │ └── Completed
│ └── Adjustments (/inventory/adjustments)
│
├── Products (/products)
│ ├── Catalog (/products/catalog)
│ │ ├── Product List
│ │ ├── Product Detail
│ │ └── Add/Edit Product
│ ├── Categories (/products/categories)
│ ├── Pricing (/products/pricing)
│ └── Import/Export (/products/import)
│
├── Employees (/employees)
│ ├── Users (/employees/users)
│ ├── Roles (/employees/roles)
│ ├── Schedules (/employees/schedules)
│ └── Performance (/employees/performance)
│
├── Reports (/reports)
│ ├── Sales (/reports/sales)
│ ├── Inventory (/reports/inventory)
│ ├── Performance (/reports/performance)
│ └── Custom (/reports/custom)
│
├── RFID / Raptag (/rfid) ◄── RFID Module (Pro/Enterprise)
│ ├── Devices (/rfid/devices)
│ │ ├── Registered Devices
│ │ ├── Device Status
│ │ └── Add Device
│ ├── Sessions (/rfid/sessions)
│ │ ├── Active Sessions
│ │ ├── Completed Sessions
│ │ └── Discrepancy Review
│ ├── Tag Management (/rfid/tags)
│ │ ├── Tag Mappings (EPC → SKU)
│ │ ├── Print Queue
│ │ └── Encoding History
│ └── RFID Settings (/rfid/settings)
│ ├── Power Levels
│ ├── Zone Configuration
│ └── Thresholds
│
└── Settings (/settings)
├── Locations (/settings/locations)
├── Integrations (/settings/integrations)
├── System (/settings/system)
└── Audit Log (/settings/audit)
Screen Specifications
Screen 1: Dashboard
Purpose: Executive overview with KPIs, alerts, and activity monitoring.
Route: /dashboard
╔════════════════════════════════════════════════════════════════════════════════╗
║ ADMIN PORTAL [Bell] [?] [Admin User ▼] ║
╠════════════════════════════════════════════════════════════════════════════════╣
║ │ ║
║ Dashbrd │ DASHBOARD Today [Date Range ▼] ║
║ │ ║
║ ─────── │ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ ║
║ │ │ TODAY'S │ │ REVENUE │ │ ITEMS │ │ AVG ORDER │ ║
║ INVNTRY │ │ SALES │ │ │ │ SOLD │ │ VALUE │ ║
║ Levels │ │ │ │ │ │ │ │ │ ║
║ Transfr│ │ $12,450 │ │ $45,230 │ │ 423 │ │ $78.50 │ ║
║ Counts │ │ +12% ▲ │ │ +8% ▲ │ │ +15% ▲ │ │ +3% ▲ │ ║
║ Adjust │ └────────────┘ └────────────┘ └────────────┘ └────────────┘ ║
║ │ ║
║ ─────── │ ┌────────────────────────────────┐ ┌──────────────────────────────┐║
║ │ │ SALES TREND (Last 7 Days) │ │ ALERTS (5) │║
║ PRODUCT │ │ │ ├──────────────────────────────┤║
║ Catalog│ │ ╱╲ ╱╲ │ │ [!] Low Stock: NXJ1078 ││
║ Categry│ │ ╱╲ ╱ ╲ ╱ ╲ │ │ Only 3 units at GM ││
║ Pricing│ │ ╱ ╲╱ ╲ ╱ ╲ │ │ │║
║ Import │ │ ╱ ╲╱ ╲ │ │ [!] Price Mismatch: SKU-042 ││
║ │ │ ╱ ╲_ │ │ Shopify: $29, POS: $32 ││
║ ─────── │ │ │ │ │║
║ │ │ Mon Tue Wed Thu Fri Sat Sun │ │ [i] Transfer #1234 Ready ││
║ EMPLOYE │ └────────────────────────────────┘ │ From HQ to GM (5 items) ││
║ Users │ │ │║
║ Roles │ ┌────────────────────────────────┐ │ [i] Count #567 Pending ││
║ Sched │ │ STORE PERFORMANCE │ │ GM needs review ││
║ Perform│ ├────────────────────────────────┤ │ │║
║ │ │ Location │ Sales │ Trans │ % │ │ [!] Register offline: NM-02 ││
║ ─────── │ │───────────┼────────┼───────┼───│ │ Last seen: 15 min ago ││
║ │ │ GM │ $4,230 │ 47 │32%│ └──────────────────────────────┘║
║ REPORTS │ │ HM │ $3,890 │ 42 │29%│ ║
║ Sales │ │ LM │ $2,980 │ 35 │22%│ ┌──────────────────────────────┐║
║ Invntry│ │ NM │ $2,130 │ 28 │16%│ │ RECENT ACTIVITY │║
║ Perform│ └────────────────────────────────┘ ├──────────────────────────────┤║
║ Custom │ │ 2:45 PM - Sale #4521 ($89) ││
║ │ │ 2:42 PM - Return processed ││
║ ─────── │ │ 2:38 PM - New customer added ││
║ │ │ 2:35 PM - Inventory adjusted ││
║ SETTING │ │ 2:30 PM - Transfer completed ││
║ Locatns│ │ │║
║ Integr │ │ [View All Activity] │║
║ System │ └──────────────────────────────┘║
║ Audit │ ║
╠════════════════════════════════════════════════════════════════════════════════╣
║ Connected: 4 registers | Last sync: 30 sec ago | System: Healthy ║
╚════════════════════════════════════════════════════════════════════════════════╝
Dashboard Components:
| Component | Specification |
|---|---|
| KPI Cards (4) | Stat value, trend arrow, percentage change |
| Sales Chart | Line chart, 7-day trend, interactive hover |
| Alerts Panel | Priority-sorted, color-coded, actionable |
| Store Table | Sortable columns, percentage bar |
| Activity Feed | Real-time, auto-scroll, clickable items |
Screen 2: Inventory Management
Purpose: Monitor and manage stock levels across all locations.
Route: /inventory/levels
╔════════════════════════════════════════════════════════════════════════════════╗
║ INVENTORY > STOCK LEVELS [Refresh] [Export]║
╠════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ [Search by SKU, name, barcode...] Location: [All ▼] │ ║
║ │ │ ║
║ │ Category: [All Categories ▼] Status: [All ▼] Stock: [All Levels ▼] │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ SKU │ PRODUCT │ CAT │ HQ │ GM │ HM │ LM │ NM │ ║
║ ├────────────┼──────────────────┼───────┼──────┼──────┼──────┼──────┼─────┤ ║
║ │ │ │ │ │ │ │ │ │ ║
║ │ NXJ1078 │ Galaxy V-Neck │ Tops │ 45 │ 3* │ 12 │ 8 │ 15 │ ║
║ │ │ │ │ │ LOW │ │ │ │ ║
║ │────────────┼──────────────────┼───────┼──────┼──────┼──────┼──────┼─────│ ║
║ │ NXP0892 │ Slim Fit Chinos │Bottms │ 32 │ 18 │ 14 │ 0* │ 22 │ ║
║ │ │ │ │ │ │ │ OUT │ │ ║
║ │────────────┼──────────────────┼───────┼──────┼──────┼──────┼──────┼─────│ ║
║ │ NXA0234 │ Leather Belt │Access │ 60 │ 25 │ 20 │ 15 │ 18 │ ║
║ │ │ │ │ │ │ │ │ │ ║
║ │────────────┼──────────────────┼───────┼──────┼──────┼──────┼──────┼─────│ ║
║ │ NXJ2156 │ Oxford Shirt │ Tops │ 28 │ 12 │ 8 │ 10 │ 6 │ ║
║ │ │ │ │ │ │ │ │ │ ║
║ │────────────┼──────────────────┼───────┼──────┼──────┼──────┼──────┼─────│ ║
║ │ NXP1045 │ Classic Jeans │Bottms │ 75 │ 30 │ 25 │ 22 │ 28 │ ║
║ │ │ │ │ │ │ │ │ │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ Showing 1-25 of 1,245 items << < Page 1 of 50 > >> Items/page: [25▼]║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ BULK ACTIONS: [Create Transfer] [Request Recount] [Adjust Stock] │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
╚════════════════════════════════════════════════════════════════════════════════╝
Inventory Features:
| Feature | Description |
|---|---|
| Multi-location Grid | Shows stock at all locations in one view |
| Status Indicators | LOW (yellow), OUT (red), OK (green) |
| Click-to-Filter | Click column headers to filter by location |
| Bulk Actions | Select multiple items for batch operations |
| Export | CSV/Excel download with current filters |
Transfer Creation Modal:
╔════════════════════════════════════════════════════════════════════╗
║ CREATE INVENTORY TRANSFER [X] ║
╠════════════════════════════════════════════════════════════════════╣
║ ║
║ From Location: [HQ - Headquarters ▼] ║
║ To Location: [GM - Greenbrier Mall ▼] ║
║ ║
║ ┌──────────────────────────────────────────────────────────────┐ ║
║ │ ITEMS TO TRANSFER │ ║
║ ├──────────────────────────────────────────────────────────────┤ ║
║ │ SKU │ Product │ Available │ Transfer Qty │ ║
║ │───────────┼───────────────────┼───────────┼──────────────────│ ║
║ │ NXJ1078 │ Galaxy V-Neck (M) │ 45 │ [ 10 ] │ ║
║ │ NXP0892 │ Slim Fit Chinos │ 32 │ [ 5 ] │ ║
║ └──────────────────────────────────────────────────────────────┘ ║
║ ║
║ [+ Add More Items] ║
║ ║
║ Notes: [________________________________] ║
║ ║
║ Priority: ○ Normal ○ Urgent ║
║ ║
║ ┌────────────────────────────────────────────────────────────────╢
║ │ ║
║ │ [CREATE TRANSFER] [CANCEL] ║
║ │ ║
║ └────────────────────────────────────────────────────────────────╢
╚════════════════════════════════════════════════════════════════════╝
Screen 3: Product Catalog
Purpose: Manage product information, variants, and pricing.
Route: /products/catalog
╔════════════════════════════════════════════════════════════════════════════════╗
║ PRODUCTS > CATALOG [+ Add Product] [Import] ║
╠════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ [Search products...] │ ║
║ │ │ ║
║ │ Category: [All ▼] Status: [Active ▼] Price Range: [$0] to [$999] │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ [x] │ PRODUCT │ SKU │ CATEGORY │ PRICE │ STOCK│ ACT│ ║
║ ├─────┼──────────────────────┼───────────┼──────────┼────────┼──────┼────┤ ║
║ │ │ │ │ │ │ │ │ ║
║ │ [ ] │ [img] Galaxy V-Neck │ NXJ1078 │ Tops │ $29.00 │ 83 │[Ed]│ ║
║ │ │ 3 variants │ │ │ │ │[De]│ ║
║ │─────┼──────────────────────┼───────────┼──────────┼────────┼──────┼────│ ║
║ │ [ ] │ [img] Slim Fit Chino │ NXP0892 │ Bottoms │ $46.00 │ 86 │[Ed]│ ║
║ │ │ 5 variants │ │ │ │ │[De]│ ║
║ │─────┼──────────────────────┼───────────┼──────────┼────────┼──────┼────│ ║
║ │ [ ] │ [img] Oxford Shirt │ NXJ2156 │ Tops │ $54.00 │ 64 │[Ed]│ ║
║ │ │ 4 variants │ │ │ │ │[De]│ ║
║ │─────┼──────────────────────┼───────────┼──────────┼────────┼──────┼────│ ║
║ │ [ ] │ [img] Leather Belt │ NXA0234 │ Access. │ $35.00 │ 138 │[Ed]│ ║
║ │ │ 3 variants │ │ │ │ │[De]│ ║
║ │─────┼──────────────────────┼───────────┼──────────┼────────┼──────┼────│ ║
║ │ [ ] │ [img] Classic Jeans │ NXP1045 │ Bottoms │ $59.00 │ 180 │[Ed]│ ║
║ │ │ 6 variants │ │ │ │ │[De]│ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ Selected: 0 | Total Products: 1,245 << < 1 of 50 > >> ║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ WITH SELECTED: [Edit Category] [Update Pricing] [Archive] [Delete] │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
╚════════════════════════════════════════════════════════════════════════════════╝
Product Detail/Edit Modal:
╔════════════════════════════════════════════════════════════════════════════════╗
║ EDIT PRODUCT [X] ║
╠════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ [Basic Info] [Variants] [Pricing] [Inventory] [Media] ║
║ ═══════════════════════════════════════════════════════════════════════════ ║
║ ║
║ ┌────────────────────┐ PRODUCT INFORMATION ║
║ │ │ ║
║ │ [Product Image] │ Name * ║
║ │ │ ┌──────────────────────────────────────────────────┐ ║
║ │ [Upload Image] │ │ Galaxy V-Neck Tee │ ║
║ │ │ └──────────────────────────────────────────────────┘ ║
║ └────────────────────┘ ║
║ SKU * Barcode ║
║ ┌────────────────────┐ ┌────────────────────────┐ ║
║ │ NXJ1078 │ │ 0657381512532 │ ║
║ └────────────────────┘ └────────────────────────┘ ║
║ ║
║ Category * Brand ║
║ ┌────────────────────┐ ┌────────────────────────────────────────────────┐ ║
║ │ Tops ▼ │ │ Nexus Originals │ ║
║ └────────────────────┘ └────────────────────────────────────────────────┘ ║
║ ║
║ Description ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ Classic V-neck tee made from premium cotton blend. Features a │ ║
║ │ relaxed fit and reinforced stitching for durability. │ ║
║ │ │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ [x] Active [x] Visible on Website [ ] Featured ║
║ ║
║ ┌────────────────────────────────────────────────────────────────────────────╢
║ │ ║
║ │ [SAVE CHANGES] [CANCEL] ║
║ │ ║
║ └────────────────────────────────────────────────────────────────────────────╢
╚════════════════════════════════════════════════════════════════════════════════╝
Screen 4: Employee Management
Purpose: Manage users, roles, permissions, and schedules.
Route: /employees/users
╔════════════════════════════════════════════════════════════════════════════════╗
║ EMPLOYEES > USERS [+ Add Employee] ║
╠════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ [All Employees] [Active (24)] [Inactive (3)] [Pending (2)] ║
║ ═══════════════════════════════════════════════════════════════════════════ ║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ [Search by name, email, employee ID...] Location: [All ▼] │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ │ EMPLOYEE │ ROLE │ LOCATION │ STATUS │ ACTIONS│ ║
║ ├───────┼──────────────────┼───────────────┼──────────┼─────────┼────────┤ ║
║ │ │ │ │ │ │ │ ║
║ │ [img] │ Sarah Miller │ Store Manager │ GM │ Active │ [Ed] │ ║
║ │ │ sarah.m@nexus │ │ │ Online │ [...] │ ║
║ │───────┼──────────────────┼───────────────┼──────────┼─────────┼────────│ ║
║ │ [img] │ James Wilson │ Sales Assoc. │ GM │ Active │ [Ed] │ ║
║ │ │ james.w@nexus │ │ │ Offline │ [...] │ ║
║ │───────┼──────────────────┼───────────────┼──────────┼─────────┼────────│ ║
║ │ [img] │ Maria Garcia │ Asst. Manager │ HM │ Active │ [Ed] │ ║
║ │ │ maria.g@nexus │ │ │ Online │ [...] │ ║
║ │───────┼──────────────────┼───────────────┼──────────┼─────────┼────────│ ║
║ │ [img] │ David Chen │ Sales Assoc. │ LM │ Active │ [Ed] │ ║
║ │ │ david.c@nexus │ │ │ Offline │ [...] │ ║
║ │───────┼──────────────────┼───────────────┼──────────┼─────────┼────────│ ║
║ │ [img] │ Emma Johnson │ Sales Assoc. │ NM │ Pending │ [Ed] │ ║
║ │ │ emma.j@nexus │ │ │ Invite │ [...] │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ Showing 1-25 of 29 employees << < 1 of 2 > >> ║
║ ║
╚════════════════════════════════════════════════════════════════════════════════╝
Employee Detail Form:
╔════════════════════════════════════════════════════════════════════════════════╗
║ EDIT EMPLOYEE [X] ║
╠════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ [Profile] [Permissions] [Schedule] [Performance] ║
║ ═══════════════════════════════════════════════════════════════════════════ ║
║ ║
║ ┌────────────────────┐ PERSONAL INFORMATION ║
║ │ │ ║
║ │ [Photo] │ First Name * Last Name * ║
║ │ │ ┌───────────────────────┐ ┌───────────────────────┐ ║
║ │ [Change Photo] │ │ Sarah │ │ Miller │ ║
║ │ │ └───────────────────────┘ └───────────────────────┘ ║
║ └────────────────────┘ ║
║ Email * Phone ║
║ ┌───────────────────────┐ ┌───────────────────────┐ ║
║ │ sarah.m@nexuscloth.com│ │ (555) 123-4567 │ ║
║ └───────────────────────┘ └───────────────────────┘ ║
║ ║
║ EMPLOYMENT ║
║ ║
║ Employee ID Hire Date Status ║
║ ┌───────────────────┐ ┌───────────────────────┐ ┌───────────────────────┐ ║
║ │ EMP-00042 │ │ 03/15/2022 │ │ Active ▼ │ ║
║ └───────────────────┘ └───────────────────────┘ └───────────────────────┘ ║
║ ║
║ Role * Primary Location * ║
║ ┌───────────────────┐ ┌───────────────────────────────────────────────────┐ ║
║ │ Store Manager ▼ │ │ GM - Greenbrier Mall ▼ │ ║
║ └───────────────────┘ └───────────────────────────────────────────────────┘ ║
║ ║
║ Additional Locations (can work at): ║
║ [x] HQ - Headquarters [x] HM - Peninsula [ ] LM - Lynnhaven [ ] NM ║
║ ║
║ PIN: [****] [Reset PIN] ║
║ ║
║ ┌────────────────────────────────────────────────────────────────────────────╢
║ │ ║
║ │ [SAVE CHANGES] [CANCEL] ║
║ │ ║
║ └────────────────────────────────────────────────────────────────────────────╢
╚════════════════════════════════════════════════════════════════════════════════╝
Screen 5: Reporting
Purpose: Generate and view sales, inventory, and performance reports.
Route: /reports/sales
╔════════════════════════════════════════════════════════════════════════════════╗
║ REPORTS > SALES [Schedule] [Export] ║
╠════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ [Sales Summary] [By Product] [By Location] [By Employee] [By Time] ║
║ ═══════════════════════════════════════════════════════════════════════════ ║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ Date Range: [12/01/2024] to [12/29/2024] Location: [All ▼] │ ║
║ │ │ ║
║ │ Compare to: [x] Previous Period [ ] Same Period Last Year │ ║
║ │ [Generate Report] │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ ┌────────────────────────────────┐ ┌────────────────────────────────────┐ ║
║ │ TOTAL REVENUE │ │ TRANSACTIONS │ ║
║ │ │ │ │ ║
║ │ $145,678.90 │ │ 1,847 │ ║
║ │ +12.3% vs prev │ │ +8.2% vs prev │ ║
║ └────────────────────────────────┘ └────────────────────────────────────┘ ║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ REVENUE TREND │ ║
║ │ │ ║
║ │ $8K ┤ ╱╲ │ ║
║ │ │ ╱╲ ╱ ╲ ╱╲ │ ║
║ │ $6K ┤ ╱╲ ╱ ╲ ╱ ╲ ╱ ╲ │ ║
║ │ │ ╱╲ ╱ ╲ ╱ ╲ ╱ ╲ ╱ ╲ │ ║
║ │ $4K ┤ ╱╲ ╱ ╲ ╱ ╲ ╱ ╲ ╱ ╲_╱ ╲_ │ ║
║ │ │ ╱ ╲_╱ ╲__╱ ╲__╱ ╲_╱ │ ║
║ │ $2K ┤ │ ║
║ │ └────────────────────────────────────────────────────────────── │ ║
║ │ Dec 1 Dec 5 Dec 10 Dec 15 Dec 20 Dec 25 Dec 29 │ ║
║ │ │ ║
║ │ ── Current Period - - Previous Period │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ TOP SELLING PRODUCTS │ SALES BY LOCATION │ ║
║ ├───────────────────────────────────────────────┼─────────────────────────┤ ║
║ │ 1. Galaxy V-Neck Tee $12,450 (8.5%) │ GM ████████████ 35% │ ║
║ │ 2. Slim Fit Chinos $10,230 (7.0%) │ HM █████████ 28% │ ║
║ │ 3. Classic Jeans $ 9,875 (6.8%) │ LM ███████ 22% │ ║
║ │ 4. Oxford Shirt $ 8,920 (6.1%) │ NM █████ 15% │ ║
║ │ 5. Leather Belt $ 7,560 (5.2%) │ │ ║
║ └───────────────────────────────────────────────┴─────────────────────────┘ ║
║ ║
╚════════════════════════════════════════════════════════════════════════════════╝
Screen 6: Settings
Purpose: Configure locations, integrations, and system parameters.
Route: /settings
╔════════════════════════════════════════════════════════════════════════════════╗
║ SETTINGS ║
╠════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ [Locations] [Integrations] [System] [Audit Log] ║
║ ═══════════════════════════════════════════════════════════════════════════ ║
║ ║
║ STORE LOCATIONS [+ Add Location] ║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ CODE │ NAME │ ADDRESS │ STATUS │ REGISTERS │ ║
║ ├──────┼─────────────────────┼──────────────────────┼─────────┼───────────┤ ║
║ │ │ │ │ │ │ ║
║ │ HQ │ Headquarters │ 123 Warehouse Blvd │ Active │ 0 │ ║
║ │ │ │ Chesapeake, VA │ │ │ ║
║ │──────┼─────────────────────┼──────────────────────┼─────────┼───────────│ ║
║ │ GM │ Greenbrier Mall │ 1401 Greenbrier Pkwy │ Active │ 3 │ ║
║ │ │ │ Chesapeake, VA │ Online │ │ ║
║ │──────┼─────────────────────┼──────────────────────┼─────────┼───────────│ ║
║ │ HM │ Peninsula Town Ctr │ 4410 E Claiborne Sq │ Active │ 2 │ ║
║ │ │ │ Hampton, VA │ Online │ │ ║
║ │──────┼─────────────────────┼──────────────────────┼─────────┼───────────│ ║
║ │ LM │ Lynnhaven Mall │ 701 Lynnhaven Pkwy │ Active │ 2 │ ║
║ │ │ │ Virginia Beach, VA │ Online │ │ ║
║ │──────┼─────────────────────┼──────────────────────┼─────────┼───────────│ ║
║ │ NM │ Patrick Henry Mall │ 12300 Jefferson Ave │ Active │ 2 │ ║
║ │ │ │ Newport News, VA │ Offline │ │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ GENERAL SETTINGS ║
║ ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Company Name: [Nexus Clothing ] │ ║
║ │ Tax Rate: [6.00 ] % │ ║
║ │ Currency: [USD - US Dollar ▼ ] │ ║
║ │ Timezone: [America/New_York ▼ ] │ ║
║ │ │ ║
║ │ Receipt Footer: [Thank you for shopping at Nexus! ] │ ║
║ │ │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ ┌────────────────────────────────────────────────────────────────────────────╢
║ │ [!] You have unsaved changes ║
║ │ [RESET] [SAVE SETTINGS] ║
║ │ ║
║ └────────────────────────────────────────────────────────────────────────────╢
╚════════════════════════════════════════════════════════════════════════════════╝
Integrations Tab:
╔════════════════════════════════════════════════════════════════════════════════╗
║ SETTINGS > INTEGRATIONS ║
╠════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ SHOPIFY ● Connected ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Store Domain: nexuspremier.myshopify.com │ ║
║ │ API Version: 2024-01 │ ║
║ │ Last Sync: 12/29/2024 2:45 PM │ ║
║ │ Sync Status: ✓ Products ✓ Orders ✓ Inventory │ ║
║ │ │ ║
║ │ [Test Connection] [Sync Now] [Configure] │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ QUICKBOOKS DESKTOP ● Connected ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Company File: NexusClothing.qbw │ ║
║ │ QB Version: QuickBooks POS v19 │ ║
║ │ Bridges Online: 4 of 5 │ ║
║ │ │ ║
║ │ [View Bridge Status] [Refresh] │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ PAYMENT PROCESSOR ○ Not Connected ║
║ ┌─────────────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Provider: [Select Payment Processor ▼] │ ║
║ │ │ ║
║ │ [Configure] │ ║
║ └─────────────────────────────────────────────────────────────────────────┘ ║
║ ║
╚════════════════════════════════════════════════════════════════════════════════╝
Responsive Design Considerations
Breakpoints
| Breakpoint | Width | Layout Adaptation |
|---|---|---|
| Desktop XL | 1400px+ | Full 3-column layout |
| Desktop | 1024-1399px | 2-column with collapsible panels |
| Tablet | 768-1023px | Hamburger menu, stacked cards |
| Mobile | < 768px | Single column, bottom nav |
Sidebar Behavior
/* Desktop: Fixed sidebar */
@media (min-width: 1024px) {
.sidebar {
width: 240px;
position: fixed;
height: calc(100vh - 56px - 40px);
}
}
/* Tablet: Overlay sidebar */
@media (max-width: 1023px) {
.sidebar {
position: fixed;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.sidebar.open {
transform: translateX(0);
}
}
/* Mobile: Hide sidebar, use bottom nav */
@media (max-width: 767px) {
.sidebar { display: none; }
.bottom-nav { display: flex; }
}
Table Responsiveness
/* Horizontal scroll for data tables on smaller screens */
@media (max-width: 1023px) {
.data-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* Card layout for mobile */
@media (max-width: 767px) {
.data-table tr {
display: block;
margin-bottom: 16px;
border: 1px solid var(--color-border);
border-radius: 8px;
}
.data-table td {
display: flex;
justify-content: space-between;
padding: 8px 12px;
}
.data-table td::before {
content: attr(data-label);
font-weight: 600;
}
}
Role-Based Access
| Feature | Admin | Manager | Supervisor | Associate |
|---|---|---|---|---|
| Dashboard | Full | Full | Limited | View Only |
| Inventory - View | Yes | Yes | Yes | Yes |
| Inventory - Transfer | Yes | Yes | Yes | No |
| Inventory - Adjust | Yes | Yes | Request | No |
| Products - View | Yes | Yes | Yes | Yes |
| Products - Edit | Yes | Yes | No | No |
| Products - Create | Yes | Yes | No | No |
| Employees - View | Yes | Yes | Own Team | Self |
| Employees - Edit | Yes | Own Store | No | No |
| Reports - All | Yes | Yes | Limited | No |
| Settings - View | Yes | Limited | No | No |
| Settings - Edit | Yes | No | No | No |
Real-Time Updates
The Admin Portal uses SignalR for live updates:
| Event | Hub Method | UI Update |
|---|---|---|
| Sale Completed | ReceiveSale | Dashboard KPIs, Activity Feed |
| Inventory Changed | ReceiveInventoryUpdate | Inventory grid, alerts |
| Bridge Status | ReceiveBridgeStatus | Status indicators |
| New Alert | ReceiveAlert | Alert panel, notification bell |
| Transfer Complete | ReceiveTransfer | Inventory grid, activity |
Summary
The Admin Portal provides:
- Dashboard: Real-time KPIs, alerts, and activity monitoring
- Inventory: Multi-location stock management with transfers
- Products: Full catalog CRUD with variants and pricing
- Employees: User management, roles, schedules
- Reports: Comprehensive sales and performance analytics
- Settings: Location, integration, and system configuration
Implementation complete. Ready for engineer review.