# BV-SIS Component Library Report

**Prepared by:** BIG VOICE TECHNOLOGIES
**Scope:** Restyled UI component library under the Aurora design system
**Location:** `resources/views/components/ui/`, Livewire views, and `bv-sis.css`

All components retained their existing Blade API (props/slots) — only their
**visual layer** was rebuilt. Business logic and markup contracts are unchanged,
so downstream module views require no edits.

---

## 1. Layout & Shell

| Component | Enhancements |
|-----------|--------------|
| **Sidebar** (`livewire/layout/sidebar`) | Floating rounded panel, gradient background, top orange aura, brand + subtitle, **live menu search**, section labels, animated active glow bar, animated submenu expansion with connector rail, collapsible. |
| **Header** (`layouts/admin`) | Glass blur bar, global search, **quick-create** menu, **messages**, **fullscreen** toggle, notification centre, theme switch, **live clock**, **academic-session pill**, rich profile dropdown (name + role). |
| **Footer** | Minimal, muted, branded. |

---

## 2. Data Display

| Component | Enhancements |
|-----------|--------------|
| **Stat / KPI card** (`stat-card`) | Glass surface, gradient icon tile, radial glow, hover lift, coloured variants (primary/success/warning/danger/info/accent), **animated counters** (`data-bv-counter`), trend pills. |
| **Card** (`card`) | Glass, animated top-border sheen, hover lift + orange border. |
| **Widget** (`widget`) | Glass panel with header + slot, full-height. |
| **Chart card** (`chart-card`) | Glass container, fixed responsive canvas heights. |
| **Table** (`table-wrapper`) | Glass wrapper, sticky blurred headers, uppercase micro-labels, row hover glow with orange inset bar, toolbar + export slot, DataTables theming. |
| **Timeline** | Glowing orange nodes on a rail. |
| **Calendar card** | Rounded day cells, glowing "today", event highlight. |
| **Progress** | Gradient glowing bars (0–100 utility classes). |
| **Badge / Status pill** | Pill badges with tinted backgrounds; status pills with glowing dots. |
| **Avatar** | Gradient initials tile with soft glow; image support. |

---

## 3. Inputs & Actions

| Component | Enhancements |
|-----------|--------------|
| **Button** (`button` / `.bv-btn`) | Gradient fills, glow shadows, hover lift, active ripple sheen, sizes sm/md/lg, variants primary/secondary/blue/success/danger/ghost/icon, loading state. |
| **Search bar** | Icon, glass input, focus glow, keyboard-shortcut chips. |
| **Filter bar & chips** | Glass panel with pill chips. |
| **Form controls** | Translucent inputs, orange focus ring, invalid state; Bootstrap `.form-control/.form-select` harmonised. |
| **File uploader** | Dashed dropzone with hover/dragover glow. |
| **Stepper** | Gradient active/complete indicators with connectors. |
| **Tabs** | Underline tabs with orange active; Bootstrap `.nav-tabs` harmonised. |

---

## 4. Feedback & Overlays

| Component | Enhancements |
|-----------|--------------|
| **Alert** | Translucent blurred, coloured by type, slide-down entrance. |
| **Toast (SweetAlert2)** | `bv-swal` dark theme, slide-in. |
| **Modal / Drawer** | Glass content, blurred backdrop. |
| **Dropdown menu** | Glass, fade-up entrance, orange hover items. |
| **Notification centre** | Icon button with glowing badge, glass panel, typed icons, unread highlight. |
| **Empty state** | Gradient icon tile, title + message. |
| **Skeleton** | Shimmer loading placeholders. |
| **Module placeholder** | Gradient icon, title, CTA. |

---

## 5. Header Micro-widgets (new)

- `.bv-icon-btn` + `.bv-icon-btn__badge` — glass icon buttons with glowing counts.
- `.bv-header-clock` — live time/date (JS-driven, 30s tick).
- `.bv-session-pill` — current academic session indicator.
- `.bv-profile-trigger` — avatar + name + role pill trigger.

---

## 6. Quick Actions

`.bv-quick-actions` grid with `.bv-quick-action` tiles — gradient icon badge,
hover lift + glow, used on the executive dashboard (12 tiles).

---

## 7. Animation Utilities

`bv-fade-in`, `bv-fade-up`, `bv-slide-down`, `bv-pulse`, and `.bv-stagger`
(sequential child entrance) for grids and tiles.

---

## 8. JavaScript Behaviours (`resources/js/bv-sis.js`)

Theme toggle & persistence · sidebar collapse/mobile · **sidebar menu search** ·
**live clock** · **fullscreen toggle** · **animated counters** (IntersectionObserver) ·
keyboard shortcuts (Ctrl/⌘+K, `/`) · SweetAlert2 toasts · flash bridge ·
DataTables & Chart.js helpers (Aurora-themed).
