Design Prototype Launch App
SAP Fiori Horizon — Inspired Design System

HBR Brokers
Admin Panel

A modern, enterprise-grade HTML prototype for the Point of Sale & Customer Policy Management System — ready for Laravel migration.

Open Login Go to Dashboard
10
HTML Pages
3
User Roles
40+
UI Components
100%
Responsive
WCAG
Accessible
All Pages

10 Screens, Fully Designed

Every page shares a unified shell bar, side navigation, and design token system for pixel-perfect consistency.

Login
Split-panel login with brand showcase, role selector (POS / Customer / Admin), OTP verification flow, and forgot password step.
OTP Flow Role Selector Accessibility
Open page All roles
Core
Dashboard
KPI tiles, monthly GWP bar chart, policy donut chart, quick actions, renewal alerts, and activity timeline — all at a glance.
KPI Tiles Charts Timeline
Open page POS · Admin
Core
Policy Documents
Document library with filter chips, status badges, version history, detail drawer, and drag-and-drop upload modal.
Filter Chips Drawer Upload
Open page POS · Admin
Core
Renewal Tracker
Three-view tracker: Kanban drag-and-drop pipeline, urgency table, and calendar view — with follow-up modal and status management.
Kanban Calendar Drag & Drop
Open page POS · Admin
Core
Customers
Customer directory with KPI summary, sortable table, KYC progress indicators, and a profile drawer with 4 inner tabs (Overview, Policies, Docs, Activity).
Profile Drawer KYC Tabs
Open page POS · Admin
Core
Policy Detail
Full policy view with header banner, 5 tabbed sections (Overview, Documents, Renewal History, Service Requests, Claims), renewal stepper, and audit trail.
5 Tabs Stepper Audit Log
Open page POS · Admin
Core
Notifications
Notification centre with type filters, read/unread states, mark-all-read, bulk actions, and categorised notification items with timestamps.
Filter Bulk Actions Real-time
Open page All roles
Core
Settings
User preferences with sidebar tabs: Profile, Security (2FA, password strength), Notifications matrix, Permissions grid, and Audit Log.
2FA Permissions Audit Log
Open page All roles
New
Reports
Analytics hub with 6 KPI tiles, monthly GWP bar chart, renewal funnel, top POS leaderboard with rank badges, and insurer distribution table.
Analytics Bar Chart Funnel
Open page Admin
New
Claims
Claims management with 4 KPIs, filterable table, 5-step claim stepper drawer with document checklist, and new claim filing modal.
5-Step Stepper Doc Checklist File Upload
Open page POS · Admin
Design System

Fiori Horizon — Inspired Foundation

Every component is built on a shared token system ensuring consistency across all 10 pages.

Color Tokens

CSS custom properties for brand, shell, surface, text, and semantic states (success, warning, error).

Brand
Shell
Body
Text
Success
Warning

Shell Layout

Fixed 48px shell bar + 256px collapsible side nav that collapses to 56px with icon-only mode and mobile overlay.

Drawers & Modals

Right-side slide-in drawers for detail views; centered modals for actions. Both have overlay + focus-trap support.

Toast Notifications

Auto-dismissing toasts with success/warning/error types, slide-in animation, and manual close button.

Data Tables

Sortable, filterable tables with sticky header, urgency row coloring, inline badges, and pagination.

Responsive

Mobile-first breakpoints at 640px and 1024px. Nav collapses to hamburger on small screens.

HTML5 Semantic
CSS Custom Properties
Vanilla JS (HBR namespace)
Font Awesome 6.5
Inter — Google Fonts
Laravel-ready
Access Control

Three User Roles

Navigation items and UI sections are shown or hidden based on the active role stored in localStorage.

🧑‍💼

POS Agent

Access to Dashboard, Policy Documents, Renewal Tracker, Customers, Policy Detail, Notifications, Settings, and Claims.

👤

Customer

Limited access to own Policy Documents, Notifications, and Settings. Read-only view of personal policy detail.

🛡️

Admin

Full access to all 10 pages including Reports, full Settings with Permissions matrix, user management, and audit logs.