# BV-SIS Foundation UI Report

**Date:** 8 July 2026  
**Design Source:** `09_UI_UX_GUIDELINES.md`

---

## 1. Design System Implementation

### Color Tokens (CSS Variables)
| Token | Light | Usage |
|-------|-------|-------|
| `--bv-primary` | #1B4F72 | Primary actions, sidebar active |
| `--bv-bg` | #F4F6F9 | Page background |
| `--bv-surface` | #FFFFFF | Cards, panels |
| `--bv-success` | #27AE60 | Success states |
| `--bv-danger` | #E74C3C | Errors, delete |
| `--bv-warning` | #F39C12 | Pending, caution |

Dark mode variants applied via `[data-bs-theme="dark"]`.

### Typography
- Font: Inter (Google Fonts)
- Scale: H1 28px through Small 12px per guidelines

---

## 2. Layouts

| Layout | File | Purpose |
|--------|------|---------|
| Admin | `layouts/admin.blade.php` | Main authenticated shell |
| Auth | `layouts/auth.blade.php` | Login page |
| Guest | `layouts/guest.blade.php` | Public pages |

### Admin Shell Components
- Collapsible sidebar with module navigation
- Header: breadcrumb, global search, notifications, theme toggle, profile dropdown
- Main content area with flash messages
- Footer: "Powered by BIG VOICE TECHNOLOGIES"

---

## 3. Component Library (23 Components)

| Component | File | Features |
|-----------|------|----------|
| Card | `ui/card.blade.php` | Standard content card |
| Stat Card | `ui/stat-card.blade.php` | KPI with icon, value, trend |
| Button | `ui/button.blade.php` | primary, secondary, danger, ghost |
| Alert | `ui/alert.blade.php` | success, danger, warning, info |
| Modal | `ui/modal.blade.php` | Bootstrap modal wrapper |
| Drawer | `ui/drawer.blade.php` | Offcanvas panel |
| Filter Bar | `ui/filter-bar.blade.php` | Advanced filter container |
| Search Bar | `ui/search-bar.blade.php` | Search input with icon |
| Table Wrapper | `ui/table-wrapper.blade.php` | DataTables-ready with export area |
| Badge | `ui/badge.blade.php` | Status badges |
| Status Pill | `ui/status-pill.blade.php` | Colored status indicators |
| File Uploader | `ui/file-uploader.blade.php` | Drag-drop upload zone |
| Avatar | `ui/avatar.blade.php` | User avatar with initials fallback |
| Tabs | `ui/tabs.blade.php` | Horizontal tab navigation |
| Stepper | `ui/stepper.blade.php` | Multi-step wizard |
| Progress Bar | `ui/progress-bar.blade.php` | Progress indicator |
| Widget | `ui/widget.blade.php` | Dashboard widget container |
| Timeline | `ui/timeline.blade.php` | Activity timeline |
| Calendar Card | `ui/calendar-card.blade.php` | Calendar widget |
| Chart Card | `ui/chart-card.blade.php` | Chart.js container |
| Empty State | `ui/empty-state.blade.php` | No data placeholder |
| Page Header | `ui/page-header.blade.php` | Title, subtitle, breadcrumbs, actions |
| Breadcrumb | `ui/breadcrumb.blade.php` | Navigation breadcrumb |

---

## 4. Livewire Components

| Component | Purpose |
|-----------|---------|
| Layout\Sidebar | Permission-filtered navigation |
| Layout\HeaderSearch | Global search (Ctrl+K) |
| Layout\NotificationCenter | In-app notifications |
| Layout\ThemeToggle | Dark/light mode switch |
| Profile\AvatarUpload | Avatar upload with preview |
| System\SettingsForm | System settings form |

---

## 5. Responsive Behaviour

| Breakpoint | Sidebar | Header |
|------------|---------|--------|
| Desktop ≥1280px | Expanded with labels | Full search + profile |
| Tablet 768–1279px | Collapsible | Compact |
| Mobile <768px | Overlay with backdrop | Hamburger toggle |

---

## 6. Interactions

- Keyboard: `Ctrl+K` global search, `/` focus search
- Sidebar collapse persisted in localStorage
- Theme preference persisted in localStorage + user preferences
- Hover animations on cards, nav links, buttons
- Toast notifications via SweetAlert2 hook

---

## 7. Assets

| Asset | Source |
|-------|--------|
| CSS | `resources/css/bv-sis.css` + Bootstrap 5.3 |
| JS | `resources/js/bv-sis.js` + Alpine.js, Chart.js, DataTables, SweetAlert2 |
| Icons | Bootstrap Icons |
| Build | Vite 7.x → `public/build/` |

---

## 8. Accessibility

- Skip to main content link
- ARIA labels on icon buttons
- Focus rings on interactive elements
- Semantic HTML (nav, main, header, footer)
- `prefers-reduced-motion` respected

---

*End of Foundation UI Report*