# PEL RU-APP — Project Analysis & Demo Build Brief > **Purpose of this document:** Hand this entire file to Claude (or any LLM) with the instruction > *"Build a single self-contained `demo.html` file that reproduces this product as an interactive > showcase with the dummy data described below."* It contains a full description of the real > application's frontend (markup, CSS, colors, behaviors), backend data shapes, and a concrete > spec for the demo. The frontend is reproduced **as-is** wherever it matters for the look & feel. --- ## 1. What this product is **PEL RU-APP** is an internal **Customer Complaint Escalation & "RU Case" (Re‑Up / escalated case) tracking system** for **PEL (Pak Elektron Ltd)** — a Pakistani home-appliance manufacturer. The contact‑center / customer‑relationship team uses it to: - Pull a customer complaint from the external **COMS** system (by complaint number). - Open an **escalation ticket** ("RU Case") against that complaint with a category, reason, and escalation level (High/Medium/Low). - Track the case through statuses (**In Process → Resolved → Closed**, plus Hold/Sales‑Return/etc.). - Collaborate via a per‑ticket **chat/feedback thread** with **@mentions** and notifications. - Run a post‑resolution **"Happy Call"** customer‑satisfaction survey. - Let **Service Centers** submit delay‑reason status forms. - Monitor everything on a live **Wallboard** (active‑ticket list, auto‑refresh) and an **Analytics Dashboard** (KPIs + 11 charts + drill‑down). - Export reports and manage **users / roles / permissions**. ### Tech stack (real app) | Layer | Tech | |---|---| | Backend | Laravel 12 (PHP 8.2), MySQL | | Auth/RBAC | `laravel/ui` + `spatie/laravel-permission` (roles & permissions) | | Frontend | Blade templates, **Bootstrap 5.3.3**, **Bootstrap Icons 1.10.5** | | Charts | **ApexCharts** (loaded via CDN) | | Tables | **DataTables 1.13.8** (server-side, dashboard) + custom JS pagination (wallboard) | | Fonts | **Inter** (dashboard), system default elsewhere | | Build | Vite (Tailwind v4 + Sass present but the showcase pages use CDN Bootstrap) | | Excel export | phpoffice/phpspreadsheet | > **Important for the demo:** All showcase pages already pull Bootstrap, Bootstrap Icons, ApexCharts, jQuery and DataTables **from CDNs**, so a single static HTML file can reproduce them faithfully with no build step. Replace every Laravel AJAX call with in-file JS arrays of dummy data. --- ## 2. Roles, permissions & navigation Roles (Spatie): **Admin, AdminOperations, Management, ServiceCenter**, and an agent-type role holding ticket permissions. Permissions referenced in the UI: `dashboard-view`, `wallboard-view`, `ticket-view/create/edit/delete`, `user-view/create/edit/delete`, `reports-download`, plus role checks. The **sidebar** (shared layout) shows sections conditionally: - **Dashboard** (`dashboard-view`) - **Wallboard** (`wallboard-view`) - **Tickets → RU CASE FORM** (ticket permissions; hidden for Management/ServiceCenter) - **Users → User Management** (`user-view`) - **Reports → Reports** (`reports-download`) - **Admin → Permissions, Roles (List / Create / Assign)** (`Admin` role) Top navbar: sidebar collapse toggle (`☰`), and a profile dropdown with avatar (from `ui-avatars.com`), "Go to Profile", and "Logout". ### Page → route map | Page | Route | View | |---|---|---| | Wallboard (home `/`) | `wallboard` | `wallboard.blade.php` | | Analytics Dashboard | `dashboard` | `dashboard.blade.php` | | RU Case Form (agent) | `/home-agent` | `agent.blade.php` | | Management view | `/t-management` | `t_management.blade.php` | | Reports | `/export/all-reports` | `reports/all_reports.blade.php` | | Users / Roles / Permissions | resource routes | `users/*`, `roles/*`, `permissions/*` | --- ## 3. Design system (colors, shells, components) There are **two visual themes** in the app; reproduce both: ### Theme A — App shell + Wallboard + Agent (slate/blue corporate) ``` --primary: #7b8fa1 (slate blue-gray) --secondary: #5a6c7d --dark: #2c3e50 (charcoal) ← sidebar/navbar/footer gradient base --light: #34495e --accent: #4a5d6a --warning: #f59f00 (amber) Sidebar/navbar gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%) (wallboard header) linear-gradient(180deg, #2c3e50 0%, #34495e 100%) (sidebar) Cards: 15px radius, soft shadow rgba(123,143,161,.1), hover lift, glassmorphism (backdrop-filter: blur) Buttons: pill (border-radius 25px), gradient primary→secondary ``` ### Theme B — Analytics Dashboard (light, Inter, modern SaaS) ``` --bg: #f8f9fa --surface: #fff --surface-2: #f1f3f5 --border: rgba(0,0,0,.08) --text: #1f2937 --text-muted: #6b7280 --accent-blue: #2787F5 --accent-red: #FF6340 --accent-green: #10B981 --accent-amber: #F59E0B --accent-violet: #8B5CF6 --radius: 14px --shadow: 0 4px 20px rgba(0,0,0,.05) Font: Inter (Google Fonts) ``` Chart palette (used by ApexCharts everywhere): `['#2787F5','#FF6340','#10B981','#F59E0B','#8B5CF6']` (+ `#808080`, `#D4AF37`, `#8B0000` in places). --- ## 4. Shared layout — `layouts/app.blade.php` (REPRODUCE VERBATIM) This is the app chrome (fixed sidebar + sticky top navbar + content area + footer). Every page is rendered inside it. For the demo, turn the sidebar links into in-page tab switches (show/hide sections) instead of separate pages. ```html @yield('title', 'RU-APP Project') @stack('styles')
@yield('content')
@yield('scripts') ``` > Logo note: the real app uses an Abacus logo image. In the demo use a placeholder (e.g. a text logo "PEL" or the `ui-avatars` trick) — no external asset required. --- ## 5. PAGE 1 — Wallboard (`wallboard.blade.php`) ⭐ centerpiece **What it is:** A live "active tickets" board. Header banner with the user's name + role, an optional **Notifications** card (mentions), and the main **Active Tickets** card with a rich filter bar, a 10-column table, custom pagination, rows-per-page selector, refresh button, and a custom **date-range picker** dropdown. Auto-refreshes every 5 min; checks mentions every 60 s. Clicking a row opens that ticket. ### 5.1 Header + cards layout (reproduce) ```html

Ahmed Ibrahim's Wallboard

Role: Admin | Customer Relationship Management & Case Tracking

Active Tickets
0
Ticket No.Escalation DateComplaint No.Customer Phone No.EscalationStatusService Center Closed AgingComments
``` ### 5.2 Filter bar controls A search input with a leading 🔍 and the **date-range button** appended; then a row of controls: - **Status** — multi-select dropdown (checkboxes) from `case_status` values. - **Closed Aging** — multi-select: `0-Days, >= 1-Days, >= 2-Days, >= 3-Days, >= 5-Days, >= 8-Days`. - **Escalation Level** — multi-select: High, Medium, Low. - **Complaint Category** — multi-select from categories. - **Zone** — multi-select from distinct zones (hidden for ServiceCenter role). - **Service Center** — searchable multi-select (hidden for ServiceCenter role). - **Customer Name** — free-text. - **Phone Number** — free-text. - **Reset** button. Multi-select pattern (each filter): a `dropdown` with a toggle button showing an icon + label that becomes `Label (n)` when items are selected, a "Select All / Deselect All" pill button, and a scrollable `.multi-select-container` of `.form-check` checkboxes. ### 5.3 Ticket row rendering (JS builds these — copy the exact template & badge logic) ```js // Status badge classes: // open -> badge bg-success | in process -> badge bg-warning text-dark // closed -> badge bg-primary | resolved -> badge bg-danger | default badge bg-secondary // Escalation badge classes: // high -> badge bg-danger | medium -> badge bg-warning text-dark | low -> badge bg-info // Row gets .table-warning if ticket.highlight && !ticket.is_closed (aging > 8 days, not closed) row.innerHTML = ` ${ticket.ticket_number} ${formatEscalationDate(ticket.escalation_date)} ${ticket.complaint_number}
${ticket.customer_name}
${ticket.phone_number || '-'} ${ticket.escalation_level} ${ticket.case_status} ${ticket.service_center || '-'} ${ticket.closed_aging ? ticket.closed_aging + ' days' : '-'} ${lastComment || '-'}`; ``` Each row is clickable (cursor pointer) → navigates to the ticket page. ### 5.4 Wallboard custom CSS (reproduce — key parts) ```css .wallboard-section { font-size:.875rem; } .wallboard-header { background: linear-gradient(135deg,#2c3e50 0%,#3498db 100%); padding:15px 20px; border-radius:10px; margin-bottom:20px; box-shadow:0 4px 15px rgba(0,0,0,.1); } .wallboard-header h1 { color:#fff; font-size:1.25rem; font-weight:600; margin-bottom:5px; } .wallboard-header p { color: rgba(255,255,255,.85); font-size:.8rem; margin-bottom:0; } .wallboard-card { border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.08); } .wallboard-table thead th { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:10px 12px; background:#f8f9fa; color:#495057; white-space:nowrap; } .wallboard-table tbody td { padding:8px 12px; vertical-align:middle; font-size:.8rem; } .wallboard-table tbody tr:hover { background:#f1f5f9; } .filter-tag { background: linear-gradient(135deg,#2c3e50 0%,#3498db 100%); color:#fff; border-radius:20px; padding:4px 10px; font-size:.8rem; } .multi-select-container { max-height:150px; overflow-y:auto; border:1px solid #dee2e6; border-radius:4px; padding:8px; } /* Custom date-range picker: .date-range-btn, .date-range-dropdown, .drp-header (gradient), .drp-grid (7-col calendar), .drp-day (36px circles), .drp-selected/.drp-in-range/.drp-range-start/.drp-range-end. Header gradient: linear-gradient(135deg,#2c3e50 0%,#3498db 100%). */ ``` > The wallboard includes a **hand-built date-range calendar picker** (no library): month nav, day grid, range highlighting, Clear/Apply. For the demo you can include a simplified version or two date inputs — but the full picker CSS is in the source file `resources/views/wallboard.blade.php` lines 291–524 if you want it pixel-perfect. --- ## 6. PAGE 2 — Analytics Dashboard (`dashboard.blade.php`) ⭐ centerpiece **What it is:** A modern light-theme analytics page (Inter font). Header with "Refresh" + last-updated time, **4 KPI cards**, a **server-side DataTable** (Service Center breakdown), and **11 ApexCharts** in labeled sections. Clicking any chart point opens a **drill-down modal** with a detail table. Charts load via AJAX with skeleton loaders. ### 6.1 KPI cards (4) Total Cases (blue, `bi-ticket-perforated`) · In Process (red, `bi-hourglass-split`) · Closed (green, `bi-check-circle`) · Resolved (amber, `bi-exclamation-lg`). Values **count up** with an ease-out animation. Card has a colored 3px bottom bar + tinted icon chip. ### 6.2 The 11 charts (section label → chart → ApexCharts type → dummy data shape) | Section | Chart id | Type | Data shape | |---|---|---|---| | Status Distribution | `chart-nationwide` | **donut** | `{labels[], series:int[], colors[]}` — by case_status | | | `chart-inprocess` | **horizontal bar** | `{labels[], series:int[]}` — in-process reasons (top 10) | | | `chart-zone` | **grouped vertical bar** | `{labels:zones[], series:[{name,data[],color}]}` by status | | Top 10 Analysis | `chart-ru-channels` | **horizontal bar** | `{labels[], series:int[]}` — complaint categories | | | `chart-esc-reasons` | **horizontal bar** | `{labels[], series:int[]}` — escalation reasons | | Not Closed by SC | `chart-sc-notclosed` | **vertical bar** | `{labels:sc[], series:int[]}` | | Top Cases | `chart-top5-reasons` | **pie** | `{labels[], series[], colors[]}` | | | `chart-top10-tech` | **horizontal bar** | `{labels:tech[], series:int[]}` | | Top 20 Tech/ASC | `chart-top20-tech` | **vertical bar** | `{labels[], series:int[]}` | | National vs Esc. | `chart-national-vs-ru` | **donut** | `{labels:['Total Complaints','Escalated Jobs'], series:[n,n]}` | | | `chart-sc-vs-ru` | **grouped bar** | `{labels:sc[], series:[{name:'Total Complaints',data[]},{name:'Escalated Jobs',data[]}]}` | Each chart sits in the reusable **chart-card** component (header icon + title, skeleton loader, then the chart div): ```html
Nationwide Escalation Status
``` ### 6.3 Service Center DataTable Columns: `# · Service Center · Zone · Total · Closed · In Process · Canceled · Open`. Numeric cells use colored pill badges: ```css .badge-closed { background: rgba(16,185,129,.15); color:#10B981; } .badge-process { background: rgba(39,135,245,.15); color:#2787F5; } .badge-canceled { background: rgba(255,99,64,.15); color:#FF6340; } /* open count uses amber pill rgba(245,158,11,.15)/#F59E0B, or muted 0 */ ``` Row data: `{service_center, zone, total, closed_count, in_process_count, canceled_count, open_count}`. Sorted by Total desc, 15/page. ### 6.4 Drill-down modal A custom modal (`.detail-modal-backdrop` / `.detail-modal`) with a sticky-header detail table. Columns: `# · Reference · Source · Service Center · Status · Category · Reason · Owner · Date`. Opens on chart point click; shows a "Total: N" chip and up to ~120 latest rows. Row shape: ```json { "reference":"RU-00042", "source":"Escalated Jobs", "service_center":"LAHORE", "status":"In Process", "category":"Escalation Job", "reason":"PNA-After Sales", "owner":"Imran Khalid", "event_date":"2026-05-02 14:30" } ``` ### 6.5 Dashboard CSS & JS (reproduce) The full design-token CSS, KPI/chart-card/skeleton/table/modal styles are in `dashboard.blade.php` lines 10–368 — **paste them verbatim**. The JS factory (`loadChart`, `buildDonut/buildHBar/buildVBar/buildPie`, `animateCount`, DataTables init, modal handlers) is lines 551–938. For the demo, replace each `fetch(...)` with a local function returning the dummy data object of the right shape, then feed it to the same `build*` function — the ApexCharts options are identical. Key ApexCharts defaults: ```js const apexDefaults = { chart: { background:'transparent', foreColor:'#6b7280', toolbar:{show:false}, animations:{enabled:true, speed:600} }, grid: { borderColor:'rgba(0,0,0,.07)' }, tooltip:{ theme:'light' }, legend:{ labels:{ colors:'#1f2937' } }, }; // donut: plotOptions.pie.donut.size '65%' + total label; hbar: horizontal bars borderRadius 4 barHeight 60%; // vbar: columnWidth 60%, xaxis labels rotate -30; pie: dataLabels enabled. ``` --- ## 7. PAGE 3 — RU Case Form (`agent.blade.php`) **What it is:** The core data-entry / ticket-detail page (uses Theme A, `agent.css`). Single column of cards: 1. **Page header** — `bi-clipboard2-check` "RU CASE" + subtitle "Record, track and collaborate on customer escalations". 2. **Customer Detail From COMS** (warning-header card, `bi-database-gear`) — a **Complaint #** field with a pulsing **Search** button (`#searchComplaintBtn`), plus read-only fields populated from COMS: Job #, COMS Complaint Date, Job Type, Service Center, Customer Name, Contact No, Technician Name, Date of Purchase, Product, Job Status, Problem, **Work Done** (textarea). 3. **Complaint History** — Bootstrap accordion (`bi-clock-history`); table columns: `Complaint # · Job # · Date · Product · Status · Ticket # · Case Status`. 4. **Ticket Status Info** — dynamic alert (info/success/warning) describing whether a ticket was found / created. 5. **Initial Customer Information** form (`bi-person-vcard`) with a status badge ("Step 1" / "View Only" / "Closed Ticket (View Only)"): - Ticket No (readonly, auto), Complaint Escalation Date (readonly date), **Case Status** (select), **Complaint Category** (select), Agent Name (auto = current user), **Reason of Escalation** (select), **Escalation Level** (select: Low/Medium/High), Aging (readonly, live-calculated), **Voice of Customer** (textarea). 6. **Happy Call Status** (`bi-emoji-smile`) — appears when Case Status = **Closed**. Fields: Case Closed Date, Happy Call Date, **Customer Satisfied** (select), Additional Customer Feedback (textarea). Badge: "Completed" (green) / "Pending Submission" (amber) / "Required for Closed Cases". 7. **Chat / Feedback** (hidden until a ticket is loaded) — scrollable bubble thread + input with **@mention autocomplete**. Bubbles: own messages `#d1e7dd` (green, right), others `#e2e3e5` (gray, left); each shows `Name (Role)` + message + timestamp. Disabled when ticket is Closed. 8. **Service Center Form** (ServiceCenter role) — Submission Date, **Delay Reason** (select), Case Status (select, excludes Closed), **Status for Reports** (select: "Delay Due to Sale Return / Delay Due to PNA / Delay From Customer Side / Other"), Remarks (shown only when "Other"). ### 7.1 Chat bubble template (reproduce) ```js feedbackHtml += `
${senderName} (${feedback.role})
${feedback.message}
${feedback.time}
`; ``` ### 7.2 `agent.css` (Theme A — reproduce verbatim, abridged here) ```css :root{ --primary:#7b8fa1; --secondary:#5a6c7d; --dark:#2c3e50; --light:#34495e; --accent:#4a5d6a; --warning:#f59f00; } .agent-page{ background: linear-gradient(135deg,#f8f9fa,#e9ecef); min-height:100vh; } .agent-page .card{ border-radius:15px; border:none; box-shadow:0 4px 20px rgba(123,143,161,.1); transition:transform .3s, box-shadow .3s; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); } .agent-page .card:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(123,143,161,.15); } .agent-page .card-header{ background: linear-gradient(45deg,var(--primary),var(--secondary)); color:#fff; border-radius:15px 15px 0 0 !important; padding:1.5rem; } .card-header-warning{ background:rgba(245,159,0,.1)!important; border-bottom:1px solid rgba(245,159,0,.3)!important; color:var(--dark)!important; } .agent-page .form-control,.agent-page .form-select{ border:2px solid rgba(123,143,161,.2); border-radius:10px; background:rgba(123,143,161,.05); transition:all .3s; } .agent-page .form-control:focus,.agent-page .form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(123,143,161,.25); transform:scale(1.02); } .agent-page .btn-primary{ background: linear-gradient(45deg,var(--primary),var(--secondary)); border:none; border-radius:25px; padding:.8rem 2rem; font-weight:600; box-shadow:0 4px 15px rgba(123,143,161,.3); } .agent-page .btn-primary:hover{ background: linear-gradient(45deg,var(--secondary),var(--accent)); transform:translateY(-2px); } .chat-scroll{ background:rgba(123,143,161,.05); border-radius:10px; } .chat-scroll::-webkit-scrollbar{ width:8px; } .chat-scroll::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:8px; } .badge{ background: linear-gradient(45deg,var(--primary),var(--secondary))!important; border-radius:20px; padding:.5rem 1rem; } #searchComplaintBtn{ animation: pulse 2s infinite; } @keyframes fadeInUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} } @keyframes pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(123,143,161,.4);} 70%{box-shadow:0 0 0 10px rgba(123,143,161,0);} } ``` Icons: `bi-clipboard2-check, bi-database-gear, bi-clock-history, bi-person-vcard, bi-emoji-smile, bi-search, bi-send-fill, bi-tools, bi-info-circle, bi-hourglass-split`. --- ## 8. PAGE 4 — Management view (`t_management.blade.php`) Same visual language as the RU Case Form but **read-only** (no submit; all AJAX search/display). Search a complaint → view its COMS detail, ticket info, complaint history, Happy Call status (read-only), and the feedback/chat thread (with @mentions). Use the same cards, badges, and chat template as §7. Good as a secondary tab in the demo. --- ## 9. PAGE 5 — Users / Roles / Permissions / Reports (lower priority) Standard Bootstrap CRUD tables and forms inside the same shell: - **Users**: table (Name, Username, Service Center, Roles, actions: Edit / Reset Password / Delete) + create/edit forms. - **Roles**: list, create, edit; permission checkboxes; "Assign to Users" page. - **Permissions**: list/create/edit. - **Reports**: a page with export cards (Initial Customers, Happy Calls, Feedback, COMS, All Reports) with date filters and "Download" buttons (Excel). For the demo these can be light: one **Users** table and a **Reports** card grid are enough to convey breadth. --- ## 10. DATA MODEL & DUMMY-DATA REFERENCE ### 10.1 Core entity flow `coms` (raw complaint) → `initial_customer_information` (the escalation "RU Case" ticket, FK `complaint_id`→coms.id) → `happy_call_status` (survey) and `feedback[]` (chat) and `service_center_form` (SC follow-up). `mentions` link feedback ↔ users. `service_center` provides zone mapping (join `coms.service_center` = `service_center.coms_sc`). ### 10.2 The ticket object the wallboard renders (use this exact shape for dummy rows) ```json { "id": 42, "ticket_number": "RU-2026-00042", "complaint_number": "250614-001234", "phone_number": "0300-1234567", "escalation_date": "2026-06-10T09:15:00", "closed_aging": 4, "case_status": "In Process", // In Process | Resolved | Closed | Hold – PNA | Sales Return | Pending from Customer | Cancelled "escalation_level": "High", // High | Medium | Low "customer_name": "Bilal Ahmed", "complaint_category": "Escalation Job", "service_center": "Lahore, PEL Service Center", "is_closed": false, "highlight": false, // true when aging > 8 days and not closed -> row turns yellow "last_comment": "Technician assigned, awaiting part." } ``` ### 10.3 Reference / lookup values (use these — they are the real seeded values) **Case statuses (7):** `In Process`, `Hold – PNA`, `Sales Return`, `Pending from Customer`, `Cancelled`, `Resolved`, `Closed`. **Escalation levels (3):** `High`, `Medium`, `Low`. **Complaint categories (15):** Dealer Feedback Survey · Cancelled Job (Assigned) Survey · Cancelled Job (Un-Assigned) Survey · Happy Calls · Re-verification of Happy Calls · Customer Care (Email) · Speakup (Email) · Escalation Job · Social Media · WhatsApp/SMS · Online Complaint Registration Form · Corporate Complaint · Head Office Care-of · PEL Dost · Head Office Exchange. **Escalation reasons (19):** Behavior Issue- Training Required · Complaint attended but not Resolved-After Sales · Complaint Resolved late-After Sales · Customer Approval Awaited-Pending from Customer · Customer Not Available-Pending from Customer · Customer Phone Off-Pending from Customer · Documents Pending-Pending from Customer · Fake Statement/Remarks by CSO · Fake Statement/Remarks by Tech · High Charges Taken- After Sales · Missing Tools- Training Required · Phone Off/Call Not Received · PNA-After Sales · Poor Product Quality-Quality Side · Re-Do-After Sales · Sales Return Approval-CSD Head Office · Unit is in W/S- After Sales · Technician not contact/visit yet · Other. **Delay reasons (22):** Delay complaint attending by SC · Delay complaint resolution by SC · Delay at Customer end · Delay Approval Sales Dept · Customer understanding Issue (Policy) · Re-Do Jobs · Premature product failure · Incomplete documentation provided by customer · Parts not available · RTW case not proper follow up · Customer not available · Understanding issue in customer unit by Technician · Customer satisfaction Issue · Part to attend delay · Late parts delivery by courier · Load Shedding issue at customer premises · Local Market repairing Delay · Repeated Parts Failure · SC Estimate is High as compared to Local Market · Technician Soft Skills · Wrong cancellation done at SC end · Poor Product Quality. **Customer Satisfied values (6):** `Yes`, `No`, `NR-1A`, `NR-2A`, `NR-3A`, `NHC`. **Service centers (20)** — `service_center` (full name) · `sc` code · `zone`: | Full name (coms_sc) | sc | Zone | |---|---|---| | Bahawalpur, PEL Service Center | BWP | Central | | D I Khan, PEL Service Center | DIK | North | | Faisalabad, PEL Service Center | FSD | Central | | Gujrat, PEL Service Center | GRT | Central | | Gujranwala, PEL Service Center | GRW | Lahore | | Hyderabad, PEL Service Center | HYD | South | | Karachi, PEL Service Center | KHI | South | | Karachi-2, PEL Service Center | KHI-2 | South | | Karachi-3, PEL Service Center | KHI-3 | South | | Lahore, PEL Service Center | LHR | Lahore | | Lahore-2, PEL Service Center | LHR-2 | Lahore | | Multan, PEL Service Center | MTN | Central | | Peshawar, PEL Service Center | PWR | North | | Quetta, PEL Service Center | QTA | South | | Rawalpindi, PEL Service Center | RWP | North | | R Y Khan, PEL Service Center | RYK | Central | | Sargodha, PEL Service Center | SGD | Central | | Sahiwal, PEL Service Center | SHW | Central | | Sialkot, PEL Service Center | SKT | Central | | Sukkur, PEL Service Center | SUK | South | **Zones (4):** Central, Lahore, North, South. **Sample products (PEL appliances — invent realistic ones):** Refrigerator (PRGS, PRLVS series), Deep Freezer, Air Conditioner (Inverter / Split), Washing Machine (Top/Front Load), Microwave Oven, Water Dispenser, LED TV, Generator, Air Cooler. **Sample Pakistani names for customers/technicians/agents:** Bilal Ahmed, Imran Khalid, Ayesha Siddiqui, Usman Tariq, Fatima Noor, Hassan Raza, Sana Malik, Adnan Sheikh, Zainab Iqbal, Kashif Mehmood, Nadia Aslam, Faisal Javed. ### 10.4 Suggested dummy dataset size for the demo - **20 service centers** (the table above) with realistic case counts. - **~60–120 RU tickets** spread across statuses (skew: ~40% In Process, ~30% Closed, ~15% Resolved, rest Hold/Sales Return/Pending/Cancelled), across all zones, with a few aged > 8 days (highlight rows). - KPIs derived from the ticket array; charts aggregated from it (so numbers are internally consistent). - ~5 mentions/notifications, ~8 feedback messages on one sample ticket. --- ## 11. DEMO SPEC — what to build **Deliverable:** one self-contained `demo.html` (CDN links allowed for Bootstrap 5.3.3, Bootstrap Icons 1.10.5, ApexCharts, jQuery 3.7.1, DataTables 1.13.8). No backend, no build step. All data is JS objects/arrays inside the file. **Structure:** 1. The **app shell** from §4 (fixed gradient sidebar + sticky navbar + content). Sidebar links switch between in-page views (`Dashboard`, `Wallboard`, `RU Case Form`, `Management`, `Users`, `Reports`) by toggling section visibility — no navigation. 2. **Dashboard view** (§6): 4 animated KPI cards, the 11 ApexCharts fed from local aggregates, the Service Center DataTable, and a working drill-down modal (filter the local ticket array by the clicked label). Reuse the exact `build*` functions and design-token CSS. 3. **Wallboard view** (§5): header banner, Active Tickets card, full filter bar (multi-selects + free-text + reset + date range), client-side filtering/pagination/rows-per-page over the local ticket array, status/escalation badges, highlight rows, clickable rows that open a small ticket detail (can reuse the modal), and a Notifications card with a few dummy mentions. 4. **RU Case Form view** (§7): the stacked cards with pre-filled dummy COMS data, the ICI form, a Happy Call section, and a working **chat thread** (local messages; "send" appends a bubble) with the exact bubble template. 5. **Management view** (§8): read-only variant — optional, can mirror the RU Case Form. 6. **Users + Reports views** (§9): a Users table and a Reports export-card grid for breadth. **Fidelity requirements:** - Match the two color themes exactly (Theme A shell/wallboard/agent; Theme B dashboard). - Keep Inter font on the dashboard only. - Preserve badge color logic, KPI count-up animation, skeleton loaders, card hover lifts, pill buttons, and gradient headers. - Seed the page with a **default logged-in user** (e.g. "Ahmed Ibrahim", role "Admin") so the wallboard header and navbar render. - Make charts and KPIs **derive from the same ticket array** so the demo is internally consistent. **Nice-to-have polish:** a top "DEMO" ribbon/badge; a role switcher that toggles which sidebar sections appear (Admin sees all; ServiceCenter hides Zone/Service-Center filters and shows the SC form); subtle entrance animations. --- ## 12. Source file index (for pixel-perfect reference) | File | Lines | What to copy | |---|---|---| | `resources/views/layouts/app.blade.php` | 360 | App shell, sidebar, navbar CSS+HTML, toggle JS | | `resources/views/wallboard.blade.php` | 1834 | Header, filter bar, table, date picker CSS (291–524), row template (1624–1661), badge logic (1592–1620) | | `resources/views/dashboard.blade.php` | 939 | Design-token CSS (10–368), KPI/chart cards markup, chart factory + builders JS (551–938) | | `resources/views/components/chart-card.blade.php` | 23 | Reusable chart card + skeleton | | `resources/views/agent.blade.php` | 2180 | RU Case Form cards, chat, mentions | | `resources/views/t_management.blade.php` | 1228 | Read-only management view | | `resources/css/agent.css` | 225 | Theme A component styles | | `app/Http/Controllers/DashboardApiController.php` | 133 | Chart endpoint list / data contract | | `app/Models/InitialCustomerInformation.php` | 586 | Exact JSON shape of every chart + KPI + drilldown | --- *End of brief. Everything above is sufficient to generate a faithful single-file interactive demo with dummy data.*