# Standardize Dashboard UI Across All Modules

This plan outlines the systematic redesign and UI standardization of all admin modules in **KarobariSuite**, using [`products.php`](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/products.php) as the single source of truth design system reference.

## Goal & Scope

Standardize the presentation layer across all admin dashboard modules to ensure a unified, enterprise-grade aesthetic, layout structure, and UX.

### Key Design System Elements (from `products.php` reference)
1. **Page Header**: Consistent `<div class="page-header">` with page title `<h1>`, descriptive text `<p>`, and primary/secondary header action buttons `<div class="page-header-actions">`.
2. **Toolbar & Search/Filters**: `<div class="catalog-toolbar [module]-toolbar">` containing standard search inputs `<div class="catalog-search">` with icons, and consistent `<div class="catalog-filters">` for status/category/type filtering.
3. **Data Tables & Summaries**: Clean table wraps `<div class="table-wrap">`, summary counts `<p id="list-summary" class="muted catalog-summary">`, and standardized data table headers and zebra/hover styling (`<table class="data">`).
4. **Status Chips & Badges**: Standardized `<span class="ks-chip [success|warning|neutral|danger]">` badges.
5. **Action Buttons**: Unified `<button class="ks-icon-btn table-icon-btn">` icon buttons using Google Material Symbols (`visibility` for View, `edit` for Edit, `delete` for Delete, `draft`/`refresh`/etc.).
6. **Modal View/Details**: Consistent `<div class="ks-modal">` overlay panels for viewing item details, editing, and actions.
7. **Exposed CRUD Capabilities**: Ensuring Add, View, Edit, and Delete actions are cleanly exposed for all modules that support backend CRUD operations.
8. **Preserving Logic & Zero Regressions**: Strict preservation of all PHP endpoints, JavaScript state management, API routes, security headers, and business logic.

---

## Proposed Changes

We will update the PHP template views and JavaScript asset files for each module in batches.

---

### Batch 1: Core Catalog & Sales Modules
Standardize core business items (Services, Inventory, Customers, Leads).

#### [MODIFY] [services.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/services.php)
#### [MODIFY] [services.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/services.js)
- Update page layout to match `products.php` header, toolbar, search, and status filters.
- Add detail view modal & standardized table action buttons (View, Edit, Delete).
- Include category grouping badges and pricing/duration display.

#### [MODIFY] [inventory.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/inventory.php)
#### [MODIFY] [inventory.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/inventory.js)
- Standardize stock tracking table, search bar, stock level filters (in stock, low stock, out of stock).
- Add stock adjustment modal with clean form design and low-stock warning chips.

#### [MODIFY] [customers.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/customers.php)
#### [MODIFY] [customers.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/customers.js)
- Standardize customer table with search, status filters, customer profile summary modal.
- Standardize CRUD actions (Add Customer button, View customer details, Edit, Delete).

#### [MODIFY] [leads.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/leads.php)
#### [MODIFY] [leads.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/leads.js)
- Redesign CRM pipeline / leads view with consistent table/card layout, pipeline stage badges, lead source indicators, and lead details view modal.

---

### Batch 2: Customer Operations & Engagement Modules
Standardize operational modules (Appointments, Reviews, Loyalty, Memberships).

#### [MODIFY] [appointments.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/appointments.php)
#### [MODIFY] [appointments.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/appointments.js)
- Apply toolbar search, status filters (scheduled, completed, cancelled), and appointment details view modal with deposit status chips.

#### [MODIFY] [reviews.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/reviews.php)
#### [MODIFY] [reviews.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/reviews.js)
- Standardize product reviews layout with star ratings, status chips (approved, pending, rejected), search toolbar, and quick moderation buttons (Approve, Reject, Delete).

#### [MODIFY] [loyalty.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/loyalty.php)
#### [MODIFY] [loyalty.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/loyalty.js)
- Standardize reward points table, loyalty tier chips, point adjustment modal, and rule configuration panel.

#### [MODIFY] [memberships.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/memberships.php)
#### [MODIFY] [memberships.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/memberships.js)
- Apply standard header, search toolbar, plan cards/table layout, status chips, and renewal information.

---

### Batch 3: Commerce Infrastructure & Operations
Standardize backend infrastructure (Stores, Suppliers, Accounting, Reports).

#### [MODIFY] [stores.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/stores.php)
#### [MODIFY] [stores.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/stores.js)
- Standardize multi-store management table, add store modal, status badges, and store details modal.

#### [MODIFY] [suppliers.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/suppliers.php)
#### [MODIFY] [suppliers.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/suppliers.js)
- Standardize suppliers & purchase orders table, supplier contact cards, status chips, and purchase order detail modal.

#### [MODIFY] [accounting.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/accounting.php)
#### [MODIFY] [accounting.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/accounting.js)
- Redesign financial summaries cards, trial balance / journal entry tables, invoice status chips, and post journal modal.

#### [MODIFY] [reports.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/reports.php)
#### [MODIFY] [reports.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/reports.js)
- Standardize analytics summary cards, report filters toolbar, data tables layout, and cleaner metric presentation.

---

### Batch 4: Marketing, Content & Logistics Modules
Standardize growth and distribution pages (Campaigns, Website, Blog, Delivery, Marketplace).

#### [MODIFY] [campaigns.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/campaigns.php)
#### [MODIFY] [campaigns.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/campaigns.js)
- Standardize marketing campaigns table, status badges (draft, active, completed), create campaign modal, and trigger action buttons.

#### [MODIFY] [website.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/website.php)
#### [MODIFY] [website.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/website.js)
- Apply standard toolbar, page management table, status indicators (draft vs published), and edit/preview page modal.

#### [MODIFY] [blog.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/blog.php)
#### [MODIFY] [blog.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/blog.js)
- Standardize blog post table, publish status chips, category filters, and create/edit post modal layout.

#### [MODIFY] [delivery.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/delivery.php)
#### [MODIFY] [delivery.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/delivery.js)
- Standardize delivery zones & dispatch tracking table, status chips (pending, in-transit, delivered), and tracking view modal.

#### [MODIFY] [marketplace.php](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/marketplace.php)
#### [MODIFY] [marketplace.js](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/marketplace.js)
- Standardize marketplace product listing cards/table, seller badges, status filters, and product details view modal.

---

### Global CSS Polish

#### [MODIFY] [app.css](file:///Volumes/ManishData/ManishPersonal/KarobariSuite/public/web/assets/app.css)
- Ensure all unified class utilities (`.catalog-toolbar`, `.table-wrap`, `.products-table-actions`, `.ks-chip`, `.ks-modal`, `.ks-icon-btn`) are fully reusable across all module sub-classes without styling conflicts.

---

## Verification Plan

### Automated Tests
- Run PHPUnit tests to ensure no backend logic or template include errors were introduced:
  ```bash
  composer test
  ```

### Manual Verification
1. Access `http://localhost:8080/web/` in browser and log in as `admin@karobari.local` / `Admin@12345` or `owner@demo.shop`.
2. Inspect each redesigned page:
   - Header, toolbar search, status dropdown filters, summary text.
   - Table rendering, column alignment, badges, icon buttons (View, Edit, Delete).
   - Modal details views and forms.
   - Verify search filtering and action buttons function seamlessly without JS errors.
3. Test responsive layout at desktop and mobile breakpoints.