Initial commit for iFixKart Admin

.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=https://ifixkartbe.trionixsolution.com

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.next/
+dist/
+build/
+*.zip
+*.tar.gz
+*.log
+.env.local

.npmrc

@@ -0,0 +1,2 @@
+# Disable pnpm virtual symlinks and force flat, physical folder installation under node_modules for Turbopack compatibility
+node-linker=hoisted

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/(admin)/activity-logs/page.tsx

@@ -0,0 +1,323 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Search, Filter, RefreshCw, Loader2, ChevronDown, Download, FileSpreadsheet } from 'lucide-react';
+import { format } from 'date-fns';
+import { toast } from 'sonner';
+import { adminService } from '@/services/api/adminService';
+import { CustomSelect } from '@/components/ui/CustomSelect';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+
+type ActivityAction = 'Create' | 'Update' | 'Delete' | 'Export' | 'Failed Login';
+
+interface MergedActivityLog {
+  logId: string;
+  auditId: string;
+  user: {
+    name: string;
+    avatarInitials: string;
+  };
+  action: ActivityAction;
+  module: string;
+  recordId: string;
+  actionDate: string;
+  ipAddress: string;
+}
+
+function formatAction(action: string): ActivityAction {
+  if (action === 'failed_login') return 'Failed Login';
+  const label = action.charAt(0).toUpperCase() + action.slice(1).toLowerCase();
+  if (label === 'Create' || label === 'Update' || label === 'Delete' || label === 'Export') return label;
+  return 'Update';
+}
+
+function actionBadgeClass(action: string) {
+  const act = action.toLowerCase();
+  if (act === 'create') return 'bg-success text-white';
+  if (act === 'update') return 'bg-primary text-white';
+  if (act === 'delete') return 'bg-destructive text-white';
+  if (act === 'failed login') return 'bg-warning text-white';
+  return 'bg-muted text-muted-foreground';
+}
+
+export default function ActivityLogsPage() {
+  const [logs, setLogs] = useState<MergedActivityLog[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [actionFilter, setActionFilter] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
+  const [draftAction, setDraftAction] = useState('');
+  const filterRef = useRef<HTMLDivElement>(null);
+
+  const fetchLogs = async () => {
+    setLoading(true);
+    try {
+      const res = await adminService.getAuditLogs(100);
+      const backendLogs: MergedActivityLog[] = res.map((item) => ({
+        logId: item.audit_id.substring(0, 8).toUpperCase(),
+        auditId: item.audit_id,
+        user: {
+          name: item.user?.name || 'System / Guest',
+          avatarInitials: item.user?.avatarInitials || 'SYS',
+        },
+        action: formatAction(item.action),
+        module: item.entity_type,
+        recordId: item.entity_id,
+        actionDate: item.created_at,
+        ipAddress: item.ip_address,
+      }));
+      setLogs(backendLogs);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to load activity logs';
+      toast.error(message);
+      setLogs([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchLogs();
+  }, []);
+
+  useEffect(() => {
+    if (!showFilters) return;
+    const onPointerDown = (event: MouseEvent) => {
+      if (!filterRef.current?.contains(event.target as Node)) setShowFilters(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    return () => document.removeEventListener('mousedown', onPointerDown);
+  }, [showFilters]);
+
+  const filteredLogs = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return logs.filter((log) => {
+      const matchesSearch =
+        !q ||
+        log.user.name.toLowerCase().includes(q) ||
+        log.module.toLowerCase().includes(q) ||
+        log.logId.toLowerCase().includes(q) ||
+        log.recordId.toLowerCase().includes(q);
+      const matchesAction = actionFilter ? log.action === actionFilter : true;
+      return matchesSearch && matchesAction;
+    });
+  }, [logs, search, actionFilter]);
+
+  const pager = useClientPagination(filteredLogs);
+
+  const filtersActive = Boolean(actionFilter);
+
+  const handleExportCSV = () => {
+    const headers = ['Log ID', 'User', 'Action', 'Module', 'Record ID', 'Action Date', 'IP Address'];
+    const rows = filteredLogs.map((log) => [
+      log.logId,
+      log.user.name,
+      log.action,
+      log.module,
+      log.recordId,
+      format(new Date(log.actionDate), 'dd MMM yyyy, hh:mm a'),
+      log.ipAddress,
+    ]);
+    const csv = [headers, ...rows]
+      .map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
+      .join('\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'user-activity-logs.csv';
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-visible min-w-0';
+  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50';
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">User Activity Logs</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {logs.length}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <div className="relative group">
+            <button type="button" className={secondaryButton}>
+              <Download className="w-3.5 h-3.5" />
+              Export
+              <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+            </button>
+            <div className="absolute right-0 top-full mt-1 z-50 w-48 crm-radius-section border border-border bg-card shadow-[0_8px_24px_rgba(16,24,40,0.12)] hidden group-hover:block p-1.5">
+              <button
+                type="button"
+                onClick={handleExportCSV}
+                className="w-full text-left px-3 py-2 crm-radius-section text-[13px] text-[#6b7280] hover:bg-[#eef0f4] hover:text-[#3d4654] cursor-pointer flex items-center gap-1.5"
+              >
+                <FileSpreadsheet className="w-4 h-4" /> Excel (.csv)
+              </button>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={fetchLogs}
+            className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+            title="Reload"
+          >
+            <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+      </div>
+
+      <div className={dataCardShell}>
+        <div className="p-4">
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 min-w-0">
+            <div className="relative" ref={filterRef}>
+              <button
+                type="button"
+                onClick={() => {
+                  setDraftAction(actionFilter);
+                  setShowFilters((open) => !open);
+                }}
+                className={`inline-flex items-center gap-1.5 h-9 px-3 crm-radius-control border bg-card text-[13px] font-medium cursor-pointer transition-colors ${
+                  filtersActive || showFilters
+                    ? 'border-primary text-primary bg-primary/5'
+                    : 'border-border text-foreground hover:bg-muted'
+                }`}
+              >
+                <Filter className="w-3.5 h-3.5" />
+                Filter
+                {filtersActive && <span className="w-1.5 h-1.5 rounded-full bg-primary" />}
+                <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+              </button>
+              {showFilters && (
+                <div className="absolute left-0 top-full mt-1.5 z-50 w-[240px] crm-radius-section border border-border bg-card shadow-lg p-3 space-y-3">
+                  <div>
+                    <label className={labelClass}>Action</label>
+                    <CustomSelect
+                      value={draftAction}
+                      onChange={setDraftAction}
+                      aria-label="Action"
+                      options={[
+                        { value: '', label: 'All actions' },
+                        { value: 'Create', label: 'Create' },
+                        { value: 'Update', label: 'Update' },
+                        { value: 'Delete', label: 'Delete' },
+                        { value: 'Export', label: 'Export' },
+                        { value: 'Failed Login', label: 'Failed login' },
+                      ]}
+                    />
+                  </div>
+                  <div className="flex items-center justify-end gap-2 pt-1">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setDraftAction('');
+                        setActionFilter('');
+                        setShowFilters(false);
+                      }}
+                      className={secondaryButton}
+                    >
+                      Clear
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setActionFilter(draftAction);
+                        setShowFilters(false);
+                      }}
+                      className={primaryButton}
+                    >
+                      Apply
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="relative w-full sm:w-[280px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search logs"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="w-full h-9 pl-8 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto border-t border-border">
+          <table className="crm-data-table min-w-[820px]">
+            <thead>
+              <tr className="border-b border-border bg-gray-50">
+                <th className="px-4 py-3 text-gray-700">Log ID</th>
+                <th className="px-4 py-3 text-gray-700">User</th>
+                <th className="px-4 py-3 text-gray-700">Action</th>
+                <th className="px-4 py-3 text-gray-700">Module</th>
+                <th className="px-4 py-3 text-gray-700">Record ID</th>
+                <th className="px-4 py-3 text-gray-700">Action date</th>
+                <th className="px-4 py-3 text-gray-700">IP address</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr>
+                  <td colSpan={7} className="px-4 py-12 text-center whitespace-normal">
+                    <Loader2 className="w-6 h-6 animate-spin text-primary mx-auto" />
+                    <p className="text-[13px] text-muted-foreground mt-2">Loading activity logs...</p>
+                  </td>
+                </tr>
+              ) : filteredLogs.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="px-4 py-12 text-center text-[13px] text-muted-foreground whitespace-normal">
+                    {search || actionFilter ? 'No logs match your search' : 'No activity logs recorded'}
+                  </td>
+                </tr>
+              ) : (
+                pager.items.map((log) => (
+                  <tr key={log.auditId} className="border-b border-border hover:bg-muted/10 transition-colors">
+                    <td className="px-4 py-3 font-mono font-semibold text-foreground">{log.logId}</td>
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-2">
+                        <div className="w-7 h-7 rounded-full bg-primary/10 text-primary text-[10px] font-bold flex items-center justify-center shrink-0">
+                          {log.user.avatarInitials}
+                        </div>
+                        <span className="font-semibold text-foreground">{log.user.name}</span>
+                      </div>
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className={`inline-flex items-center px-2 py-0.5 crm-radius-badge text-[11px] font-semibold ${actionBadgeClass(log.action)}`}>
+                        {log.action}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-muted-foreground">
+                      <span className="crm-cell-clip max-w-[140px]" title={log.module}>{log.module}</span>
+                    </td>
+                    <td className="px-4 py-3 text-muted-foreground font-mono">
+                      <span className="crm-cell-clip" title={log.recordId}>{log.recordId}</span>
+                    </td>
+                    <td className="px-4 py-3 text-muted-foreground">
+                      {format(new Date(log.actionDate), 'dd MMM yyyy, hh:mm a')}
+                    </td>
+                    <td className="px-4 py-3 text-muted-foreground font-mono">{log.ipAddress}</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+        <TablePagination {...pager} />
+      </div>
+    </div>
+  );
+}

app/(admin)/customers/page.tsx

@@ -0,0 +1,748 @@
+'use client';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Users,
+  Search,
+  Eye,
+  Loader2,
+  MapPin,
+  Package,
+  X,
+  TrendingUp,
+  UserPlus,
+  Zap,
+  ChevronDown,
+  ChevronUp,
+  History,
+  Filter,
+  Mail,
+  Phone,
+  RefreshCw,
+} from 'lucide-react';
+import { apiFetch } from '@/services/api/client';
+import { format } from 'date-fns';
+import { toast } from 'sonner';
+import { formatCurrency } from '@/lib/utils';
+import { ViewModeToggle } from '@/components/ui/ViewModeToggle';
+import { CustomSelect } from '@/components/ui/CustomSelect';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+import {
+  StatsSparklineCard,
+  datesToSparkline,
+  weekOverWeekChange,
+} from '@/components/ui/StatsSparklineCard';
+
+interface CustomerAddress {
+  address_id: string;
+  address_type: string;
+  full_name: string;
+  phone: string;
+  street_address: string;
+  city: string;
+  state: string;
+  pincode: string;
+  is_default: boolean;
+}
+
+interface CustomerOrder {
+  order_id: string;
+  order_no: string;
+  final_amount: number;
+  status: string;
+  created_at: string;
+  items_count?: number;
+}
+
+interface CustomerResponse {
+  customer_id: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  phone: string | null;
+  created_at: string;
+  credit_balance?: number;
+  total_spent?: number;
+  total_orders?: number;
+}
+
+interface CustomerDetailResponse extends CustomerResponse {
+  profile_picture: string | null;
+  addresses: CustomerAddress[];
+  orders: CustomerOrder[];
+}
+
+type OrderFilter = 'all' | 'has_orders' | 'no_orders';
+type PhoneFilter = 'all' | 'has_phone' | 'no_phone';
+type CreditFilter = 'all' | 'has_credits' | 'no_credits';
+type InsightTab = 'all' | 'loyal' | 'recent' | 'avg';
+
+const EMPTY_FILTERS = {
+  orders: 'all' as OrderFilter,
+  phone: 'all' as PhoneFilter,
+  credits: 'all' as CreditFilter,
+};
+
+const WEEK_MS = 7 * 86400000;
+
+function isNewThisWeek(date: string) {
+  const t = new Date(date).getTime();
+  return Number.isFinite(t) && Date.now() - t < WEEK_MS;
+}
+
+const PurchaseHistory = ({ customerId }: { customerId: string }) => {
+  const [orders, setOrders] = useState<CustomerOrder[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchHistory = async () => {
+      try {
+        const data = await apiFetch<CustomerDetailResponse>(`/api/v1/admin/customers/${customerId}`);
+        setOrders(data.orders || []);
+      } catch {
+        // ignore
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchHistory();
+  }, [customerId]);
+
+  if (loading) {
+    return (
+      <div className="py-6 flex justify-center items-center">
+        <Loader2 className="w-5 h-5 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (orders.length === 0) {
+    return (
+      <div className="py-6 text-center text-[13px] text-muted-foreground">
+        <Package className="w-6 h-6 mx-auto mb-2 text-muted-foreground/40" />
+        No orders yet
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-4 mb-4 overflow-hidden crm-radius-section border border-border">
+      <div className="px-4 py-2.5 border-b border-border bg-gray-50 flex justify-between items-center">
+        <div className="flex items-center gap-1.5 text-[13px] font-semibold text-foreground">
+          <History className="w-3.5 h-3.5" />
+          Purchase history
+        </div>
+        <span className="inline-flex items-center px-2.5 py-1 crm-radius-badge bg-primary/10 text-primary text-[11px] font-semibold">
+          {orders.length} orders
+        </span>
+      </div>
+      <table className="crm-data-table">
+        <thead>
+          <tr className="border-b border-border bg-gray-50">
+            <th className="py-2.5 px-4 text-[13px] font-semibold text-gray-700">Date</th>
+            <th className="py-2.5 px-4 text-[13px] font-semibold text-gray-700">Order</th>
+            <th className="py-2.5 px-4 text-[13px] font-semibold text-gray-700 text-right">Amount</th>
+            <th className="py-2.5 px-4 text-[13px] font-semibold text-gray-700 text-right">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {orders.map((o) => (
+            <tr key={o.order_id} className="border-b border-border last:border-b-0 hover:bg-muted/10">
+              <td className="py-2.5 px-4 text-muted-foreground">{format(new Date(o.created_at), 'dd-MMM-yyyy')}</td>
+              <td className="py-2.5 px-4 font-semibold text-foreground">{o.order_no}</td>
+              <td className="py-2.5 px-4 text-right font-semibold text-foreground">{formatCurrency(o.final_amount)}</td>
+              <td className="py-2.5 px-4 text-right">
+                <span className="inline-flex items-center px-2.5 py-1 crm-radius-badge bg-primary/10 text-primary text-[11px] font-semibold">
+                  {o.status}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default function CustomerIntelligencePage() {
+  const [customers, setCustomers] = useState<CustomerResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+  const [viewMode, setViewMode] = useState<'table' | 'grid'>('table');
+  const [showFilterPanel, setShowFilterPanel] = useState(false);
+  const [draftFilters, setDraftFilters] = useState(EMPTY_FILTERS);
+  const [activeFilters, setActiveFilters] = useState(EMPTY_FILTERS);
+  const [insightTab, setInsightTab] = useState<InsightTab>('all');
+  const filterRef = useRef<HTMLDivElement>(null);
+
+  const [selectedCustomerId, setSelectedCustomerId] = useState<string | null>(null);
+  const [detailData, setDetailData] = useState<CustomerDetailResponse | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  const fetchCustomers = async () => {
+    setLoading(true);
+    try {
+      const data = await apiFetch<CustomerResponse[]>('/api/v1/admin/customers');
+      setCustomers(data);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch customers';
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchCustomers();
+  }, []);
+
+  useEffect(() => {
+    if (!showFilterPanel) return;
+    const onPointerDown = (event: MouseEvent) => {
+      if (!filterRef.current?.contains(event.target as Node)) {
+        setShowFilterPanel(false);
+      }
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    return () => document.removeEventListener('mousedown', onPointerDown);
+  }, [showFilterPanel]);
+
+  const handleInspectCustomer = async (id: string) => {
+    setSelectedCustomerId(id);
+    setDetailLoading(true);
+    setDetailData(null);
+    try {
+      const data = await apiFetch<CustomerDetailResponse>(`/api/v1/admin/customers/${id}`);
+      setDetailData(data);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to load customer details';
+      toast.error(message);
+      setSelectedCustomerId(null);
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  const toggleRow = (id: string) => {
+    const next = new Set(expandedRows);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setExpandedRows(next);
+  };
+
+  const loyalCustomers = useMemo(
+    () => customers.filter((c) => (c.total_orders || 0) > 0),
+    [customers]
+  );
+  const recentCustomers = useMemo(
+    () => customers.filter((c) => isNewThisWeek(c.created_at)),
+    [customers]
+  );
+  const allDates = useMemo(() => customers.map((c) => c.created_at), [customers]);
+  const loyalDates = useMemo(() => loyalCustomers.map((c) => c.created_at), [loyalCustomers]);
+  const recentDates = useMemo(() => recentCustomers.map((c) => c.created_at), [recentCustomers]);
+  const spentDates = useMemo(
+    () => customers.filter((c) => (c.total_spent || 0) > 0).map((c) => c.created_at),
+    [customers]
+  );
+
+  const insights = useMemo(() => {
+    const total = customers.length;
+    const totalSpent = customers.reduce((sum, c) => sum + (c.total_spent || 0), 0);
+    const avgSpent = total > 0 ? totalSpent / total : 0;
+    const loyal = loyalCustomers.length;
+    return {
+      total,
+      loyal,
+      retentionRate: total > 0 ? Math.round((loyal / total) * 100) : 0,
+      newThisWeek: recentCustomers.length,
+      avgLtv: avgSpent,
+    };
+  }, [customers, loyalCustomers.length, recentCustomers.length]);
+
+  const filteredCustomers = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return customers.filter((c) => {
+      const fullName = `${c.first_name} ${c.last_name}`.toLowerCase();
+      const searchMatch =
+        !q ||
+        c.first_name.toLowerCase().includes(q) ||
+        c.last_name.toLowerCase().includes(q) ||
+        fullName.includes(q) ||
+        c.email.toLowerCase().includes(q) ||
+        (c.phone || '').toLowerCase().includes(q);
+
+      const orderCount = c.total_orders || 0;
+      const ordersMatch =
+        activeFilters.orders === 'all' ||
+        (activeFilters.orders === 'has_orders' && orderCount > 0) ||
+        (activeFilters.orders === 'no_orders' && orderCount === 0);
+
+      const hasPhone = Boolean(c.phone && c.phone.trim());
+      const phoneMatch =
+        activeFilters.phone === 'all' ||
+        (activeFilters.phone === 'has_phone' && hasPhone) ||
+        (activeFilters.phone === 'no_phone' && !hasPhone);
+
+      const credits = c.credit_balance || 0;
+      const creditsMatch =
+        activeFilters.credits === 'all' ||
+        (activeFilters.credits === 'has_credits' && credits > 0) ||
+        (activeFilters.credits === 'no_credits' && credits === 0);
+
+      const tabMatch =
+        insightTab === 'all' ||
+        insightTab === 'avg' ||
+        (insightTab === 'loyal' && orderCount > 0) ||
+        (insightTab === 'recent' && isNewThisWeek(c.created_at));
+
+      return searchMatch && ordersMatch && phoneMatch && creditsMatch && tabMatch;
+    });
+  }, [customers, search, activeFilters, insightTab]);
+
+  const pager = useClientPagination(filteredCustomers);
+
+  const filtersActive =
+    activeFilters.orders !== 'all' ||
+    activeFilters.phone !== 'all' ||
+    activeFilters.credits !== 'all';
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden min-w-0';
+  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50';
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">E-Commerce Customers</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {insights.total}
+            </span>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={fetchCustomers}
+          className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center shrink-0"
+          title="Reload"
+        >
+          <RefreshCw className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
+        <StatsSparklineCard
+          title="Total customers"
+          value={insights.total}
+          icon={Users}
+          tone="green"
+          series={datesToSparkline(allDates)}
+          deltaPercent={weekOverWeekChange(allDates)}
+          active={insightTab === 'all'}
+          onClick={() => setInsightTab('all')}
+        />
+        <StatsSparklineCard
+          title="Loyal customers"
+          value={`${insights.retentionRate}%`}
+          icon={TrendingUp}
+          tone="violet"
+          series={datesToSparkline(loyalDates)}
+          deltaPercent={weekOverWeekChange(loyalDates)}
+          active={insightTab === 'loyal'}
+          onClick={() => setInsightTab('loyal')}
+        />
+        <StatsSparklineCard
+          title="Recent customers"
+          value={insights.newThisWeek}
+          icon={UserPlus}
+          tone="orange"
+          series={datesToSparkline(recentDates)}
+          deltaPercent={weekOverWeekChange(recentDates)}
+          active={insightTab === 'recent'}
+          onClick={() => setInsightTab('recent')}
+        />
+        <StatsSparklineCard
+          title="Avg sales"
+          value={formatCurrency(insights.avgLtv)}
+          icon={Zap}
+          tone="blue"
+          series={datesToSparkline(spentDates)}
+          deltaPercent={weekOverWeekChange(spentDates)}
+          active={insightTab === 'avg'}
+          onClick={() => setInsightTab('avg')}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 min-w-0">
+        <div className={`lg:col-span-2 ${dataCardShell}`}>
+          <div className="p-4">
+            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2.5 min-w-0">
+              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 min-w-0">
+                <div className="relative" ref={filterRef}>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setDraftFilters(activeFilters);
+                      setShowFilterPanel((open) => !open);
+                    }}
+                    className={`inline-flex items-center gap-1.5 h-9 px-3 crm-radius-control border bg-card text-[13px] font-medium cursor-pointer transition-colors ${
+                      filtersActive || showFilterPanel
+                        ? 'border-primary text-primary bg-primary/5'
+                        : 'border-border text-foreground hover:bg-muted'
+                    }`}
+                  >
+                    <Filter className="w-3.5 h-3.5" />
+                    Filter
+                    {filtersActive && <span className="w-1.5 h-1.5 rounded-full bg-primary" />}
+                    <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                  </button>
+                  {showFilterPanel && (
+                    <div className="absolute left-0 top-full mt-1.5 z-30 w-[260px] crm-radius-section border border-border bg-card shadow-lg p-3 space-y-3">
+                      <div>
+                        <label className={labelClass}>Orders</label>
+                        <CustomSelect
+                          value={draftFilters.orders}
+                          onChange={(orders) =>
+                            setDraftFilters((prev) => ({ ...prev, orders: orders as OrderFilter }))
+                          }
+                          aria-label="Orders"
+                          options={[
+                            { value: 'all', label: 'All' },
+                            { value: 'has_orders', label: 'Has orders' },
+                            { value: 'no_orders', label: 'No orders' },
+                          ]}
+                        />
+                      </div>
+                      <div>
+                        <label className={labelClass}>Phone</label>
+                        <CustomSelect
+                          value={draftFilters.phone}
+                          onChange={(phone) =>
+                            setDraftFilters((prev) => ({ ...prev, phone: phone as PhoneFilter }))
+                          }
+                          aria-label="Phone"
+                          options={[
+                            { value: 'all', label: 'All' },
+                            { value: 'has_phone', label: 'Has phone' },
+                            { value: 'no_phone', label: 'No phone' },
+                          ]}
+                        />
+                      </div>
+                      <div>
+                        <label className={labelClass}>Credits</label>
+                        <CustomSelect
+                          value={draftFilters.credits}
+                          onChange={(credits) =>
+                            setDraftFilters((prev) => ({ ...prev, credits: credits as CreditFilter }))
+                          }
+                          aria-label="Credits"
+                          options={[
+                            { value: 'all', label: 'All' },
+                            { value: 'has_credits', label: 'Has credits' },
+                            { value: 'no_credits', label: 'No credits' },
+                          ]}
+                        />
+                      </div>
+                      <div className="flex items-center justify-end gap-2 pt-1">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setDraftFilters(EMPTY_FILTERS);
+                            setActiveFilters(EMPTY_FILTERS);
+                            setShowFilterPanel(false);
+                          }}
+                          className={secondaryButton}
+                        >
+                          Clear
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setActiveFilters(draftFilters);
+                            setShowFilterPanel(false);
+                          }}
+                          className={primaryButton}
+                        >
+                          Apply
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                <div className="relative w-full sm:w-[240px]">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+                  <input
+                    type="text"
+                    placeholder="Search customers"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    className="w-full h-9 pl-8 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+                  />
+                </div>
+              </div>
+
+              <ViewModeToggle value={viewMode} onChange={setViewMode} />
+            </div>
+          </div>
+
+          {loading ? (
+            <div className="py-16 flex justify-center border-t border-border">
+              <Loader2 className="w-6 h-6 animate-spin text-primary" />
+            </div>
+          ) : filteredCustomers.length === 0 ? (
+            <div className="py-16 text-center text-[13px] text-muted-foreground border-t border-border">
+              {search || filtersActive ? 'No customers match your search' : 'No customers yet'}
+            </div>
+          ) : viewMode === 'grid' ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 p-4 border-t border-border">
+              {pager.items.map((customer) => (
+                <div key={customer.customer_id} className="crm-radius-section border border-border bg-card p-3.5 min-w-0">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex items-center gap-2.5 min-w-0">
+                      <div className="w-9 h-9 crm-radius-icon bg-primary/10 text-primary text-[12px] font-bold flex items-center justify-center shrink-0">
+                        {customer.first_name.charAt(0).toUpperCase()}
+                        {customer.last_name.charAt(0).toUpperCase()}
+                      </div>
+                      <div className="min-w-0">
+                        <p className="text-[13px] font-semibold text-foreground truncate">
+                          {customer.first_name} {customer.last_name}
+                        </p>
+                        <p className="text-[11px] text-muted-foreground truncate">{customer.email}</p>
+                      </div>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => handleInspectCustomer(customer.customer_id)}
+                      className="w-8 h-8 crm-radius-control hover:bg-muted cursor-pointer flex items-center justify-center shrink-0"
+                      title="View details"
+                    >
+                      <Eye className="w-3.5 h-3.5 text-muted-foreground" />
+                    </button>
+                  </div>
+                  <div className="mt-3 space-y-1.5 text-[12px] text-muted-foreground">
+                    <p className="flex items-center gap-1.5 truncate">
+                      <Phone className="w-3.5 h-3.5 shrink-0" />
+                      {customer.phone || '—'}
+                    </p>
+                    <p className="flex items-center gap-1.5 truncate">
+                      <Mail className="w-3.5 h-3.5 shrink-0" />
+                      {customer.email}
+                    </p>
+                  </div>
+                  <div className="mt-3 flex items-center justify-between gap-2">
+                    <span className="inline-flex items-center px-2.5 py-1 crm-radius-badge bg-warning text-white text-[11px] font-semibold">
+                      {customer.credit_balance || 0} credits
+                    </span>
+                    <span className="text-[13px] font-semibold text-foreground">
+                      {formatCurrency(customer.total_spent || 0)}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="overflow-x-auto border-t border-border">
+              <table className="crm-data-table min-w-[860px]">
+                <thead>
+                  <tr className="border-b border-border bg-gray-50">
+                    <th className="px-5 py-3 text-[13px] font-semibold text-gray-700">Customer</th>
+                    <th className="px-5 py-3 text-[13px] font-semibold text-gray-700">Contact</th>
+                    <th className="px-5 py-3 text-[13px] font-semibold text-gray-700">Credits</th>
+                    <th className="px-5 py-3 text-[13px] font-semibold text-gray-700">Joined</th>
+                    <th className="px-5 py-3 text-[13px] font-semibold text-gray-700 text-right">Spent</th>
+                    <th className="px-5 py-3 text-[13px] font-semibold text-gray-700 text-right">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {pager.items.map((customer) => {
+                    const isExpanded = expandedRows.has(customer.customer_id);
+                    return (
+                      <React.Fragment key={customer.customer_id}>
+                        <tr
+                          className={`border-b border-border hover:bg-muted/10 cursor-pointer transition-colors ${
+                            isExpanded ? 'bg-primary/5' : ''
+                          }`}
+                          onClick={() => toggleRow(customer.customer_id)}
+                        >
+                          <td className="px-5 py-3.5">
+                            <div className="flex items-center gap-2">
+                              <span className="text-muted-foreground">
+                                {isExpanded ? (
+                                  <ChevronUp className="w-3.5 h-3.5" />
+                                ) : (
+                                  <ChevronDown className="w-3.5 h-3.5" />
+                                )}
+                              </span>
+                              <span className="text-[13px] font-semibold text-foreground">
+                                {customer.first_name} {customer.last_name}
+                              </span>
+                            </div>
+                          </td>
+                          <td className="px-5 py-3.5">
+                            <div className="text-[13px] text-foreground">{customer.email}</div>
+                            <div className="text-[11px] text-muted-foreground">{customer.phone || '—'}</div>
+                          </td>
+                          <td className="px-5 py-3.5">
+                            <span className="inline-flex items-center px-2.5 py-1 crm-radius-badge bg-warning text-white text-[11px] font-semibold">
+                              {customer.credit_balance || 0} credits
+                            </span>
+                          </td>
+                          <td className="px-5 py-3.5 text-[13px] text-muted-foreground">
+                            {format(new Date(customer.created_at), 'dd-MMM-yyyy')}
+                          </td>
+                          <td className="px-5 py-3.5 text-right text-[13px] font-semibold text-foreground">
+                            {formatCurrency(customer.total_spent || 0)}
+                          </td>
+                          <td className="px-5 py-3.5 text-right">
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleInspectCustomer(customer.customer_id);
+                              }}
+                              className="w-8 h-8 crm-radius-control inline-flex items-center justify-center hover:bg-muted cursor-pointer"
+                              title="View details"
+                            >
+                              <Eye className="w-4 h-4 text-muted-foreground" />
+                            </button>
+                          </td>
+                        </tr>
+                        {isExpanded && (
+                          <tr>
+                            <td colSpan={6} className="p-0 border-b border-border bg-muted/10">
+                              <PurchaseHistory customerId={customer.customer_id} />
+                            </td>
+                          </tr>
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+          <TablePagination {...pager} />
+        </div>
+
+        <div className={`lg:col-span-1 ${dataCardShell} p-5 min-h-[400px]`}>
+          {selectedCustomerId === null ? (
+            <div className="h-full min-h-[320px] flex flex-col justify-center items-center text-center p-6">
+              <Users className="w-12 h-12 text-muted-foreground/30 mb-4" />
+              <p className="text-[14px] font-semibold text-foreground">Customer details</p>
+              <p className="text-[13px] text-muted-foreground max-w-xs mt-1">
+                Select a customer to view saved addresses and purchase history.
+              </p>
+            </div>
+          ) : detailLoading ? (
+            <div className="h-full py-20 flex justify-center items-center">
+              <Loader2 className="w-6 h-6 animate-spin text-primary" />
+            </div>
+          ) : detailData === null ? (
+            <div className="text-center py-20 text-[13px] text-destructive">Failed to load customer details.</div>
+          ) : (
+            <div className="space-y-5">
+              <div className="flex justify-between items-start gap-3">
+                <div className="flex items-center gap-3 min-w-0">
+                  <div className="w-12 h-12 crm-radius-icon bg-primary/10 text-primary flex items-center justify-center font-bold text-[15px] shrink-0">
+                    {detailData.first_name.charAt(0).toUpperCase()}
+                    {detailData.last_name.charAt(0).toUpperCase()}
+                  </div>
+                  <div className="min-w-0">
+                    <h3 className="text-[15px] font-semibold text-foreground truncate">
+                      {detailData.first_name} {detailData.last_name}
+                    </h3>
+                    <p className="text-[13px] text-muted-foreground truncate">{detailData.email}</p>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setSelectedCustomerId(null)}
+                  className="w-8 h-8 crm-radius-control hover:bg-muted text-muted-foreground cursor-pointer flex items-center justify-center shrink-0"
+                  aria-label="Close details"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+
+              <div className="border-t border-border pt-4 space-y-4">
+                <div>
+                  <p className="text-[11px] font-semibold text-muted-foreground uppercase mb-2 flex items-center gap-1.5">
+                    <MapPin className="w-3.5 h-3.5" />
+                    Addresses ({detailData.addresses.length})
+                  </p>
+                  {detailData.addresses.length === 0 ? (
+                    <p className="text-[13px] text-muted-foreground">No addresses saved.</p>
+                  ) : (
+                    <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
+                      {detailData.addresses.map((a) => (
+                        <div
+                          key={a.address_id}
+                          className={`p-3 border crm-radius-section text-[13px] ${
+                            a.is_default ? 'border-primary/30 bg-primary/5' : 'border-border'
+                          }`}
+                        >
+                          <div className="flex items-center justify-between mb-1 gap-2">
+                            <span className="font-semibold text-foreground">{a.full_name}</span>
+                            {a.is_default && (
+                              <span className="inline-flex items-center px-2 py-0.5 crm-radius-badge bg-primary text-white text-[11px] font-semibold">
+                                Default
+                              </span>
+                            )}
+                          </div>
+                          <p className="text-muted-foreground">
+                            {a.street_address}, {a.city}, {a.state} - {a.pincode}
+                          </p>
+                          <p className="text-muted-foreground mt-1">Phone: {a.phone}</p>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                <div>
+                  <p className="text-[11px] font-semibold text-muted-foreground uppercase mb-2 flex items-center gap-1.5">
+                    <Package className="w-3.5 h-3.5" />
+                    Orders ({detailData.orders.length})
+                  </p>
+                  {detailData.orders.length === 0 ? (
+                    <p className="text-[13px] text-muted-foreground">No purchases recorded.</p>
+                  ) : (
+                    <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
+                      {detailData.orders.map((o) => (
+                        <div
+                          key={o.order_id}
+                          className="p-3 border border-border crm-radius-section flex items-center justify-between gap-2"
+                        >
+                          <div>
+                            <span className="text-[13px] font-semibold text-foreground block">{o.order_no}</span>
+                            <span className="text-[12px] text-muted-foreground block">
+                              {format(new Date(o.created_at), 'dd-MMM-yyyy')}
+                            </span>
+                          </div>
+                          <div className="text-right">
+                            <span className="text-[13px] font-semibold text-foreground block">
+                              {formatCurrency(o.final_amount)}
+                            </span>
+                            <span className="text-[11px] font-semibold text-primary block">{o.status}</span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/(admin)/dashboard/mockData.ts

@@ -0,0 +1,212 @@
+import type {
+  DashboardStats,
+  SessionInfo,
+} from '@/services/api/adminService';
+
+const dailyRevenue = [
+  12400, 15820, 11250, 18640, 22100, 19880, 25400,
+  17320, 20950, 16780, 24110, 28840, 21560, 30120,
+  18940, 22670, 27450, 19830, 31200, 26780, 18440,
+  23900, 29150, 21880, 33500, 27640, 19220, 24880,
+  30750, 28410,
+].map((revenue, index) => {
+  const day = String(index + 1).padStart(2, '0');
+  return {
+    date: `08-${day}`,
+    revenue,
+    orders: Math.max(4, Math.round(revenue / 1850)),
+  };
+});
+
+export const MOCK_DASHBOARD_STATS: DashboardStats = {
+  total_users: 184,
+  total_orders: 326,
+  total_products: 148,
+  total_brands: 22,
+  total_device_models: 86,
+  total_device_series: 31,
+  total_categories: 18,
+  revenue_all_time: 1852580,
+  revenue_last_30_days: 684320,
+  revenue_last_7_days: 186280,
+  orders_by_status: {
+    pending: 28,
+    confirmed: 42,
+    processing: 36,
+    shipped: 51,
+    delivered: 142,
+    cancelled: 18,
+    returned: 9,
+  },
+  revenue_chart_daily: dailyRevenue,
+  revenue_chart_monthly: [
+    { label: 'January', revenue: 98200, orders: 42 },
+    { label: 'February', revenue: 114500, orders: 51 },
+    { label: 'March', revenue: 128800, orders: 58 },
+    { label: 'April', revenue: 121400, orders: 54 },
+    { label: 'May', revenue: 142600, orders: 63 },
+    { label: 'June', revenue: 156200, orders: 71 },
+    { label: 'July', revenue: 168900, orders: 76 },
+    { label: 'August', revenue: 184320, orders: 82 },
+  ],
+  top_products: [
+    { name: 'iPhone 15 OLED Display Assembly', total_sold: 86, total_revenue: 412800 },
+    { name: 'Samsung S23 Ultra Battery', total_sold: 64, total_revenue: 198400 },
+    { name: 'iPhone 14 Charging Port Flex', total_sold: 51, total_revenue: 86700 },
+    { name: 'OnePlus 12 Back Glass Panel', total_sold: 38, total_revenue: 64600 },
+    { name: 'Pixel 8 Pro Camera Module', total_sold: 24, total_revenue: 91200 },
+  ],
+  recent_orders: [
+    {
+      order_no: 'IFK-10482',
+      amount: 4899,
+      status: 'delivered',
+      payment_status: 'paid',
+      created_at: '2026-08-30T09:12:00Z',
+      customer_name: 'Arjun Mehta',
+      customer_email: 'arjun.mehta@gmail.com',
+    },
+    {
+      order_no: 'IFK-10481',
+      amount: 2199,
+      status: 'shipped',
+      payment_status: 'paid',
+      created_at: '2026-08-30T07:44:00Z',
+      customer_name: 'Priya Nair',
+      customer_email: 'priya.nair@gmail.com',
+    },
+    {
+      order_no: 'IFK-10480',
+      amount: 7499,
+      status: 'processing',
+      payment_status: 'paid',
+      created_at: '2026-08-29T18:21:00Z',
+      customer_name: 'Rahul Iyer',
+      customer_email: 'rahul.iyer@outlook.com',
+    },
+    {
+      order_no: 'IFK-10479',
+      amount: 1299,
+      status: 'confirmed',
+      payment_status: 'paid',
+      created_at: '2026-08-29T15:08:00Z',
+      customer_name: 'Sneha Kapoor',
+      customer_email: 'sneha.kapoor@gmail.com',
+    },
+    {
+      order_no: 'IFK-10478',
+      amount: 3499,
+      status: 'pending',
+      payment_status: 'unpaid',
+      created_at: '2026-08-29T11:36:00Z',
+      customer_name: 'Vikram Shah',
+      customer_email: 'vikram.shah@yahoo.com',
+    },
+    {
+      order_no: 'IFK-10477',
+      amount: 899,
+      status: 'cancelled',
+      payment_status: 'refunded',
+      created_at: '2026-08-28T20:02:00Z',
+      customer_name: 'Ananya Rao',
+      customer_email: 'ananya.rao@gmail.com',
+    },
+  ],
+  low_stock_variants: 14,
+  out_of_stock_variants: 6,
+  total_stock_units: 4280,
+};
+
+export const MOCK_DASHBOARD_SESSIONS: SessionInfo[] = [
+  {
+    session_id: 'sess_ui_01',
+    user_id: 'usr_admin',
+    device_name: 'Office Desktop',
+    device_type: 'desktop',
+    browser: 'Chrome 128.0.0',
+    operating_system: 'Windows 11',
+    ip_address: '106.219.180.207',
+    expires_at: '2026-08-31T18:00:00Z',
+    is_active: true,
+  },
+  {
+    session_id: 'sess_ui_02',
+    user_id: 'usr_admin',
+    device_name: 'MacBook Pro',
+    device_type: 'desktop',
+    browser: 'Safari 18.2',
+    operating_system: 'macOS Sequoia',
+    ip_address: '49.36.112.44',
+    expires_at: '2026-08-31T16:30:00Z',
+    is_active: true,
+  },
+  {
+    session_id: 'sess_ui_03',
+    user_id: 'usr_manager',
+    device_name: 'Pixel 8',
+    device_type: 'mobile',
+    browser: 'Chrome 127.0.0',
+    operating_system: 'Android 15',
+    ip_address: '152.58.204.19',
+    expires_at: '2026-08-31T12:10:00Z',
+    is_active: true,
+  },
+  {
+    session_id: 'sess_ui_04',
+    user_id: 'usr_tech',
+    device_name: 'iPad Air',
+    device_type: 'tablet',
+    browser: 'Safari 18.1',
+    operating_system: 'iPadOS 18',
+    ip_address: '103.21.244.12',
+    expires_at: '2026-08-31T09:45:00Z',
+    is_active: true,
+  },
+  {
+    session_id: 'sess_ui_05',
+    user_id: 'usr_staff',
+    device_name: 'Store Counter PC',
+    device_type: 'desktop',
+    browser: 'Edge 127.0.0',
+    operating_system: 'Windows 10',
+    ip_address: '117.99.80.63',
+    expires_at: '2026-08-30T22:00:00Z',
+    is_active: true,
+  },
+];
+
+export function withDashboardMock(
+  stats: DashboardStats | null,
+  sessions: SessionInfo[],
+): { stats: DashboardStats; sessions: SessionInfo[] } {
+  if (stats) {
+    return {
+      stats: {
+        total_users: stats.total_users ?? 0,
+        total_orders: stats.total_orders ?? 0,
+        total_products: stats.total_products ?? 0,
+        total_brands: stats.total_brands ?? 0,
+        total_device_models: stats.total_device_models ?? 0,
+        total_device_series: stats.total_device_series ?? 0,
+        total_categories: stats.total_categories ?? 0,
+        revenue_all_time: stats.revenue_all_time ?? 0,
+        revenue_last_30_days: stats.revenue_last_30_days ?? 0,
+        revenue_last_7_days: stats.revenue_last_7_days ?? 0,
+        orders_by_status: stats.orders_by_status ?? {},
+        revenue_chart_daily: stats.revenue_chart_daily ?? [],
+        revenue_chart_monthly: stats.revenue_chart_monthly ?? [],
+        top_products: stats.top_products ?? [],
+        recent_orders: stats.recent_orders ?? [],
+        low_stock_variants: stats.low_stock_variants ?? 0,
+        out_of_stock_variants: stats.out_of_stock_variants ?? 0,
+        total_stock_units: stats.total_stock_units ?? 0,
+      },
+      sessions: sessions ?? [],
+    };
+  }
+
+  return {
+    stats: MOCK_DASHBOARD_STATS,
+    sessions: MOCK_DASHBOARD_SESSIONS,
+  };
+}

app/(admin)/dashboard/page.tsx

@@ -0,0 +1,865 @@
+'use client';
+
+import { useEffect, useState, useCallback, type ReactNode } from 'react';
+import {
+  ArrowUpRight, ArrowDownRight, ArrowRight, RefreshCw, Calendar, ChevronDown,
+  TrendingUp, Filter, Handshake,
+} from 'lucide-react';
+import {
+  ComposedChart,
+  Bar,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  CartesianGrid,
+} from 'recharts';
+import {
+  adminService,
+  DashboardStats,
+  SessionInfo,
+  DashboardRevenuePoint,
+  DashboardMonthlyPoint,
+  DashboardRecentOrder,
+  DashboardTopProduct,
+} from '@/services/api/adminService';
+import { parseJwt, getAccessToken, apiFetch } from '@/services/api/client';
+import { cn } from '@/lib/utils';
+import Link from 'next/link';
+import { withDashboardMock } from './mockData';
+
+const PAGE_DATE_RANGE = 'Live Store & ERP Operations';
+
+const CARD =
+  'bg-card crm-radius-section border border-border shadow-[0_1px_3px_rgba(16,24,40,0.06)] min-w-0';
+
+const PIPELINE = [
+  { key: 'pending', label: 'Pending', color: '#5BA4C7' },
+  { key: 'processing', label: 'Processing', color: '#3B82F6' },
+  { key: 'shipped', label: 'Shipped', color: '#7C3AED' },
+  { key: 'delivered', label: 'Delivered', color: '#01B574' },
+] as const;
+
+const OVERVIEW = [
+  { key: 'delivered', label: 'Successful orders', color: '#01B574' },
+  { key: 'pending', label: 'Pending orders', color: '#5BA4C7' },
+  { key: 'cancelled', label: 'Cancelled', color: '#7C3AED' },
+  { key: 'shipped', label: 'In transit', color: '#3B82F6' },
+] as const;
+
+const DONUT_COLORS: Record<string, string> = {
+  delivered: '#01B574',
+  shipped: '#3B82F6',
+  processing: '#5BA4C7',
+  pending: '#7C3AED',
+};
+
+const PAYMENT_TAG: Record<string, string> = {
+  paid: 'border-[#01B574] text-[#01B574] bg-[#01B574]/8',
+  unpaid: 'border-[#5BA4C7] text-[#5BA4C7] bg-[#5BA4C7]/10',
+  refunded: 'border-primary text-primary bg-primary/8',
+};
+
+const PRODUCT_TONES = ['#5BA4C7', '#3B82F6', '#01B574', '#1B2559', '#7C3AED'];
+
+function formatCompact(val: number) {
+  if (val >= 1_000_000) return `₹${(val / 1_000_000).toFixed(2)}M`;
+  if (val >= 1_000) return `₹${(val / 1_000).toFixed(val >= 10_000 ? 0 : 1)}K`;
+  return `₹${val.toFixed(0)}`;
+}
+
+function formatInr(val: number) {
+  return new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: 'INR',
+    maximumFractionDigits: 0,
+  }).format(val);
+}
+
+function initials(name: string) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  return ((parts[0]?.[0] ?? '') + (parts[1]?.[0] ?? '')).toUpperCase() || '•';
+}
+
+function samplePoints<T>(items: T[], count: number) {
+  if (items.length <= count) return items;
+  const step = (items.length - 1) / (count - 1);
+  return Array.from({ length: count }, (_, i) => items[Math.round(i * step)]);
+}
+
+function deltaFromWeek(week: number, month: number) {
+  if (!month) return 2.5;
+  const actual = week / month;
+  const expected = 7 / 30;
+  return ((actual - expected) / expected) * 100;
+}
+
+function CardTitle({ children }: { children: ReactNode }) {
+  return (
+    <h3 className="flex items-center gap-2 text-[15px] font-bold text-foreground min-w-0">
+      <span className="w-[3px] h-4 rounded-full bg-warning shrink-0" />
+      <span className="truncate">{children}</span>
+    </h3>
+  );
+}
+
+function PeriodPills({
+  value,
+  onChange,
+}: {
+  value: 'weekly' | 'monthly' | 'yearly';
+  onChange: (next: 'weekly' | 'monthly' | 'yearly') => void;
+}) {
+  return (
+    <div className="inline-flex items-center gap-1 shrink-0">
+      {(['weekly', 'monthly', 'yearly'] as const).map((mode) => (
+        <button
+          key={mode}
+          type="button"
+          onClick={() => onChange(mode)}
+          className={cn(
+            'h-7 px-3 crm-radius-control text-[12px] font-medium capitalize cursor-pointer transition-colors',
+            value === mode
+              ? 'bg-primary text-white'
+              : 'bg-card text-muted-foreground hover:bg-muted'
+          )}
+        >
+          {mode}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function GhostSelect({ label }: { label: string }) {
+  return (
+    <span className="inline-flex items-center gap-1 h-7 px-2.5 crm-radius-control border border-border text-[12px] text-muted-foreground shrink-0">
+      {label}
+      <ChevronDown className="w-3.5 h-3.5" />
+    </span>
+  );
+}
+
+function DeltaPill({ value }: { value: number }) {
+  const up = value >= 0;
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-0.5 h-[22px] px-1.5 crm-radius-badge text-[11px] font-semibold',
+        up ? 'bg-success/10 text-success' : 'bg-primary/10 text-primary'
+      )}
+    >
+      {up ? <ArrowUpRight className="w-3 h-3" /> : <ArrowDownRight className="w-3 h-3" />}
+      {up ? '+' : ''}
+      {Math.abs(value).toFixed(1)}%
+    </span>
+  );
+}
+
+function StatusDonut({
+  slices,
+}: {
+  slices: Array<{ label: string; value: number; color: string }>;
+}) {
+  const total = slices.reduce((sum, slice) => sum + slice.value, 0) || 1;
+  const cx = 90;
+  const cy = 90;
+  const r = 58;
+  const stroke = 26;
+  const circ = 2 * Math.PI * r;
+  let offset = 0;
+
+  return (
+    <svg viewBox="0 0 180 180" className="w-[168px] h-[168px]">
+      <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--muted)" strokeWidth={stroke} />
+      {slices.map((slice) => {
+        const pct = slice.value / total;
+        const dash = Math.max(pct * circ, 0);
+        const currentOffset = offset;
+        offset += pct;
+        const mid = (currentOffset + pct / 2) * 2 * Math.PI - Math.PI / 2;
+        const lx = cx + Math.cos(mid) * r;
+        const ly = cy + Math.sin(mid) * r;
+        return (
+          <g key={slice.label}>
+            <circle
+              cx={cx}
+              cy={cy}
+              r={r}
+              fill="none"
+              stroke={slice.color}
+              strokeWidth={stroke}
+              strokeDasharray={`${dash} ${circ - dash}`}
+              strokeDashoffset={-currentOffset * circ}
+              transform={`rotate(-90 ${cx} ${cy})`}
+            />
+            {pct >= 0.08 && (
+              <text
+                x={lx}
+                y={ly}
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fill="#fff"
+                style={{ fontSize: 11, fontWeight: 700 }}
+              >
+                {Math.round(pct * 100)}%
+              </text>
+            )}
+          </g>
+        );
+      })}
+    </svg>
+  );
+}
+
+export default function DashboardPage() {
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [userName, setUserName] = useState('Admin');
+  const [chartMode, setChartMode] = useState<'weekly' | 'monthly' | 'yearly'>('weekly');
+  const [refreshing, setRefreshing] = useState(false);
+
+  useEffect(() => {
+    const token = getAccessToken();
+    if (token) {
+      const payload = parseJwt(token);
+      if (payload) {
+        setUserName((payload.email as string)?.split('@')[0] || 'Admin');
+      }
+    }
+  }, []);
+
+  const fetchData = useCallback(async (silent = false) => {
+    if (!silent) setLoading(true);
+    else setRefreshing(true);
+    try {
+      const [statsRes, ordersRes, productsRes, categoriesRes, brandsRes, sessionsRes] = await Promise.allSettled([
+        adminService.getDashboardStats().catch(() => null),
+        apiFetch<any[]>('/api/v1/admin/orders').catch(() => []),
+        apiFetch<any>('/api/v1/catalog/products/all?limit=200').catch(() => []),
+        apiFetch<any[]>('/api/v1/catalog/categories/all').catch(() => []),
+        apiFetch<any[]>('/api/v1/catalog/brands/all').catch(() => []),
+        adminService.listSessions(0, 50).catch(() => ({ sessions: [] })),
+      ]);
+
+      const liveStats = statsRes.status === 'fulfilled' ? statsRes.value : null;
+      const liveOrders = ordersRes.status === 'fulfilled' && Array.isArray(ordersRes.value) ? ordersRes.value : [];
+      const liveProductsRaw = productsRes.status === 'fulfilled' ? productsRes.value : [];
+      const liveProducts = Array.isArray(liveProductsRaw) ? liveProductsRaw : (liveProductsRaw?.products || []);
+      const liveCategories = categoriesRes.status === 'fulfilled' && Array.isArray(categoriesRes.value) ? categoriesRes.value : [];
+      const liveBrands = brandsRes.status === 'fulfilled' && Array.isArray(brandsRes.value) ? brandsRes.value : [];
+      const liveSessions = sessionsRes.status === 'fulfilled' && sessionsRes.value?.sessions ? sessionsRes.value.sessions : [];
+
+      let mergedStats: DashboardStats;
+
+      if (liveStats) {
+        mergedStats = liveStats;
+      } else if (liveOrders.length > 0 || liveProducts.length > 0) {
+        const ordersByStatus: Record<string, number> = {
+          pending: 0,
+          confirmed: 0,
+          processing: 0,
+          shipped: 0,
+          delivered: 0,
+          cancelled: 0,
+          returned: 0,
+        };
+
+        let totalRevenue = 0;
+        const recentOrders: DashboardRecentOrder[] = [];
+
+        liveOrders.forEach((o: any) => {
+          const statusKey = (o.status || 'pending').toLowerCase();
+          ordersByStatus[statusKey] = (ordersByStatus[statusKey] || 0) + 1;
+
+          if (['DELIVERED', 'COMPLETED', 'CONFIRMED', 'PROCESSING', 'SHIPPED', 'PAYMENT_CAPTURED', 'PAID'].includes((o.status || '').toUpperCase()) || (o.payment_status || '').toUpperCase() === 'PAID') {
+            totalRevenue += Number(o.final_amount || 0);
+          }
+
+          if (recentOrders.length < 10) {
+            recentOrders.push({
+              order_no: o.order_no || 'ORD',
+              amount: Number(o.final_amount || 0),
+              status: (o.status || 'pending').toLowerCase(),
+              payment_status: (o.payment_status || 'paid').toLowerCase(),
+              created_at: o.created_at || null,
+              customer_name: o.customer_name || o.customer_email || 'Customer',
+              customer_email: o.customer_email || null,
+            });
+          }
+        });
+
+        // Daily chart points from live orders
+        const dailyMap = new Map<string, { revenue: number; orders: number }>();
+        liveOrders.forEach((o: any) => {
+          if (!o.created_at) return;
+          const d = new Date(o.created_at);
+          const dayStr = `${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+          const existing = dailyMap.get(dayStr) || { revenue: 0, orders: 0 };
+          dailyMap.set(dayStr, {
+            revenue: existing.revenue + Number(o.final_amount || 0),
+            orders: existing.orders + 1,
+          });
+        });
+
+        const dynamicDaily = Array.from(dailyMap.entries()).map(([date, val]) => ({
+          date,
+          revenue: val.revenue,
+          orders: val.orders,
+        }));
+
+        const dynamicTopProducts: DashboardTopProduct[] = liveProducts.slice(0, 5).map((p: any) => ({
+          name: p.name || 'Product',
+          total_sold: p.variants?.length || 0,
+          total_revenue: p.variants?.reduce((s: number, v: any) => s + Number(v.price || 0), 0) || 0,
+        }));
+
+        mergedStats = {
+          total_users: liveOrders.length,
+          total_orders: liveOrders.length,
+          total_products: liveProducts.length,
+          total_brands: liveBrands.length,
+          total_device_models: 0,
+          total_device_series: 0,
+          total_categories: liveCategories.length,
+          revenue_all_time: totalRevenue,
+          revenue_last_30_days: totalRevenue,
+          revenue_last_7_days: totalRevenue,
+          orders_by_status: ordersByStatus,
+          revenue_chart_daily: dynamicDaily,
+          revenue_chart_monthly: [],
+          top_products: dynamicTopProducts,
+          recent_orders: recentOrders,
+          low_stock_variants: 0,
+          out_of_stock_variants: 0,
+          total_stock_units: liveProducts.reduce((acc: number, p: any) => acc + (p.variants?.length || 0), 0),
+        };
+      } else {
+        mergedStats = {
+          total_users: 0,
+          total_orders: 0,
+          total_products: 0,
+          total_brands: 0,
+          total_device_models: 0,
+          total_device_series: 0,
+          total_categories: 0,
+          revenue_all_time: 0,
+          revenue_last_30_days: 0,
+          revenue_last_7_days: 0,
+          orders_by_status: {},
+          revenue_chart_daily: [],
+          revenue_chart_monthly: [],
+          top_products: [],
+          recent_orders: [],
+          low_stock_variants: 0,
+          out_of_stock_variants: 0,
+          total_stock_units: 0,
+        };
+      }
+
+      setStats(mergedStats);
+      setSessions(liveSessions);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const { stats: displayStats } = withDashboardMock(stats, sessions);
+  const byStatus = displayStats.orders_by_status ?? {};
+  const countOf = (key: string) => byStatus[key] ?? 0;
+  const totalOrders = displayStats.total_orders ?? 0;
+  const delivered = countOf('delivered');
+  const conversion = totalOrders > 0 ? (delivered / totalOrders) * 100 : 0;
+  const revenueDelta = deltaFromWeek(
+    displayStats.revenue_last_7_days ?? 0,
+    displayStats.revenue_last_30_days ?? 0
+  );
+  const ordersDelta = conversion >= 40 ? 2.5 : -4.2;
+  const conversionDelta = 15.5;
+  const customersDelta = 2.5;
+
+  const daily: DashboardRevenuePoint[] = displayStats.revenue_chart_daily ?? [];
+  const monthly: DashboardMonthlyPoint[] = displayStats.revenue_chart_monthly ?? [];
+  const sourceChart: Array<DashboardRevenuePoint | DashboardMonthlyPoint> =
+    chartMode === 'weekly' ? samplePoints(daily, 12) : monthly;
+
+  const rawPoints = sourceChart.map((row) => ({
+    name:
+      'date' in row
+        ? row.date?.replace('08-', '') ?? ''
+        : row.label?.slice(0, 3) ?? '',
+    revenue: row.revenue,
+    orders: row.orders,
+  }));
+  const maxRev = Math.max(...rawPoints.map((row) => row.revenue), 1);
+  const maxOrd = Math.max(...rawPoints.map((row) => row.orders), 1);
+  const salesScale = (maxRev * 0.72) / maxOrd;
+  const chartPoints = rawPoints.map((row) => ({
+    ...row,
+    sales: row.orders * salesScale,
+  }));
+
+  const pipelineRows = PIPELINE.map((stage) => ({
+    ...stage,
+    count: countOf(stage.key),
+    value: countOf(stage.key) * (displayStats.revenue_all_time / Math.max(totalOrders, 1)),
+  }));
+  const maxPipeline = Math.max(...pipelineRows.map((row) => row.count), 1);
+
+  const overviewRows = OVERVIEW.map((row) => ({
+    ...row,
+    count: countOf(row.key),
+  }));
+  const overviewTotal = overviewRows.reduce((sum, row) => sum + row.count, 0) || 1;
+
+  const donutSlices = [
+    { label: 'Delivered', value: countOf('delivered'), color: DONUT_COLORS.delivered },
+    { label: 'Shipped', value: countOf('shipped'), color: DONUT_COLORS.shipped },
+    { label: 'Processing', value: countOf('processing') + countOf('confirmed'), color: DONUT_COLORS.processing },
+    { label: 'Pending', value: countOf('pending') + countOf('cancelled') + countOf('returned'), color: DONUT_COLORS.pending },
+  ].filter((slice) => slice.value > 0);
+
+  const spark = daily.slice(-14).map((row) => row.orders);
+  const sparkMax = Math.max(...spark, 1);
+  const customerAvatars = (displayStats.recent_orders ?? []).slice(0, 4);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-4 animate-pulse">
+        <div className="h-8 w-48 bg-muted crm-radius-section" />
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          <div className="lg:col-span-2 h-72 bg-muted crm-radius-section" />
+          <div className="h-72 bg-muted crm-radius-section" />
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="h-28 bg-muted crm-radius-section" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div>
+          <h1 className="text-lg font-semibold text-foreground">Dashboard</h1>
+          <p className="text-[13px] text-muted-foreground mt-0.5">
+            Welcome back, <span className="capitalize font-medium text-foreground">{userName}</span>
+          </p>
+        </div>
+        <div className="flex items-center gap-2 text-[13px] flex-wrap">
+          <div className="flex items-center gap-1.5 h-9 px-3 bg-card border border-border crm-radius-control text-muted-foreground">
+            <Calendar className="w-4 h-4" />
+            <span>{PAGE_DATE_RANGE}</span>
+            <ChevronDown className="w-3.5 h-3.5" />
+          </div>
+          <button
+            type="button"
+            onClick={() => fetchData(true)}
+            className={cn(
+              'w-9 h-9 bg-card border border-border crm-radius-control text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center',
+              refreshing && 'animate-spin'
+            )}
+            aria-label="Refresh dashboard"
+          >
+            <RefreshCw className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className={cn(CARD, 'lg:col-span-2 p-5 flex flex-col')}>
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <CardTitle>Revenue Analytics</CardTitle>
+            <PeriodPills value={chartMode} onChange={setChartMode} />
+          </div>
+          <div className="mt-4 flex flex-wrap items-end justify-between gap-3">
+            <div className="flex flex-wrap items-baseline gap-2">
+              <p className="text-[28px] font-bold text-foreground tracking-tight leading-none">
+                {formatCompact(displayStats.revenue_last_30_days).replace('₹', '')}
+              </p>
+              <p className="text-[13px] text-muted-foreground">Revenue with orders (INR)</p>
+            </div>
+            <div className="flex items-center gap-4 text-[12px] text-muted-foreground">
+              <span className="inline-flex items-center gap-1.5">
+                <span className="w-2 h-2 rounded-full bg-primary" /> Revenue
+              </span>
+              <span className="inline-flex items-center gap-1.5">
+                <span className="w-2 h-2 rounded-full bg-[#d9dee8]" /> Orders
+              </span>
+            </div>
+          </div>
+          <div className="h-[240px] w-full mt-3">
+            {chartPoints.length === 0 ? (
+              <div className="h-full flex items-center justify-center text-[13px] text-muted-foreground">
+                No order revenue data yet
+              </div>
+            ) : (
+              <ResponsiveContainer width="100%" height="100%">
+                <ComposedChart data={chartPoints} barCategoryGap="18%" margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                  <CartesianGrid vertical stroke="var(--border)" strokeDasharray="4 4" horizontal={false} />
+                  <XAxis
+                    dataKey="name"
+                    tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
+                    axisLine={false}
+                    tickLine={false}
+                    interval={0}
+                  />
+                  <YAxis
+                    tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
+                    axisLine={false}
+                    tickLine={false}
+                    width={42}
+                    tickFormatter={(v: number) => (v >= 1000 ? `₹${(v / 1000).toFixed(0)}k` : `₹${v}`)}
+                  />
+                  <Tooltip
+                    content={({ active, payload, label }) => {
+                      if (!active || !payload?.length) return null;
+                      const row = payload[0]?.payload as { revenue: number; orders: number };
+                      return (
+                        <div className="bg-card border border-border crm-radius-control px-2.5 py-1.5 shadow-sm text-xs">
+                          <p className="text-muted-foreground mb-0.5">{label}</p>
+                          <p className="font-semibold text-foreground">{formatInr(row.revenue)}</p>
+                          <p className="text-muted-foreground">{row.orders} orders</p>
+                        </div>
+                      );
+                    }}
+                  />
+                  <Area type="monotone" dataKey="sales" fill="#EEF0F4" stroke="none" />
+                  <Bar dataKey="revenue" fill="#5BA4C7" radius={[2, 2, 0, 0]} />
+                </ComposedChart>
+              </ResponsiveContainer>
+            )}
+          </div>
+        </div>
+
+        <div className={cn(CARD, 'p-5 flex flex-col')}>
+          <div className="flex items-center justify-between gap-2">
+            <CardTitle>Order sources</CardTitle>
+            <Link
+              href="/orders"
+              className="w-8 h-8 crm-radius-control border border-border text-muted-foreground hover:bg-muted flex items-center justify-center"
+              aria-label="View orders"
+            >
+              <ArrowRight className="w-3.5 h-3.5" />
+            </Link>
+          </div>
+          <div className="flex-1 flex flex-col items-center justify-center py-3">
+            {donutSlices.length === 0 ? (
+              <p className="text-[13px] text-muted-foreground">No orders yet</p>
+            ) : (
+              <StatusDonut slices={donutSlices} />
+            )}
+          </div>
+          <div className="divide-y divide-border">
+            {donutSlices.map((slice) => (
+              <div key={slice.label} className="flex items-center justify-between py-2.5">
+                <span className="inline-flex items-center gap-2 text-[13px] text-foreground">
+                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: slice.color }} />
+                  {slice.label}
+                </span>
+                <span className="text-[13px] font-bold text-foreground">{slice.value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
+        <div className={cn(CARD, 'p-4')}>
+          <div className="flex items-start justify-between">
+            <p className="text-[13px] text-muted-foreground">Revenue</p>
+            <span className="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
+              <TrendingUp className="w-4 h-4" />
+            </span>
+          </div>
+          <p className="text-[22px] font-bold text-foreground mt-2 tracking-tight">
+            {formatInr(displayStats.revenue_all_time)}
+          </p>
+          <div className="mt-2 flex items-center gap-2">
+            <DeltaPill value={revenueDelta} />
+            <span className="text-[12px] text-muted-foreground">From last week</span>
+          </div>
+        </div>
+
+        <div className={cn(CARD, 'p-4')}>
+          <div className="flex items-start justify-between">
+            <p className="text-[13px] text-muted-foreground">Active orders</p>
+            <span className="w-10 h-10 rounded-full bg-[#3B82F6] text-white flex items-center justify-center">
+              <Handshake className="w-4 h-4" />
+            </span>
+          </div>
+          <p className="text-[22px] font-bold text-foreground mt-2 tracking-tight">{totalOrders}</p>
+          <div className="mt-2 flex items-center gap-2">
+            <DeltaPill value={ordersDelta} />
+            <span className="text-[12px] text-muted-foreground">From last week</span>
+          </div>
+        </div>
+
+        <div className={cn(CARD, 'p-4')}>
+          <div className="flex items-start justify-between">
+            <p className="text-[13px] text-muted-foreground">Fulfillment rate</p>
+            <span className="w-10 h-10 rounded-full bg-[#C026D3] text-white flex items-center justify-center">
+              <Filter className="w-4 h-4" />
+            </span>
+          </div>
+          <p className="text-[22px] font-bold text-foreground mt-2 tracking-tight">
+            {conversion.toFixed(1)}%
+          </p>
+          <div className="mt-2 flex items-center gap-2">
+            <DeltaPill value={conversionDelta} />
+            <span className="text-[12px] text-muted-foreground">Delivered vs total</span>
+          </div>
+        </div>
+
+        <div className={cn(CARD, 'p-4')}>
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <p className="text-[13px] text-muted-foreground">Total customers</p>
+              <p className="text-[22px] font-bold text-foreground mt-2 tracking-tight">
+                {displayStats.total_users}
+              </p>
+              <div className="mt-2 flex items-center gap-2">
+                <DeltaPill value={customersDelta} />
+              </div>
+              <div className="mt-3 flex items-center">
+                {customerAvatars.map((order, index) => (
+                  <span
+                    key={order.order_no}
+                    className="w-7 h-7 rounded-full bg-primary text-white text-[10px] font-bold flex items-center justify-center border-2 border-card"
+                    style={{ marginLeft: index === 0 ? 0 : -8 }}
+                  >
+                    {initials(order.customer_name)}
+                  </span>
+                ))}
+                <span className="ml-2 text-[11px] font-semibold text-muted-foreground">
+                  +{Math.max(displayStats.total_users - customerAvatars.length, 0)}
+                </span>
+              </div>
+            </div>
+            <div className="flex items-end gap-[3px] h-12 shrink-0 pt-1">
+              {spark.map((value, index) => (
+                <span
+                  key={index}
+                  className="w-[5px] rounded-full bg-primary/70"
+                  style={{ height: `${Math.max(18, (value / sparkMax) * 100)}%` }}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
+        <div className={cn(CARD, 'p-5 flex flex-col')}>
+          <div className="flex items-center justify-between gap-2 mb-4">
+            <CardTitle>Top products</CardTitle>
+            <GhostSelect label="Last 30 Days" />
+          </div>
+          <div className="flex-1 space-y-1">
+            {(displayStats.top_products ?? []).length === 0 ? (
+              <p className="text-[13px] text-muted-foreground text-center py-8">No sales data yet</p>
+            ) : (
+              (displayStats.top_products ?? []).slice(0, 5).map((product, index) => (
+                <div key={product.name} className="flex items-center gap-3 py-2.5">
+                  <span
+                    className="w-9 h-9 rounded-full text-white text-[11px] font-bold flex items-center justify-center shrink-0"
+                    style={{ backgroundColor: PRODUCT_TONES[index % PRODUCT_TONES.length] }}
+                  >
+                    {initials(product.name)}
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-[13px] font-semibold text-foreground truncate">{product.name}</p>
+                    <p className="text-[12px] text-muted-foreground">{product.total_sold} units sold</p>
+                  </div>
+                  <span className="text-[13px] font-bold text-foreground shrink-0">
+                    {formatInr(product.total_revenue)}
+                  </span>
+                </div>
+              ))
+            )}
+          </div>
+          <Link
+            href="/products"
+            className="mt-3 inline-flex items-center gap-1 text-[13px] font-medium text-muted-foreground hover:text-foreground"
+          >
+            View All <ArrowRight className="w-3.5 h-3.5" />
+          </Link>
+        </div>
+
+        <div className={cn(CARD, 'p-5 flex flex-col')}>
+          <div className="flex items-center justify-between gap-2 mb-4">
+            <CardTitle>Pipeline statistics</CardTitle>
+            <GhostSelect label="Weekly" />
+          </div>
+          <div className="grid grid-cols-4 gap-2 mb-4">
+            {pipelineRows.map((row) => (
+              <div key={row.key} className="min-w-0">
+                <p className="text-[11px] text-muted-foreground truncate">{row.label}</p>
+                <p className="text-[13px] font-bold text-foreground mt-0.5 truncate">
+                  {formatCompact(row.value)}
+                </p>
+                <p className="text-[11px] text-muted-foreground">{row.count} orders</p>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-end gap-3 h-[120px]">
+            {pipelineRows.map((row) => (
+              <div key={row.key} className="flex-1 flex flex-col items-center justify-end h-full gap-2">
+                <div
+                  className="w-full max-w-[42px] rounded-t-[5px]"
+                  style={{
+                    height: `${Math.max(18, (row.count / maxPipeline) * 100)}%`,
+                    backgroundColor: row.color,
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+          <div className="mt-4 pt-3 border-t border-border flex items-center justify-between gap-3">
+            <p className="text-[13px] text-muted-foreground">
+              Stock value{' '}
+              <span className="font-bold text-foreground">
+                {(displayStats.total_stock_units ?? 0).toLocaleString()} units
+              </span>
+            </p>
+            <div className="flex items-end gap-[3px] h-8">
+              {spark.slice(-10).map((value, index) => (
+                <span
+                  key={index}
+                  className="w-[6px] rounded-full bg-primary"
+                  style={{ height: `${Math.max(20, (value / sparkMax) * 100)}%`, opacity: 0.45 + (index / 20) }}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className={cn(CARD, 'p-5 flex flex-col')}>
+          <div className="flex items-center justify-between gap-2 mb-4">
+            <CardTitle>Orders overview</CardTitle>
+            <Link
+              href="/orders"
+              className="w-8 h-8 crm-radius-control border border-border text-muted-foreground hover:bg-muted flex items-center justify-center"
+              aria-label="View orders"
+            >
+              <ArrowRight className="w-3.5 h-3.5" />
+            </Link>
+          </div>
+          <div className="h-2.5 rounded-full overflow-hidden flex">
+            {overviewRows.map((row) => (
+              <span
+                key={row.key}
+                style={{
+                  width: `${(row.count / overviewTotal) * 100}%`,
+                  backgroundColor: row.color,
+                }}
+              />
+            ))}
+          </div>
+          <p className="text-[28px] font-bold text-foreground mt-3 leading-none">{totalOrders}</p>
+          <div className="mt-2 flex items-center gap-2">
+            <DeltaPill value={12.5} />
+            <span className="text-[12px] text-muted-foreground">compared to last week</span>
+          </div>
+          <div className="mt-4 space-y-3 flex-1">
+            {overviewRows.map((row) => (
+              <div key={row.key} className="flex items-center justify-between gap-2">
+                <span className="inline-flex items-center gap-2 text-[13px] text-foreground">
+                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: row.color }} />
+                  {row.label}
+                </span>
+                <span className="text-[13px] font-bold text-foreground">{row.count} orders</span>
+              </div>
+            ))}
+          </div>
+          <div className="mt-4 bg-muted/60 crm-radius-control px-3 py-2.5 flex items-center justify-between gap-2">
+            <p className="text-[13px] text-muted-foreground">
+              Orders delivered <span className="font-bold text-foreground">{delivered}</span>
+            </p>
+            <span className="inline-flex items-center">
+              {customerAvatars.slice(0, 4).map((order, index) => (
+                <span
+                  key={order.order_no}
+                  className="w-6 h-6 rounded-full bg-card border border-border text-[9px] font-bold flex items-center justify-center text-foreground"
+                  style={{ marginLeft: index === 0 ? 0 : -6 }}
+                >
+                  {initials(order.customer_name)}
+                </span>
+              ))}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className={CARD}>
+        <div className="px-5 py-4 flex items-center justify-between gap-3">
+          <CardTitle>Recent orders</CardTitle>
+          <Link
+            href="/orders"
+            className="inline-flex items-center gap-1 h-8 px-3 crm-radius-control border border-border text-[13px] font-medium text-foreground hover:bg-muted"
+          >
+            View All <ArrowRight className="w-3.5 h-3.5" />
+          </Link>
+        </div>
+        <div className="overflow-x-auto">
+          {(displayStats.recent_orders ?? []).length === 0 ? (
+            <p className="text-[13px] text-muted-foreground text-center py-10">No orders yet</p>
+          ) : (
+            <table className="crm-data-table min-w-[680px]">
+              <thead>
+                <tr className="border-y border-border">
+                  <th className="text-left font-medium text-muted-foreground px-5 py-2.5">Order</th>
+                  <th className="text-left font-medium text-muted-foreground px-5 py-2.5">Stage</th>
+                  <th className="text-left font-medium text-muted-foreground px-5 py-2.5">Value</th>
+                  <th className="text-left font-medium text-muted-foreground px-5 py-2.5">Payment</th>
+                  <th className="text-left font-medium text-muted-foreground px-5 py-2.5">Customer</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(displayStats.recent_orders ?? []).map((order) => (
+                  <tr key={order.order_no} className="border-b border-border last:border-0">
+                    <td className="px-5 py-3 font-semibold text-foreground whitespace-nowrap">
+                      {order.order_no}
+                    </td>
+                    <td className="px-5 py-3 text-muted-foreground capitalize">{order.status}</td>
+                    <td className="px-5 py-3 text-muted-foreground whitespace-nowrap">
+                      {formatInr(order.amount)}
+                    </td>
+                    <td className="px-5 py-3">
+                      <span
+                        className={cn(
+                          'inline-flex items-center h-6 px-2 crm-radius-badge text-[11px] font-semibold border capitalize',
+                          PAYMENT_TAG[order.payment_status] ?? 'border-border text-muted-foreground'
+                        )}
+                      >
+                        {order.payment_status || '—'}
+                      </span>
+                    </td>
+                    <td className="px-5 py-3">
+                      <span className="inline-flex items-center gap-2 min-w-0">
+                        <span className="w-7 h-7 rounded-full bg-primary/10 text-primary text-[10px] font-bold flex items-center justify-center shrink-0">
+                          {initials(order.customer_name)}
+                        </span>
+                        <span className="text-[13px] text-foreground truncate">{order.customer_name}</span>
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/(admin)/inventory/page.tsx

@@ -0,0 +1,747 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Plus,
+  Search,
+  RefreshCw,
+  Package,
+  TrendingUp,
+  AlertTriangle,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { catalogService, PartResponse, SellableSkuRow, StockMovementResponse } from '@/services/api/catalogService';
+import { SlideOver } from '@/components/ui/SlideOver';
+import { CustomSelect } from '@/components/ui/CustomSelect';
+import { TablePagination, TABLE_PAGE_SIZE, useClientPagination } from '@/components/ui/TablePagination';
+
+type LedgerTab = 'skus' | 'parts' | 'movements';
+
+export default function InventoryPage() {
+  const [activeTab, setActiveTab] = useState<LedgerTab>('skus');
+  const [parts, setParts] = useState<PartResponse[]>([]);
+  const [movements, setMovements] = useState<StockMovementResponse[]>([]);
+  const [skus, setSkus] = useState<SellableSkuRow[]>([]);
+  const [skuTotal, setSkuTotal] = useState(0);
+  const [skuPage, setSkuPage] = useState(1);
+  const skuLimit = TABLE_PAGE_SIZE;
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debouncedSkuSearch, setDebouncedSkuSearch] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [showPartModal, setShowPartModal] = useState(false);
+  const [partSku, setPartSku] = useState('');
+  const [partName, setPartName] = useState('');
+  const [partCost, setPartCost] = useState('');
+  const [partLowStock, setPartLowStock] = useState('3');
+  const [partSupplier, setPartSupplier] = useState('');
+  const [partBarcode, setPartBarcode] = useState('');
+
+  const [showAdjustModal, setShowAdjustModal] = useState(false);
+  const [adjustPartId, setAdjustPartId] = useState('');
+  const [adjustQty, setAdjustQty] = useState('');
+  const [adjustType, setAdjustType] = useState<'Adjustment' | 'Damage'>('Adjustment');
+  const [adjustReason, setAdjustReason] = useState('');
+
+  const [showSkuAdjustModal, setShowSkuAdjustModal] = useState(false);
+  const [skuAdjustRow, setSkuAdjustRow] = useState<SellableSkuRow | null>(null);
+  const [skuAdjustQty, setSkuAdjustQty] = useState('');
+  const [skuAdjustType, setSkuAdjustType] = useState<'RECEIPT' | 'ADJUSTMENT'>('RECEIPT');
+  const [skuAdjustNotes, setSkuAdjustNotes] = useState('');
+
+  const fetchPartsData = async () => {
+    setLoading(true);
+    try {
+      const [fetchedParts, fetchedMovements] = await Promise.all([
+        catalogService.getParts(),
+        catalogService.getStockHistory(),
+      ]);
+      setParts(fetchedParts);
+      setMovements(fetchedMovements);
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to load inventory ledger');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchSkus = async () => {
+    setLoading(true);
+    try {
+      const result = await catalogService.getSellableSkus({
+        page: skuPage,
+        limit: skuLimit,
+        q: debouncedSkuSearch || undefined,
+      });
+      setSkus(result.items);
+      setSkuTotal(result.total);
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to load sellable SKUs');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchData = async () => {
+    if (activeTab === 'skus') {
+      await fetchSkus();
+      return;
+    }
+    await fetchPartsData();
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSkuSearch(searchQuery);
+      setSkuPage(1);
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    fetchData();
+  }, [activeTab, skuPage, debouncedSkuSearch]);
+
+  const handleCreatePart = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!partSku.trim() || !partName.trim() || !partCost) {
+      toast.error('SKU, name, and cost price are required');
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const created = await catalogService.createPart({
+        sku: partSku.trim(),
+        name: partName.trim(),
+        cost_price: parseFloat(partCost),
+        low_stock_alert: parseInt(partLowStock) || 3,
+        supplier: partSupplier.trim() || undefined,
+        barcode: partBarcode.trim() || undefined,
+      });
+      setParts([...parts, created]);
+      toast.success(`Part "${created.sku}" added to inventory`);
+      setPartSku('');
+      setPartName('');
+      setPartCost('');
+      setPartLowStock('3');
+      setPartSupplier('');
+      setPartBarcode('');
+      setShowPartModal(false);
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to create inventory part');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleAdjustStock = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!adjustPartId || !adjustQty || !adjustReason.trim()) {
+      toast.error('Part, quantity, and reason are required');
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const qtyVal = parseInt(adjustQty);
+      const payloadQty = adjustType === 'Damage' ? -Math.abs(qtyVal) : qtyVal;
+      await catalogService.adjustStock({
+        entity_type: 'part',
+        entity_id: adjustPartId,
+        movement_type: adjustType,
+        quantity: payloadQty,
+        reference_type: 'ManualAdjustment',
+        reference_id: adjustReason.trim(),
+      });
+      toast.success('Stock movement recorded');
+      setAdjustPartId('');
+      setAdjustQty('');
+      setAdjustReason('');
+      setShowAdjustModal(false);
+      fetchData();
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to log stock movement');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleSkuAdjust = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!skuAdjustRow || !skuAdjustQty) {
+      toast.error('Quantity is required');
+      return;
+    }
+    const qtyVal = parseInt(skuAdjustQty, 10);
+    if (!Number.isFinite(qtyVal) || qtyVal === 0) {
+      toast.error('Enter a non-zero quantity');
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const qty = skuAdjustType === 'ADJUSTMENT' ? -Math.abs(qtyVal) : Math.abs(qtyVal);
+      await catalogService.adjustSellableStock({
+        variant_id: skuAdjustRow.variant_id,
+        event_type: skuAdjustType,
+        qty,
+        notes: skuAdjustNotes.trim() || undefined,
+      });
+      toast.success(`Stock quantity updated for ${skuAdjustRow.sku}`);
+      setShowSkuAdjustModal(false);
+      setSkuAdjustRow(null);
+      setSkuAdjustQty('');
+      setSkuAdjustNotes('');
+      fetchSkus();
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to adjust sellable stock');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const openLogMovement = async () => {
+    if (parts.length === 0) {
+      try {
+        const fetchedParts = await catalogService.getParts();
+        setParts(fetchedParts);
+      } catch {
+        toast.error('Failed to load parts');
+      }
+    }
+    setShowAdjustModal(true);
+  };
+
+  const skuPages = Math.max(1, Math.ceil(skuTotal / skuLimit));
+
+  const filteredParts = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return parts;
+    return parts.filter(
+      (p) =>
+        p.sku.toLowerCase().includes(q) ||
+        p.name.toLowerCase().includes(q) ||
+        (p.supplier || '').toLowerCase().includes(q) ||
+        (p.barcode || '').toLowerCase().includes(q)
+    );
+  }, [parts, searchQuery]);
+
+  const filteredMovements = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return movements;
+    return movements.filter((m) => {
+      const partObj = parts.find((p) => p.part_id === m.entity_id);
+      return (
+        (partObj?.name || '').toLowerCase().includes(q) ||
+        (partObj?.sku || '').toLowerCase().includes(q) ||
+        (m.movement_type || '').toLowerCase().includes(q) ||
+        (m.reference_id || '').toLowerCase().includes(q)
+      );
+    });
+  }, [movements, parts, searchQuery]);
+
+  const partsPager = useClientPagination(filteredParts);
+  const movementsPager = useClientPagination(filteredMovements);
+
+  const countBadge =
+    activeTab === 'skus' ? skuTotal : activeTab === 'parts' ? parts.length : movements.length;
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden min-w-0';
+  const inputClass =
+    'w-full h-9 px-3 bg-card border border-border crm-radius-control text-[13px] text-foreground focus:outline-none focus:border-primary';
+  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50';
+
+  const changeTab = (tab: LedgerTab) => {
+    setActiveTab(tab);
+    setSearchQuery('');
+  };
+
+  const renderStockBadge = (isLow: boolean, label?: string) => (
+    <span
+      className={`inline-flex items-center gap-1 px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${
+        isLow ? 'bg-warning text-white' : 'bg-success text-white'
+      }`}
+    >
+      {isLow && <AlertTriangle className="w-3 h-3" />}
+      {label || (isLow ? 'Low stock' : 'In stock')}
+    </span>
+  );
+
+  const renderMovementBadge = (type: string) => {
+    const value = type.toLowerCase();
+    const cls =
+      value === 'purchase' || value === 'receipt'
+        ? 'bg-success text-white'
+        : value === 'damage'
+          ? 'bg-destructive text-white'
+          : 'bg-muted text-muted-foreground';
+    return (
+      <span className={`inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${cls}`}>
+        {type}
+      </span>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Stock Ledger</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {countBadge}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          <button
+            type="button"
+            onClick={fetchData}
+            className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+            title="Reload"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+          </button>
+          <button type="button" onClick={openLogMovement} className={secondaryButton}>
+            <TrendingUp className="w-3.5 h-3.5" />
+            Log movement
+          </button>
+          <button type="button" onClick={() => setShowPartModal(true)} className={primaryButton}>
+            <span className="w-[18px] h-[18px] rounded-full bg-white text-primary flex items-center justify-center">
+              <Plus className="w-3 h-3" strokeWidth={3} />
+            </span>
+            Register part
+          </button>
+        </div>
+      </div>
+
+      <div className={dataCardShell}>
+        <div className="px-5 pt-5">
+          <div className="-mx-5 px-5 flex flex-wrap items-center justify-between gap-3 min-w-0 pb-4 border-b border-border">
+            <div className="relative flex-1 min-w-[180px] max-w-[480px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full h-9 pl-9 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+              />
+            </div>
+            <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1 shrink-0">
+              {([
+                { id: 'skus', label: `SKUs (${skuTotal})` },
+                { id: 'parts', label: `Parts (${parts.length})` },
+                { id: 'movements', label: `History (${movements.length})` },
+              ] as { id: LedgerTab; label: string }[]).map((tab) => (
+                <button
+                  key={tab.id}
+                  type="button"
+                  onClick={() => changeTab(tab.id)}
+                  className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors ${
+                    activeTab === tab.id ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
+            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+            <span className="text-[13px] text-muted-foreground">Loading stock ledger...</span>
+          </div>
+        ) : activeTab === 'skus' ? (
+          <>
+            <div className="overflow-x-auto">
+              <table className="crm-data-table min-w-[900px]">
+                <thead>
+                  <tr className="bg-gray-50 border-y border-gray-200">
+                    <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Product</th>
+                    <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">SKU</th>
+                    <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Price</th>
+                    <th className="px-5 py-3 text-center text-[13px] font-semibold text-gray-700">Pending</th>
+                    <th className="px-5 py-3 text-center text-[13px] font-semibold text-gray-700">Held</th>
+                    <th className="px-5 py-3 text-center text-[13px] font-semibold text-gray-700">Available</th>
+                    <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
+                    <th className="px-5 py-3 text-center text-[13px] font-semibold text-gray-700">Action</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-card">
+                  {skus.length === 0 ? (
+                    <tr>
+                      <td colSpan={8} className="text-center py-12 text-[13px] text-muted-foreground">
+                        {searchQuery ? 'No SKUs match your search.' : 'No sellable SKUs found.'}
+                      </td>
+                    </tr>
+                  ) : (
+                    skus.map((row) => (
+                      <tr key={row.variant_id} className="border-t border-border hover:bg-muted/10">
+                        <td className="px-5 py-3.5 text-[13px] font-semibold text-foreground">{row.product_name}</td>
+                        <td className="px-5 py-3.5 font-mono text-muted-foreground">
+                          <span className="crm-cell-clip" title={row.sku}>{row.sku}</span>
+                        </td>
+                        <td className="px-5 py-3.5 text-[13px] text-muted-foreground">₹{row.price}</td>
+                        <td className="px-5 py-3.5 text-center text-[13px] text-info">
+                          {row.pending_confirmation_units || 0}
+                        </td>
+                        <td className="px-5 py-3.5 text-center text-[13px] text-warning">
+                          {row.confirmed_units || 0}
+                        </td>
+                        <td className="px-5 py-3.5 text-center text-[13px] font-semibold text-foreground">
+                          {row.available_stock}
+                        </td>
+                        <td className="px-5 py-3.5">{renderStockBadge(row.is_low)}</td>
+                        <td className="px-5 py-3.5">
+                          <div className="flex justify-center">
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setSkuAdjustRow(row);
+                                setSkuAdjustType('RECEIPT');
+                                setSkuAdjustQty('');
+                                setSkuAdjustNotes('');
+                                setShowSkuAdjustModal(true);
+                              }}
+                              className={secondaryButton.replace('h-9 px-4', 'h-8 px-3') + ' text-[12px]'}
+                            >
+                              Adjust
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+            <TablePagination
+              page={skuPage}
+              totalPages={skuPages}
+              total={skuTotal}
+              pageSize={skuLimit}
+              onPageChange={setSkuPage}
+            />
+          </>
+        ) : activeTab === 'parts' ? (
+          <>
+          <div className="overflow-x-auto">
+            <table className="crm-data-table min-w-[760px]">
+              <thead>
+                <tr className="bg-gray-50 border-y border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Part</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">SKU / Barcode</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Unit cost</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Stock</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {filteredParts.length === 0 ? (
+                  <tr>
+                    <td colSpan={5} className="text-center py-12 text-[13px] text-muted-foreground">
+                      {searchQuery ? 'No parts match your search.' : 'No inventory parts registered.'}
+                    </td>
+                  </tr>
+                ) : (
+                    partsPager.items.map((p) => {
+                    const isLow = p.stock <= p.low_stock_alert;
+                    return (
+                      <tr key={p.part_id} className="border-t border-border hover:bg-muted/10">
+                        <td className="px-5 py-3.5">
+                          <div className="flex items-center gap-3 min-w-0">
+                            <div className="w-9 h-9 crm-radius-icon bg-primary/10 text-primary flex items-center justify-center shrink-0">
+                              <Package className="w-4 h-4" />
+                            </div>
+                            <div className="min-w-0">
+                              <p className="text-[13px] font-semibold text-foreground truncate">{p.name}</p>
+                              <p className="text-[11px] text-muted-foreground truncate">
+                                {p.supplier || 'No supplier'}
+                              </p>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-5 py-3.5 text-[13px] font-mono text-muted-foreground">
+                          {p.sku}
+                          {p.barcode && <span className="block text-[11px]">{p.barcode}</span>}
+                        </td>
+                        <td className="px-5 py-3.5 text-[13px] text-muted-foreground">₹{p.cost_price}</td>
+                        <td className="px-5 py-3.5 text-[13px] font-semibold text-foreground">{p.stock}</td>
+                        <td className="px-5 py-3.5">{renderStockBadge(isLow, isLow ? 'Reorder' : 'In stock')}</td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+          <TablePagination {...partsPager} />
+          </>
+        ) : (
+          <>
+          <div className="overflow-x-auto">
+            <table className="crm-data-table min-w-[760px]">
+              <thead>
+                <tr className="bg-gray-50 border-y border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Date</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Item</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Type</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Quantity</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Reference</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {filteredMovements.length === 0 ? (
+                  <tr>
+                    <td colSpan={5} className="text-center py-12 text-[13px] text-muted-foreground">
+                      {searchQuery ? 'No movements match your search.' : 'No stock movements recorded.'}
+                    </td>
+                  </tr>
+                ) : (
+                  movementsPager.items.map((m) => {
+                    const partObj = parts.find((p) => p.part_id === m.entity_id);
+                    const isNeg = m.quantity < 0;
+                    return (
+                      <tr key={m.movement_id} className="border-t border-border hover:bg-muted/10">
+                        <td className="px-5 py-3.5 text-[13px] text-muted-foreground">
+                          {new Date(m.created_at).toLocaleString()}
+                        </td>
+                        <td className="px-5 py-3.5">
+                          <p className="text-[13px] font-semibold text-foreground">{partObj?.name || 'Deleted part'}</p>
+                          <p className="text-[11px] font-mono text-muted-foreground">{partObj?.sku || '—'}</p>
+                        </td>
+                        <td className="px-5 py-3.5">{renderMovementBadge(m.movement_type)}</td>
+                        <td className="px-5 py-3.5 text-[13px] font-semibold">
+                          <span className={isNeg ? 'text-destructive' : 'text-success'}>
+                            {isNeg ? '' : '+'}
+                            {m.quantity}
+                          </span>
+                        </td>
+                        <td className="px-5 py-3.5 font-mono text-muted-foreground">
+                          <span className="crm-cell-clip" title={m.reference_id || ''}>{m.reference_id}</span>
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+          <TablePagination {...movementsPager} />
+          </>
+        )}
+      </div>
+
+      <SlideOver
+        open={showSkuAdjustModal && !!skuAdjustRow}
+        onClose={() => {
+          if (isSubmitting) return;
+          setShowSkuAdjustModal(false);
+        }}
+        title={skuAdjustRow ? `Adjust ${skuAdjustRow.sku}` : 'Adjust SKU'}
+        icon={<TrendingUp className="w-4 h-4 text-primary shrink-0" />}
+      >
+        {skuAdjustRow && (
+          <form onSubmit={handleSkuAdjust} className="flex min-h-0 flex-1 flex-col">
+            <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4">
+              <p className="text-[13px] text-muted-foreground">
+                Current available: <span className="font-semibold text-foreground">{skuAdjustRow.available_stock}</span>
+              </p>
+              <div>
+                <label className={labelClass}>Type</label>
+                <CustomSelect
+                  value={skuAdjustType}
+                  onChange={(value) => setSkuAdjustType(value as 'RECEIPT' | 'ADJUSTMENT')}
+                  options={[
+                    { value: 'RECEIPT', label: 'Receive (add)' },
+                    { value: 'ADJUSTMENT', label: 'Adjustment (remove)' },
+                  ]}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Quantity</label>
+                <input
+                  type="number"
+                  min="1"
+                  value={skuAdjustQty}
+                  onChange={(e) => setSkuAdjustQty(e.target.value)}
+                  className={inputClass}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Notes</label>
+                <input
+                  type="text"
+                  value={skuAdjustNotes}
+                  onChange={(e) => setSkuAdjustNotes(e.target.value)}
+                  className={inputClass}
+                />
+              </div>
+            </div>
+            <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+              <button
+                type="button"
+                onClick={() => setShowSkuAdjustModal(false)}
+                disabled={isSubmitting}
+                className={secondaryButton}
+              >
+                Cancel
+              </button>
+              <button type="submit" disabled={isSubmitting} className={primaryButton}>
+                {isSubmitting ? 'Saving...' : 'Save'}
+              </button>
+            </div>
+          </form>
+        )}
+      </SlideOver>
+
+      <SlideOver
+        open={showPartModal}
+        onClose={() => {
+          if (isSubmitting) return;
+          setShowPartModal(false);
+        }}
+        title="Register part"
+        icon={<Package className="w-4 h-4 text-primary shrink-0" />}
+      >
+        <form onSubmit={handleCreatePart} className="flex min-h-0 flex-1 flex-col">
+          <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4">
+            <div>
+              <label className={labelClass}>
+                Part SKU <span className="text-primary">*</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. PART-IP16PM-SCR-ORG"
+                value={partSku}
+                onChange={(e) => setPartSku(e.target.value)}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>
+                Part name <span className="text-primary">*</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. iPhone 16 Pro Max Original Screen"
+                value={partName}
+                onChange={(e) => setPartName(e.target.value)}
+                className={inputClass}
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className={labelClass}>
+                  Cost price (₹) <span className="text-primary">*</span>
+                </label>
+                <input type="number" placeholder="12000" value={partCost} onChange={(e) => setPartCost(e.target.value)} className={inputClass} />
+              </div>
+              <div>
+                <label className={labelClass}>Low stock alert</label>
+                <input type="number" value={partLowStock} onChange={(e) => setPartLowStock(e.target.value)} className={inputClass} />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className={labelClass}>Supplier</label>
+                <input type="text" placeholder="e.g. Apple Inc" value={partSupplier} onChange={(e) => setPartSupplier(e.target.value)} className={inputClass} />
+              </div>
+              <div>
+                <label className={labelClass}>Barcode</label>
+                <input type="text" placeholder="e.g. 789123456" value={partBarcode} onChange={(e) => setPartBarcode(e.target.value)} className={inputClass} />
+              </div>
+            </div>
+          </div>
+          <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+            <button type="button" onClick={() => setShowPartModal(false)} disabled={isSubmitting} className={secondaryButton}>
+              Cancel
+            </button>
+            <button type="submit" disabled={isSubmitting} className={primaryButton}>
+              {isSubmitting ? 'Saving...' : 'Register'}
+            </button>
+          </div>
+        </form>
+      </SlideOver>
+
+      <SlideOver
+        open={showAdjustModal}
+        onClose={() => {
+          if (isSubmitting) return;
+          setShowAdjustModal(false);
+        }}
+        title="Log stock movement"
+        icon={<TrendingUp className="w-4 h-4 text-primary shrink-0" />}
+      >
+        <form onSubmit={handleAdjustStock} className="flex min-h-0 flex-1 flex-col">
+          <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4">
+            <div>
+              <label className={labelClass}>
+                Part <span className="text-primary">*</span>
+              </label>
+              <CustomSelect
+                value={adjustPartId}
+                onChange={setAdjustPartId}
+                options={[
+                  { value: '', label: 'Select part' },
+                  ...parts.map((p) => ({
+                    value: p.part_id,
+                    label: `${p.name} (${p.sku}) — ${p.stock}`,
+                  })),
+                ]}
+                placeholder="Select part"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className={labelClass}>Movement type</label>
+                <CustomSelect
+                  value={adjustType}
+                  onChange={(value) => setAdjustType(value as 'Adjustment' | 'Damage')}
+                  options={[
+                    { value: 'Adjustment', label: 'Stock adjustment' },
+                    { value: 'Damage', label: 'Damage (reduces stock)' },
+                  ]}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>
+                  Quantity <span className="text-primary">*</span>
+                </label>
+                <input type="number" placeholder="10" value={adjustQty} onChange={(e) => setAdjustQty(e.target.value)} className={inputClass} />
+              </div>
+            </div>
+            <div>
+              <label className={labelClass}>
+                Reason / reference <span className="text-primary">*</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. Audit adjustment, damaged in transit"
+                value={adjustReason}
+                onChange={(e) => setAdjustReason(e.target.value)}
+                className={inputClass}
+              />
+            </div>
+          </div>
+          <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+            <button type="button" onClick={() => setShowAdjustModal(false)} disabled={isSubmitting} className={secondaryButton}>
+              Cancel
+            </button>
+            <button type="submit" disabled={isSubmitting} className={primaryButton}>
+              {isSubmitting ? 'Saving...' : 'Apply'}
+            </button>
+          </div>
+        </form>
+      </SlideOver>
+    </div>
+  );
+}

app/(admin)/invoices/page.tsx

@@ -0,0 +1,457 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Search,
+  RefreshCw,
+  Download,
+  Eye,
+  FileText,
+  FileSpreadsheet,
+  Printer,
+  X,
+} from 'lucide-react';
+import { format } from 'date-fns';
+import { toast } from 'sonner';
+import { apiFetch } from '@/services/api/client';
+import { SlideOver } from '@/components/ui/SlideOver';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+
+interface AdminInvoiceResponse {
+  invoice_id: string;
+  invoice_no: string;
+  order_id: string | null;
+  customer_id: string;
+  customer_email: string | null;
+  subtotal: number;
+  discount_amount: number;
+  cgst: number;
+  sgst: number;
+  igst: number;
+  total_amount: number;
+  status: string;
+  pdf_url: string | null;
+  created_at: string;
+}
+
+function statusBadgeClass(status?: string) {
+  const s = (status || '').toUpperCase();
+  if (s.includes('CANCEL') || s.includes('VOID') || s.includes('UNPAID')) return 'bg-destructive text-white';
+  if (s.includes('PENDING') || s.includes('DRAFT')) return 'bg-warning text-white';
+  return 'bg-success text-white';
+}
+
+export default function InvoiceIntelligencePage() {
+  const [invoices, setInvoices] = useState<AdminInvoiceResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+
+  const [selectedInvoiceId, setSelectedInvoiceId] = useState<string | null>(null);
+  const [detailData, setDetailData] = useState<AdminInvoiceResponse | null>(null);
+
+  const [previewModal, setPreviewModal] = useState<{
+    open: boolean;
+    invoice: AdminInvoiceResponse | null;
+    format: 'standard' | 'thermal';
+  }>({ open: false, invoice: null, format: 'standard' });
+  const [previewPdfUrl, setPreviewPdfUrl] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+
+  const backendUrl = process.env.NEXT_PUBLIC_API_URL || '';
+
+  const fetchInvoices = async () => {
+    setLoading(true);
+    try {
+      const data = await apiFetch<AdminInvoiceResponse[]>('/api/v1/admin/invoices');
+      setInvoices(data);
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to fetch invoices');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchInvoices();
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (previewPdfUrl) URL.revokeObjectURL(previewPdfUrl);
+    };
+  }, [previewPdfUrl]);
+
+  const handleInspectInvoice = (invoice: AdminInvoiceResponse) => {
+    setSelectedInvoiceId(invoice.invoice_id);
+    setDetailData(invoice);
+  };
+
+  const closeDetails = () => {
+    setSelectedInvoiceId(null);
+    setDetailData(null);
+  };
+
+  const handleExport = (type: 'excel' | 'zip') => {
+    window.open(`${backendUrl}/api/v1/admin/invoices/export/${type}`, '_blank');
+    toast.success(type === 'excel' ? 'Invoice Excel download started' : 'Invoice ZIP download started');
+  };
+
+  const closePreview = () => {
+    if (previewPdfUrl) {
+      URL.revokeObjectURL(previewPdfUrl);
+      setPreviewPdfUrl(null);
+    }
+    setPreviewModal({ open: false, invoice: null, format: 'standard' });
+  };
+
+  const handleOpenPreview = async (inv: AdminInvoiceResponse, formatType: 'standard' | 'thermal') => {
+    setPreviewModal({ open: true, invoice: inv, format: formatType });
+    setPreviewLoading(true);
+    if (previewPdfUrl) {
+      URL.revokeObjectURL(previewPdfUrl);
+      setPreviewPdfUrl(null);
+    }
+
+    try {
+      const ep = formatType === 'thermal' ? 'thermal-download' : 'download';
+      const res = await fetch(`${backendUrl}/api/v1/admin/invoices/${inv.invoice_id}/${ep}`);
+      if (!res.ok) throw new Error('PDF compilation failed');
+      const blob = await res.blob();
+      setPreviewPdfUrl(URL.createObjectURL(blob));
+    } catch {
+      toast.error('Could not load the invoice preview');
+    } finally {
+      setPreviewLoading(false);
+    }
+  };
+
+  const statusCounts = useMemo(() => {
+    const map = new Map<string, number>();
+    invoices.forEach((inv) => {
+      const key = inv.status || 'Unknown';
+      map.set(key, (map.get(key) || 0) + 1);
+    });
+    return Array.from(map.entries());
+  }, [invoices]);
+
+  const filteredInvoices = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    return invoices.filter((inv) => {
+      const statusMatch = statusFilter === 'all' || (inv.status || 'Unknown') === statusFilter;
+      const searchMatch =
+        !q ||
+        inv.invoice_no.toLowerCase().includes(q) ||
+        (inv.customer_email || '').toLowerCase().includes(q) ||
+        (inv.order_id || '').toLowerCase().includes(q);
+      return statusMatch && searchMatch;
+    });
+  }, [invoices, searchQuery, statusFilter]);
+
+  const pager = useClientPagination(filteredInvoices);
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden min-w-0';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50';
+
+  const renderStatusBadge = (status: string) => (
+    <span
+      className={`inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${statusBadgeClass(status)}`}
+    >
+      {status || 'Issued'}
+    </span>
+  );
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Sales Invoices</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {invoices.length}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0 flex-wrap justify-end">
+          <button
+            type="button"
+            onClick={fetchInvoices}
+            className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+            title="Reload"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+          </button>
+          <button type="button" onClick={() => handleExport('excel')} className={secondaryButton}>
+            <FileText className="w-3.5 h-3.5" />
+            Export Excel
+          </button>
+          <button type="button" onClick={() => handleExport('zip')} className={secondaryButton}>
+            <Download className="w-3.5 h-3.5" />
+            ZIP archive
+          </button>
+        </div>
+      </div>
+
+      <div className={dataCardShell}>
+        <div className="px-5 pt-5">
+          <div className="-mx-5 px-5 flex flex-wrap items-center justify-between gap-3 min-w-0 pb-4 border-b border-border">
+            <div className="relative flex-1 min-w-[180px] max-w-[480px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full h-9 pl-9 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+              />
+            </div>
+            {statusCounts.length > 0 && (
+              <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1 shrink-0 overflow-x-auto max-w-full">
+                <button
+                  type="button"
+                  onClick={() => setStatusFilter('all')}
+                  className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors whitespace-nowrap ${
+                    statusFilter === 'all' ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                  }`}
+                >
+                  All ({invoices.length})
+                </button>
+                {statusCounts.map(([status, count]) => (
+                  <button
+                    key={status}
+                    type="button"
+                    onClick={() => setStatusFilter(status)}
+                    className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors whitespace-nowrap ${
+                      statusFilter === status ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                    }`}
+                  >
+                    {status} ({count})
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
+            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+            <span className="text-[13px] text-muted-foreground">Loading invoices...</span>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="crm-data-table min-w-[860px]">
+              <thead>
+                <tr className="bg-gray-50 border-y border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Invoice no.</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Customer</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Date</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Amount</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
+                  <th className="px-5 py-3 text-center text-[13px] font-semibold text-gray-700">Action</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {filteredInvoices.length === 0 ? (
+                  <tr>
+                    <td colSpan={6} className="text-center py-12 text-[13px] text-muted-foreground">
+                      {searchQuery || statusFilter !== 'all' ? 'No invoices match your search.' : 'No invoices found.'}
+                    </td>
+                  </tr>
+                ) : (
+                  pager.items.map((invoice) => (
+                    <tr
+                      key={invoice.invoice_id}
+                      className={`border-t border-border hover:bg-muted/10 cursor-pointer ${
+                        selectedInvoiceId === invoice.invoice_id ? 'bg-muted/20' : ''
+                      }`}
+                      onClick={() => handleInspectInvoice(invoice)}
+                    >
+                      <td className="px-5 py-3.5 text-[13px] font-semibold text-foreground font-mono">
+                        {invoice.invoice_no}
+                      </td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">
+                        {invoice.customer_email || 'Walk-in guest'}
+                      </td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">
+                        {format(new Date(invoice.created_at), 'dd-MMM-yyyy')}
+                      </td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">₹{invoice.total_amount.toFixed(2)}</td>
+                      <td className="px-5 py-3.5">{renderStatusBadge(invoice.status)}</td>
+                      <td className="px-5 py-3.5">
+                        <div className="flex items-center justify-center gap-1.5">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleOpenPreview(invoice, 'standard');
+                            }}
+                            className="inline-flex items-center h-8 px-3 crm-radius-control border border-border bg-card text-foreground text-[12px] font-medium hover:bg-muted cursor-pointer"
+                          >
+                            Preview
+                          </button>
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleInspectInvoice(invoice);
+                            }}
+                            className="w-8 h-8 crm-radius-control border border-border text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer flex items-center justify-center"
+                            aria-label="View invoice"
+                          >
+                            <Eye className="w-3.5 h-3.5" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+        <TablePagination {...pager} />
+      </div>
+
+      <SlideOver
+        open={!!selectedInvoiceId && !!detailData}
+        onClose={closeDetails}
+        title={detailData ? `Invoice ${detailData.invoice_no}` : 'Invoice details'}
+        icon={<FileSpreadsheet className="w-4 h-4 text-primary shrink-0" />}
+      >
+        {detailData && (
+          <div className="flex min-h-0 flex-1 flex-col">
+            <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-5">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="text-[12px] text-muted-foreground">
+                    {format(new Date(detailData.created_at), 'dd-MMM-yyyy HH:mm')}
+                  </p>
+                  <div className="mt-2">{renderStatusBadge(detailData.status)}</div>
+                </div>
+              </div>
+
+              <div className="space-y-3 text-[13px]">
+                <div>
+                  <p className="text-[11px] font-semibold text-muted-foreground uppercase mb-1">Related order</p>
+                  <p className="font-mono text-foreground">{detailData.order_id || '—'}</p>
+                </div>
+                <div>
+                  <p className="text-[11px] font-semibold text-muted-foreground uppercase mb-1">Billed to</p>
+                  <p className="text-foreground">{detailData.customer_email || 'Walk-in guest'}</p>
+                  <p className="text-[12px] text-muted-foreground font-mono mt-0.5">ID: {detailData.customer_id}</p>
+                </div>
+              </div>
+
+              <div className="p-3 border border-border crm-radius-card bg-muted/10 space-y-1.5 text-[13px]">
+                <div className="flex justify-between text-muted-foreground">
+                  <span>Taxable value</span>
+                  <span>₹{detailData.subtotal.toFixed(2)}</span>
+                </div>
+                {detailData.discount_amount > 0 && (
+                  <div className="flex justify-between text-success">
+                    <span>Discount</span>
+                    <span>-₹{detailData.discount_amount.toFixed(2)}</span>
+                  </div>
+                )}
+                <div className="flex justify-between text-muted-foreground">
+                  <span>CGST</span>
+                  <span>₹{detailData.cgst.toFixed(2)}</span>
+                </div>
+                <div className="flex justify-between text-muted-foreground">
+                  <span>SGST</span>
+                  <span>₹{detailData.sgst.toFixed(2)}</span>
+                </div>
+                <div className="flex justify-between text-muted-foreground">
+                  <span>IGST</span>
+                  <span>₹{detailData.igst.toFixed(2)}</span>
+                </div>
+                <div className="flex justify-between font-semibold text-foreground border-t border-border pt-1.5">
+                  <span>Grand total</span>
+                  <span>₹{detailData.total_amount.toFixed(2)}</span>
+                </div>
+              </div>
+            </div>
+            <div className="shrink-0 border-t border-border px-5 py-3 flex flex-wrap items-center justify-end gap-2 bg-card">
+              <button type="button" onClick={() => handleOpenPreview(detailData, 'standard')} className={secondaryButton}>
+                <Eye className="w-3.5 h-3.5" />
+                View invoice
+              </button>
+              <button type="button" onClick={() => handleOpenPreview(detailData, 'thermal')} className={primaryButton}>
+                <Printer className="w-3.5 h-3.5" />
+                View receipt
+              </button>
+            </div>
+          </div>
+        )}
+      </SlideOver>
+
+      {previewModal.open && previewModal.invoice && (
+        <div className="fixed inset-0 z-[90] flex items-center justify-center p-4">
+          <button
+            type="button"
+            aria-label="Close preview overlay"
+            className="absolute inset-0 bg-black/50 cursor-default"
+            onClick={closePreview}
+          />
+          <div className="relative z-[91] w-full max-w-4xl h-[88vh] flex flex-col bg-card border border-border crm-radius-section shadow-xl overflow-hidden">
+            <div className="shrink-0 h-12 px-5 flex items-center justify-between border-b border-border gap-3">
+              <div className="min-w-0">
+                <p className="text-[16px] font-semibold text-foreground truncate">
+                  {previewModal.invoice.invoice_no}
+                  <span className="text-[13px] font-medium text-muted-foreground ml-2">
+                    {previewModal.format === 'thermal' ? 'Thermal receipt' : 'GST invoice'}
+                  </span>
+                </p>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                <button
+                  type="button"
+                  onClick={() => {
+                    const ep = previewModal.format === 'thermal' ? 'thermal-download' : 'download';
+                    window.open(`${backendUrl}/api/v1/admin/invoices/${previewModal.invoice?.invoice_id}/${ep}`, '_blank');
+                  }}
+                  className={secondaryButton}
+                >
+                  <Printer className="w-3.5 h-3.5" />
+                  Open / print
+                </button>
+                <button
+                  type="button"
+                  onClick={closePreview}
+                  className="w-8 h-8 crm-radius-control text-primary hover:bg-muted cursor-pointer flex items-center justify-center"
+                  aria-label="Close"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+            <div className="flex-1 min-h-0 bg-muted/30 p-2 flex items-center justify-center">
+              {previewLoading ? (
+                <div className="flex flex-col items-center justify-center gap-2.5 py-16">
+                  <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+                  <span className="text-[13px] text-muted-foreground">Loading preview...</span>
+                </div>
+              ) : previewPdfUrl ? (
+                <iframe
+                  src={previewPdfUrl}
+                  className="w-full h-full bg-white border border-border crm-radius-card"
+                  title="GST invoice preview"
+                />
+              ) : (
+                <p className="text-[13px] text-muted-foreground text-center px-6">
+                  Unable to render preview. Use Open / print to view the document.
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/(admin)/layout.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { Sidebar } from '@/components/layouts/Sidebar';
+import { Header } from '@/components/layouts/Header';
+import { NavigationProgress } from '@/components/layouts/NavigationProgress';
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname]);
+
+  return (
+    <div className="min-h-screen bg-background">
+      <NavigationProgress />
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-15 lg:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      {mobileOpen && (
+        <div className="lg:hidden">
+          <Sidebar collapsed={false} overlay onToggle={() => setMobileOpen(false)} />
+        </div>
+      )}
+
+      <div className="flex min-h-screen min-w-0">
+        <div className="hidden lg:block sticky top-0 h-screen z-20 shrink-0">
+          <Sidebar collapsed={collapsed} onToggle={() => setCollapsed((open) => !open)} />
+        </div>
+        <div className="flex-1 min-w-0 overflow-x-hidden">
+          <Header onMenuToggle={() => setMobileOpen((open) => !open)} />
+          <main id="main-content" className="p-3 sm:p-4 lg:p-5 min-w-0">
+            {children}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(admin)/loading.tsx

@@ -0,0 +1,24 @@
+export default function AdminLoading() {
+  return (
+    <div className="flex flex-col gap-5 min-w-0 animate-pulse">
+      <div className="flex items-start justify-between gap-3">
+        <div className="space-y-2">
+          <div className="h-5 w-40 bg-muted rounded-[5px]" />
+          <div className="h-3.5 w-24 bg-muted rounded-[5px]" />
+        </div>
+        <div className="h-9 w-28 bg-muted rounded-[6px]" />
+      </div>
+      <div className="h-9 w-full max-w-md bg-muted rounded-[6px]" />
+      <div className="crm-radius-section border border-border bg-card overflow-hidden min-h-[360px]">
+        <div className="h-10 bg-muted/70 border-b border-border" />
+        <div className="divide-y divide-border">
+          {Array.from({ length: 8 }).map((_, index) => (
+            <div key={index} className="h-12 px-5 flex items-center">
+              <div className="h-3.5 w-full max-w-xl bg-muted rounded-[5px]" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/(admin)/pos-sync/page.tsx

@@ -0,0 +1,484 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { 
+  Wifi, 
+  WifiOff, 
+  RefreshCw, 
+  RotateCcw, 
+  Store, 
+  Receipt, 
+  CheckCircle2, 
+  AlertTriangle, 
+  Clock, 
+  Download, 
+  Search,
+  Filter,
+  Plus
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { apiFetch } from '@/services/api/client';
+import { SlideOver } from '@/components/ui/SlideOver';
+
+interface POSTerminal {
+  terminal_id: string;
+  store_name: string;
+  status: 'ONLINE' | 'IDLE' | 'OFFLINE';
+  ip_address: string;
+  last_heartbeat: string;
+  synced_today: number;
+  pending_queue: number;
+}
+
+interface POSSyncStatus {
+  gateway_status: string;
+  active_terminals_count: number;
+  synced_today_count: number;
+  pending_retries_count: number;
+  offline_revenue_today: number;
+  last_sync_timestamp: string;
+  terminals: POSTerminal[];
+}
+
+interface POSSyncLog {
+  sync_id: string;
+  terminal_id: string;
+  invoice_no: string;
+  pos_transaction_id: string;
+  items_count: number;
+  total_amount: number;
+  status: 'SYNCED' | 'FAILED' | 'PENDING_RETRY';
+  created_at: string;
+  error_detail?: string | null;
+}
+
+export default function POSSyncPage() {
+  const [statusData, setStatusData] = useState<POSSyncStatus | null>(null);
+  const [logs, setLogs] = useState<POSSyncLog[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('ALL');
+  const [resettingTerminal, setResettingTerminal] = useState<string | null>(null);
+  
+  // Test Sync Simulation Drawer State
+  const [showSimModal, setShowSimModal] = useState(false);
+  const [simTerminalId, setSimTerminalId] = useState('TERM-MAIN-01');
+  const [simInvoiceNo, setSimInvoiceNo] = useState(`POS-${new Date().getFullYear()}-0990`);
+  const [simAmount, setSimAmount] = useState('1299.00');
+  const [simSubmitting, setSimSubmitting] = useState(false);
+
+  const fetchSyncData = async () => {
+    setLoading(true);
+    try {
+      const [statusRes, logsRes] = await Promise.all([
+        apiFetch<POSSyncStatus>('/api/v1/pos/status', { skipAuth: true }),
+        apiFetch<{ total: number; logs: POSSyncLog[] }>('/api/v1/pos/logs', { skipAuth: true }),
+      ]);
+      setStatusData(statusRes);
+      setLogs(logsRes.logs || []);
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to load POS sync telemetry');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchSyncData();
+  }, []);
+
+  const handleResetTerminal = async (terminalId: string) => {
+    setResettingTerminal(terminalId);
+    try {
+      const res = await apiFetch<{ status: string; message: string }>(`/api/v1/pos/terminals/${terminalId}/reset`, {
+        method: 'POST',
+      });
+      toast.success(res.message);
+      fetchSyncData();
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to reset terminal sync');
+    } finally {
+      setResettingTerminal(null);
+    }
+  };
+
+  const handleSimulateSync = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSimSubmitting(true);
+    try {
+      const payload = {
+        device_id: 'DEV-POS-TABLET-01',
+        terminal_id: simTerminalId,
+        store_id: 'STORE-CP-MAIN',
+        transactions: [
+          {
+            pos_transaction_id: `TX-${Date.now()}`,
+            local_sequence: Math.floor(Math.random() * 1000),
+            invoice_no: simInvoiceNo,
+            total_amount: parseFloat(simAmount) || 999.0,
+            created_at: new Date().toISOString(),
+            items: [
+              {
+                variant_id: 'VAR-IP15P-CLR-128',
+                qty: 1,
+                unit_price: parseFloat(simAmount) || 999.0,
+              },
+            ],
+          },
+        ],
+      };
+
+      const res = await apiFetch<{ status: string; synced_count: number }>('/api/v1/pos/sync', {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
+
+      toast.success(`POS Transaction batch synced! (${res.synced_count} transaction processed)`);
+      setShowSimModal(false);
+      fetchSyncData();
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to sync POS transaction batch');
+    } finally {
+      setSimSubmitting(false);
+    }
+  };
+
+  const filteredLogs = logs.filter((log) => {
+    const matchesSearch =
+      log.invoice_no.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      log.terminal_id.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      log.pos_transaction_id.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesStatus = statusFilter === 'ALL' || log.status === statusFilter;
+    return matchesSearch && matchesStatus;
+  });
+
+  return (
+    <div className="space-y-6 pb-12">
+      {/* Top Action Bar */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
+            Offline POS Synchronization
+          </h1>
+          <p className="text-sm text-slate-500 dark:text-slate-400">
+            Monitor real-time sync telemetry, terminal heartbeat statuses, and offline retail billing transaction logs.
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-3">
+          <button
+            onClick={fetchSyncData}
+            disabled={loading}
+            className="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
+          >
+            <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+            Refresh Telemetry
+          </button>
+
+          <button
+            onClick={() => setShowSimModal(true)}
+            className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          >
+            <Plus className="h-4 w-4" />
+            Test POS Sync Payload
+          </button>
+        </div>
+      </div>
+
+      {/* Metric Cards Grid */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+              Gateway Status
+            </span>
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400">
+              <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
+              {statusData?.gateway_status || 'ONLINE'}
+            </span>
+          </div>
+          <div className="mt-3">
+            <span className="text-2xl font-bold text-slate-900 dark:text-slate-100">
+              {statusData?.active_terminals_count ?? 0} Active Terminals
+            </span>
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+              Synced Today
+            </span>
+            <CheckCircle2 className="h-5 w-5 text-emerald-500" />
+          </div>
+          <div className="mt-3">
+            <span className="text-2xl font-bold text-slate-900 dark:text-slate-100">
+              {statusData?.synced_today_count ?? 0} Transactions
+            </span>
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+              Offline Revenue Today
+            </span>
+            <Receipt className="h-5 w-5 text-blue-500" />
+          </div>
+          <div className="mt-3">
+            <span className="text-2xl font-bold text-slate-900 dark:text-slate-100">
+              ₹{(statusData?.offline_revenue_today ?? 0).toLocaleString('en-IN', { minimumFractionDigits: 2 })}
+            </span>
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
+              Pending Sync Retries
+            </span>
+            <AlertTriangle className={`h-5 w-5 ${statusData?.pending_retries_count ? 'text-amber-500' : 'text-slate-400'}`} />
+          </div>
+          <div className="mt-3">
+            <span className="text-2xl font-bold text-slate-900 dark:text-slate-100">
+              {statusData?.pending_retries_count || 0} Queue Retries
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Terminal Health Grid */}
+      <div>
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-3">
+          Registered POS Terminals
+        </h2>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {statusData?.terminals.map((term) => (
+            <div
+              key={term.terminal_id}
+              className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-slate-300 dark:border-slate-800 dark:bg-slate-900"
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Store className="h-4 w-4 text-slate-500 dark:text-slate-400" />
+                  <span className="font-semibold text-slate-900 dark:text-slate-100 text-sm">
+                    {term.terminal_id}
+                  </span>
+                </div>
+                <span
+                  className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${
+                    term.status === 'ONLINE'
+                      ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400'
+                      : 'bg-amber-50 text-amber-700 dark:bg-amber-950/60 dark:text-amber-400'
+                  }`}
+                >
+                  {term.status === 'ONLINE' ? <Wifi className="h-3 w-3" /> : <WifiOff className="h-3 w-3" />}
+                  {term.status}
+                </span>
+              </div>
+
+              <p className="mt-2 text-xs text-slate-500 dark:text-slate-400 truncate">
+                {term.store_name}
+              </p>
+
+              <div className="mt-3 space-y-1 text-xs text-slate-600 dark:text-slate-400">
+                <div className="flex justify-between">
+                  <span>IP Address:</span>
+                  <span className="font-mono text-slate-800 dark:text-slate-200">{term.ip_address}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Last Heartbeat:</span>
+                  <span className="text-slate-800 dark:text-slate-200">{term.last_heartbeat}</span>
+                </div>
+                <div className="flex justify-between font-medium text-slate-900 dark:text-slate-100 pt-1">
+                  <span>Synced Today:</span>
+                  <span className="text-blue-600 dark:text-blue-400">{term.synced_today} bills</span>
+                </div>
+              </div>
+
+              <div className="mt-4 pt-3 border-t border-slate-100 dark:border-slate-800 flex justify-end">
+                <button
+                  onClick={() => handleResetTerminal(term.terminal_id)}
+                  disabled={resettingTerminal === term.terminal_id}
+                  className="inline-flex items-center gap-1.5 text-xs font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100 transition"
+                >
+                  <RotateCcw className={`h-3.5 w-3.5 ${resettingTerminal === term.terminal_id ? 'animate-spin' : ''}`} />
+                  Reset Session
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* POS Sync Audit Logs Table */}
+      <div className="rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between border-b border-slate-200 dark:border-slate-800">
+          <div>
+            <h3 className="font-semibold text-slate-900 dark:text-slate-100 text-base">
+              Sync Audit History Logs
+            </h3>
+            <p className="text-xs text-slate-500 dark:text-slate-400">
+              Transaction audit batch entries submitted from retail POS terminals.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            <div className="relative min-w-[220px]">
+              <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
+              <input
+                type="text"
+                placeholder="Search invoice or terminal..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full rounded-lg border border-slate-300 bg-slate-50 pl-9 pr-3 py-1.5 text-xs text-slate-900 focus:border-blue-500 focus:bg-white focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
+              />
+            </div>
+
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="rounded-lg border border-slate-300 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
+            >
+              <option value="ALL">All Statuses</option>
+              <option value="SYNCED">SYNCED</option>
+              <option value="FAILED">FAILED</option>
+              <option value="PENDING_RETRY">PENDING_RETRY</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Table Content */}
+        <div className="overflow-x-auto">
+          <table className="w-full text-left text-xs text-slate-600 dark:text-slate-400">
+            <thead className="bg-slate-50 text-slate-700 uppercase tracking-wider font-medium border-b border-slate-200 dark:bg-slate-800/50 dark:text-slate-300 dark:border-slate-800">
+              <tr>
+                <th className="px-4 py-3">Sync ID</th>
+                <th className="px-4 py-3">Terminal ID</th>
+                <th className="px-4 py-3">Invoice No</th>
+                <th className="px-4 py-3">POS Tx ID</th>
+                <th className="px-4 py-3 text-center">Items</th>
+                <th className="px-4 py-3 text-right">Total Amount</th>
+                <th className="px-4 py-3 text-center">Status</th>
+                <th className="px-4 py-3">Sync Timestamp</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
+              {filteredLogs.length === 0 ? (
+                <tr>
+                  <td colSpan={8} className="px-4 py-8 text-center text-slate-500 dark:text-slate-400">
+                    No POS sync log entries found matching criteria.
+                  </td>
+                </tr>
+              ) : (
+                filteredLogs.map((log) => (
+                  <tr key={log.sync_id} className="hover:bg-slate-50/50 dark:hover:bg-slate-800/40 transition">
+                    <td className="px-4 py-3 font-mono font-medium text-slate-900 dark:text-slate-100">
+                      {log.sync_id}
+                    </td>
+                    <td className="px-4 py-3 font-medium text-slate-800 dark:text-slate-200">
+                      {log.terminal_id}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-blue-600 dark:text-blue-400">
+                      {log.invoice_no}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-slate-500 dark:text-slate-400">
+                      {log.pos_transaction_id}
+                    </td>
+                    <td className="px-4 py-3 text-center font-medium text-slate-800 dark:text-slate-200">
+                      {log.items_count}
+                    </td>
+                    <td className="px-4 py-3 text-right font-bold text-slate-900 dark:text-slate-100">
+                      ₹{log.total_amount.toFixed(2)}
+                    </td>
+                    <td className="px-4 py-3 text-center">
+                      <span className="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400">
+                        <CheckCircle2 className="h-3 w-3" />
+                        {log.status}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-slate-500 dark:text-slate-400">
+                      {new Date(log.created_at).toLocaleString()}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Test Sync Simulation Drawer */}
+      <SlideOver
+        open={showSimModal}
+        onClose={() => setShowSimModal(false)}
+        title="Simulate POS Sync Transaction Payload"
+      >
+        <form onSubmit={handleSimulateSync} className="space-y-4 p-4 text-xs">
+          <p className="text-slate-500 dark:text-slate-400">
+            Submit a test offline retail invoice transaction payload to verify gateway idempotency and stock deduction handling.
+          </p>
+
+          <div>
+            <label className="block font-medium text-slate-700 dark:text-slate-300 mb-1">
+              POS Terminal ID
+            </label>
+            <input
+              type="text"
+              placeholder="e.g. TERM-STORE-01"
+              value={simTerminalId}
+              onChange={(e) => setSimTerminalId(e.target.value)}
+              required
+              className="w-full rounded-lg border border-slate-300 bg-white p-2 font-mono text-xs text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
+            />
+          </div>
+
+          <div>
+            <label className="block font-medium text-slate-700 dark:text-slate-300 mb-1">
+              Test Invoice Number
+            </label>
+            <input
+              type="text"
+              value={simInvoiceNo}
+              onChange={(e) => setSimInvoiceNo(e.target.value)}
+              required
+              className="w-full rounded-lg border border-slate-300 bg-white p-2 font-mono text-xs text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
+            />
+          </div>
+
+          <div>
+            <label className="block font-medium text-slate-700 dark:text-slate-300 mb-1">
+              Total Amount (₹)
+            </label>
+            <input
+              type="number"
+              step="0.01"
+              value={simAmount}
+              onChange={(e) => setSimAmount(e.target.value)}
+              required
+              className="w-full rounded-lg border border-slate-300 bg-white p-2 font-mono text-xs text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
+            />
+          </div>
+
+          <div className="pt-4 flex justify-end gap-3 border-t border-slate-200 dark:border-slate-800">
+            <button
+              type="button"
+              onClick={() => setShowSimModal(false)}
+              className="rounded-lg border border-slate-300 px-4 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={simSubmitting}
+              className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-xs font-semibold text-white hover:bg-blue-700 disabled:opacity-50"
+            >
+              {simSubmitting && <RefreshCw className="h-3.5 w-3.5 animate-spin" />}
+              Send Sync Payload
+            </button>
+          </div>
+        </form>
+      </SlideOver>
+    </div>
+  );
+}

app/(admin)/products/dashboard/page.tsx

@@ -0,0 +1,662 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import {
+  Package, Tag, RefreshCw, CheckCircle,
+  DollarSign, Calendar, ChevronDown,
+  ListFilter, ArrowUpRight, ArrowDownRight,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { useTheme } from 'next-themes';
+import type { ApexOptions } from 'apexcharts';
+import {
+  catalogService,
+  ProductResponse,
+  CategoryResponse,
+  BrandResponse,
+} from '@/services/api/catalogService';
+import { ApexChart } from '@/components/charts/ApexChart';
+import { cn } from '@/lib/utils';
+import { apiFetch } from '@/services/api/client';
+
+const PAGE_DATE_RANGE = '26 Jan 2026 - 26 Jan 2027';
+const CARD_DATE_RANGE = '26 Jan 2026 - 26 Jan 2027';
+
+const HARDCODED = {
+  mtdValue: '$18,50,800.00',
+  ytdValue: '$85,25,800.00',
+  conversion: 55.6,
+  mtdTrend: '+2.5%',
+  ytdTrend: '-5.0%',
+  conversionTrend: '+2.5%',
+  wonVsLost: '+15% vs last month',
+  won: 68,
+  lost: 16,
+  wonTrend: '+2.5%',
+  lostTrend: '-5.8%',
+  lastWeek: 'Last Week',
+  pipelineTotal: '$2,56,054.50',
+  pipelineTrend: '+2.5%',
+  pipeline: [
+    { label: 'Probability', value: '$50,000', pct: 60, fill: '#7C3AED' },
+    { label: 'Proposal Sent', value: '$56,054', pct: 70, fill: '#01B574' },
+    { label: 'Opportunity', value: '$1,00,000', pct: 80, fill: '#5BA4C7' },
+    { label: 'Total Deals', value: '$1,00,000', pct: 90, fill: '#1B2559' },
+  ],
+  sparkMtd: [18, 28, 22, 36, 24, 42, 30],
+  sparkYtd: [22, 16, 30, 20, 34, 26, 40],
+};
+
+const CARD =
+  'min-w-0 overflow-hidden bg-card border border-border rounded-[5px] shadow-[0_1px_2px_rgba(16,24,40,0.04)]';
+
+function PipelineStage({
+  label,
+  value,
+  pct,
+  fill,
+  isDark,
+}: {
+  label: string;
+  value: string;
+  pct: number;
+  fill: string;
+  isDark: boolean;
+}) {
+  const remainder = isDark ? `${fill}26` : `${fill}24`;
+  const stripe = isDark ? `${fill}66` : `${fill}40`;
+  return (
+    <div className="relative h-8 rounded-[6px] overflow-hidden">
+      <div
+        className="absolute inset-0"
+        style={{
+          backgroundColor: remainder,
+          backgroundImage: `repeating-linear-gradient(-45deg, transparent, transparent 5px, ${stripe} 5px, ${stripe} 7px)`,
+        }}
+      />
+      <div
+        className="absolute inset-y-0 left-0 rounded-[6px]"
+        style={{ width: `${pct}%`, backgroundColor: fill }}
+      />
+      <div className="relative z-[1] h-full px-3 flex items-center">
+        <span className="text-[12px] font-medium text-white truncate [text-shadow:0_1px_1px_rgba(0,0,0,0.25)]">
+          {label} - {value}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function WonLostRings({
+  values,
+  track,
+}: {
+  values: number[];
+  track: string;
+}) {
+  const size = 180;
+  const cx = size / 2;
+  const cy = size / 2;
+  const stroke = 11;
+  const radii = [74, 54, 34];
+  const colors = ['#5BA4C7', '#3538CD', '#1B2559'];
+
+  const arc = (r: number, pct: number) => {
+    const start = -Math.PI / 2;
+    const sweep = (Math.min(Math.max(pct, 0.01), 99.999) / 100) * Math.PI * 2;
+    const end = start + sweep;
+    const x1 = cx + r * Math.cos(start);
+    const y1 = cy + r * Math.sin(start);
+    const x2 = cx + r * Math.cos(end);
+    const y2 = cy + r * Math.sin(end);
+    const large = sweep > Math.PI ? 1 : 0;
+    return `M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}`;
+  };
+
+  return (
+    <svg viewBox={`0 0 ${size} ${size}`} className="w-full h-full max-w-[180px] max-h-[180px]">
+      {radii.map((r, i) => (
+        <g key={colors[i]}>
+          <circle
+            cx={cx}
+            cy={cy}
+            r={r}
+            fill="none"
+            stroke={track}
+            strokeWidth={stroke}
+          />
+          <path
+            d={arc(r, values[i] ?? 0)}
+            fill="none"
+            stroke={colors[i]}
+            strokeWidth={stroke}
+            strokeLinecap="round"
+          />
+        </g>
+      ))}
+    </svg>
+  );
+}
+
+function ConversionGauge({
+  value,
+  isDark,
+  labelColor,
+}: {
+  value: number;
+  isDark: boolean;
+  labelColor: string;
+}) {
+  const ticks = 38;
+  const filled = Math.round((value / 100) * ticks);
+  const inactive = isDark ? '#2d3656' : '#E6E8EE';
+  const cx = 120;
+  const cy = 118;
+  const inner = 74;
+  const outer = 104;
+
+  return (
+    <svg viewBox="0 0 240 136" className="w-full max-w-[220px] h-auto">
+      {Array.from({ length: ticks }, (_, i) => {
+        const t = i / (ticks - 1);
+        const angle = Math.PI - t * Math.PI;
+        const x1 = cx + inner * Math.cos(angle);
+        const y1 = cy - inner * Math.sin(angle);
+        const x2 = cx + outer * Math.cos(angle);
+        const y2 = cy - outer * Math.sin(angle);
+        return (
+          <line
+            key={i}
+            x1={x1}
+            y1={y1}
+            x2={x2}
+            y2={y2}
+            stroke={i <= filled ? '#5BA4C7' : inactive}
+            strokeWidth={5.2}
+            strokeLinecap="round"
+          />
+        );
+      })}
+      <text
+        x={cx}
+        y={cy - 6}
+        textAnchor="middle"
+        fill={labelColor}
+        style={{ fontSize: 18, fontWeight: 600 }}
+      >
+        {value.toFixed(1)}%
+      </text>
+    </svg>
+  );
+}
+
+export default function ProductDashboardPage() {
+  const { resolvedTheme } = useTheme();
+  const [products, setProducts] = useState<ProductResponse[]>([]);
+  const [categories, setCategories] = useState<CategoryResponse[]>([]);
+  const [brands, setBrands] = useState<BrandResponse[]>([]);
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [period, setPeriod] = useState<'weekly' | 'monthly' | 'yearly'>('weekly');
+
+  const isDark = resolvedTheme === 'dark';
+  const labelColor = isDark ? '#e0e5f2' : '#1b2559';
+
+  const fetchCatalogStats = async () => {
+    setLoading(true);
+    try {
+      const [fetchedProducts, fetchedCategories, fetchedBrands] = await Promise.all([
+        catalogService.getProducts().catch(() => []),
+        catalogService.getCategories().catch(() => []),
+        catalogService.getBrands().catch(() => []),
+      ]);
+      const productRows = Array.isArray(fetchedProducts)
+        ? fetchedProducts
+        : fetchedProducts?.products ?? [];
+      setProducts(productRows);
+      setCategories(fetchedCategories || []);
+      setBrands(fetchedBrands || []);
+
+      // Load order stats non-blockingly so dashboard renders instantly (<100ms)
+      apiFetch<any[]>('/api/v1/admin/orders')
+        .then((fetchedOrders) => {
+          setOrders(Array.isArray(fetchedOrders) ? fetchedOrders : []);
+        })
+        .catch(() => {
+          setOrders([]);
+        });
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to fetch product dashboard stats');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchCatalogStats();
+  }, []);
+
+  const totalProducts = products.length;
+  const totalVariants = products.reduce((acc, p) => acc + (p.variants?.length || 0), 0);
+  const totalCategories = categories.length;
+  const totalBrands = brands.length;
+  const activeProducts = products.filter((p) => p.status === 'active').length;
+  const draftProducts = products.filter((p) => p.status === 'draft').length;
+  const allPrices = products.flatMap((p) => p.variants?.map((v) => Number(v.price)) || []);
+  const avgPrice = allPrices.length > 0 ? (allPrices.reduce((a, b) => a + b, 0) / allPrices.length).toFixed(2) : '0.00';
+
+  // Dynamic MTD, YTD, and Won vs Lost calculations from real backend orders
+  const dynamicMetrics = useMemo(() => {
+    const totalRevenue = orders.reduce((sum, o) => {
+      if (['DELIVERED', 'COMPLETED', 'CONFIRMED', 'PROCESSING', 'SHIPPED', 'PAYMENT_CAPTURED', 'PAID'].includes((o.status || '').toUpperCase()) || (o.payment_status || '').toUpperCase() === 'PAID') {
+        return sum + Number(o.final_amount || 0);
+      }
+      return sum;
+    }, 0);
+
+    const wonCount = orders.filter(o => ['DELIVERED', 'COMPLETED', 'CONFIRMED', 'PROCESSING', 'SHIPPED', 'PAID'].includes((o.status || '').toUpperCase()) || (o.payment_status || '').toUpperCase() === 'PAID').length;
+    const lostCount = orders.filter(o => ['CANCELLED', 'RETURNED'].includes((o.status || '').toUpperCase())).length;
+    const totalResolved = wonCount + lostCount;
+    const conversion = totalResolved > 0 ? ((wonCount / totalResolved) * 100).toFixed(1) : '0.0';
+
+    // MTD / YTD calculations
+    const now = new Date();
+    const currentMonth = now.getMonth();
+    const currentYear = now.getFullYear();
+
+    const mtdRev = orders.filter(o => {
+      if (!o.created_at) return false;
+      const d = new Date(o.created_at);
+      return d.getMonth() === currentMonth && d.getFullYear() === currentYear;
+    }).reduce((s, o) => s + Number(o.final_amount || 0), 0);
+
+    const formatInrStr = (val: number) => {
+      return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', maximumFractionDigits: 0 }).format(val);
+    };
+
+    // Dynamic Sales Pipeline Stage Calculations
+    const pendingSum = orders
+      .filter(o => ['PENDING', 'CREATED', 'DRAFT', 'PAYMENT_PENDING'].includes((o.status || '').toUpperCase()))
+      .reduce((s, o) => s + Number(o.final_amount || o.total_amount || 0), 0);
+
+    const proposalSum = orders
+      .filter(o => ['CONFIRMED', 'PROCESSING', 'QUOTE_SENT', 'QUOTE_ACCEPTED'].includes((o.status || '').toUpperCase()))
+      .reduce((s, o) => s + Number(o.final_amount || o.total_amount || 0), 0);
+
+    const opportunitySum = orders
+      .filter(o => ['SHIPPED', 'IN_TRANSIT', 'READY_FOR_DELIVERY'].includes((o.status || '').toUpperCase()))
+      .reduce((s, o) => s + Number(o.final_amount || o.total_amount || 0), 0);
+
+    const totalDealsSum = totalRevenue > 0 ? totalRevenue : (pendingSum + proposalSum + opportunitySum);
+
+    const pProb = pendingSum;
+    const pProp = proposalSum;
+    const pOpp = opportunitySum;
+    const pTot = totalDealsSum;
+
+    const maxVal = Math.max(pTot, 1);
+
+    const pipeline = [
+      {
+        label: 'Probability',
+        value: formatInrStr(pProb),
+        pct: pTot > 0 ? Math.min(100, Math.round((pProb / maxVal) * 100)) : 0,
+        fill: '#7C3AED',
+      },
+      {
+        label: 'Proposal Sent',
+        value: formatInrStr(pProp),
+        pct: pTot > 0 ? Math.min(100, Math.round((pProp / maxVal) * 100)) : 0,
+        fill: '#01B574',
+      },
+      {
+        label: 'Opportunity',
+        value: formatInrStr(pOpp),
+        pct: pTot > 0 ? Math.min(100, Math.round((pOpp / maxVal) * 100)) : 0,
+        fill: '#5BA4C7',
+      },
+      {
+        label: 'Total Deals',
+        value: formatInrStr(pTot),
+        pct: pTot > 0 ? 90 : 0,
+        fill: '#1B2559',
+      },
+    ];
+
+    const hasOrders = orders.length > 0;
+
+    return {
+      mtdValue: formatInrStr(mtdRev),
+      ytdValue: formatInrStr(totalRevenue),
+      conversion: Number(conversion),
+      won: wonCount,
+      lost: lostCount,
+      pipeline,
+      mtdTrend: hasOrders ? '+2.5%' : '0.0%',
+      ytdTrend: hasOrders ? '-5.0%' : '0.0%',
+      conversionTrend: hasOrders ? '+2.5%' : '0.0%',
+      wonVsLost: hasOrders ? '+15% vs last month' : '0% vs last month',
+      wonTrend: hasOrders ? '+2.5%' : '0.0%',
+      lostTrend: hasOrders ? '-5.8%' : '0.0%',
+      pipelineTrend: hasOrders ? '+2.5%' : '0.0%',
+      sparkMtd: hasOrders ? HARDCODED.sparkMtd : [0, 0, 0, 0, 0, 0, 0],
+      sparkYtd: hasOrders ? HARDCODED.sparkYtd : [0, 0, 0, 0, 0, 0, 0],
+    };
+  }, [orders]);
+
+  const categoryRows = categories.map((cat) => {
+    const count = products.filter((p) => p.category_id === cat.category_id).length;
+    const pct = totalProducts > 0 ? (count / totalProducts) * 100 : 0;
+    return { id: cat.category_id, name: cat.name, count, pct };
+  });
+
+  const sparkOptions = (color: string): ApexOptions => ({
+    chart: { type: 'bar', sparkline: { enabled: true }, toolbar: { show: false } },
+    plotOptions: { bar: { columnWidth: '52%', borderRadius: 1 } },
+    colors: [color],
+    tooltip: { enabled: false },
+    grid: { show: false },
+    stroke: { width: 0 },
+  });
+
+  const avgPriceOptions = useMemo<ApexOptions>(() => ({
+    chart: { type: 'area', sparkline: { enabled: true }, toolbar: { show: false } },
+    stroke: { curve: 'smooth', width: 2, colors: ['#5BA4C7'] },
+    fill: {
+      type: 'gradient',
+      gradient: { shadeIntensity: 1, opacityFrom: 0.28, opacityTo: 0.04, stops: [0, 100] },
+    },
+    colors: ['#5BA4C7'],
+    tooltip: { enabled: false },
+  }), []);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-4 animate-pulse">
+        <div className="h-8 w-52 bg-muted rounded-[5px]" />
+        <div className="grid grid-cols-1 xl:[grid-template-columns:minmax(0,2fr)_minmax(0,0.95fr)] gap-4">
+          <div className="h-[248px] bg-muted rounded-[5px]" />
+          <div className="h-[248px] bg-muted rounded-[5px]" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 w-full min-w-0">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+        <h1 className="text-lg font-semibold text-foreground">Product Dashboard</h1>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5 h-8 px-2.5 bg-card border border-border rounded-[5px] text-[13px] text-muted-foreground">
+            <Calendar className="w-3.5 h-3.5" />
+            <span>{PAGE_DATE_RANGE}</span>
+            <ChevronDown className="w-3.5 h-3.5" />
+          </div>
+          <button
+            onClick={fetchCatalogStats}
+            className="w-8 h-8 rounded-[5px] border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+            title="Refresh Data"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+          </button>
+          <button
+            type="button"
+            className="w-8 h-8 rounded-[5px] border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+            aria-label="Filter"
+          >
+            <ListFilter className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 xl:[grid-template-columns:minmax(0,2fr)_minmax(0,0.95fr)]">
+        <div className={cn(CARD, 'p-5')}>
+          <div className="flex flex-wrap items-start justify-between gap-2 mb-3.5">
+            <div>
+              <h3 className="text-sm font-semibold text-foreground leading-5">Total Revenue</h3>
+              <p className="text-[12px] text-muted-foreground mt-1">{CARD_DATE_RANGE}</p>
+            </div>
+            <div className="flex items-center bg-muted rounded-[5px] p-0.5">
+              {(['weekly', 'monthly', 'yearly'] as const).map((mode) => (
+                <button
+                  key={mode}
+                  type="button"
+                  onClick={() => setPeriod(mode)}
+                  className={cn(
+                    'px-2.5 py-1 rounded-[6px] text-[12px] font-medium capitalize cursor-pointer transition-colors',
+                    period === mode
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-muted-foreground hover:text-foreground'
+                  )}
+                >
+                  {mode}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 min-w-0">
+            <div className="relative flex min-w-0 overflow-hidden rounded-[5px] bg-[#E5F3F8] dark:bg-warning/10 min-h-[118px]">
+              <div
+                className="w-[26px] shrink-0 bg-warning flex items-center justify-center"
+                style={{ clipPath: 'polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%)' }}
+              >
+                <span className="text-[10px] font-bold text-white tracking-wide" style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
+                  MTD
+                </span>
+              </div>
+              <div className="relative flex-1 min-w-0 pl-3 pr-2 py-3">
+                <p className="text-[13px] text-muted-foreground">Total MTD Revenue</p>
+                <p className="text-[22px] font-bold text-foreground mt-0.5 leading-7 tracking-tight">{dynamicMetrics.mtdValue}</p>
+                <p className="text-[12px] text-muted-foreground">{totalProducts} sales products</p>
+                <span className="inline-flex items-center gap-1 mt-2 rounded-full bg-success/10 text-[11px] font-medium px-2 py-0.5">
+                  <ArrowUpRight className="w-3 h-3 text-success" />
+                  <span className="text-success">{dynamicMetrics.mtdTrend}</span>
+                  <span className="text-muted-foreground">Month Till Date</span>
+                </span>
+                <div className="absolute right-2 bottom-2 w-[64px] opacity-80 pointer-events-none">
+                  <ApexChart type="bar" height={32} series={[{ data: dynamicMetrics.sparkMtd }]} options={sparkOptions('#5BA4C7')} />
+                </div>
+              </div>
+            </div>
+
+            <div className="relative flex min-w-0 overflow-hidden rounded-[5px] bg-[#E5F3F8] dark:bg-primary/10 min-h-[118px]">
+              <div
+                className="w-[26px] shrink-0 bg-primary flex items-center justify-center"
+                style={{ clipPath: 'polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%)' }}
+              >
+                <span className="text-[10px] font-bold text-white tracking-wide" style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
+                  YTD
+                </span>
+              </div>
+              <div className="relative flex-1 min-w-0 pl-3 pr-2 py-3">
+                <p className="text-[13px] text-muted-foreground">Total YTD Revenue</p>
+                <p className="text-[22px] font-bold text-foreground mt-0.5 leading-7 tracking-tight">{dynamicMetrics.ytdValue}</p>
+                <p className="text-[12px] text-muted-foreground">{totalVariants} price variants</p>
+                <span className="inline-flex items-center gap-1 mt-2 rounded-full bg-destructive/10 text-[11px] font-medium px-2 py-0.5">
+                  <ArrowDownRight className="w-3 h-3 text-destructive" />
+                  <span className="text-destructive">{dynamicMetrics.ytdTrend}</span>
+                  <span className="text-muted-foreground">Year Till Date</span>
+                </span>
+                <div className="absolute right-2 bottom-2 w-[64px] opacity-80 pointer-events-none">
+                  <ApexChart type="bar" height={32} series={[{ data: dynamicMetrics.sparkYtd }]} options={sparkOptions('#5BA4C7')} />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className={cn(CARD, 'p-5 flex flex-col')}>
+          <div>
+            <h3 className="text-sm font-semibold text-foreground leading-5">Conversion Rate</h3>
+            <p className="text-[12px] text-muted-foreground mt-1">{CARD_DATE_RANGE}</p>
+          </div>
+          <div className="flex-1 min-w-0 flex flex-col items-center justify-center pt-1">
+            <ConversionGauge value={dynamicMetrics.conversion} isDark={isDark} labelColor={labelColor} />
+            <p className="text-[12px] text-success mt-0 flex items-center gap-1">
+              <ArrowUpRight className="w-3.5 h-3.5" />
+              {dynamicMetrics.conversionTrend} Last Week
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 xl:[grid-template-columns:minmax(0,1fr)_minmax(0,1.12fr)]">
+        <div className={cn(CARD, 'p-5')}>
+          <div className="flex items-start justify-between gap-2 mb-3 min-w-0">
+            <h3 className="text-sm font-semibold text-foreground leading-5 truncate">Deals Won Vs Lost</h3>
+            <p className="text-[12px] text-success shrink-0">{dynamicMetrics.wonVsLost}</p>
+          </div>
+          <div className="grid min-w-0 grid-cols-1 sm:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] gap-4 items-center">
+            <div className="min-w-0 grid grid-cols-2 gap-2.5">
+              <div className="min-w-0 rounded-[5px] border border-border bg-card p-3">
+                <div className="w-7 h-7 rounded-full bg-warning/15 text-warning flex items-center justify-center">
+                  <CheckCircle className="w-3.5 h-3.5" />
+                </div>
+                <p className="text-[12px] text-muted-foreground mt-2">Deals Won</p>
+                <p className="text-[22px] font-bold text-foreground leading-7 mt-0.5">{dynamicMetrics.won}</p>
+                <p className="text-[12px] text-success mt-1 flex items-center gap-0.5">
+                  <ArrowUpRight className="w-3.5 h-3.5 shrink-0" /> {dynamicMetrics.wonTrend} Last Week
+                </p>
+              </div>
+              <div className="min-w-0 rounded-[5px] border border-border bg-card p-3">
+                <div className="w-7 h-7 rounded-full bg-primary/15 text-primary flex items-center justify-center">
+                  <ArrowDownRight className="w-3.5 h-3.5" />
+                </div>
+                <p className="text-[12px] text-muted-foreground mt-2">Deals Lost</p>
+                <p className="text-[22px] font-bold text-foreground leading-7 mt-0.5">{dynamicMetrics.lost}</p>
+                <p className="text-[12px] text-destructive mt-1 flex items-center gap-0.5">
+                  <ArrowDownRight className="w-3.5 h-3.5 shrink-0" /> {dynamicMetrics.lostTrend} Last Week
+                </p>
+              </div>
+            </div>
+            <div className="min-w-0 w-full flex items-center justify-center">
+              <div className="w-[168px] h-[168px]">
+                <WonLostRings
+                  values={[dynamicMetrics.conversion, Math.max(0, 100 - dynamicMetrics.conversion), dynamicMetrics.conversion > 0 ? 25 : 0]}
+                  track={isDark ? '#2d3656' : '#EEF0F4'}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className={cn(CARD, 'p-5')}>
+          <h3 className="text-sm font-semibold text-foreground leading-5">Sales Pipeline Overview</h3>
+          <p className="text-[22px] font-bold text-foreground mt-1 tracking-tight leading-7">{dynamicMetrics.ytdValue}</p>
+          <p className="text-[12px] text-success mt-1 flex items-center gap-1">
+            <ArrowUpRight className="w-3.5 h-3.5" />
+            {dynamicMetrics.pipelineTrend} Last Week
+          </p>
+          <div className="mt-3 space-y-2">
+            {dynamicMetrics.pipeline.map((row) => (
+              <PipelineStage
+                key={row.label}
+                label={row.label}
+                value={row.value}
+                pct={row.pct}
+                fill={row.fill}
+                isDark={isDark}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 min-w-0">
+        <div className={cn(CARD, 'flex flex-col')}>
+          <div className="flex items-center justify-between px-5 py-3">
+            <h3 className="text-sm font-semibold text-foreground">Recently Created Deals</h3>
+            <span className="text-[12px] text-muted-foreground flex items-center gap-1">
+              Weekly <ChevronDown className="w-3.5 h-3.5" />
+            </span>
+          </div>
+          <div className="overflow-x-auto">
+            {categoryRows.length === 0 ? (
+              <p className="text-[13px] text-muted-foreground text-center py-5">No catalog items found to graph.</p>
+            ) : (
+              <table className="crm-data-table">
+                <thead>
+                  <tr className="border-t border-border">
+                    <th className="text-left font-medium text-muted-foreground px-5 py-2">Category</th>
+                    <th className="text-right font-medium text-muted-foreground px-5 py-2">Products</th>
+                    <th className="text-right font-medium text-muted-foreground px-5 py-2">Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {categoryRows.map((row) => (
+                    <tr key={row.id} className="border-t border-border">
+                      <td className="px-5 py-2 font-medium text-foreground truncate max-w-[140px]">{row.name}</td>
+                      <td className="px-5 py-2 text-right text-foreground">{row.count}</td>
+                      <td className="px-5 py-2 text-right">
+                        <span className="text-[11px] font-semibold text-success bg-success/10 rounded px-2 py-0.5">
+                          {row.pct.toFixed(0)}%
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </div>
+
+        <div className={cn(CARD, 'p-5 flex flex-col')}>
+          <h3 className="text-sm font-semibold text-foreground">Avg Deal Size</h3>
+          <p className="text-[22px] font-bold text-foreground mt-2 tracking-tight leading-7">₹{avgPrice}</p>
+          <p className="text-[12px] text-success mt-1 flex items-center gap-1">
+            <ArrowUpRight className="w-3.5 h-3.5" />
+            {dynamicMetrics.pipelineTrend} Last Week
+          </p>
+          <div className="mt-3 min-w-0 overflow-hidden">
+            <ApexChart
+              type="area"
+              height={64}
+              series={[{ data: dynamicMetrics.sparkYtd }]}
+              options={avgPriceOptions}
+            />
+          </div>
+          <p className="text-[12px] text-muted-foreground mt-2 flex items-center gap-1.5">
+            <DollarSign className="w-3.5 h-3.5" /> Computed from all SKUs
+          </p>
+        </div>
+
+        <div className={cn(CARD, 'p-5 flex flex-col')}>
+          <h3 className="text-sm font-semibold text-foreground">Catalog Health</h3>
+          <div className="mt-3 space-y-2.5 flex-1">
+            <div className="flex items-center justify-between text-[13px]">
+              <span className="text-muted-foreground">Active / Draft products</span>
+              <span className="font-semibold text-foreground">{activeProducts} / {draftProducts}</span>
+            </div>
+            <div className="flex items-center justify-between text-[13px]">
+              <span className="text-muted-foreground flex items-center gap-2">
+                <Tag className="w-3.5 h-3.5 text-warning" /> Brands / Categories
+              </span>
+              <span className="font-semibold text-foreground">{totalBrands} / {totalCategories}</span>
+            </div>
+            {products.length === 0 ? (
+              <p className="text-xs text-muted-foreground text-center py-5">All systems operational</p>
+            ) : (
+              <>
+                <div className="flex items-center justify-between gap-2.5 p-2.5 rounded-[5px] bg-primary/5">
+                  <span className="flex items-center gap-2 text-[13px] font-medium text-foreground">
+                    <Package className="w-3.5 h-3.5 text-primary shrink-0" />
+                    Active Product SKUs
+                  </span>
+                  <span className="text-sm font-bold text-foreground">{totalVariants}</span>
+                </div>
+                <div className="flex items-center gap-2.5 p-2.5 rounded-[5px] bg-success/10 text-xs">
+                  <CheckCircle className="w-3.5 h-3.5 text-success shrink-0" />
+                  <div>
+                    <p className="font-semibold text-foreground">Schema Separation Status</p>
+                    <p className="text-[11px] text-muted-foreground mt-0.5">Dynamic Multi-DB Routing Enabled (Commerce DB)</p>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(admin)/purchases/page.tsx

@@ -0,0 +1,478 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { Plus, RefreshCw, Search, ClipboardCheck, CheckCircle2, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { catalogService, PartResponse, PurchaseOrderResponse } from '@/services/api/catalogService';
+import { SlideOver } from '@/components/ui/SlideOver';
+import { CustomSelect } from '@/components/ui/CustomSelect';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+
+type StatusFilter = 'all' | 'ordered' | 'received';
+
+const EMPTY_ITEM = { part_id: '', quantity_ordered: 1, unit_price: '' };
+
+export default function PurchasesPage() {
+  const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderResponse[]>([]);
+  const [parts, setParts] = useState<PartResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [showPOModal, setShowPOModal] = useState(false);
+  const [supplierName, setSupplierName] = useState('');
+  const [poItems, setPoItems] = useState<Array<{ part_id: string; quantity_ordered: number; unit_price: string }>>([]);
+
+  const [showReceiveModal, setShowReceiveModal] = useState(false);
+  const [selectedPO, setSelectedPO] = useState<PurchaseOrderResponse | null>(null);
+  const [receiveQuantities, setReceiveQuantities] = useState<Record<string, number>>({});
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const [fetchedPOs, fetchedParts] = await Promise.all([
+        catalogService.getPurchaseOrders(),
+        catalogService.getParts(),
+      ]);
+      setPurchaseOrders(fetchedPOs);
+      setParts(fetchedParts);
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to load purchase orders');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const handleCreatePO = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!supplierName.trim() || poItems.length === 0) {
+      toast.error('Supplier name and at least one item are required');
+      return;
+    }
+
+    const payloadItems = poItems
+      .filter((item) => item.part_id !== '' && parseInt(String(item.quantity_ordered), 10) > 0)
+      .map((item) => ({
+        part_id: item.part_id,
+        quantity_ordered: parseInt(String(item.quantity_ordered), 10),
+        unit_price: parseFloat(item.unit_price) || 0,
+      }));
+
+    if (payloadItems.length === 0) {
+      toast.error('Please specify valid items and quantities');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const created = await catalogService.createPurchaseOrder({
+        supplier_name: supplierName.trim(),
+        items: payloadItems,
+      });
+      setPurchaseOrders([...purchaseOrders, created]);
+      toast.success(`Purchase order ${created.po_number} created`);
+      setSupplierName('');
+      setPoItems([]);
+      setShowPOModal(false);
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to create purchase order');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleReceivePO = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedPO) return;
+    setIsSubmitting(true);
+    try {
+      const itemsReceivedPayload = Object.entries(receiveQuantities).map(([itemId, qty]) => ({
+        id: itemId,
+        quantity_received: qty,
+      }));
+      const updated = await catalogService.receivePurchaseOrder(
+        selectedPO.purchase_order_id,
+        itemsReceivedPayload
+      );
+      toast.success(`Purchase order ${updated.po_number} marked as received`);
+      setShowReceiveModal(false);
+      setSelectedPO(null);
+      setReceiveQuantities({});
+      fetchData();
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to receive purchase order items');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const addPOItemRow = () => {
+    setPoItems((prev) => [...prev, { ...EMPTY_ITEM }]);
+  };
+
+  const updatePOItemRow = (index: number, field: 'part_id' | 'quantity_ordered' | 'unit_price', value: string) => {
+    const updated = [...poItems];
+    if (field === 'part_id') {
+      updated[index].part_id = value;
+      const partObj = parts.find((p) => p.part_id === value);
+      if (partObj) updated[index].unit_price = partObj.cost_price.toString();
+    } else if (field === 'quantity_ordered') {
+      updated[index].quantity_ordered = parseInt(value, 10) || 1;
+    } else {
+      updated[index].unit_price = value;
+    }
+    setPoItems(updated);
+  };
+
+  const removePOItemRow = (index: number) => {
+    setPoItems(poItems.filter((_, i) => i !== index));
+  };
+
+  const openCreateModal = () => {
+    setSupplierName('');
+    setPoItems([{ ...EMPTY_ITEM }]);
+    setShowPOModal(true);
+  };
+
+  const openReceiveModal = (po: PurchaseOrderResponse) => {
+    setSelectedPO(po);
+    const initialQtys: Record<string, number> = {};
+    po.items.forEach((item) => {
+      initialQtys[item.id] = Math.max(0, item.quantity_ordered - item.quantity_received);
+    });
+    setReceiveQuantities(initialQtys);
+    setShowReceiveModal(true);
+  };
+
+  const closeReceive = () => {
+    if (isSubmitting) return;
+    setShowReceiveModal(false);
+    setSelectedPO(null);
+  };
+
+  const isReceived = (status?: string) => (status || '').toLowerCase() === 'received';
+  const isOrdered = (status?: string) => (status || '').toLowerCase() === 'ordered';
+
+  const orderedCount = purchaseOrders.filter((po) => isOrdered(po.status)).length;
+  const receivedCount = purchaseOrders.filter((po) => isReceived(po.status)).length;
+
+  const filteredOrders = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    return purchaseOrders.filter((po) => {
+      const statusMatch =
+        statusFilter === 'all' ||
+        (statusFilter === 'ordered' && isOrdered(po.status)) ||
+        (statusFilter === 'received' && isReceived(po.status));
+      const searchMatch =
+        !q ||
+        (po.po_number || '').toLowerCase().includes(q) ||
+        (po.supplier_name || '').toLowerCase().includes(q) ||
+        (po.status || '').toLowerCase().includes(q);
+      return statusMatch && searchMatch;
+    });
+  }, [purchaseOrders, searchQuery, statusFilter]);
+
+  const pager = useClientPagination(filteredOrders);
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden min-w-0';
+  const inputClass =
+    'w-full h-9 px-3 bg-card border border-border crm-radius-control text-[13px] text-foreground focus:outline-none focus:border-primary';
+  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50';
+
+  const renderStatusBadge = (status: string) => {
+    const received = isReceived(status);
+    const ordered = isOrdered(status);
+    return (
+      <span
+        className={`inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${
+          received ? 'bg-success text-white' : ordered ? 'bg-warning text-white' : 'bg-muted text-muted-foreground'
+        }`}
+      >
+        {status || 'Draft'}
+      </span>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Supplier Purchase Orders</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {purchaseOrders.length}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          <button
+            type="button"
+            onClick={fetchData}
+            className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+            title="Reload"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+          </button>
+          <button type="button" onClick={openCreateModal} className={primaryButton}>
+            <span className="w-[18px] h-[18px] rounded-full bg-white text-primary flex items-center justify-center">
+              <Plus className="w-3 h-3" strokeWidth={3} />
+            </span>
+            Create PO
+          </button>
+        </div>
+      </div>
+
+      <div className={dataCardShell}>
+        <div className="px-5 pt-5">
+          <div className="-mx-5 px-5 flex flex-wrap items-center justify-between gap-3 min-w-0 pb-4 border-b border-border">
+            <div className="relative flex-1 min-w-[180px] max-w-[480px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full h-9 pl-9 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+              />
+            </div>
+            <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1 shrink-0">
+              {([
+                { id: 'all', label: `All (${purchaseOrders.length})` },
+                { id: 'ordered', label: `Ordered (${orderedCount})` },
+                { id: 'received', label: `Received (${receivedCount})` },
+              ] as { id: StatusFilter; label: string }[]).map((tab) => (
+                <button
+                  key={tab.id}
+                  type="button"
+                  onClick={() => setStatusFilter(tab.id)}
+                  className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors ${
+                    statusFilter === tab.id ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
+            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+            <span className="text-[13px] text-muted-foreground">Loading purchase orders...</span>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="crm-data-table min-w-[800px]">
+              <thead>
+                <tr className="bg-gray-50 border-y border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">PO number</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Supplier</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Total</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Created</th>
+                  <th className="px-5 py-3 text-center text-[13px] font-semibold text-gray-700">Action</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {filteredOrders.length === 0 ? (
+                  <tr>
+                    <td colSpan={6} className="text-center py-12 text-[13px] text-muted-foreground">
+                      {searchQuery || statusFilter !== 'all'
+                        ? 'No purchase orders match your search.'
+                        : 'No purchase orders found.'}
+                    </td>
+                  </tr>
+                ) : (
+                  pager.items.map((po) => (
+                    <tr key={po.purchase_order_id} className="border-t border-border hover:bg-muted/10">
+                      <td className="px-5 py-3.5 text-[13px] font-semibold text-foreground font-mono">{po.po_number}</td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{po.supplier_name}</td>
+                      <td className="px-5 py-3.5">{renderStatusBadge(po.status)}</td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">₹{po.total_amount}</td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">
+                        {po.created_at ? new Date(po.created_at).toLocaleDateString() : '—'}
+                      </td>
+                      <td className="px-5 py-3.5">
+                        <div className="flex items-center justify-center">
+                          {!isReceived(po.status) ? (
+                            <button
+                              type="button"
+                              onClick={() => openReceiveModal(po)}
+                              className="inline-flex items-center h-8 px-3 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[12px] font-semibold cursor-pointer"
+                            >
+                              Receive
+                            </button>
+                          ) : (
+                            <span className="inline-flex items-center gap-1 text-[12px] text-success font-medium">
+                              <CheckCircle2 className="w-3.5 h-3.5" />
+                              Received
+                            </span>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+        <TablePagination {...pager} />
+      </div>
+
+      <SlideOver
+        open={showPOModal}
+        onClose={() => {
+          if (isSubmitting) return;
+          setShowPOModal(false);
+        }}
+        title="Create purchase order"
+        icon={<ClipboardCheck className="w-4 h-4 text-primary shrink-0" />}
+      >
+        <form onSubmit={handleCreatePO} className="flex min-h-0 flex-1 flex-col">
+          <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4">
+            <div>
+              <label className={labelClass}>
+                Supplier name <span className="text-primary">*</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. Apple Wholesale Inc."
+                value={supplierName}
+                onChange={(e) => setSupplierName(e.target.value)}
+                className={inputClass}
+              />
+            </div>
+
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <label className="text-[11px] font-semibold text-muted-foreground uppercase">Ordered parts</label>
+                <button type="button" onClick={addPOItemRow} className="inline-flex items-center gap-1 text-[12px] font-semibold text-primary cursor-pointer">
+                  <Plus className="w-3.5 h-3.5" />
+                  Add part
+                </button>
+              </div>
+              <div className="space-y-2">
+                {poItems.map((row, idx) => (
+                  <div key={idx} className="flex flex-wrap items-center gap-2 p-3 border border-border crm-radius-card bg-muted/10">
+                    <CustomSelect
+                      value={row.part_id}
+                      onChange={(value) => updatePOItemRow(idx, 'part_id', value)}
+                      options={[
+                        { value: '', label: 'Select part' },
+                        ...parts.map((p) => ({
+                          value: p.part_id,
+                          label: `${p.name} (${p.sku})`,
+                        })),
+                      ]}
+                      placeholder="Select part"
+                      className="flex-1 min-w-[160px]"
+                    />
+                    <input
+                      type="number"
+                      placeholder="Qty"
+                      value={row.quantity_ordered}
+                      onChange={(e) => updatePOItemRow(idx, 'quantity_ordered', e.target.value)}
+                      className={`${inputClass} w-20`}
+                    />
+                    <input
+                      type="number"
+                      placeholder="Price"
+                      value={row.unit_price}
+                      onChange={(e) => updatePOItemRow(idx, 'unit_price', e.target.value)}
+                      className={`${inputClass} w-24`}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => removePOItemRow(idx)}
+                      className="w-8 h-8 crm-radius-control border border-border text-muted-foreground hover:text-destructive hover:bg-muted cursor-pointer flex items-center justify-center"
+                      aria-label="Remove line"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                ))}
+                {poItems.length === 0 && (
+                  <p className="text-[12px] text-muted-foreground">No parts added yet.</p>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+            <button type="button" onClick={() => setShowPOModal(false)} disabled={isSubmitting} className={secondaryButton}>
+              Cancel
+            </button>
+            <button type="submit" disabled={isSubmitting} className={primaryButton}>
+              {isSubmitting ? 'Saving...' : 'Place order'}
+            </button>
+          </div>
+        </form>
+      </SlideOver>
+
+      <SlideOver
+        open={showReceiveModal && !!selectedPO}
+        onClose={closeReceive}
+        title={selectedPO ? `Receive ${selectedPO.po_number}` : 'Receive order'}
+        icon={<ClipboardCheck className="w-4 h-4 text-primary shrink-0" />}
+      >
+        {selectedPO && (
+          <form onSubmit={handleReceivePO} className="flex min-h-0 flex-1 flex-col">
+            <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4">
+              <p className="text-[13px] text-muted-foreground">
+                Log quantities received from{' '}
+                <span className="font-semibold text-foreground">{selectedPO.supplier_name}</span>.
+              </p>
+              <div className="space-y-3">
+                {selectedPO.items.map((item) => {
+                  const partObj = parts.find((p) => p.part_id === item.part_id);
+                  return (
+                    <div key={item.id} className="p-3 border border-border crm-radius-card bg-muted/10 space-y-2">
+                      <p className="text-[13px] font-semibold text-foreground">{partObj?.name || 'Unknown part'}</p>
+                      <p className="text-[12px] text-muted-foreground">
+                        Ordered {item.quantity_ordered} · Received {item.quantity_received}
+                      </p>
+                      <div>
+                        <label className={labelClass}>Qty received now</label>
+                        <input
+                          type="number"
+                          value={receiveQuantities[item.id] || 0}
+                          onChange={(e) =>
+                            setReceiveQuantities({
+                              ...receiveQuantities,
+                              [item.id]: parseInt(e.target.value, 10) || 0,
+                            })
+                          }
+                          className={inputClass}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+              <button type="button" onClick={closeReceive} disabled={isSubmitting} className={secondaryButton}>
+                Cancel
+              </button>
+              <button type="submit" disabled={isSubmitting} className={primaryButton}>
+                {isSubmitting ? 'Saving...' : 'Confirm receipt'}
+              </button>
+            </div>
+          </form>
+        )}
+      </SlideOver>
+    </div>
+  );
+}

app/(admin)/reviews-moderation/page.tsx

@@ -0,0 +1,266 @@
+'use client';
+
+import { useMemo, useState, useEffect } from 'react';
+import { Star, RefreshCw, Search, ShieldCheck, Image as ImageIcon } from 'lucide-react';
+import { toast } from 'sonner';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+import { adminService } from '@/services/api/adminService';
+
+interface ReviewItem {
+  review_id: string;
+  product_id: string;
+  author_name: string;
+  author_email?: string;
+  rating: number;
+  title: string;
+  comment: string;
+  verified_purchase: boolean;
+  is_approved: boolean;
+  review_date?: string;
+  images: string[];
+}
+
+type StatusFilter = 'all' | 'pending' | 'approved';
+
+function formatDate(value?: string) {
+  if (!value) return '—';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' });
+}
+
+export default function ReviewsModerationPage() {
+  const [reviews, setReviews] = useState<ReviewItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState<StatusFilter>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const fetchReviews = () => {
+    setLoading(true);
+    adminService.getCmsReviews()
+      .then((data) => { setReviews(data); setLoading(false); })
+      .catch(() => { toast.error('Failed to load reviews'); setLoading(false); });
+  };
+
+  useEffect(() => { fetchReviews(); }, []);
+
+  const pendingCount = reviews.filter((r) => !r.is_approved).length;
+  const approvedCount = reviews.filter((r) => r.is_approved).length;
+
+  const toggleApproval = async (review_id: string, current: boolean) => {
+    try {
+      if (current) {
+        await adminService.rejectReview(review_id);
+        setReviews((prev) => prev.map((r) => r.review_id === review_id ? { ...r, is_approved: false } : r));
+        toast.success('Review unpublished from the store');
+      } else {
+        await adminService.approveReview(review_id);
+        setReviews((prev) => prev.map((r) => r.review_id === review_id ? { ...r, is_approved: true } : r));
+        toast.success('Review approved and visible on the store');
+      }
+    } catch {
+      toast.error('Action failed — please try again');
+    }
+  };
+
+  const filtered = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    return reviews.filter((r) => {
+      const statusMatch =
+        filter === 'all' ||
+        (filter === 'pending' && !r.is_approved) ||
+        (filter === 'approved' && r.is_approved);
+      const searchMatch =
+        !q ||
+        r.author_name.toLowerCase().includes(q) ||
+        r.title.toLowerCase().includes(q) ||
+        r.comment.toLowerCase().includes(q);
+      return statusMatch && searchMatch;
+    });
+  }, [reviews, filter, searchQuery]);
+
+  const pager = useClientPagination(filtered);
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-visible min-w-0';
+
+  const renderStars = (rating: number) => (
+    <span className="inline-flex items-center gap-0.5">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Star
+          key={i}
+          className={`w-3.5 h-3.5 ${i < rating ? 'text-warning fill-warning' : 'text-muted-foreground/30'}`}
+        />
+      ))}
+    </span>
+  );
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Customer Reviews</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {reviews.length}
+            </span>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          onClick={fetchReviews}
+          className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+          title="Reload"
+        >
+          <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
+        </button>
+      </div>
+
+      <div className={dataCardShell}>
+        <div className="px-5 pt-5">
+          <div className="-mx-5 px-5 flex flex-wrap items-center justify-between gap-3 min-w-0 pb-4 border-b border-border">
+            <div className="relative flex-1 min-w-[180px] max-w-[480px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full h-9 pl-9 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+              />
+            </div>
+            <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1 shrink-0">
+              {([
+                { id: 'all', label: `All (${reviews.length})` },
+                { id: 'pending', label: `Pending (${pendingCount})` },
+                { id: 'approved', label: `Approved (${approvedCount})` },
+              ] as { id: StatusFilter; label: string }[]).map((tab) => (
+                <button
+                  key={tab.id}
+                  type="button"
+                  onClick={() => setFilter(tab.id)}
+                  className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors ${
+                    filter === tab.id ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
+            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+            <span className="text-[13px] text-muted-foreground">Loading reviews...</span>
+          </div>
+        ) : (
+          <div className="overflow-x-auto border-t border-border">
+            <table className="crm-data-table w-full table-fixed min-w-[980px]">
+              <colgroup>
+                <col className="w-[160px]" />
+                <col className="w-[200px]" />
+                <col className="w-[110px]" />
+                <col />
+                <col className="w-[100px]" />
+                <col className="w-[120px]" />
+              </colgroup>
+              <thead>
+                <tr className="bg-gray-50 border-b border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Customer</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Product</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Rating</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Review</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
+                  <th className="px-5 py-3 text-center text-[13px] font-semibold text-gray-700">Action</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {filtered.length === 0 ? (
+                  <tr>
+                    <td colSpan={6} className="text-center py-12 text-[13px] text-muted-foreground whitespace-normal">
+                      {searchQuery || filter !== 'all' ? 'No reviews match your search.' : 'No reviews found.'}
+                    </td>
+                  </tr>
+                ) : (
+                  pager.items.map((rev) => {
+                    const photos = (rev.images || []).filter(Boolean);
+                    return (
+                      <tr key={rev.review_id} className="border-t border-border hover:bg-muted/10">
+                        <td className="px-5 py-3.5 align-middle">
+                          <p className="font-semibold text-foreground truncate" title={rev.author_name}>
+                            {rev.author_name}
+                          </p>
+                          <p className="text-[11px] text-muted-foreground mt-0.5">{formatDate(rev.review_date)}</p>
+                          {rev.verified_purchase && (
+                            <span className="mt-1.5 inline-flex items-center gap-1 px-2 py-0.5 crm-radius-badge text-[10px] font-semibold bg-success/10 text-success">
+                              <ShieldCheck className="w-3 h-3" />
+                              Verified
+                            </span>
+                          )}
+                        </td>
+                        <td className="px-5 py-3.5 align-middle text-muted-foreground">
+                          <span className="block whitespace-normal break-words leading-snug text-[12px]">
+                            {rev.product_id}
+                          </span>
+                        </td>
+                        <td className="px-5 py-3.5 align-middle">
+                          {renderStars(rev.rating)}
+                        </td>
+                        <td className="px-5 py-3.5 align-middle whitespace-normal">
+                          <p className="font-semibold text-foreground leading-snug break-words">{rev.title}</p>
+                          <p className="text-muted-foreground mt-1 leading-relaxed break-words">{rev.comment}</p>
+                          {photos.length > 0 && (
+                            <div className="flex gap-1.5 mt-2">
+                              {photos.map((imgUrl, i) => (
+                                <a key={i} href={imgUrl} target="_blank" rel="noopener noreferrer"
+                                  className="w-10 h-10 crm-radius-icon border border-border overflow-hidden bg-muted block">
+                                  <img src={imgUrl} alt="" className="w-full h-full object-cover" />
+                                </a>
+                              ))}
+                            </div>
+                          )}
+                          {rev.images.length > 0 && photos.length === 0 && (
+                            <span className="mt-2 inline-flex items-center gap-1 text-[11px] text-muted-foreground">
+                              <ImageIcon className="w-3 h-3" />
+                              Photo attached
+                            </span>
+                          )}
+                        </td>
+                        <td className="px-5 py-3.5 align-middle">
+                          <span className={`inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${
+                            rev.is_approved ? 'bg-success text-white' : 'bg-warning text-white'
+                          }`}>
+                            {rev.is_approved ? 'Approved' : 'Pending'}
+                          </span>
+                        </td>
+                        <td className="px-5 py-3.5 align-middle">
+                          <div className="flex justify-center">
+                            <button
+                              type="button"
+                              onClick={() => toggleApproval(rev.review_id, rev.is_approved)}
+                              className={`inline-flex items-center justify-center h-8 px-3 crm-radius-control text-[12px] font-semibold cursor-pointer border ${
+                                rev.is_approved
+                                  ? 'border-border bg-card text-foreground hover:bg-muted'
+                                  : 'border-primary bg-primary hover:bg-primary/90 text-white'
+                              }`}
+                            >
+                              {rev.is_approved ? 'Unpublish' : 'Approve'}
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+        <TablePagination {...pager} />
+      </div>
+    </div>
+  );
+}

app/(admin)/roles/page.tsx

@@ -0,0 +1,520 @@
+'use client';
+
+import { useEffect, useMemo, useState, type FormEvent } from 'react';
+import {
+  Shield,
+  Plus,
+  Search,
+  Trash2,
+  X,
+  RefreshCw,
+  Check,
+  Lock,
+  ChevronRight,
+  Info,
+  AlertTriangle,
+  Loader2,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { rolePermissionService, RoleResponse, PermissionResponse } from '@/services/api/rolePermissionService';
+import { SlideOver } from '@/components/ui/SlideOver';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+
+export default function RolesPage() {
+  const [roles, setRoles] = useState<RoleResponse[]>([]);
+  const [permissions, setPermissions] = useState<PermissionResponse[]>([]);
+  const [selectedRole, setSelectedRole] = useState<RoleResponse | null>(null);
+  const [selectedRolePerms, setSelectedRolePerms] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [savingPerms, setSavingPerms] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [newRoleName, setNewRoleName] = useState('');
+  const [newRolePrefix, setNewRolePrefix] = useState('');
+  const [newRoleDesc, setNewRoleDesc] = useState('');
+  const [deleteTarget, setDeleteTarget] = useState<RoleResponse | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const [fetchedRoles, fetchedPermissions] = await Promise.all([
+        rolePermissionService.getRoles(),
+        rolePermissionService.getPermissions(),
+      ]);
+      setRoles(fetchedRoles);
+      setPermissions(fetchedPermissions);
+
+      const defaultRole =
+        fetchedRoles.find((r) => r.role_name.toLowerCase() !== 'super admin') || fetchedRoles[0];
+      if (defaultRole) {
+        await selectRole(defaultRole, fetchedPermissions);
+      }
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to load roles and permissions data';
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const selectRole = async (role: RoleResponse, allPerms: PermissionResponse[] = permissions) => {
+    setSelectedRole(role);
+    if (role.role_name.toLowerCase() === 'super admin') {
+      setSelectedRolePerms(allPerms.map((p) => p.permission_id));
+      return;
+    }
+    try {
+      const assignedIds = await rolePermissionService.getRolePermissions(role.role_id);
+      setSelectedRolePerms(assignedIds);
+    } catch {
+      toast.error(`Failed to fetch permissions for ${role.role_name}`);
+    }
+  };
+
+  const handleAddRole = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!newRoleName.trim()) {
+      toast.error('Role name is required');
+      return;
+    }
+    if (!newRolePrefix.trim() || newRolePrefix.length > 5) {
+      toast.error('Role prefix is required (max 5 letters)');
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const created = await rolePermissionService.createRole({
+        role_name: newRoleName.trim(),
+        role_prefix: newRolePrefix.trim().toUpperCase(),
+        description: newRoleDesc.trim() || undefined,
+      });
+      setRoles([...roles, created]);
+      toast.success(`Role "${created.role_name}" created successfully`);
+      setNewRoleName('');
+      setNewRolePrefix('');
+      setNewRoleDesc('');
+      setShowAddModal(false);
+      await selectRole(created);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to create role';
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeleteRole = async () => {
+    if (!deleteTarget) return;
+    try {
+      setIsDeleting(true);
+      await rolePermissionService.deleteRole(deleteTarget.role_id);
+      toast.success(`Role "${deleteTarget.role_name}" deleted`);
+      setRoles(roles.filter((r) => r.role_id !== deleteTarget.role_id));
+      if (selectedRole?.role_id === deleteTarget.role_id) {
+        setSelectedRole(null);
+        setSelectedRolePerms([]);
+      }
+      setDeleteTarget(null);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to delete role';
+      toast.error(message);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleTogglePermission = (permissionId: string) => {
+    if (!selectedRole || selectedRole.role_name.toLowerCase() === 'super admin') return;
+    if (selectedRolePerms.includes(permissionId)) {
+      setSelectedRolePerms(selectedRolePerms.filter((id) => id !== permissionId));
+    } else {
+      setSelectedRolePerms([...selectedRolePerms, permissionId]);
+    }
+  };
+
+  const handleSavePermissions = async () => {
+    if (!selectedRole) return;
+    setSavingPerms(true);
+    try {
+      await rolePermissionService.updateRolePermissions(selectedRole.role_id, selectedRolePerms);
+      toast.success(`Permissions for "${selectedRole.role_name}" updated successfully`);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to update role permissions';
+      toast.error(message);
+    } finally {
+      setSavingPerms(false);
+    }
+  };
+
+  const permissionsByModule = useMemo(() => {
+    const groups: Record<string, PermissionResponse[]> = {};
+    permissions.forEach((p) => {
+      const moduleName = p.module.charAt(0).toUpperCase() + p.module.slice(1);
+      if (!groups[moduleName]) groups[moduleName] = [];
+      groups[moduleName].push(p);
+    });
+    return groups;
+  }, [permissions]);
+
+  const filteredRoles = useMemo(() => {
+    return roles.filter((r) => r.role_name.toLowerCase().includes(searchQuery.toLowerCase()));
+  }, [roles, searchQuery]);
+
+  const pager = useClientPagination(filteredRoles);
+
+  const isSuperAdmin = selectedRole?.role_name.toLowerCase() === 'super admin';
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden min-w-0';
+  const inputClass =
+    'w-full h-9 px-3 bg-card border border-border crm-radius-control text-[13px] text-foreground focus:outline-none focus:border-primary';
+  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50';
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Roles & Permissions</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {roles.length}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <button
+            type="button"
+            onClick={fetchData}
+            className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+            title="Reload"
+          >
+            <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
+          </button>
+          <button
+            type="button"
+            onClick={() => setShowAddModal(true)}
+            className={primaryButton}
+          >
+            <span className="w-[18px] h-[18px] rounded-full bg-white text-primary flex items-center justify-center">
+              <Plus className="w-3 h-3" strokeWidth={3} />
+            </span>
+            Add role
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 items-start min-w-0">
+        <div className={`lg:col-span-5 ${dataCardShell}`}>
+          <div className="p-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search roles"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full h-9 pl-8 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+              />
+            </div>
+          </div>
+
+          <div className="overflow-x-auto border-t border-border">
+            <table className="crm-data-table">
+              <thead>
+                <tr className="border-b border-border bg-gray-50">
+                  <th className="px-5 py-3 text-[13px] font-semibold text-gray-700">Role</th>
+                  <th className="px-5 py-3 text-[13px] font-semibold text-gray-700 text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  <tr>
+                    <td colSpan={2} className="px-5 py-12 text-center">
+                      <Loader2 className="w-6 h-6 animate-spin text-primary mx-auto" />
+                      <p className="text-[13px] text-muted-foreground mt-2">Loading roles...</p>
+                    </td>
+                  </tr>
+                ) : filteredRoles.length === 0 ? (
+                  <tr>
+                    <td colSpan={2} className="px-5 py-12 text-center text-[13px] text-muted-foreground">
+                      {searchQuery ? `No roles match “${searchQuery}”` : 'No roles yet'}
+                    </td>
+                  </tr>
+                ) : (
+                  pager.items.map((role) => {
+                    const active = selectedRole?.role_id === role.role_id;
+                    return (
+                      <tr
+                        key={role.role_id}
+                        onClick={() => selectRole(role)}
+                        className={`border-b border-border hover:bg-muted/10 cursor-pointer transition-colors ${
+                          active ? 'bg-primary/5' : ''
+                        }`}
+                      >
+                        <td className="px-5 py-3.5">
+                          <div className="flex items-center gap-2">
+                            <span className="text-[13px] font-semibold text-foreground">{role.role_name}</span>
+                            {role.is_system && (
+                              <span className="inline-flex items-center px-2 py-0.5 crm-radius-badge bg-primary/10 text-primary text-[11px] font-semibold">
+                                System
+                              </span>
+                            )}
+                          </div>
+                          <p className="text-[12px] text-muted-foreground mt-0.5">
+                            Prefix: {role.role_prefix}
+                            {role.description ? ` · ${role.description}` : ''}
+                          </p>
+                        </td>
+                        <td className="px-5 py-3.5 text-right" onClick={(e) => e.stopPropagation()}>
+                          <div className="flex items-center justify-end gap-1">
+                            <button
+                              type="button"
+                              onClick={() => selectRole(role)}
+                              className="w-8 h-8 crm-radius-control flex items-center justify-center hover:bg-muted cursor-pointer"
+                              title="Edit permissions"
+                            >
+                              <Shield className="w-4 h-4 text-muted-foreground" />
+                            </button>
+                            {!role.is_system && (
+                              <button
+                                type="button"
+                                onClick={() => setDeleteTarget(role)}
+                                className="w-8 h-8 crm-radius-control flex items-center justify-center hover:bg-destructive/10 cursor-pointer"
+                                title="Delete role"
+                              >
+                                <Trash2 className="w-4 h-4 text-destructive" />
+                              </button>
+                            )}
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+          <TablePagination {...pager} />
+        </div>
+
+        <div className="lg:col-span-7 min-w-0">
+          {selectedRole ? (
+            <div className={`${dataCardShell} p-5 space-y-5`}>
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between border-b border-border pb-4 gap-3">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    <Shield className="w-4 h-4 text-primary shrink-0" />
+                    <h2 className="text-[16px] font-semibold text-foreground truncate">{selectedRole.role_name}</h2>
+                  </div>
+                  <p className="text-[13px] text-muted-foreground mt-1">
+                    {selectedRole.description || 'Manage access levels for this role.'}
+                  </p>
+                </div>
+                {!isSuperAdmin && (
+                  <button
+                    type="button"
+                    onClick={handleSavePermissions}
+                    disabled={savingPerms}
+                    className={primaryButton}
+                  >
+                    {savingPerms ? 'Saving...' : 'Save permissions'}
+                  </button>
+                )}
+              </div>
+
+              {isSuperAdmin && (
+                <div className="border border-border bg-muted/30 crm-radius-section p-3.5 flex items-start gap-2.5">
+                  <Lock className="w-4 h-4 text-muted-foreground shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-[13px] font-semibold text-foreground">Full access</p>
+                    <p className="text-[12px] text-muted-foreground mt-0.5">
+                      Super Admin has access to every module. Permissions cannot be edited.
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              <div className="space-y-5">
+                {Object.keys(permissionsByModule).map((groupName) => (
+                  <div key={groupName} className="space-y-3">
+                    <h3 className="text-[13px] font-semibold text-foreground flex items-center gap-2 border-b border-border pb-2">
+                      <ChevronRight className="w-3.5 h-3.5 text-primary" />
+                      {groupName}
+                    </h3>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
+                      {permissionsByModule[groupName].map((perm) => {
+                        const isChecked = selectedRolePerms.includes(perm.permission_id);
+                        return (
+                          <button
+                            key={perm.permission_id}
+                            type="button"
+                            onClick={() => !isSuperAdmin && handleTogglePermission(perm.permission_id)}
+                            disabled={isSuperAdmin}
+                            className={`p-3 crm-radius-section border flex items-start gap-3 text-left transition-colors ${
+                              isChecked ? 'bg-primary/5 border-primary/20' : 'bg-card border-border hover:bg-muted/20'
+                            } ${isSuperAdmin ? 'cursor-not-allowed opacity-80' : 'cursor-pointer'}`}
+                          >
+                            <div
+                              className={`w-4 h-4 mt-0.5 crm-radius-toggle border flex items-center justify-center shrink-0 ${
+                                isChecked ? 'bg-primary border-primary text-white' : 'border-border text-transparent'
+                              }`}
+                            >
+                              <Check className="w-3 h-3" strokeWidth={3} />
+                            </div>
+                            <div className="min-w-0">
+                              <span className="text-[13px] font-semibold text-foreground block">{perm.permission_code}</span>
+                              <span className="text-[12px] text-muted-foreground mt-0.5 block">
+                                {perm.description || 'No description'}
+                              </span>
+                            </div>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div className={`${dataCardShell} p-12 text-center flex flex-col items-center justify-center gap-2 min-h-[280px]`}>
+              <Info className="w-8 h-8 text-muted-foreground/30" />
+              <p className="text-[13px] text-muted-foreground">Select a role to manage its permissions.</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <SlideOver
+        open={showAddModal}
+        onClose={() => !isSubmitting && setShowAddModal(false)}
+        title="Add role"
+        icon={<Shield className="w-4 h-4 text-primary shrink-0" />}
+      >
+        <form onSubmit={handleAddRole} className="flex min-h-0 flex-1 flex-col">
+          <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4">
+            <div>
+              <label className={labelClass}>
+                Role name <span className="text-primary">*</span>
+              </label>
+              <input
+                type="text"
+                required
+                placeholder="e.g. Technician Supervisor"
+                value={newRoleName}
+                onChange={(e) => setNewRoleName(e.target.value)}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>
+                Role prefix <span className="text-primary">*</span>
+              </label>
+              <input
+                type="text"
+                required
+                maxLength={5}
+                placeholder="e.g. TEC"
+                value={newRolePrefix}
+                onChange={(e) => setNewRolePrefix(e.target.value)}
+                className={inputClass}
+              />
+              <p className="text-[12px] text-muted-foreground mt-1">Used for employee codes. Max 5 letters.</p>
+            </div>
+            <div>
+              <label className={labelClass}>Description</label>
+              <textarea
+                placeholder="Brief role responsibilities..."
+                value={newRoleDesc}
+                onChange={(e) => setNewRoleDesc(e.target.value)}
+                rows={3}
+                className="w-full px-3 py-2 bg-card border border-border crm-radius-control text-[13px] text-foreground focus:outline-none focus:border-primary resize-none"
+              />
+            </div>
+          </div>
+          <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+            <button
+              type="button"
+              onClick={() => setShowAddModal(false)}
+              disabled={isSubmitting}
+              className={secondaryButton}
+            >
+              Cancel
+            </button>
+            <button type="submit" disabled={isSubmitting} className={primaryButton}>
+              {isSubmitting ? 'Creating...' : 'Create role'}
+            </button>
+          </div>
+        </form>
+      </SlideOver>
+
+      {deleteTarget && (
+        <div
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4"
+          onClick={() => !isDeleting && setDeleteTarget(null)}
+        >
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="delete-role-title"
+            className="bg-card border border-border shadow-2xl w-full max-w-sm overflow-hidden crm-radius-none"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-start justify-between gap-3 px-5 pt-5 pb-2">
+              <div className="flex items-start gap-3 min-w-0">
+                <div className="w-10 h-10 rounded-full bg-destructive/10 text-destructive flex items-center justify-center shrink-0">
+                  <AlertTriangle className="w-5 h-5" />
+                </div>
+                <div className="min-w-0">
+                  <h3 id="delete-role-title" className="text-[15px] font-semibold text-foreground">
+                    Delete role
+                  </h3>
+                  <p className="text-[13px] text-muted-foreground mt-1 leading-relaxed">
+                    Delete <span className="font-semibold text-foreground">&quot;{deleteTarget.role_name}&quot;</span>? This cannot be undone.
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                aria-label="Close delete dialog"
+                onClick={() => setDeleteTarget(null)}
+                disabled={isDeleting}
+                className="w-8 h-8 rounded-full border border-border text-muted-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center shrink-0 disabled:opacity-50"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+            <div className="flex items-center justify-end gap-2 px-5 pb-5 pt-3">
+              <button
+                type="button"
+                onClick={() => setDeleteTarget(null)}
+                disabled={isDeleting}
+                className={secondaryButton}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleDeleteRole}
+                disabled={isDeleting}
+                className="inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-destructive hover:bg-destructive/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50"
+              >
+                {isDeleting ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/(admin)/security/page.tsx

@@ -0,0 +1,790 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Shield,
+  Monitor,
+  Smartphone,
+  Tablet,
+  Loader2,
+  AlertTriangle,
+  Radio,
+  Flame,
+  ShieldAlert,
+  KeyRound,
+  RefreshCw,
+  Search,
+  Globe,
+  Clock,
+  X,
+  Copy,
+  Check,
+  ShieldOff,
+} from 'lucide-react';
+import { adminService, SessionInfo, AuditLogEntry } from '@/services/api/adminService';
+import { parseJwt, getAccessToken } from '@/services/api/client';
+import { format } from 'date-fns';
+import { toast } from 'sonner';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+import { StatsSparklineCard, datesToSparkline, weekOverWeekChange } from '@/components/ui/StatsSparklineCard';
+
+type DeviceFilter = 'all' | 'desktop' | 'mobile' | 'tablet';
+type InsightTab = 'sessions' | 'history' | 'failed';
+
+function normalizeDeviceType(type: string): DeviceFilter {
+  const value = (type || '').toLowerCase();
+  if (value.includes('mobile') || value.includes('phone')) return 'mobile';
+  if (value.includes('tablet')) return 'tablet';
+  return 'desktop';
+}
+
+function deviceTone(type: DeviceFilter) {
+  if (type === 'mobile') {
+    return {
+      box: 'bg-success/10 text-success',
+      bar: 'bg-success',
+      badge: 'bg-success text-white',
+    };
+  }
+  if (type === 'tablet') {
+    return {
+      box: 'bg-warning/10 text-warning',
+      bar: 'bg-warning',
+      badge: 'bg-warning text-white',
+    };
+  }
+  return {
+    box: 'bg-muted text-foreground',
+    bar: 'bg-muted-foreground',
+    badge: 'bg-muted text-foreground',
+  };
+}
+
+function remainingLabel(expiresAt: string) {
+  const ms = new Date(expiresAt).getTime() - Date.now();
+  if (Number.isNaN(ms) || ms <= 0) return { text: 'Expired', urgent: true };
+  const mins = Math.floor(ms / 60000);
+  if (mins < 60) return { text: `${mins}m left`, urgent: true };
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return { text: `${hours}h ${mins % 60}m left`, urgent: hours < 2 };
+  const days = Math.floor(hours / 24);
+  if (days < 7) return { text: `${days}d left`, urgent: false };
+  return { text: 'Active', urgent: false };
+}
+
+export default function SecurityPage() {
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [failedLogins, setFailedLogins] = useState<AuditLogEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [revoking, setRevoking] = useState<string | null>(null);
+  const [mfaCode, setMfaCode] = useState('');
+  const [actionLoading, setActionLoading] = useState(false);
+  const [currentUserId, setCurrentUserId] = useState<string | null>(null);
+  const [deviceFilter, setDeviceFilter] = useState<DeviceFilter>('all');
+  const [deviceSearch, setDeviceSearch] = useState('');
+  const [insightTab, setInsightTab] = useState<InsightTab>('sessions');
+  const [showResetDialog, setShowResetDialog] = useState(false);
+  const [resetPassword, setResetPassword] = useState('');
+  const [resetPhrase, setResetPhrase] = useState('');
+  const [copiedIp, setCopiedIp] = useState<string | null>(null);
+  const devicesRef = useRef<HTMLDivElement>(null);
+  const failedRef = useRef<HTMLDivElement>(null);
+
+  const pager = useClientPagination(failedLogins);
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const [sessionsData, failedData] = await Promise.allSettled([
+        adminService.listSessions(0, 100),
+        adminService.getFailedLogins(20),
+      ]);
+      if (sessionsData.status === 'fulfilled') setSessions(sessionsData.value.sessions);
+      if (failedData.status === 'fulfilled') setFailedLogins(failedData.value);
+    } catch {
+      toast.error('Failed to load security data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+    const token = getAccessToken();
+    if (token) {
+      const payload = parseJwt(token);
+      if (payload && payload.sub) {
+        setCurrentUserId(payload.sub as string);
+      }
+    }
+  }, []);
+
+  const handleRevoke = async (sessionId: string) => {
+    setRevoking(sessionId);
+    try {
+      await adminService.revokeSession(sessionId);
+      toast.success('Session ended on this device');
+      fetchData();
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to revoke session';
+      toast.error(message);
+    } finally {
+      setRevoking(null);
+    }
+  };
+
+  const handleKillSwitch = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!currentUserId) {
+      toast.error('Could not determine current admin ID. Please re-authenticate.');
+      return;
+    }
+    if (!mfaCode.trim()) {
+      toast.error('Please enter your MFA verification code');
+      return;
+    }
+
+    setActionLoading(true);
+    try {
+      const res = await adminService.requestKillSwitch(currentUserId, mfaCode);
+      toast.success(res.detail || 'Kill switch executed successfully. All users logged out.');
+      setMfaCode('');
+      fetchData();
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to execute kill switch';
+      toast.error(message);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleCancelKillSwitch = async () => {
+    if (!currentUserId) {
+      toast.error('Could not determine current admin ID. Please re-authenticate.');
+      return;
+    }
+
+    setActionLoading(true);
+    try {
+      const res = await adminService.cancelKillSwitch(currentUserId);
+      toast.success(res.detail || 'Kill switch cancelled. Access restored.');
+      fetchData();
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to cancel kill switch';
+      toast.error(message);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleSelfDestruct = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!currentUserId) {
+      toast.error('Could not determine current admin ID. Please re-authenticate.');
+      return;
+    }
+    if (!mfaCode.trim()) {
+      toast.error('Please enter your MFA verification code');
+      return;
+    }
+
+    setActionLoading(true);
+    try {
+      const res = await adminService.selfDestruct(currentUserId, mfaCode);
+      toast.success(res.detail || 'Self destruct completed. All sessions destroyed.');
+      setMfaCode('');
+      fetchData();
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to execute self-destruct';
+      toast.error(message);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleFactoryReset = async () => {
+    if (!resetPassword.trim()) {
+      toast.error('Enter your admin password');
+      return;
+    }
+    if (resetPhrase !== 'CONFIRM_FACTORY_RESET_WIPE_2026') {
+      toast.error('Invalid confirmation phrase');
+      return;
+    }
+
+    setActionLoading(true);
+    try {
+      const token = getAccessToken();
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL || ''}/api/v1/admin/security/factory-reset`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({ password: resetPassword, confirmation_phrase: resetPhrase }),
+        }
+      );
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ detail: 'Reset failed' }));
+        throw new Error(err.detail || 'Reset failed');
+      }
+      toast.success('Platform factory reset completed. Redirecting to login...');
+      setShowResetDialog(false);
+      localStorage.clear();
+      setTimeout(() => {
+        window.location.href = '/login';
+      }, 2000);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Factory reset failed';
+      toast.error(message);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const getDeviceIcon = (type: DeviceFilter, className = 'w-5 h-5') => {
+    if (type === 'mobile') return <Smartphone className={className} />;
+    if (type === 'tablet') return <Tablet className={className} />;
+    return <Monitor className={className} />;
+  };
+
+  const activeSessions = sessions.filter((s) => s.is_active);
+  const boardSessions = insightTab === 'history' ? sessions : activeSessions;
+
+  const deviceCounts = useMemo(() => {
+    const counts: Record<string, number> = { desktop: 0, mobile: 0, tablet: 0 };
+    for (const session of boardSessions) {
+      const devType = normalizeDeviceType(session.device_type);
+      counts[devType] = (counts[devType] || 0) + 1;
+    }
+    return counts;
+  }, [boardSessions]);
+
+  const filteredDevices = useMemo(() => {
+    const q = deviceSearch.trim().toLowerCase();
+    return boardSessions.filter((session) => {
+      const kind = normalizeDeviceType(session.device_type);
+      const matchesType = deviceFilter === 'all' || kind === deviceFilter;
+      const haystack = [session.browser, session.operating_system, session.device_name, session.ip_address]
+        .join(' ')
+        .toLowerCase();
+      return matchesType && (!q || haystack.includes(q));
+    });
+  }, [boardSessions, deviceFilter, deviceSearch]);
+
+  const devicePager = useClientPagination(filteredDevices, 6);
+  const mixTotal = boardSessions.length || 1;
+
+  const copyIp = async (ip: string) => {
+    try {
+      await navigator.clipboard.writeText(ip);
+      setCopiedIp(ip);
+      toast.success('IP address copied');
+      setTimeout(() => setCopiedIp(null), 1500);
+    } catch {
+      toast.error('Could not copy IP address');
+    }
+  };
+
+  const openInsight = (tab: InsightTab) => {
+    setInsightTab(tab);
+    const node = tab === 'failed' ? failedRef.current : devicesRef.current;
+    node?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-visible min-w-0';
+  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 min-h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50 whitespace-nowrap';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 min-h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50 whitespace-nowrap';
+  const inputClass =
+    'w-full h-9 pl-8 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors';
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Security & Sessions</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {activeSessions.length}
+            </span>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={fetchData}
+          className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+          title="Reload"
+        >
+          <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <StatsSparklineCard
+          title="Active sessions"
+          value={loading ? '—' : activeSessions.length}
+          icon={Radio}
+          tone="green"
+          series={datesToSparkline(activeSessions.map((s) => s.expires_at))}
+          deltaPercent={weekOverWeekChange(activeSessions.map((s) => s.expires_at))}
+          active={insightTab === 'sessions'}
+          onClick={() => openInsight('sessions')}
+        />
+        <StatsSparklineCard
+          title="Session history"
+          value={loading ? '—' : sessions.length}
+          icon={Monitor}
+          tone="blue"
+          series={datesToSparkline(sessions.map((s) => s.expires_at))}
+          deltaPercent={weekOverWeekChange(sessions.map((s) => s.expires_at))}
+          active={insightTab === 'history'}
+          onClick={() => openInsight('history')}
+        />
+        <StatsSparklineCard
+          title="Failed logins"
+          value={loading ? '—' : failedLogins.length}
+          icon={AlertTriangle}
+          tone="orange"
+          series={datesToSparkline(failedLogins.map((l) => l.created_at))}
+          deltaPercent={weekOverWeekChange(failedLogins.map((l) => l.created_at))}
+          active={insightTab === 'failed'}
+          onClick={() => openInsight('failed')}
+        />
+      </div>
+
+      <div ref={devicesRef} className={dataCardShell}>
+        <div className="p-4 border-b border-border">
+          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 min-w-0">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2">
+                <h2 className="text-[16px] font-semibold text-foreground">
+                  {insightTab === 'history' ? 'Session history' : 'Active connected devices'}
+                </h2>
+                {insightTab !== 'history' && (
+                  <span className="inline-flex items-center gap-1.5 h-5 px-2 crm-radius-toggle bg-success/10 text-success text-[11px] font-semibold">
+                    <span className="relative flex h-1.5 w-1.5">
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-60" />
+                      <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-success" />
+                    </span>
+                    Live {activeSessions.length}
+                  </span>
+                )}
+              </div>
+              <p className="text-[12px] text-muted-foreground mt-1">
+                {insightTab === 'history'
+                  ? 'Every recorded admin session, including devices that have already signed out.'
+                  : 'Devices currently holding an open admin session.'}
+              </p>
+            </div>
+            <div className="relative w-full sm:w-[220px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search IP, browser, OS"
+                value={deviceSearch}
+                onChange={(e) => setDeviceSearch(e.target.value)}
+                className={inputClass}
+              />
+            </div>
+          </div>
+
+          <div className="mt-4 grid grid-cols-2 xl:grid-cols-4 gap-2">
+            {([
+              { id: 'all' as DeviceFilter, label: 'All devices', count: boardSessions.length, icon: Radio, tone: 'bg-primary/10 text-primary', bar: 'bg-primary' },
+              { id: 'desktop' as DeviceFilter, label: 'Desktop', count: deviceCounts.desktop, icon: Monitor, tone: deviceTone('desktop').box, bar: deviceTone('desktop').bar },
+              { id: 'mobile' as DeviceFilter, label: 'Mobile', count: deviceCounts.mobile, icon: Smartphone, tone: deviceTone('mobile').box, bar: deviceTone('mobile').bar },
+              { id: 'tablet' as DeviceFilter, label: 'Tablet', count: deviceCounts.tablet, icon: Tablet, tone: deviceTone('tablet').box, bar: deviceTone('tablet').bar },
+            ]).map((tile) => {
+              const selected = deviceFilter === tile.id;
+              const Icon = tile.icon;
+              const share = mixTotal ? (tile.count / mixTotal) * 100 : 0;
+              return (
+                <button
+                  key={tile.id}
+                  type="button"
+                  onClick={() => setDeviceFilter(tile.id)}
+                  className={`text-left p-3 crm-radius-section border bg-card cursor-pointer transition-colors min-w-0 ${
+                    selected ? 'border-[#b8c0d4]' : 'border-border hover:bg-muted/40'
+                  }`}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <span className={`w-8 h-8 crm-radius-icon flex items-center justify-center shrink-0 ${tile.tone}`}>
+                      <Icon className="w-4 h-4" />
+                    </span>
+                    <span className="text-[20px] font-bold text-foreground leading-none tabular-nums">{tile.count}</span>
+                  </div>
+                  <p className="text-[12px] font-medium text-muted-foreground mt-2">{tile.label}</p>
+                  <div className="mt-2 h-1.5 crm-radius-toggle overflow-hidden bg-muted">
+                    <div className={`h-full ${tile.bar}`} style={{ width: `${share}%` }} />
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="py-16 flex justify-center">
+            <Loader2 className="w-6 h-6 animate-spin text-primary" />
+          </div>
+        ) : filteredDevices.length === 0 ? (
+          <div className="py-16 text-center text-[13px] text-muted-foreground">
+            {deviceSearch || deviceFilter !== 'all' ? 'No connected devices match your search.' : 'No sessions found.'}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 p-4">
+            {devicePager.items.map((session) => {
+              const kind = normalizeDeviceType(session.device_type);
+              const tone = deviceTone(kind);
+              const yours = Boolean(currentUserId && session.user_id === currentUserId);
+              const remaining = remainingLabel(session.expires_at);
+              const live = session.is_active;
+              return (
+                <article
+                  key={session.session_id}
+                  className={`flex min-w-0 overflow-hidden crm-radius-section border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] ${
+                    yours ? 'border-[#b8c0d4]' : 'border-border'
+                  } ${live ? '' : 'opacity-80'}`}
+                >
+                  <div className={`w-12 shrink-0 flex flex-col items-center justify-center gap-1.5 py-3 ${live ? tone.box : 'bg-muted text-muted-foreground'}`}>
+                    <div className="relative">
+                      {getDeviceIcon(kind, 'w-5 h-5')}
+                      {live && (
+                        <span className="absolute -top-1 -right-1 flex h-2 w-2">
+                          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-60" />
+                          <span className="relative inline-flex rounded-full h-2 w-2 bg-success border-2 border-card" />
+                        </span>
+                      )}
+                    </div>
+                    <span className="text-[9px] font-semibold uppercase tracking-wide leading-none">{kind}</span>
+                  </div>
+
+                  <div className="flex-1 min-w-0 p-3 flex flex-col overflow-hidden">
+                    <div className="flex items-start justify-between gap-2 min-w-0">
+                      <div className="min-w-0 overflow-hidden">
+                        <p className="text-[13px] font-semibold text-foreground truncate">
+                          {session.browser || 'Unknown browser'}
+                        </p>
+                        <p className="text-[12px] text-muted-foreground truncate">
+                          {session.operating_system || 'Unknown OS'}
+                          {session.device_name ? ` · ${session.device_name}` : ''}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-1 shrink-0">
+                        {yours && (
+                          <span className="inline-flex items-center px-1.5 py-0.5 crm-radius-badge bg-primary/10 text-primary text-[11px] font-semibold">
+                            You
+                          </span>
+                        )}
+                        <span
+                          className={`inline-flex items-center px-1.5 py-0.5 crm-radius-badge text-[11px] font-semibold ${
+                            live
+                              ? remaining.urgent
+                                ? 'bg-warning text-white'
+                                : 'bg-success text-white'
+                              : 'bg-muted text-muted-foreground'
+                          }`}
+                        >
+                          {live ? remaining.text : 'Ended'}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="mt-2.5 border-t border-border pt-2 space-y-1.5 min-w-0">
+                      <div className="flex items-center gap-2 min-w-0">
+                        <span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground w-[58px] shrink-0">
+                          <Globe className="w-3 h-3" /> IP
+                        </span>
+                        <span className="min-w-0 flex-1 flex items-center gap-1 overflow-hidden">
+                          <span className="block min-w-0 flex-1 truncate font-mono text-[12px] font-semibold text-foreground" title={session.ip_address}>
+                            {session.ip_address || '—'}
+                          </span>
+                          <button
+                            type="button"
+                            title="Copy IP"
+                            onClick={() => copyIp(session.ip_address)}
+                            className="w-6 h-6 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer flex items-center justify-center shrink-0"
+                          >
+                            {copiedIp === session.ip_address ? <Check className="w-3 h-3 text-success" /> : <Copy className="w-3 h-3" />}
+                          </button>
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2 min-w-0">
+                        <span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground w-[58px] shrink-0">
+                          <Clock className="w-3 h-3" /> Expires
+                        </span>
+                        <span className="min-w-0 flex-1 truncate text-[12px] font-semibold text-foreground" title={format(new Date(session.expires_at), 'dd MMM yyyy, hh:mm a')}>
+                          {format(new Date(session.expires_at), 'dd MMM, hh:mm a')}
+                        </span>
+                      </div>
+                    </div>
+
+                    {live ? (
+                      <button
+                        type="button"
+                        onClick={() => handleRevoke(session.session_id)}
+                        disabled={revoking === session.session_id}
+                        className="mt-2.5 inline-flex items-center justify-center gap-1.5 h-8 min-h-8 w-full crm-radius-control border border-border bg-card text-[12px] font-semibold text-destructive hover:bg-destructive/10 cursor-pointer disabled:opacity-50 whitespace-nowrap"
+                      >
+                        {revoking === session.session_id ? (
+                          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                        ) : (
+                          <ShieldOff className="w-3.5 h-3.5" />
+                        )}
+                        Revoke
+                      </button>
+                    ) : (
+                      <div className="mt-2.5 h-8 min-h-8 w-full crm-radius-control border border-border bg-muted/40 text-[12px] font-medium text-muted-foreground flex items-center justify-center whitespace-nowrap">
+                        Ended
+                      </div>
+                    )}
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        )}
+        <TablePagination {...devicePager} />
+      </div>
+
+      <div ref={failedRef} className={dataCardShell}>
+        <div className="px-5 py-4 border-b border-border">
+          <h2 className="text-[16px] font-semibold text-foreground">Failed login audit</h2>
+          <p className="text-[12px] text-muted-foreground mt-0.5">Authentication attempts that did not succeed.</p>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="crm-data-table min-w-[800px]">
+            <thead>
+              <tr className="border-b border-border bg-gray-50">
+                <th className="px-5 py-3 text-gray-700">Action</th>
+                <th className="px-5 py-3 text-gray-700">Entity</th>
+                <th className="px-5 py-3 text-gray-700">IP address</th>
+                <th className="px-5 py-3 text-gray-700">User agent</th>
+                <th className="px-5 py-3 text-gray-700">Time</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr>
+                  <td colSpan={5} className="px-5 py-12 text-center">
+                    <Loader2 className="w-6 h-6 animate-spin text-primary mx-auto" />
+                  </td>
+                </tr>
+              ) : failedLogins.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-5 py-12 text-center text-[13px] text-muted-foreground whitespace-normal">
+                    No security failures recorded
+                  </td>
+                </tr>
+              ) : (
+                pager.items.map((log) => (
+                  <tr key={log.audit_id} className="border-b border-border hover:bg-muted/10 transition-colors">
+                    <td className="px-5 py-3.5">
+                      <span className="inline-flex items-center px-2.5 py-1 crm-radius-badge bg-destructive text-white text-[11px] font-semibold">
+                        {log.action}
+                      </span>
+                    </td>
+                    <td className="px-5 py-3.5 text-muted-foreground">{log.entity_type}</td>
+                    <td className="px-5 py-3.5 text-muted-foreground font-mono">{log.ip_address}</td>
+                    <td className="px-5 py-3.5 text-muted-foreground">
+                      <span className="crm-cell-clip max-w-[220px]" title={log.user_agent || ''}>
+                        {log.user_agent || '—'}
+                      </span>
+                    </td>
+                    <td className="px-5 py-3.5 text-muted-foreground">
+                      {format(new Date(log.created_at), 'dd MMM yyyy, hh:mm a')}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+        <TablePagination {...pager} />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4">
+        <div className={`${dataCardShell} p-4 flex flex-col`}>
+          <div className="flex items-center gap-2 text-destructive mb-3">
+            <ShieldAlert className="w-4 h-4 shrink-0" />
+            <h3 className="text-[14px] font-semibold">Global kill switch</h3>
+          </div>
+          <p className="text-[12px] text-muted-foreground mb-4 flex-1">
+            Disables public client access and ends every active user session.
+          </p>
+          <form onSubmit={handleKillSwitch} className="space-y-2">
+            <div className="relative">
+              <KeyRound className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Admin MFA code"
+                value={mfaCode}
+                onChange={(e) => setMfaCode(e.target.value)}
+                className={inputClass}
+              />
+            </div>
+            <div className="grid grid-cols-1 gap-2 w-full">
+              <button type="submit" disabled={actionLoading} className={`${primaryButton} w-full bg-destructive hover:bg-destructive/90`}>
+                {actionLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : 'Trigger lockout'}
+              </button>
+              <button type="button" onClick={handleCancelKillSwitch} disabled={actionLoading} className={`${secondaryButton} w-full`}>
+                Restore
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <div className={`${dataCardShell} p-4 flex flex-col`}>
+          <div className="flex items-center gap-2 text-destructive mb-3">
+            <Flame className="w-4 h-4 shrink-0" />
+            <h3 className="text-[14px] font-semibold">Force session termination</h3>
+          </div>
+          <p className="text-[12px] text-muted-foreground mb-4 flex-1">
+            Ends all sessions in the database without changing the lockout setting.
+          </p>
+          <form onSubmit={handleSelfDestruct} className="space-y-2">
+            <div className="relative">
+              <KeyRound className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Admin MFA code"
+                value={mfaCode}
+                onChange={(e) => setMfaCode(e.target.value)}
+                className={inputClass}
+              />
+            </div>
+            <button type="submit" disabled={actionLoading} className={`${primaryButton} w-full bg-destructive hover:bg-destructive/90`}>
+              {actionLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : 'Kill all sessions'}
+            </button>
+          </form>
+        </div>
+
+        <div className={`${dataCardShell} p-4 flex flex-col border-destructive/30`}>
+          <div className="flex items-center gap-2 text-destructive mb-3">
+            <AlertTriangle className="w-4 h-4 shrink-0" />
+            <h3 className="text-[14px] font-semibold">Platform factory reset</h3>
+          </div>
+          <p className="text-[12px] text-muted-foreground mb-4 flex-1 leading-relaxed">
+            Wipes core, CRM and commerce tables plus uploads, then reseeds master roles.
+          </p>
+          <button
+            type="button"
+            onClick={() => {
+              setResetPassword('');
+              setResetPhrase('');
+              setShowResetDialog(true);
+            }}
+            disabled={actionLoading}
+            className={`${primaryButton} w-full bg-destructive hover:bg-destructive/90`}
+          >
+            Execute factory reset
+          </button>
+        </div>
+
+        <div className={`${dataCardShell} p-4 flex flex-col`}>
+          <div className="flex items-center gap-2 mb-3">
+            <Shield className="w-4 h-4 text-primary shrink-0" />
+            <h3 className="text-[14px] font-semibold text-foreground">Infrastructure</h3>
+          </div>
+          <div className="space-y-2 text-[12px] flex-1">
+            <div className="flex justify-between py-1.5 border-b border-border">
+              <span className="text-muted-foreground">Admin authority</span>
+              <span className="font-semibold text-success">{currentUserId ? 'Super Admin' : 'Unknown'}</span>
+            </div>
+            <div className="flex justify-between py-1.5 border-b border-border">
+              <span className="text-muted-foreground">Audit log engine</span>
+              <span className="font-semibold text-foreground">Operational</span>
+            </div>
+            <div className="flex justify-between py-1.5 border-b border-border">
+              <span className="text-muted-foreground">MFA router</span>
+              <span className="font-semibold text-foreground">SHA256 Standard</span>
+            </div>
+          </div>
+          <button type="button" onClick={fetchData} className={`${secondaryButton} w-full mt-4`}>
+            Refresh diagnostics
+          </button>
+        </div>
+      </div>
+
+      {showResetDialog && (
+        <div
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4"
+          onClick={() => !actionLoading && setShowResetDialog(false)}
+        >
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="factory-reset-title"
+            className="bg-card border border-border shadow-2xl w-full max-w-sm overflow-hidden crm-radius-none"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-start justify-between gap-3 px-5 pt-5 pb-2">
+              <div className="flex items-start gap-3 min-w-0">
+                <div className="w-10 h-10 rounded-full bg-destructive/10 text-destructive flex items-center justify-center shrink-0">
+                  <AlertTriangle className="w-5 h-5" />
+                </div>
+                <div className="min-w-0">
+                  <h3 id="factory-reset-title" className="text-[15px] font-semibold text-foreground">
+                    Factory reset
+                  </h3>
+                  <p className="text-[13px] text-muted-foreground mt-1 leading-relaxed">
+                    This permanently wipes platform data. Type the confirmation phrase to continue.
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                aria-label="Close factory reset dialog"
+                onClick={() => setShowResetDialog(false)}
+                disabled={actionLoading}
+                className="w-8 h-8 rounded-full border border-border text-muted-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center shrink-0 disabled:opacity-50"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+            <div className="px-5 pb-2 space-y-3">
+              <div>
+                <label className={labelClass}>Admin password</label>
+                <input
+                  type="password"
+                  value={resetPassword}
+                  onChange={(e) => setResetPassword(e.target.value)}
+                  className="w-full h-9 px-3 crm-radius-control border border-border bg-card text-[13px] text-foreground focus:outline-none focus:border-primary"
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Confirmation phrase</label>
+                <input
+                  type="text"
+                  value={resetPhrase}
+                  onChange={(e) => setResetPhrase(e.target.value)}
+                  placeholder="CONFIRM_FACTORY_RESET_WIPE_2026"
+                  className="w-full h-9 px-3 crm-radius-control border border-border bg-card text-[13px] text-foreground focus:outline-none focus:border-primary font-mono"
+                />
+              </div>
+            </div>
+            <div className="flex items-center justify-end gap-2 px-5 pb-5 pt-3">
+              <button type="button" onClick={() => setShowResetDialog(false)} disabled={actionLoading} className={secondaryButton}>
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleFactoryReset}
+                disabled={actionLoading}
+                className="inline-flex items-center justify-center gap-2 h-9 min-h-9 px-4 crm-radius-control bg-destructive hover:bg-destructive/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50 whitespace-nowrap"
+              >
+                {actionLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : 'Execute reset'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/(admin)/service-catalog/page.tsx

@@ -0,0 +1,962 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { Plus, RefreshCw, Search, Trash2, Wrench, Tag, Smartphone } from 'lucide-react';
+import { toast } from 'sonner';
+import { adminService } from '@/services/api/adminService';
+import { formatCurrency } from '@/lib/utils';
+import { SlideOver } from '@/components/ui/SlideOver';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+import { CustomSelect } from '@/components/ui/CustomSelect';
+
+const CANONICAL_DEVICE_TYPES = [
+  { id: 'laptop', name: 'Laptop' },
+  { id: 'tablet', name: 'Tablet' },
+  { id: 'mobile', name: 'Mobile' },
+];
+
+export interface VariantBatchRow {
+  id: string;
+  name: string;
+  price: string;
+  cost: string;
+  duration: string;
+  warranty: string;
+}
+
+function createDefaultBatchRows(): VariantBatchRow[] {
+  return [
+    { id: '1', name: 'Original OLED Grade A+', price: '', cost: '', duration: '45', warranty: '180' },
+    { id: '2', name: 'Compatible Premium LCD', price: '', cost: '', duration: '30', warranty: '90' },
+  ];
+}
+
+type CatalogTab = 'types' | 'mappings' | 'variants';
+
+function parseApiError(err: any, fallback: string) {
+  if (typeof err?.message === 'string' && err.message) return err.message;
+  if (Array.isArray(err?.detail)) return err.detail.map((d: any) => d.msg).join(', ');
+  return fallback;
+}
+
+export default function ServiceCatalogManagerPage() {
+  const [activeTab, setActiveTab] = useState<CatalogTab>('types');
+  const [serviceTypes, setServiceTypes] = useState<any[]>([]);
+  const [brands, setBrands] = useState<any[]>([]);
+  const [deviceSeries, setDeviceSeries] = useState<any[]>([]);
+  const [deviceModels, setDeviceModels] = useState<any[]>([]);
+  const [repairServices, setRepairServices] = useState<any[]>([]);
+  const [repairVariants, setRepairVariants] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [showTypeModal, setShowTypeModal] = useState(false);
+  const [showMappingModal, setShowMappingModal] = useState(false);
+  const [showVariantModal, setShowVariantModal] = useState(false);
+
+  const [typeName, setTypeName] = useState('');
+  const [typeDesc, setTypeDesc] = useState('');
+  const [selectedDeviceTypes, setSelectedDeviceTypes] = useState<string[]>(['mobile']);
+
+  const [step2CategoryId, setStep2CategoryId] = useState('');
+  const [step2BrandId, setStep2BrandId] = useState('');
+  const [step2SeriesId, setStep2SeriesId] = useState('');
+  const [step2ModelId, setStep2ModelId] = useState('');
+  const [step2Desc, setStep2Desc] = useState('');
+
+  const [step3CategoryId, setStep3CategoryId] = useState('');
+  const [step3BrandId, setStep3BrandId] = useState('');
+  const [step3ModelId, setStep3ModelId] = useState('');
+  const [batchRows, setBatchRows] = useState<VariantBatchRow[]>(createDefaultBatchRows);
+
+  const [selectedViewBrandId, setSelectedViewBrandId] = useState('');
+  const [selectedViewModelId, setSelectedViewModelId] = useState('');
+  const [selectedViewCategoryId, setSelectedViewCategoryId] = useState('ALL');
+
+  useEffect(() => {
+    loadAllCatalogData();
+  }, []);
+
+  const loadAllCatalogData = async () => {
+    setLoading(true);
+    try {
+      const [sTypes, bData, seriesData, modelsData, servicesData, variantsData] = await Promise.all([
+        adminService.fetchServiceTypes(),
+        adminService.fetchBrands(),
+        adminService.fetchDeviceSeries(),
+        adminService.fetchDeviceModels(),
+        adminService.fetchRepairServices(),
+        adminService.fetchRepairVariants(),
+      ]);
+      setServiceTypes(sTypes || []);
+      setBrands(bData || []);
+      setDeviceSeries(seriesData || []);
+      setDeviceModels(modelsData || []);
+      setRepairServices(servicesData || []);
+      setRepairVariants(variantsData || []);
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to load service catalog data.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const modelsMap = useMemo(() => {
+    const map = new Map<string, any>();
+    deviceModels.forEach((m) => map.set(m.model_id, m));
+    return map;
+  }, [deviceModels]);
+
+  const serviceTypesMap = useMemo(() => {
+    const map = new Map<string, any>();
+    serviceTypes.forEach((st) => map.set(st.service_type_id, st));
+    return map;
+  }, [serviceTypes]);
+
+  const repairServicesMap = useMemo(() => {
+    const map = new Map<string, any>();
+    repairServices.forEach((rs) => map.set(rs.repair_service_id, rs));
+    return map;
+  }, [repairServices]);
+
+  const viewModelsList = useMemo(() => {
+    if (!selectedViewBrandId) return deviceModels;
+    return deviceModels.filter((m) => m.brand_id === selectedViewBrandId);
+  }, [deviceModels, selectedViewBrandId]);
+
+  const brandsMap = useMemo(() => {
+    const map = new Map<string, any>();
+    brands.forEach((b) => map.set(b.brand_id, b));
+    return map;
+  }, [brands]);
+
+
+  const step2SeriesList = useMemo(() => {
+    if (!step2BrandId) return [];
+    return deviceSeries.filter((s) => s.brand_id === step2BrandId);
+  }, [deviceSeries, step2BrandId]);
+
+  const step2ModelsList = useMemo(() => {
+    if (!step2BrandId) return [];
+    let list = deviceModels.filter((m) => m.brand_id === step2BrandId);
+    if (step2SeriesId) list = list.filter((m) => m.series_id === step2SeriesId);
+    return list;
+  }, [deviceModels, step2BrandId, step2SeriesId]);
+
+  const step3MappedBrandsList = useMemo(() => {
+    if (!step3CategoryId) return brands;
+    const matchingServiceMappings = repairServices.filter((rs) => rs.service_type_id === step3CategoryId);
+    const mappedModelIds = new Set(matchingServiceMappings.map((rs) => rs.model_id));
+    const mappedModels = deviceModels.filter((m) => mappedModelIds.has(m.model_id));
+    const mappedBrandIds = new Set(mappedModels.map((m) => m.brand_id));
+    if (mappedBrandIds.size > 0) return brands.filter((b) => mappedBrandIds.has(b.brand_id));
+    return brands;
+  }, [repairServices, deviceModels, brands, step3CategoryId]);
+
+  const step3MappedModelsList = useMemo(() => {
+    if (!step3CategoryId || !step3BrandId) return [];
+    const matchingServiceMappings = repairServices.filter((rs) => rs.service_type_id === step3CategoryId);
+    const mappedModelIds = new Set(matchingServiceMappings.map((rs) => rs.model_id));
+    const mapped = deviceModels.filter((m) => m.brand_id === step3BrandId && mappedModelIds.has(m.model_id));
+    if (mapped.length > 0) return mapped;
+    return deviceModels.filter((m) => m.brand_id === step3BrandId);
+  }, [repairServices, deviceModels, step3CategoryId, step3BrandId]);
+
+  const handleCreateServiceType = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!typeName.trim()) {
+      toast.warning('Please enter a service category name.');
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      await adminService.createServiceType({
+        name: typeName.trim(),
+        description: typeDesc.trim() || undefined,
+      });
+      toast.success(`Service category "${typeName}" created`);
+      setShowTypeModal(false);
+      setTypeName('');
+      setTypeDesc('');
+      setSelectedDeviceTypes(['mobile']);
+      await loadAllCatalogData();
+    } catch (err: any) {
+      toast.error(parseApiError(err, 'Failed to create service category.'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCreateMapping = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!step2CategoryId || !step2ModelId) {
+      toast.warning('Please select both a service category and a device model.');
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      await adminService.createRepairService({
+        model_id: step2ModelId,
+        service_type_id: step2CategoryId,
+        description: step2Desc.trim() || undefined,
+      });
+      toast.success('Device model mapped to service category');
+      setShowMappingModal(false);
+      setStep2CategoryId('');
+      setStep2BrandId('');
+      setStep2SeriesId('');
+      setStep2ModelId('');
+      setStep2Desc('');
+      await loadAllCatalogData();
+    } catch (err: any) {
+      toast.error(parseApiError(err, 'Failed to create repair service mapping.'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleAddBatchRow = () => {
+    setBatchRows((prev) => [
+      ...prev,
+      { id: Date.now().toString(), name: '', price: '', cost: '', duration: '45', warranty: '180' },
+    ]);
+  };
+
+  const handleRemoveBatchRow = (id: string) => {
+    if (batchRows.length <= 1) {
+      toast.warning('At least one variant row is required.');
+      return;
+    }
+    setBatchRows((prev) => prev.filter((r) => r.id !== id));
+  };
+
+  const handleBatchRowChange = (id: string, field: keyof VariantBatchRow, value: string) => {
+    setBatchRows((prev) => prev.map((r) => (r.id === id ? { ...r, [field]: value } : r)));
+  };
+
+  const handleCreateBatchVariants = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!step3CategoryId || !step3ModelId) {
+      toast.warning('Please select service category, brand, and device model.');
+      return;
+    }
+
+    const validRows = batchRows.filter((r) => r.name.trim() && r.price.trim());
+    if (validRows.length === 0) {
+      toast.warning('Please enter variant name and price for at least one row.');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      let targetService = repairServices.find(
+        (rs) => rs.model_id === step3ModelId && rs.service_type_id === step3CategoryId
+      );
+
+      if (!targetService) {
+        toast.info('Creating model to category mapping automatically...');
+        targetService = await adminService.createRepairService({
+          model_id: step3ModelId,
+          service_type_id: step3CategoryId,
+        });
+      }
+
+      let createdCount = 0;
+      for (const row of validRows) {
+        await adminService.createRepairVariant({
+          repair_service_id: targetService.repair_service_id,
+          name: row.name.trim(),
+          price: parseFloat(row.price),
+          cost: row.cost ? parseFloat(row.cost) : undefined,
+          duration_minutes: parseInt(row.duration, 10) || 45,
+          warranty_days: parseInt(row.warranty, 10) || 180,
+        });
+        createdCount++;
+      }
+
+      toast.success(`Created ${createdCount} repair variants`);
+      setShowVariantModal(false);
+      setStep3CategoryId('');
+      setStep3BrandId('');
+      setStep3ModelId('');
+      setBatchRows(createDefaultBatchRows());
+      await loadAllCatalogData();
+    } catch (err: any) {
+      toast.error(parseApiError(err, 'Failed to batch create repair variants.'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const modelFilteredMappings = useMemo(() => {
+    return repairServices.filter((rs) => {
+      if (selectedViewModelId) {
+        if (rs.model_id !== selectedViewModelId) return false;
+      } else if (selectedViewBrandId) {
+        const model = modelsMap.get(rs.model_id);
+        if (model?.brand_id !== selectedViewBrandId) return false;
+      }
+      return true;
+    });
+  }, [repairServices, selectedViewModelId, selectedViewBrandId, modelsMap]);
+
+  const modelFilteredVariants = useMemo(() => {
+    return repairVariants.filter((rv) => {
+      const rs = repairServicesMap.get(rv.repair_service_id);
+      if (!rs) return false;
+
+      if (selectedViewModelId) {
+        if (rs.model_id !== selectedViewModelId) return false;
+      } else if (selectedViewBrandId) {
+        const model = modelsMap.get(rs.model_id);
+        if (model?.brand_id !== selectedViewBrandId) return false;
+      }
+
+      if (selectedViewCategoryId !== 'ALL') {
+        if (rs.service_type_id !== selectedViewCategoryId) return false;
+      }
+
+      return true;
+    });
+  }, [repairVariants, repairServicesMap, modelsMap, selectedViewModelId, selectedViewBrandId, selectedViewCategoryId]);
+
+
+  const filteredServiceTypes = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return serviceTypes;
+    return serviceTypes.filter(
+      (st) =>
+        (st.name || '').toLowerCase().includes(q) ||
+        (st.slug || '').toLowerCase().includes(q) ||
+        (st.description || '').toLowerCase().includes(q)
+    );
+  }, [serviceTypes, searchQuery]);
+
+  const typesPager = useClientPagination(filteredServiceTypes);
+  const mappingsPager = useClientPagination(modelFilteredMappings);
+  const variantsPager = useClientPagination(modelFilteredVariants);
+
+  const headerCount =
+    activeTab === 'types'
+      ? serviceTypes.length
+      : activeTab === 'mappings'
+        ? repairServices.length
+        : repairVariants.length;
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden min-w-0';
+  const inputClass =
+    'w-full h-9 px-3 bg-card border border-border crm-radius-control text-[13px] text-foreground focus:outline-none focus:border-primary disabled:opacity-50';
+  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50';
+
+  const openAdd = () => {
+    if (activeTab === 'types') {
+      setTypeName('');
+      setTypeDesc('');
+      setSelectedDeviceTypes(['mobile']);
+      setShowTypeModal(true);
+    } else if (activeTab === 'mappings') {
+      setStep2CategoryId('');
+      setStep2BrandId('');
+      setStep2SeriesId('');
+      setStep2ModelId('');
+      setStep2Desc('');
+      setShowMappingModal(true);
+    } else {
+      setStep3CategoryId('');
+      setStep3BrandId('');
+      setStep3ModelId('');
+      setBatchRows(createDefaultBatchRows());
+      setShowVariantModal(true);
+    }
+  };
+
+  const addButtonLabel =
+    activeTab === 'types' ? 'Add category' : activeTab === 'mappings' ? 'Map model' : 'Add variants';
+
+  const renderActiveBadge = (label = 'Active') => (
+    <span className="inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold bg-success text-white">
+      {label}
+    </span>
+  );
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Service Catalog Manager</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {headerCount}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          <button
+            type="button"
+            onClick={loadAllCatalogData}
+            className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+            title="Reload"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+          </button>
+          <button type="button" onClick={openAdd} className={primaryButton}>
+            <span className="w-[18px] h-[18px] rounded-full bg-white text-primary flex items-center justify-center">
+              <Plus className="w-3 h-3" strokeWidth={3} />
+            </span>
+            {addButtonLabel}
+          </button>
+        </div>
+      </div>
+
+      <div className={dataCardShell}>
+        <div className="px-5 pt-5">
+          <div className="-mx-5 px-5 flex flex-wrap items-center justify-between gap-3 min-w-0 pb-4 border-b border-border">
+            {activeTab === 'types' ? (
+              <div className="relative flex-1 min-w-[180px] max-w-[480px]">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+                <input
+                  type="text"
+                  placeholder="Search"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full h-9 pl-9 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+                />
+              </div>
+            ) : (
+              <div className="flex flex-wrap items-end gap-3 flex-1 min-w-0">
+                <div className="min-w-[160px] flex-1 max-w-[220px]">
+                  <label className={labelClass}>Brand</label>
+                  <CustomSelect
+                    value={selectedViewBrandId}
+                    onChange={(value) => {
+                      setSelectedViewBrandId(value);
+                      setSelectedViewModelId('');
+                    }}
+                    placeholder="All brands"
+                    options={[
+                      { value: '', label: 'All brands' },
+                      ...brands.map((b) => ({ value: b.brand_id, label: b.name })),
+                    ]}
+                  />
+                </div>
+                <div className="min-w-[160px] flex-1 max-w-[220px]">
+                  <label className={labelClass}>Device model</label>
+                  <CustomSelect
+                    value={selectedViewModelId}
+                    disabled={false}
+                    onChange={(value) => {
+                      setSelectedViewModelId(value);
+                      if (value && !selectedViewBrandId) {
+                        const m = modelsMap.get(value);
+                        if (m?.brand_id) setSelectedViewBrandId(m.brand_id);
+                      }
+                    }}
+                    placeholder="All models"
+                    options={[
+                      { value: '', label: 'All models' },
+                      ...viewModelsList.map((m) => ({ value: m.model_id, label: m.name })),
+                    ]}
+                  />
+                </div>
+                {activeTab === 'variants' && (
+                  <div className="min-w-[160px] flex-1 max-w-[220px]">
+                    <label className={labelClass}>Category</label>
+                    <CustomSelect
+                      value={selectedViewCategoryId}
+                      onChange={setSelectedViewCategoryId}
+                      options={[
+                        { value: 'ALL', label: 'All categories' },
+                        ...serviceTypes.map((st) => ({ value: st.service_type_id, label: st.name })),
+                      ]}
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1 shrink-0 overflow-x-auto max-w-full">
+              {(
+                [
+                  { id: 'types', label: `Categories (${serviceTypes.length})` },
+                  { id: 'mappings', label: `Mappings (${repairServices.length})` },
+                  { id: 'variants', label: `Variants (${repairVariants.length})` },
+                ] as { id: CatalogTab; label: string }[]
+              ).map((tab) => (
+                <button
+                  key={tab.id}
+                  type="button"
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors whitespace-nowrap ${
+                    activeTab === tab.id ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
+            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+            <span className="text-[13px] text-muted-foreground">Loading catalog...</span>
+          </div>
+        ) : activeTab === 'types' ? (
+          <div className="overflow-x-auto">
+            <table className="crm-data-table min-w-[720px]">
+              <thead>
+                <tr className="bg-gray-50 border-y border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Category</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Slug</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Description</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {filteredServiceTypes.length === 0 ? (
+                  <tr>
+                    <td colSpan={4} className="text-center py-12 text-[13px] text-muted-foreground">
+                      {searchQuery ? 'No categories match your search.' : 'No service categories yet.'}
+                    </td>
+                  </tr>
+                ) : (
+                  typesPager.items.map((st, idx) => (
+                    <tr key={`st_${st.service_type_id || idx}_${idx}`} className="border-t border-border hover:bg-muted/10">
+                      <td className="px-5 py-3.5">
+                        <div className="flex items-center gap-3 min-w-0">
+                          <div className="w-9 h-9 crm-radius-icon bg-primary/10 text-primary flex items-center justify-center shrink-0">
+                            <Tag className="w-4 h-4" />
+                          </div>
+                          <span className="text-[13px] font-semibold text-foreground">{st.name}</span>
+                        </div>
+                      </td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground font-mono">{st.slug || '—'}</td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{st.description || '—'}</td>
+                      <td className="px-5 py-3.5">{renderActiveBadge()}</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        ) : activeTab === 'mappings' ? (
+          <div className="overflow-x-auto">
+            <table className="crm-data-table min-w-[720px]">
+              <thead>
+                <tr className="bg-gray-50 border-y border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Service category</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Device model</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Brand</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Path</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Mapping ID</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {modelFilteredMappings.length === 0 ? (
+                  <tr>
+                    <td colSpan={5} className="text-center py-12 text-[13px] text-muted-foreground">
+                      No service category mappings found for the selected filter.
+                    </td>
+                  </tr>
+                ) : (
+                  mappingsPager.items.map((rs, idx) => {
+                    const sType = serviceTypesMap.get(rs.service_type_id);
+                    const model = modelsMap.get(rs.model_id);
+                    const brand = model ? brandsMap.get(model.brand_id) : null;
+                    return (
+                      <tr key={`rs_${rs.repair_service_id || idx}_${idx}`} className="border-t border-border hover:bg-muted/10">
+                        <td className="px-5 py-3.5 text-[13px] font-semibold text-foreground">
+                          {sType?.name || rs.service_type_id}
+                        </td>
+                        <td className="px-5 py-3.5 text-[13px] text-foreground font-medium">
+                          {model?.name || rs.model_id || '—'}
+                        </td>
+                        <td className="px-5 py-3.5 text-[13px] text-muted-foreground">
+                          {brand?.name || '—'}
+                        </td>
+                        <td className="px-5 py-3.5 text-muted-foreground font-mono">
+                          <span className="crm-cell-clip max-w-[220px]" title={rs.full_path || ''}>{rs.full_path || '—'}</span>
+                        </td>
+                        <td className="px-5 py-3.5 text-muted-foreground font-mono">
+                          <span className="crm-cell-clip" title={rs.repair_service_id}>{rs.repair_service_id}</span>
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="crm-data-table min-w-[900px]">
+              <thead>
+                <tr className="bg-gray-50 border-y border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Variant</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Device model</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Category</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Selling price</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Cost</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Duration</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Warranty</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {modelFilteredVariants.length === 0 ? (
+                  <tr>
+                    <td colSpan={8} className="text-center py-12 text-[13px] text-muted-foreground">
+                      No repair variants found for the selected filter.
+                    </td>
+                  </tr>
+                ) : (
+                  variantsPager.items.map((rv) => {
+                    const rs = repairServicesMap.get(rv.repair_service_id);
+                    const sType = rs ? serviceTypesMap.get(rs.service_type_id) : null;
+                    const model = rs ? modelsMap.get(rs.model_id) : null;
+                    return (
+                      <tr key={rv.variant_id} className="border-t border-border hover:bg-muted/10">
+                        <td className="px-5 py-3.5 text-[13px] font-semibold text-foreground">{rv.name}</td>
+                        <td className="px-5 py-3.5 text-[13px] text-foreground font-medium">{model?.name || '—'}</td>
+                        <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{sType?.name || '—'}</td>
+                        <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{formatCurrency(rv.price)}</td>
+                        <td className="px-5 py-3.5 text-[13px] text-muted-foreground">
+                          {rv.cost ? formatCurrency(rv.cost) : '—'}
+                        </td>
+                        <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{rv.duration_minutes} min</td>
+                        <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{rv.warranty_days} days</td>
+                        <td className="px-5 py-3.5">{renderActiveBadge(rv.status || 'Active')}</td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+        {activeTab === 'types' && <TablePagination {...typesPager} />}
+        {activeTab === 'mappings' && <TablePagination {...mappingsPager} />}
+        {activeTab === 'variants' && <TablePagination {...variantsPager} />}
+      </div>
+
+      <SlideOver
+        open={showTypeModal}
+        onClose={() => {
+          if (isSubmitting) return;
+          setShowTypeModal(false);
+        }}
+        title="Add service category"
+        icon={<Tag className="w-4 h-4 text-primary shrink-0" />}
+      >
+        <form onSubmit={handleCreateServiceType} className="flex min-h-0 flex-1 flex-col">
+          <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4">
+            <div>
+              <label className={labelClass}>
+                Category name <span className="text-primary">*</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g. Screen Replacement"
+                value={typeName}
+                onChange={(e) => setTypeName(e.target.value)}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Description</label>
+              <textarea
+                placeholder="e.g. Display glass replacement and OLED panel repairs"
+                value={typeDesc}
+                onChange={(e) => setTypeDesc(e.target.value)}
+                className={`${inputClass} h-20 py-2 resize-none`}
+                rows={3}
+              />
+            </div>
+            <div>
+              <label className="block text-[10px] text-muted-foreground mb-2 font-semibold uppercase tracking-wider">SUPPORTED DEVICES</label>
+              <div className="flex items-center gap-6">
+                {CANONICAL_DEVICE_TYPES.map((dt) => (
+                  <label key={dt.id} className="flex items-center gap-2 text-[13px] text-foreground cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={selectedDeviceTypes.includes(dt.id)}
+                      onChange={(e) => {
+                        if (e.target.checked) setSelectedDeviceTypes((prev) => [...prev, dt.id]);
+                        else setSelectedDeviceTypes((prev) => prev.filter((x) => x !== dt.id));
+                      }}
+                      className="w-4 h-4 rounded border-border text-primary focus:ring-primary accent-primary cursor-pointer"
+                    />
+                    <span className="font-medium">{dt.name}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+            <button type="button" onClick={() => setShowTypeModal(false)} disabled={isSubmitting} className={secondaryButton}>
+              Cancel
+            </button>
+            <button type="submit" disabled={isSubmitting} className={primaryButton}>
+              {isSubmitting ? 'Saving...' : 'Create category'}
+            </button>
+          </div>
+        </form>
+      </SlideOver>
+
+      <SlideOver
+        open={showMappingModal}
+        onClose={() => {
+          if (isSubmitting) return;
+          setShowMappingModal(false);
+        }}
+        title="Map model to category"
+        icon={<Smartphone className="w-4 h-4 text-primary shrink-0" />}
+      >
+        <form onSubmit={handleCreateMapping} className="flex min-h-0 flex-1 flex-col">
+          <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4">
+            <div>
+              <label className={labelClass}>
+                Service category <span className="text-primary">*</span>
+              </label>
+              <CustomSelect
+                value={step2CategoryId}
+                onChange={setStep2CategoryId}
+                placeholder="Select category"
+                options={[
+                  { value: '', label: 'Select category' },
+                  ...serviceTypes.map((st) => ({ value: st.service_type_id, label: st.name })),
+                ]}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>
+                Brand <span className="text-primary">*</span>
+              </label>
+              <CustomSelect
+                value={step2BrandId}
+                onChange={(value) => {
+                  setStep2BrandId(value);
+                  setStep2SeriesId('');
+                  setStep2ModelId('');
+                }}
+                placeholder="Select brand"
+                options={[
+                  { value: '', label: 'Select brand' },
+                  ...brands.map((b) => ({ value: b.brand_id, label: b.name })),
+                ]}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Device series</label>
+              <CustomSelect
+                value={step2SeriesId}
+                disabled={!step2BrandId}
+                onChange={(value) => {
+                  setStep2SeriesId(value);
+                  setStep2ModelId('');
+                }}
+                placeholder={!step2BrandId ? 'Select brand first' : 'All series'}
+                options={[
+                  { value: '', label: !step2BrandId ? 'Select brand first' : 'All series' },
+                  ...step2SeriesList.map((s) => ({ value: s.series_id, label: s.name })),
+                ]}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>
+                Device model <span className="text-primary">*</span>
+              </label>
+              <CustomSelect
+                value={step2ModelId}
+                disabled={!step2BrandId}
+                onChange={setStep2ModelId}
+                placeholder={!step2BrandId ? 'Select brand first' : 'Select model'}
+                options={[
+                  { value: '', label: !step2BrandId ? 'Select brand first' : 'Select model' },
+                  ...step2ModelsList.map((m) => ({ value: m.model_id, label: m.name })),
+                ]}
+              />
+            </div>
+          </div>
+          <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+            <button type="button" onClick={() => setShowMappingModal(false)} disabled={isSubmitting} className={secondaryButton}>
+              Cancel
+            </button>
+            <button type="submit" disabled={isSubmitting} className={primaryButton}>
+              {isSubmitting ? 'Saving...' : 'Save mapping'}
+            </button>
+          </div>
+        </form>
+      </SlideOver>
+
+      <SlideOver
+        open={showVariantModal}
+        onClose={() => {
+          if (isSubmitting) return;
+          setShowVariantModal(false);
+        }}
+        title="Add variants & pricing"
+        icon={<Wrench className="w-4 h-4 text-primary shrink-0" />}
+      >
+        <form onSubmit={handleCreateBatchVariants} className="flex min-h-0 flex-1 flex-col">
+          <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4">
+            <div>
+              <label className={labelClass}>
+                Service category <span className="text-primary">*</span>
+              </label>
+              <CustomSelect
+                value={step3CategoryId}
+                onChange={(value) => {
+                  setStep3CategoryId(value);
+                  setStep3BrandId('');
+                  setStep3ModelId('');
+                }}
+                placeholder="Select category"
+                options={[
+                  { value: '', label: 'Select category' },
+                  ...serviceTypes.map((st) => ({ value: st.service_type_id, label: st.name })),
+                ]}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>
+                Brand <span className="text-primary">*</span>
+              </label>
+              <CustomSelect
+                value={step3BrandId}
+                disabled={!step3CategoryId}
+                onChange={(value) => {
+                  setStep3BrandId(value);
+                  setStep3ModelId('');
+                }}
+                placeholder={!step3CategoryId ? 'Select category first' : 'Select brand'}
+                options={[
+                  { value: '', label: !step3CategoryId ? 'Select category first' : 'Select brand' },
+                  ...step3MappedBrandsList.map((b) => ({ value: b.brand_id, label: b.name })),
+                ]}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>
+                Device model <span className="text-primary">*</span>
+              </label>
+              <CustomSelect
+                value={step3ModelId}
+                disabled={!step3BrandId || !step3CategoryId}
+                onChange={setStep3ModelId}
+                placeholder={!step3BrandId ? 'Select brand first' : 'Select model'}
+                options={[
+                  { value: '', label: !step3BrandId ? 'Select brand first' : 'Select model' },
+                  ...step3MappedModelsList.map((m) => ({ value: m.model_id, label: m.name })),
+                ]}
+              />
+            </div>
+
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <label className="text-[11px] font-semibold text-muted-foreground uppercase">
+                  Variants ({batchRows.length})
+                </label>
+                <button type="button" onClick={handleAddBatchRow} className="inline-flex items-center gap-1 text-[12px] font-semibold text-primary cursor-pointer">
+                  <Plus className="w-3.5 h-3.5" />
+                  Add row
+                </button>
+              </div>
+              <div className="space-y-2">
+                {batchRows.map((row, idx) => (
+                  <div key={row.id} className="p-3 border border-border crm-radius-card bg-muted/10 space-y-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-[12px] font-semibold text-muted-foreground">Row {idx + 1}</span>
+                      {batchRows.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => handleRemoveBatchRow(row.id)}
+                          className="w-8 h-8 crm-radius-control border border-border text-muted-foreground hover:text-destructive hover:bg-muted cursor-pointer flex items-center justify-center"
+                          aria-label="Remove row"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      )}
+                    </div>
+                    <div>
+                      <label className={labelClass}>Variant name</label>
+                      <input
+                        type="text"
+                        placeholder="e.g. Original OLED Grade A+"
+                        value={row.name}
+                        onChange={(e) => handleBatchRowChange(row.id, 'name', e.target.value)}
+                        className={inputClass}
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label className={labelClass}>Selling price (₹)</label>
+                        <input
+                          type="number"
+                          step="0.01"
+                          placeholder="7500"
+                          value={row.price}
+                          onChange={(e) => handleBatchRowChange(row.id, 'price', e.target.value)}
+                          className={inputClass}
+                        />
+                      </div>
+                      <div>
+                        <label className={labelClass}>Cost (₹)</label>
+                        <input
+                          type="number"
+                          step="0.01"
+                          placeholder="4200"
+                          value={row.cost}
+                          onChange={(e) => handleBatchRowChange(row.id, 'cost', e.target.value)}
+                          className={inputClass}
+                        />
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label className={labelClass}>Duration (min)</label>
+                        <input
+                          type="number"
+                          placeholder="45"
+                          value={row.duration}
+                          onChange={(e) => handleBatchRowChange(row.id, 'duration', e.target.value)}
+                          className={inputClass}
+                        />
+                      </div>
+                      <div>
+                        <label className={labelClass}>Warranty (days)</label>
+                        <input
+                          type="number"
+                          placeholder="180"
+                          value={row.warranty}
+                          onChange={(e) => handleBatchRowChange(row.id, 'warranty', e.target.value)}
+                          className={inputClass}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+            <button type="button" onClick={() => setShowVariantModal(false)} disabled={isSubmitting} className={secondaryButton}>
+              Cancel
+            </button>
+            <button type="submit" disabled={isSubmitting} className={primaryButton}>
+              {isSubmitting ? 'Saving...' : `Save variants (${batchRows.length})`}
+            </button>
+          </div>
+        </form>
+      </SlideOver>
+    </div>
+  );
+}

app/(admin)/service-invoices/page.tsx

@@ -0,0 +1,448 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { AlertTriangle, CheckCircle2, CreditCard, Eye, Receipt, RefreshCw, Search } from 'lucide-react';
+import { format } from 'date-fns';
+import { toast } from 'sonner';
+import { adminService } from '@/services/api/adminService';
+import { formatCurrency } from '@/lib/utils';
+import { SlideOver } from '@/components/ui/SlideOver';
+import { StatsSparklineCard, datesToSparkline, weekOverWeekChange } from '@/components/ui/StatsSparklineCard';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+
+type InvoiceTab = 'ALL' | 'FINAL_PAYMENT_PENDING' | 'READY_FOR_DELIVERY' | 'CLOSED';
+
+function getQuote(detail: any) {
+  if (!detail) return null;
+  if (detail.quote) return detail.quote;
+  if (detail.active_quote) return detail.active_quote;
+  if (Array.isArray(detail.quotes) && detail.quotes.length > 0) return detail.quotes[0];
+  return null;
+}
+
+function getPayments(detail: any): any[] {
+  if (!detail) return [];
+  if (Array.isArray(detail.payments)) return detail.payments;
+  if (Array.isArray(detail.payment_records)) return detail.payment_records;
+  return [];
+}
+
+function paymentTypeLabel(type: string) {
+  switch (type) {
+    case 'DEPOSIT':
+      return 'Booking deposit';
+    case 'FINAL':
+      return 'Final settlement';
+    case 'PARTIAL':
+      return 'Partial payment';
+    default:
+      return type || 'Payment';
+  }
+}
+
+function jobStatusBadgeClass(status?: string) {
+  const s = (status || '').toUpperCase();
+  if (s === 'CLOSED' || s === 'REPAIR_COMPLETED') return 'bg-success text-white';
+  if (s === 'CANCELLED' || s === 'BOOKING_PENDING') return 'bg-destructive text-white';
+  if (s === 'FINAL_PAYMENT_PENDING' || s === 'QUOTE_SENT' || s === 'REPAIR_IN_PROGRESS') return 'bg-warning text-white';
+  if (s === 'READY_FOR_DELIVERY' || s === 'DEVICE_INTAKE' || s === 'QUOTE_ACCEPTED') return 'bg-primary text-white';
+  return 'bg-muted text-muted-foreground';
+}
+
+function paymentBadgeClass(status?: string) {
+  const s = (status || '').toUpperCase();
+  if (s === 'PAID') return 'bg-success text-white';
+  if (s === 'FAILED' || s === 'REFUNDED') return 'bg-destructive text-white';
+  if (s === 'PENDING') return 'bg-warning text-white';
+  return 'bg-muted text-muted-foreground';
+}
+
+function formatStatus(status?: string) {
+  return (status || 'Pending').replace(/_/g, ' ');
+}
+
+function money(value: unknown) {
+  const n = typeof value === 'number' ? value : parseFloat(String(value ?? ''));
+  return Number.isFinite(n) ? formatCurrency(n) : '—';
+}
+
+function formatDeviceName(brand?: string, model?: string, fallback = '—') {
+  const b = (brand || '').trim();
+  const m = (model || '').trim();
+  if (!b) return m || fallback;
+  if (!m) return b || fallback;
+  if (m.toLowerCase().startsWith(b.toLowerCase())) return m;
+  return `${b} ${m}`;
+}
+
+export default function ServiceInvoicesPage() {
+  const [jobs, setJobs] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterStatus, setFilterStatus] = useState<InvoiceTab>('ALL');
+
+  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+  const [detail, setDetail] = useState<any>(null);
+  const [loadingDetail, setLoadingDetail] = useState(false);
+
+  const loadJobs = async () => {
+    setLoading(true);
+    try {
+      const data = await adminService.listServiceJobs();
+      const seen = new Set<string>();
+      const unique = (data as any[]).filter((j) => {
+        if (!j?.job_id || seen.has(j.job_id)) return false;
+        seen.add(j.job_id);
+        return true;
+      });
+      setJobs(unique);
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to load jobs.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadJobs();
+  }, []);
+
+  const openInvoice = async (jobId: string) => {
+    setSelectedJobId(jobId);
+    setDetail(null);
+    setLoadingDetail(true);
+    try {
+      const next = await adminService.getServiceJobDetailsAdmin(jobId);
+      setDetail(next);
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to load invoice detail.');
+      setSelectedJobId(null);
+    } finally {
+      setLoadingDetail(false);
+    }
+  };
+
+  const closeInvoice = () => {
+    setSelectedJobId(null);
+    setDetail(null);
+  };
+
+  const pendingCount = jobs.filter((j) => j.status === 'FINAL_PAYMENT_PENDING').length;
+  const deliveryCount = jobs.filter((j) => j.status === 'READY_FOR_DELIVERY').length;
+  const closedCount = jobs.filter((j) => j.status === 'CLOSED').length;
+
+  const allJobDates = useMemo(() => jobs.map((j) => j.created_at), [jobs]);
+  const pendingJobDates = useMemo(
+    () => jobs.filter((j) => j.status === 'FINAL_PAYMENT_PENDING').map((j) => j.created_at),
+    [jobs]
+  );
+  const closedJobDates = useMemo(
+    () => jobs.filter((j) => j.status === 'CLOSED').map((j) => j.created_at),
+    [jobs]
+  );
+
+  const filteredJobs = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    return jobs.filter((job) => {
+      const statusMatch = filterStatus === 'ALL' || job.status === filterStatus;
+      const haystack = [
+        job.job_no,
+        job.customer_name,
+        job.customer_phone,
+        job.customer_email,
+        job.device_brand,
+        job.device_model,
+        job.service_name,
+        job.status,
+      ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+      return statusMatch && (!q || haystack.includes(q));
+    });
+  }, [jobs, searchQuery, filterStatus]);
+
+  const pager = useClientPagination(filteredJobs);
+
+  const quote = getQuote(detail);
+  const payments = getPayments(detail);
+  const customerName = detail?.customer?.name || detail?.customer_name || 'Guest customer';
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden min-w-0';
+
+  const renderJobBadge = (status?: string) => (
+    <span className={`inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${jobStatusBadgeClass(status)}`}>
+      {formatStatus(status)}
+    </span>
+  );
+
+  const renderPaymentBadge = (status?: string) => (
+    <span className={`inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${paymentBadgeClass(status)}`}>
+      {formatStatus(status)}
+    </span>
+  );
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Service Invoices</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {jobs.length}
+            </span>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={loadJobs}
+          className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center shrink-0"
+          title="Reload"
+        >
+          <RefreshCw className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <StatsSparklineCard
+          title="Total jobs"
+          value={jobs.length}
+          icon={Receipt}
+          tone="green"
+          series={datesToSparkline(allJobDates)}
+          deltaPercent={weekOverWeekChange(allJobDates)}
+          active={filterStatus === 'ALL'}
+          onClick={() => setFilterStatus('ALL')}
+        />
+        <StatsSparklineCard
+          title="Payment pending"
+          value={pendingCount}
+          icon={AlertTriangle}
+          tone="orange"
+          series={datesToSparkline(pendingJobDates)}
+          deltaPercent={weekOverWeekChange(pendingJobDates)}
+          active={filterStatus === 'FINAL_PAYMENT_PENDING'}
+          onClick={() => setFilterStatus('FINAL_PAYMENT_PENDING')}
+        />
+        <StatsSparklineCard
+          title="Closed / settled"
+          value={closedCount}
+          icon={CheckCircle2}
+          tone="blue"
+          series={datesToSparkline(closedJobDates)}
+          deltaPercent={weekOverWeekChange(closedJobDates)}
+          active={filterStatus === 'CLOSED'}
+          onClick={() => setFilterStatus('CLOSED')}
+        />
+      </div>
+
+      <div className={dataCardShell}>
+        <div className="px-5 pt-5">
+          <div className="-mx-5 px-5 flex flex-wrap items-center justify-between gap-3 min-w-0 pb-4 border-b border-border">
+            <div className="relative flex-1 min-w-[180px] max-w-[480px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full h-9 pl-9 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+              />
+            </div>
+            <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1 shrink-0 overflow-x-auto max-w-full">
+              {(
+                [
+                  { id: 'ALL', label: `All (${jobs.length})` },
+                  { id: 'FINAL_PAYMENT_PENDING', label: `Payment pending (${pendingCount})` },
+                  { id: 'READY_FOR_DELIVERY', label: `Ready for delivery (${deliveryCount})` },
+                  { id: 'CLOSED', label: `Closed (${closedCount})` },
+                ] as { id: InvoiceTab; label: string }[]
+              ).map((tab) => (
+                <button
+                  key={tab.id}
+                  type="button"
+                  onClick={() => setFilterStatus(tab.id)}
+                  className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors whitespace-nowrap ${
+                    filterStatus === tab.id ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
+            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+            <span className="text-[13px] text-muted-foreground">Loading invoices...</span>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="crm-data-table min-w-[900px]">
+              <thead>
+                <tr className="bg-gray-50 border-y border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Job no.</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Customer</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Device</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Service</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Base price</th>
+                  <th className="px-5 py-3 text-center text-[13px] font-semibold text-gray-700">Action</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {filteredJobs.length === 0 ? (
+                  <tr>
+                    <td colSpan={7} className="text-center py-12 text-[13px] text-muted-foreground">
+                      {searchQuery || filterStatus !== 'ALL' ? 'No jobs match your search.' : 'No service invoices found.'}
+                    </td>
+                  </tr>
+                ) : (
+                  pager.items.map((job) => (
+                    <tr
+                      key={job.job_id}
+                      className={`border-t border-border hover:bg-muted/10 cursor-pointer ${
+                        selectedJobId === job.job_id ? 'bg-muted/20' : ''
+                      }`}
+                      onClick={() => openInvoice(job.job_id)}
+                    >
+                      <td className="px-5 py-3.5 text-[13px] font-semibold text-foreground font-mono">
+                        {job.job_no || job.job_id}
+                      </td>
+                      <td className="px-5 py-3.5">
+                        <p className="text-[13px] font-medium text-foreground">{job.customer_name || 'Guest customer'}</p>
+                        <p className="text-[12px] text-muted-foreground mt-0.5">
+                          {job.customer_phone && job.customer_phone !== 'N/A'
+                            ? job.customer_phone
+                            : job.customer_email && job.customer_email !== 'N/A'
+                              ? job.customer_email
+                              : '—'}
+                        </p>
+                      </td>
+                      <td className="px-5 py-3.5 text-[13px] text-foreground">
+                        {formatDeviceName(job.device_brand, job.device_model)}
+                      </td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground max-w-[200px] truncate">
+                        {job.service_name || '—'}
+                      </td>
+                      <td className="px-5 py-3.5">{renderJobBadge(job.status)}</td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{money(job.base_price)}</td>
+                      <td className="px-5 py-3.5">
+                        <div className="flex items-center justify-center">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              openInvoice(job.job_id);
+                            }}
+                            className="w-8 h-8 crm-radius-control border border-border text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer flex items-center justify-center"
+                            aria-label="View invoice"
+                          >
+                            <Eye className="w-3.5 h-3.5" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+        <TablePagination {...pager} />
+      </div>
+
+      <SlideOver
+        open={!!selectedJobId}
+        onClose={closeInvoice}
+        title={detail ? `Invoice ${detail.job_no || ''}` : 'Invoice details'}
+        icon={<Receipt className="w-4 h-4 text-primary shrink-0" />}
+      >
+        {loadingDetail ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
+            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+            <span className="text-[13px] text-muted-foreground">Loading invoice...</span>
+          </div>
+        ) : !detail ? (
+          <div className="px-5 py-12 text-center text-[13px] text-muted-foreground">Failed to load invoice data.</div>
+        ) : (
+          <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-5">
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <p className="text-[13px] font-semibold text-foreground">{customerName}</p>
+                <p className="text-[12px] text-muted-foreground mt-0.5">
+                  {formatDeviceName(detail.device_brand, detail.device_model)}
+                  {detail.service_name ? ` · ${detail.service_name}` : ''}
+                </p>
+              </div>
+              {renderJobBadge(detail.status)}
+            </div>
+
+            {quote ? (
+              <div className="p-3 border border-border crm-radius-card bg-muted/10 space-y-1.5 text-[13px]">
+                <p className="text-[11px] font-semibold text-muted-foreground uppercase">Cost estimate</p>
+                <div className="flex justify-between text-muted-foreground">
+                  <span>{detail.service_name || 'Service'}</span>
+                  <span>{money(quote.subtotal)}</span>
+                </div>
+                {Number(quote.additional_damage_amount) > 0 && (
+                  <div className="flex justify-between text-muted-foreground">
+                    <span>
+                      {quote.additional_damage_description
+                        ? `Additional: ${quote.additional_damage_description}`
+                        : 'Additional damage'}
+                    </span>
+                    <span>+ {money(quote.additional_damage_amount)}</span>
+                  </div>
+                )}
+                <div className="flex justify-between text-muted-foreground">
+                  <span>GST (18%)</span>
+                  <span>{money(quote.tax)}</span>
+                </div>
+                <div className="flex justify-between font-semibold text-foreground border-t border-border pt-1.5">
+                  <span>Total</span>
+                  <span>{money(quote.total)}</span>
+                </div>
+              </div>
+            ) : (
+              <p className="text-[13px] text-muted-foreground">No quote generated yet.</p>
+            )}
+
+            <div className="space-y-2">
+              <p className="text-[11px] font-semibold text-muted-foreground uppercase">Payments</p>
+              {payments.length > 0 ? (
+                payments.map((p: any, idx: number) => (
+                  <div
+                    key={p.payment_id || p.id || idx}
+                    className="flex items-start justify-between gap-3 p-3 border border-border crm-radius-card"
+                  >
+                    <div className="flex items-start gap-2 min-w-0">
+                      <CreditCard className="w-4 h-4 text-primary mt-0.5 shrink-0" />
+                      <div className="min-w-0">
+                        <p className="text-[13px] font-medium text-foreground">{paymentTypeLabel(p.payment_type)}</p>
+                        {p.paid_at && (
+                          <p className="text-[12px] text-muted-foreground mt-0.5">
+                            {format(new Date(p.paid_at), 'dd MMM yyyy')}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    <div className="text-right shrink-0 space-y-1">
+                      <p className="text-[13px] font-medium text-foreground">{money(p.amount)}</p>
+                      {renderPaymentBadge(p.status)}
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <p className="text-[13px] text-muted-foreground">No payments recorded for this job yet.</p>
+              )}
+            </div>
+          </div>
+        )}
+      </SlideOver>
+    </div>
+  );
+}

app/(admin)/service-quotes/page.tsx

@@ -0,0 +1,437 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { BadgeDollarSign, CheckCircle2, Clock, Eye, RefreshCw, Search, XCircle } from 'lucide-react';
+import { format } from 'date-fns';
+import { toast } from 'sonner';
+import { adminService } from '@/services/api/adminService';
+import { apiFetch } from '@/services/api/client';
+import { formatCurrency } from '@/lib/utils';
+import { SlideOver } from '@/components/ui/SlideOver';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+
+type QuoteTab = 'all' | 'pending' | 'accepted' | 'other';
+
+function getQuote(detail: any) {
+  if (!detail) return null;
+  if (detail.quote) return detail.quote;
+  if (detail.active_quote) return detail.active_quote;
+  if (Array.isArray(detail.quotes) && detail.quotes.length > 0) return detail.quotes[0];
+  return null;
+}
+
+function isPendingJob(status?: string) {
+  const s = (status || '').toUpperCase();
+  return s === 'QUOTE_SENT' || s === 'INSPECTION_COMPLETED';
+}
+
+function isAcceptedJob(status?: string) {
+  const s = (status || '').toUpperCase();
+  return s === 'QUOTE_ACCEPTED';
+}
+
+function jobStatusBadgeClass(status?: string) {
+  const s = (status || '').toUpperCase();
+  if (s === 'QUOTE_ACCEPTED' || s === 'CLOSED' || s === 'REPAIR_COMPLETED') return 'bg-success text-white';
+  if (s === 'REJECTED' || s === 'CANCELLED' || s === 'BOOKING_PENDING') return 'bg-destructive text-white';
+  if (s === 'QUOTE_SENT' || s === 'REPAIR_IN_PROGRESS' || s === 'FINAL_PAYMENT_PENDING') return 'bg-warning text-white';
+  if (s === 'DEVICE_INTAKE' || s === 'DEVICE_RECEIVED') return 'bg-primary text-white';
+  return 'bg-muted text-muted-foreground';
+}
+
+function quoteStatusBadgeClass(status?: string) {
+  const s = (status || '').toUpperCase();
+  if (s === 'ACCEPTED') return 'bg-success text-white';
+  if (s === 'REJECTED') return 'bg-destructive text-white';
+  if (s === 'PENDING_CUSTOMER') return 'bg-warning text-white';
+  return 'bg-muted text-muted-foreground';
+}
+
+function formatStatus(status?: string) {
+  return (status || 'Pending').replace(/_/g, ' ');
+}
+
+function money(value: unknown) {
+  const n = typeof value === 'number' ? value : parseFloat(String(value ?? ''));
+  return Number.isFinite(n) ? formatCurrency(n) : '—';
+}
+
+function formatDeviceName(brand?: string, model?: string, fallback = '—') {
+  const b = (brand || '').trim();
+  const m = (model || '').trim();
+  if (!b) return m || fallback;
+  if (!m) return b || fallback;
+  if (m.toLowerCase().startsWith(b.toLowerCase())) return m;
+  return `${b} ${m}`;
+}
+
+export default function ServiceQuotationsPage() {
+  const [jobs, setJobs] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [quoteTab, setQuoteTab] = useState<QuoteTab>('all');
+
+  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+  const [detail, setDetail] = useState<any>(null);
+  const [loadingDetail, setLoadingDetail] = useState(false);
+  const [updatingQuote, setUpdatingQuote] = useState(false);
+
+  const loadQuotedJobs = async () => {
+    setLoading(true);
+    try {
+      const data = await adminService.listServiceJobs();
+      const seen = new Set<string>();
+      const unique = (data as any[]).filter((j) => {
+        if (!j?.job_id || seen.has(j.job_id)) return false;
+        seen.add(j.job_id);
+        return true;
+      });
+      setJobs(unique);
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to load service jobs.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadQuotedJobs();
+  }, []);
+
+  const openQuote = async (jobId: string) => {
+    setSelectedJobId(jobId);
+    setDetail(null);
+    setLoadingDetail(true);
+    try {
+      const next = await adminService.getServiceJobDetailsAdmin(jobId);
+      setDetail(next);
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to load quote detail.');
+      setSelectedJobId(null);
+    } finally {
+      setLoadingDetail(false);
+    }
+  };
+
+  const closeQuote = () => {
+    if (updatingQuote) return;
+    setSelectedJobId(null);
+    setDetail(null);
+  };
+
+  const handleRespondQuote = async (jobId: string, quoteId: string, action: 'ACCEPT' | 'REJECT') => {
+    setUpdatingQuote(true);
+    try {
+      await apiFetch(`/api/v1/service/jobs/${jobId}/quotes/${quoteId}/respond?action=${action}`, { method: 'POST' });
+      const next = await adminService.getServiceJobDetailsAdmin(jobId);
+      setDetail(next);
+      toast.success(action === 'ACCEPT' ? 'Customer quote accepted' : 'Customer quote rejected');
+      await loadQuotedJobs();
+    } catch (err: any) {
+      toast.error(err.message || `Failed to ${action.toLowerCase()} quote.`);
+    } finally {
+      setUpdatingQuote(false);
+    }
+  };
+
+  const pendingCount = jobs.filter((j) => isPendingJob(j.status)).length;
+  const acceptedCount = jobs.filter((j) => isAcceptedJob(j.status)).length;
+  const otherCount = jobs.filter((j) => !isPendingJob(j.status) && !isAcceptedJob(j.status)).length;
+
+  const filteredJobs = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    return jobs.filter((job) => {
+      const tabMatch =
+        quoteTab === 'all' ||
+        (quoteTab === 'pending' && isPendingJob(job.status)) ||
+        (quoteTab === 'accepted' && isAcceptedJob(job.status)) ||
+        (quoteTab === 'other' && !isPendingJob(job.status) && !isAcceptedJob(job.status));
+      const haystack = [
+        job.job_no,
+        job.customer_name,
+        job.customer_phone,
+        job.customer_email,
+        job.device_brand,
+        job.device_model,
+        job.service_name,
+        job.status,
+      ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+      return tabMatch && (!q || haystack.includes(q));
+    });
+  }, [jobs, searchQuery, quoteTab]);
+
+  const pager = useClientPagination(filteredJobs);
+
+  const quote = getQuote(detail);
+  const customerName = detail?.customer?.name || detail?.customer_name || 'Guest customer';
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden min-w-0';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50';
+
+  const renderJobBadge = (status?: string) => (
+    <span className={`inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${jobStatusBadgeClass(status)}`}>
+      {formatStatus(status)}
+    </span>
+  );
+
+  const renderQuoteBadge = (status?: string) => (
+    <span className={`inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${quoteStatusBadgeClass(status)}`}>
+      {formatStatus(status)}
+    </span>
+  );
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Service Quotations</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {jobs.length}
+            </span>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={loadQuotedJobs}
+          className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center shrink-0"
+          title="Reload"
+        >
+          <RefreshCw className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      <div className={dataCardShell}>
+        <div className="px-5 pt-5">
+          <div className="-mx-5 px-5 flex flex-wrap items-center justify-between gap-3 min-w-0 pb-4 border-b border-border">
+            <div className="relative flex-1 min-w-[180px] max-w-[480px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full h-9 pl-9 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+              />
+            </div>
+            <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1 shrink-0 overflow-x-auto max-w-full">
+              {(
+                [
+                  { id: 'all', label: `All (${jobs.length})` },
+                  { id: 'pending', label: `Pending (${pendingCount})` },
+                  { id: 'accepted', label: `Accepted (${acceptedCount})` },
+                  { id: 'other', label: `Other (${otherCount})` },
+                ] as { id: QuoteTab; label: string }[]
+              ).map((tab) => (
+                <button
+                  key={tab.id}
+                  type="button"
+                  onClick={() => setQuoteTab(tab.id)}
+                  className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors whitespace-nowrap ${
+                    quoteTab === tab.id ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
+            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+            <span className="text-[13px] text-muted-foreground">Loading quotations...</span>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="crm-data-table min-w-[900px]">
+              <thead>
+                <tr className="bg-gray-50 border-y border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Job no.</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Customer</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Device</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Service</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Base price</th>
+                  <th className="px-5 py-3 text-center text-[13px] font-semibold text-gray-700">Action</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {filteredJobs.length === 0 ? (
+                  <tr>
+                    <td colSpan={7} className="text-center py-12 text-[13px] text-muted-foreground">
+                      {searchQuery || quoteTab !== 'all' ? 'No quotations match your search.' : 'No service jobs found.'}
+                    </td>
+                  </tr>
+                ) : (
+                  pager.items.map((job) => (
+                    <tr
+                      key={job.job_id}
+                      className={`border-t border-border hover:bg-muted/10 cursor-pointer ${
+                        selectedJobId === job.job_id ? 'bg-muted/20' : ''
+                      }`}
+                      onClick={() => openQuote(job.job_id)}
+                    >
+                      <td className="px-5 py-3.5 text-[13px] font-semibold text-foreground font-mono">
+                        {job.job_no || job.job_id}
+                      </td>
+                      <td className="px-5 py-3.5">
+                        <p className="text-[13px] font-medium text-foreground">{job.customer_name || 'Guest customer'}</p>
+                        <p className="text-[12px] text-muted-foreground mt-0.5">
+                          {job.customer_phone && job.customer_phone !== 'N/A'
+                            ? job.customer_phone
+                            : job.customer_email && job.customer_email !== 'N/A'
+                              ? job.customer_email
+                              : '—'}
+                        </p>
+                      </td>
+                      <td className="px-5 py-3.5 text-[13px] text-foreground">
+                        {formatDeviceName(job.device_brand, job.device_model)}
+                      </td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground max-w-[200px] truncate">
+                        {job.service_name || '—'}
+                      </td>
+                      <td className="px-5 py-3.5">{renderJobBadge(job.status)}</td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{money(job.base_price)}</td>
+                      <td className="px-5 py-3.5">
+                        <div className="flex items-center justify-center">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              openQuote(job.job_id);
+                            }}
+                            className="w-8 h-8 crm-radius-control border border-border text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer flex items-center justify-center"
+                            aria-label="View quote"
+                          >
+                            <Eye className="w-3.5 h-3.5" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+        <TablePagination {...pager} />
+      </div>
+
+      <SlideOver
+        open={!!selectedJobId}
+        onClose={closeQuote}
+        title={detail ? `Quote ${detail.job_no || ''}` : 'Quote details'}
+        icon={<BadgeDollarSign className="w-4 h-4 text-primary shrink-0" />}
+      >
+        {loadingDetail ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
+            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+            <span className="text-[13px] text-muted-foreground">Loading quote...</span>
+          </div>
+        ) : !detail ? (
+          <div className="px-5 py-12 text-center text-[13px] text-muted-foreground">Failed to load quote details.</div>
+        ) : !quote ? (
+          <div className="px-5 py-12 text-center text-[13px] text-muted-foreground">
+            No active quote found. Submit a diagnostic inspection first.
+          </div>
+        ) : (
+          <div className="flex min-h-0 flex-1 flex-col">
+            <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-5">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="text-[13px] font-semibold text-foreground">
+                    Quote{quote.version != null ? ` v${quote.version}` : ''}
+                  </p>
+                  <p className="text-[12px] text-muted-foreground mt-0.5">{customerName}</p>
+                </div>
+                {renderQuoteBadge(quote.status)}
+              </div>
+
+              <div className="p-3 border border-border crm-radius-card bg-muted/10 space-y-1.5 text-[13px]">
+                <div className="flex justify-between text-muted-foreground">
+                  <span>{detail.service_name || 'Service'}</span>
+                  <span>{money(quote.subtotal)}</span>
+                </div>
+                {Number(quote.additional_damage_amount) > 0 && (
+                  <div className="flex justify-between text-muted-foreground">
+                    <span>
+                      {quote.additional_damage_description
+                        ? `Additional: ${quote.additional_damage_description}`
+                        : 'Additional damage'}
+                    </span>
+                    <span>+ {money(quote.additional_damage_amount)}</span>
+                  </div>
+                )}
+                <div className="flex justify-between text-muted-foreground">
+                  <span>GST (18%)</span>
+                  <span>{money(quote.tax)}</span>
+                </div>
+                <div className="flex justify-between font-semibold text-foreground border-t border-border pt-1.5">
+                  <span>Total</span>
+                  <span>{money(quote.total)}</span>
+                </div>
+              </div>
+
+              {quote.reason && (
+                <div>
+                  <p className="text-[11px] font-semibold text-muted-foreground uppercase mb-1">Note</p>
+                  <p className="text-[13px] text-foreground">{quote.reason}</p>
+                </div>
+              )}
+
+              {quote.expires_at && (
+                <p className="flex items-center gap-1.5 text-[12px] text-muted-foreground">
+                  <Clock className="w-3.5 h-3.5" />
+                  Expires {format(new Date(quote.expires_at), 'dd MMM yyyy, hh:mm a')}
+                </p>
+              )}
+
+              {quote.status === 'ACCEPTED' && (
+                <p className="flex items-center gap-1.5 text-[13px] text-success font-medium">
+                  <CheckCircle2 className="w-4 h-4" />
+                  Quote accepted — repair authorised.
+                </p>
+              )}
+            </div>
+
+            {quote.status === 'PENDING_CUSTOMER' && (
+              <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+                <button
+                  type="button"
+                  onClick={() => handleRespondQuote(detail.job_id || selectedJobId!, quote.quote_id, 'REJECT')}
+                  disabled={updatingQuote}
+                  className={secondaryButton}
+                >
+                  <XCircle className="w-3.5 h-3.5" />
+                  Reject
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleRespondQuote(detail.job_id || selectedJobId!, quote.quote_id, 'ACCEPT')}
+                  disabled={updatingQuote}
+                  className={primaryButton}
+                >
+                  {updatingQuote ? (
+                    <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+                  ) : (
+                    <CheckCircle2 className="w-3.5 h-3.5" />
+                  )}
+                  Accept
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </SlideOver>
+    </div>
+  );
+}

app/(admin)/services/(list)/page.tsx

@@ -0,0 +1,332 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { Plus, RefreshCw, Search } from 'lucide-react';
+import { toast } from 'sonner';
+import { adminService } from '@/services/api/adminService';
+import { formatCurrency } from '@/lib/utils';
+import { CustomSelect } from '@/components/ui/CustomSelect';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+import { MediaProofModal } from '@/components/ui/MediaProofModal';
+
+const STATUS_OPTIONS = [
+  { value: 'BOOKING_PENDING', label: 'Pending deposit' },
+  { value: 'BOOKED', label: 'Booked' },
+  { value: 'BOOKED_PICKUP', label: 'Booked pickup' },
+  { value: 'PICKUP_SCHEDULED', label: 'Pickup scheduled' },
+  { value: 'OUT_FOR_PICKUP', label: 'Out for pickup' },
+  { value: 'DEVICE_PICKED_UP', label: 'Device picked up' },
+  { value: 'IN_TRANSIT', label: 'In transit to store' },
+  { value: 'DELIVERED_TO_STORE', label: 'Delivered to store' },
+  { value: 'DEVICE_RECEIVED', label: 'Device received' },
+  { value: 'DEVICE_INTAKE', label: 'Intake complete' },
+  { value: 'INSPECTION_PENDING', label: 'Awaiting inspection' },
+  { value: 'INSPECTION_COMPLETED', label: 'Inspection done' },
+  { value: 'QUOTE_SENT', label: 'Quote sent' },
+  { value: 'QUOTE_ACCEPTED', label: 'Quote approved' },
+  { value: 'REPAIR_IN_PROGRESS', label: 'In repair' },
+  { value: 'REPAIR_COMPLETED', label: 'Repair complete' },
+  { value: 'FINAL_PAYMENT_PENDING', label: 'Payment required' },
+  { value: 'CLOSED', label: 'Closed' },
+] as const;
+
+type QueueTab = 'all' | 'open' | 'closed';
+
+function isClosedStatus(status?: string) {
+  const s = (status || '').toUpperCase();
+  return s === 'CLOSED' || s === 'CANCELLED';
+}
+
+function getStatusBadge(status?: string) {
+  const s = (status || '').toUpperCase();
+  let label = s.replace(/_/g, ' ');
+  let color = 'bg-gray-100 text-gray-700 border-gray-200';
+
+  const match = STATUS_OPTIONS.find((opt) => opt.value === s);
+  if (match) label = match.label;
+
+  if (s.includes('PENDING') || s.includes('BOOKING')) {
+    color = 'bg-rose-50 text-rose-600 border-rose-200';
+  } else if (s.includes('QUOTE') || s.includes('INSPECTION')) {
+    color = 'bg-purple-50 text-purple-600 border-purple-200';
+  } else if (s.includes('PAYMENT') || s.includes('FINAL')) {
+    color = 'bg-amber-50 text-amber-700 border-amber-200';
+  } else if (s.includes('BOOKED') || s.includes('PICKUP') || s.includes('TRANSIT')) {
+    color = 'bg-sky-50 text-sky-600 border-sky-200';
+  } else if (s.includes('REPAIR') || s.includes('RECEIVED') || s.includes('INTAKE')) {
+    color = 'bg-blue-50 text-blue-600 border-blue-200';
+  } else if (s.includes('COMPLETED') || s.includes('CLOSED')) {
+    color = 'bg-emerald-50 text-emerald-600 border-emerald-200';
+  }
+
+  return (
+    <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-[11px] font-semibold border uppercase tracking-wider ${color}`}>
+      {label}
+    </span>
+  );
+}
+
+export default function AdminServicesDashboard() {
+  const [jobs, setJobs] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [queueTab, setQueueTab] = useState<QueueTab>('all');
+  const [filterStatus, setFilterStatus] = useState<string>('ALL');
+  const [updatingJobId, setUpdatingJobId] = useState<string | null>(null);
+
+  const loadJobs = async () => {
+    setLoading(true);
+    try {
+      const data = await adminService.listServiceJobs();
+      const seen = new Set<string>();
+      const unique = (data as any[]).filter((j) => {
+        if (!j?.job_id || seen.has(j.job_id)) return false;
+        seen.add(j.job_id);
+        return true;
+      });
+      setJobs(unique);
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to load service jobs');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+function formatDeviceName(brand?: string, model?: string, fallback = '—') {
+  const b = (brand || '').trim();
+  const m = (model || '').trim();
+  if (!b) return m || fallback;
+  if (!m) return b || fallback;
+  if (m.toLowerCase().startsWith(b.toLowerCase())) return m;
+  return `${b} ${m}`;
+}
+
+  useEffect(() => {
+    loadJobs();
+  }, []);
+
+  const [proofModalOpen, setProofModalOpen] = useState(false);
+  const [proofJobId, setProofJobId] = useState<string | null>(null);
+  const [proofTargetStatus, setProofTargetStatus] = useState<'INSPECTION_COMPLETED' | 'READY_FOR_DELIVERY'>('INSPECTION_COMPLETED');
+
+  const handleStatusChange = async (jobId: string, newStatus: string) => {
+    if (newStatus === 'INSPECTION_COMPLETED' || newStatus === 'READY_FOR_DELIVERY') {
+      setProofJobId(jobId);
+      setProofTargetStatus(newStatus);
+      setProofModalOpen(true);
+      return;
+    }
+
+    const previous = jobs.find((j) => j.job_id === jobId)?.status;
+    setJobs((prev) => prev.map((j) => (j.job_id === jobId ? { ...j, status: newStatus } : j)));
+    setUpdatingJobId(jobId);
+    try {
+      await adminService.updateServiceJobStatus(jobId, newStatus);
+      toast.success('Service job status saved');
+    } catch (err: any) {
+      setJobs((prev) => prev.map((j) => (j.job_id === jobId ? { ...j, status: previous } : j)));
+      toast.error(err.message || 'Could not update the job status');
+    } finally {
+      setUpdatingJobId(null);
+    }
+  };
+
+  const openCount = jobs.filter((j) => !isClosedStatus(j.status)).length;
+  const closedCount = jobs.filter((j) => isClosedStatus(j.status)).length;
+
+  const filteredJobs = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    return jobs.filter((job) => {
+      const tabMatch =
+        queueTab === 'all' ||
+        (queueTab === 'open' && !isClosedStatus(job.status)) ||
+        (queueTab === 'closed' && isClosedStatus(job.status));
+      const statusMatch = filterStatus === 'ALL' || job.status === filterStatus;
+      const haystack = [
+        job.job_no,
+        job.customer_name,
+        job.customer_phone,
+        job.customer_email,
+        job.device_brand,
+        job.device_model,
+        job.service_name,
+        job.status,
+      ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+      return tabMatch && statusMatch && (!q || haystack.includes(q));
+    });
+  }, [jobs, searchQuery, queueTab, filterStatus]);
+
+  const pager = useClientPagination(filteredJobs);
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden min-w-0';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
+  const inputClass =
+    'h-9 px-3 bg-card border border-border crm-radius-control text-[13px] text-foreground focus:outline-none focus:border-primary';
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Service Jobs Queue</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {jobs.length}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          <button
+            type="button"
+            onClick={loadJobs}
+            className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+            title="Reload"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+          </button>
+          <Link href="/services/intake" className={primaryButton}>
+            <span className="w-[18px] h-[18px] rounded-full bg-white text-primary flex items-center justify-center">
+              <Plus className="w-3 h-3" strokeWidth={3} />
+            </span>
+            New walk-in
+          </Link>
+        </div>
+      </div>
+
+      <div className={dataCardShell}>
+        <div className="px-5 pt-5">
+          <div className="-mx-5 px-5 flex flex-wrap items-center justify-between gap-3 min-w-0 pb-4 border-b border-border">
+            <div className="relative flex-1 min-w-[180px] max-w-[480px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full h-9 pl-9 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+              />
+            </div>
+            <div className="flex flex-wrap items-center gap-2 shrink-0">
+              <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1">
+                {(
+                  [
+                    { id: 'all', label: `All (${jobs.length})` },
+                    { id: 'open', label: `Open (${openCount})` },
+                    { id: 'closed', label: `Closed (${closedCount})` },
+                  ] as { id: QueueTab; label: string }[]
+                ).map((tab) => (
+                  <button
+                    key={tab.id}
+                    type="button"
+                    onClick={() => setQueueTab(tab.id)}
+                    className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors ${
+                      queueTab === tab.id ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                    }`}
+                  >
+                    {tab.label}
+                  </button>
+                ))}
+              </div>
+              <CustomSelect
+                value={filterStatus}
+                onChange={setFilterStatus}
+                options={[
+                  { value: 'ALL', label: 'All statuses' },
+                  ...STATUS_OPTIONS.map((opt) => ({ value: opt.value, label: opt.label })),
+                ]}
+              />
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
+            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+            <span className="text-[13px] text-muted-foreground">Loading jobs...</span>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="crm-data-table min-w-[900px]">
+              <thead>
+                <tr className="bg-gray-50 border-y border-gray-200">
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Job no.</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Customer</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Device / service</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Price</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
+                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Date</th>
+                </tr>
+              </thead>
+              <tbody className="bg-card">
+                {filteredJobs.length === 0 ? (
+                  <tr>
+                    <td colSpan={6} className="text-center py-12 text-[13px] text-muted-foreground">
+                      {searchQuery || queueTab !== 'all' || filterStatus !== 'ALL'
+                        ? 'No jobs match your search.'
+                        : 'No service jobs found.'}
+                    </td>
+                  </tr>
+                ) : (
+                  pager.items.map((job) => (
+                    <tr key={job.job_id} className="border-t border-border hover:bg-muted/10">
+                      <td className="px-5 py-3.5 text-[13px] font-semibold text-foreground font-mono">
+                        {job.job_no || job.job_id}
+                      </td>
+                      <td className="px-5 py-3.5">
+                        <p className="text-[13px] font-medium text-foreground">{job.customer_name || 'Guest customer'}</p>
+                        <p className="text-[12px] text-muted-foreground mt-0.5">
+                          {job.customer_phone && job.customer_phone !== 'N/A'
+                            ? job.customer_phone
+                            : job.customer_email && job.customer_email !== 'N/A'
+                              ? job.customer_email
+                              : '—'}
+                        </p>
+                      </td>
+                      <td className="px-5 py-3.5">
+                        <p className="text-[13px] font-medium text-foreground">
+                          {formatDeviceName(job.device_brand, job.device_model)}
+                        </p>
+                        <p className="text-[12px] text-muted-foreground mt-0.5">{job.service_name || '—'}</p>
+                      </td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">
+                        {typeof job.base_price === 'number' ? formatCurrency(job.base_price) : '—'}
+                      </td>
+                      <td className="px-5 py-3.5">
+                        {getStatusBadge(job.status)}
+                      </td>
+                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">
+                        {job.created_at ? new Date(job.created_at).toLocaleDateString() : '—'}
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+        <TablePagination {...pager} />
+      </div>
+
+      {proofJobId && (
+        <MediaProofModal
+          open={proofModalOpen}
+          onClose={() => {
+            setProofModalOpen(false);
+            setProofJobId(null);
+          }}
+          jobId={proofJobId}
+          targetStatus={proofTargetStatus}
+          onSuccess={() => {
+            loadJobs();
+          }}
+        />
+      )}
+    </div>
+  );
+}

app/(admin)/services/intake/page.tsx

@@ -0,0 +1,640 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { AlertCircle, ListTodo, RefreshCw, Smartphone, User } from 'lucide-react';
+import { toast } from 'sonner';
+import { adminService } from '@/services/api/adminService';
+import { formatCurrency } from '@/lib/utils';
+import { CustomSelect } from '@/components/ui/CustomSelect';
+import { PhoneInput } from '@/components/ui/PhoneInput';
+import { validatePhone, validateEmail } from '@/lib/validation';
+
+interface ServiceCatalogItem {
+  service_id: string;
+  name: string;
+  base_price: number;
+  description?: string | null;
+  estimated_duration_minutes?: number;
+  workflow_type?: string;
+}
+
+const EMPTY_DEVICE = {
+  brand: '',
+  custom_brand: '',
+  model: '',
+  custom_model: '',
+  model_number: '',
+  imei_primary: '',
+  imei_secondary: '',
+  color: '',
+  notes: '',
+  storage_capacity: '',
+};
+
+const EMPTY_INTAKE = {
+  power_status: 'POWERS_ON',
+  screen_condition: 'CRACKED',
+  body_condition: 'GOOD',
+  back_condition: 'GOOD',
+  camera_condition: 'WORKING',
+  accessories: 'NONE',
+  customer_notes: '',
+  technician_notes: '',
+};
+
+const POWER_OPTIONS = [
+  { value: 'POWERS_ON', label: 'Powers on & boots' },
+  { value: 'NO_POWER', label: 'No power / dead' },
+  { value: 'BOOT_LOOP', label: 'Boot loop' },
+];
+
+const SCREEN_OPTIONS = [
+  { value: 'EXCELLENT', label: 'Excellent (flawless)' },
+  { value: 'MINOR_SCRATCHES', label: 'Minor scratches' },
+  { value: 'CRACKED', label: 'Cracked glass' },
+  { value: 'SHATTERED', label: 'Shattered display & touch dead' },
+];
+
+const BODY_OPTIONS = [
+  { value: 'GOOD', label: 'Good (no dents)' },
+  { value: 'DENTED', label: 'Minor scuffs / dented corners' },
+  { value: 'BENT', label: 'Bent housing' },
+];
+
+export default function WalkInIntakePage() {
+  const router = useRouter();
+  const [catalog, setCatalog] = useState<ServiceCatalogItem[]>([]);
+  const [brands, setBrands] = useState<any[]>([]);
+  const [allModels, setAllModels] = useState<any[]>([]);
+  const [filteredModels, setFilteredModels] = useState<any[]>([]);
+  const [existingCustomers, setExistingCustomers] = useState<any[]>([]);
+  const [customerSearchQuery, setCustomerSearchQuery] = useState('');
+  const [loadingCatalog, setLoadingCatalog] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  const [customerType, setCustomerType] = useState<'EXISTING' | 'NEW'>('EXISTING');
+  const [customerId, setCustomerId] = useState('');
+  const [customerName, setCustomerName] = useState('');
+  const [customerPhone, setCustomerPhone] = useState('');
+  const [customerEmail, setCustomerEmail] = useState('');
+
+  const [selectedServiceId, setSelectedServiceId] = useState('');
+  const [customServiceName, setCustomServiceName] = useState('');
+  const [customServicePrice, setCustomServicePrice] = useState('');
+
+  const [deviceDetails, setDeviceDetails] = useState(EMPTY_DEVICE);
+  const [intakeDetails, setIntakeDetails] = useState(EMPTY_INTAKE);
+
+  const loadCatalog = async () => {
+    setLoadingCatalog(true);
+    try {
+      const [items, brandItems, modelItems, custItems] = await Promise.all([
+        adminService.fetchServiceCatalog(),
+        adminService.fetchBrands(),
+        adminService.fetchDeviceModels(),
+        adminService.fetchCustomers().catch(() => []),
+      ]);
+      setCatalog(items);
+      setBrands(brandItems);
+      setAllModels(modelItems);
+      setExistingCustomers(custItems || []);
+      if (custItems && custItems.length > 0) {
+        setCustomerId(custItems[0].customer_id);
+      }
+      return { items, brandItems };
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to load catalog services.');
+      return { items: [] as ServiceCatalogItem[], brandItems: [] as any[] };
+    } finally {
+      setLoadingCatalog(false);
+    }
+  };
+
+  const resetForm = (nextBrands = brands, nextCatalog = catalog) => {
+    setCustomerType('EXISTING');
+    setCustomerId('');
+    setCustomerName('');
+    setCustomerPhone('');
+    setCustomerEmail('');
+    setCustomServiceName('');
+    setCustomServicePrice('');
+    setSelectedServiceId(nextCatalog[0]?.service_id || '');
+    setDeviceDetails({
+      ...EMPTY_DEVICE,
+      brand: nextBrands[0]?.brand_id || 'OTHER',
+    });
+    setIntakeDetails({ ...EMPTY_INTAKE });
+    setErrorMsg(null);
+  };
+
+  useEffect(() => {
+    loadCatalog().then(({ items, brandItems }) => {
+      resetForm(brandItems, items);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (deviceDetails.brand && deviceDetails.brand !== 'OTHER') {
+      const filtered = allModels.filter((m) => m.brand_id === deviceDetails.brand);
+      setFilteredModels(filtered);
+      if (filtered.length > 0) {
+        setDeviceDetails((prev) => ({ ...prev, model: filtered[0].model_id }));
+      } else {
+        setDeviceDetails((prev) => ({ ...prev, model: 'OTHER' }));
+      }
+    } else {
+      setFilteredModels([]);
+      setDeviceDetails((prev) => ({ ...prev, model: 'OTHER' }));
+    }
+  }, [deviceDetails.brand, allModels]);
+
+  const handleIntakeSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (customerType === 'EXISTING' && !customerId) {
+      setErrorMsg('Customer ID is required.');
+      toast.error('Customer ID is required.');
+      return;
+    }
+    if (customerType === 'NEW') {
+      if (!customerName) {
+        setErrorMsg('Customer name is required.');
+        toast.error('Customer name is required.');
+        return;
+      }
+      if (customerPhone) {
+        const phoneErr = validatePhone(customerPhone);
+        if (phoneErr) {
+          setErrorMsg(phoneErr);
+          toast.error(phoneErr);
+          return;
+        }
+      }
+      if (customerEmail) {
+        const emailErr = validateEmail(customerEmail);
+        if (emailErr) {
+          setErrorMsg(emailErr);
+          toast.error(emailErr);
+          return;
+        }
+      }
+    }
+    if (!selectedServiceId) {
+      setErrorMsg('Service selection is required.');
+      toast.error('Service selection is required.');
+      return;
+    }
+    if (selectedServiceId === 'OTHER_SERVICE' && !customServiceName) {
+      setErrorMsg('Custom service name is required.');
+      toast.error('Custom service name is required.');
+      return;
+    }
+
+    setIsSubmitting(true);
+    setErrorMsg(null);
+    try {
+      let finalBrand = '';
+      if (deviceDetails.brand === 'OTHER') {
+        finalBrand = deviceDetails.custom_brand || 'Other';
+      } else {
+        const found = brands.find((b) => b.brand_id === deviceDetails.brand);
+        finalBrand = found ? found.name : 'Unknown';
+      }
+
+      let finalModel = '';
+      if (deviceDetails.model === 'OTHER') {
+        finalModel = deviceDetails.custom_model || 'Other';
+      } else {
+        const found = allModels.find((m) => m.model_id === deviceDetails.model);
+        finalModel = found ? found.name : 'Unknown';
+      }
+
+      const payload = {
+        device_id: undefined,
+        new_device: {
+          brand: finalBrand,
+          model: finalModel,
+          model_number: deviceDetails.model_number,
+          imei_primary: deviceDetails.imei_primary,
+          imei_secondary: deviceDetails.imei_secondary,
+          color: deviceDetails.color,
+          notes: deviceDetails.notes,
+          device_type: 'Smartphone',
+          storage_capacity: deviceDetails.storage_capacity,
+        },
+        service_id: selectedServiceId,
+        source: 'WALK_IN',
+        appointment: undefined,
+        customer_id: customerType === 'EXISTING' ? customerId : undefined,
+        customer_name: customerType === 'NEW' ? customerName : undefined,
+        customer_phone: customerType === 'NEW' ? customerPhone : undefined,
+        customer_email: customerType === 'NEW' ? customerEmail : undefined,
+        custom_service_name: selectedServiceId === 'OTHER_SERVICE' ? customServiceName : undefined,
+      };
+
+      const booking = await adminService.createServiceBooking(payload);
+
+      await adminService.submitDeviceIntake(booking.job_id, {
+        power_status: intakeDetails.power_status,
+        screen_condition: intakeDetails.screen_condition,
+        body_condition: intakeDetails.body_condition,
+        back_condition: intakeDetails.back_condition,
+        camera_condition: intakeDetails.camera_condition,
+        accessories: intakeDetails.accessories,
+        customer_notes: intakeDetails.customer_notes,
+        technician_notes: intakeDetails.technician_notes,
+      });
+
+      let baseTotal = 0;
+      if (selectedServiceId === 'OTHER_SERVICE') {
+        baseTotal = parseFloat(customServicePrice) || 0;
+      } else {
+        const serviceItem = catalog.find((s) => s.service_id === selectedServiceId);
+        baseTotal = serviceItem ? serviceItem.base_price : 0;
+      }
+
+      await adminService.createOrReviseQuote(booking.job_id, {
+        subtotal: baseTotal,
+        tax: baseTotal * 0.18,
+        additional_damage_amount: 0,
+        total: baseTotal * 1.18,
+        reason: 'Initial estimate quote generated for walk-in counter order.',
+      });
+
+      const displayJobNo = booking.job_no || booking.job_id;
+      toast.success(`Walk-in job ${displayJobNo} registered! Redirecting to technician workspace...`);
+      router.push(`/technician?job_id=${booking.job_id}`);
+    } catch (err: any) {
+      const message = err.message || 'Failed to submit intake. Verify inputs.';
+      setErrorMsg(message);
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const brandOptions = [
+    ...brands.map((b) => ({ value: b.brand_id as string, label: b.name as string })),
+    { value: 'OTHER', label: 'Other brand' },
+  ];
+  const modelOptions = [
+    ...filteredModels.map((m) => ({ value: m.model_id as string, label: m.name as string })),
+    { value: 'OTHER', label: 'Other model' },
+  ];
+  const serviceOptions = [
+    ...catalog.map((s) => ({
+      value: s.service_id,
+      label: `${s.name} (${formatCurrency(s.base_price)})`,
+    })),
+    { value: 'OTHER_SERVICE', label: 'Other / custom service' },
+  ];
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-visible min-w-0';
+  const inputClass =
+    'w-full h-9 px-3 bg-card border border-border crm-radius-control text-[13px] text-foreground focus:outline-none focus:border-primary disabled:opacity-50';
+  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 min-h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50 whitespace-nowrap';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 min-h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50 whitespace-nowrap';
+  const sectionTitle = 'flex items-center gap-2 text-[14px] font-semibold text-foreground';
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <h1 className="text-lg font-semibold text-foreground">Walk-In Device Intake</h1>
+        </div>
+        <button
+          type="button"
+          onClick={async () => {
+            const { items, brandItems } = await loadCatalog();
+            resetForm(brandItems, items);
+          }}
+          className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+          title="Reload catalog"
+        >
+          <RefreshCw className={`w-3.5 h-3.5 ${loadingCatalog ? 'animate-spin' : ''}`} />
+        </button>
+      </div>
+
+      <div className="w-full max-w-[760px] mx-auto min-w-0">
+        <form onSubmit={handleIntakeSubmit} className={`${dataCardShell} flex flex-col`}>
+          <div className="px-5 py-4 border-b border-border">
+            <h2 className="text-[16px] font-semibold text-foreground">Register intake</h2>
+            <p className="text-[13px] text-muted-foreground mt-1">
+              Capture the customer, device and service details to open a walk-in job.
+            </p>
+          </div>
+
+          <div className="px-5 py-5 space-y-6">
+            {errorMsg && (
+              <div className="flex items-start gap-2 px-3 py-2.5 border border-destructive/30 bg-destructive/5 crm-radius-section text-[13px] text-destructive">
+                <AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
+                <span>{errorMsg}</span>
+              </div>
+            )}
+
+            <section className="space-y-3">
+              <h3 className={sectionTitle}>
+                <User className="w-4 h-4 text-primary" />
+                Customer
+              </h3>
+              <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1">
+                <button
+                  type="button"
+                  onClick={() => setCustomerType('EXISTING')}
+                  className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors ${
+                    customerType === 'EXISTING' ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                  }`}
+                >
+                  Existing customer
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setCustomerType('NEW')}
+                  className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors ${
+                    customerType === 'NEW' ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
+                  }`}
+                >
+                  New walk-in
+                </button>
+              </div>
+
+              {customerType === 'EXISTING' ? (
+                <div className="space-y-2 font-medium">
+                  <div className="flex items-center justify-between">
+                    <label className={labelClass}>
+                      Select Existing CRM Customer <span className="text-primary">*</span>
+                    </label>
+                    <span className="text-[11px] text-muted-foreground">Filter by name, phone, or email</span>
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <input
+                      type="text"
+                      placeholder="Type to filter customer list..."
+                      value={customerSearchQuery}
+                      onChange={(e) => setCustomerSearchQuery(e.target.value)}
+                      className={inputClass}
+                    />
+                    <select
+                      required
+                      value={customerId}
+                      onChange={(e) => setCustomerId(e.target.value)}
+                      className={`${inputClass} bg-card font-semibold`}
+                    >
+                      <option value="">-- Select Customer --</option>
+                      {existingCustomers
+                        .filter((c) => {
+                          if (!customerSearchQuery) return true;
+                          const q = customerSearchQuery.toLowerCase();
+                          const name = `${c.first_name || ''} ${c.last_name || ''}`.toLowerCase();
+                          const phone = (c.phone || '').toLowerCase();
+                          const email = (c.email || '').toLowerCase();
+                          return name.includes(q) || phone.includes(q) || email.includes(q);
+                        })
+                        .map((c) => (
+                          <option key={c.customer_id} value={c.customer_id}>
+                            {c.first_name} {c.last_name} ({c.phone || c.email || c.customer_id})
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+                  {customerId && (
+                    <div className="text-[11px] text-muted-foreground bg-muted/30 p-2 crm-radius-control border border-border">
+                      Selected Customer ID: <span className="font-mono text-foreground font-semibold">{customerId}</span>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <div className="md:col-span-2">
+                    <label className={labelClass}>
+                      Name <span className="text-primary">*</span>
+                    </label>
+                    <input
+                      required
+                      placeholder="e.g. John Doe"
+                      value={customerName}
+                      onChange={(e) => setCustomerName(e.target.value)}
+                      className={inputClass}
+                    />
+                  </div>
+                  <PhoneInput
+                    label="Phone"
+                    value={customerPhone}
+                    onChange={setCustomerPhone}
+                  />
+                  <div>
+                    <label className={labelClass}>Email</label>
+                    <input
+                      type="email"
+                      placeholder="e.g. john@example.com"
+                      value={customerEmail}
+                      onChange={(e) => setCustomerEmail(e.target.value)}
+                      className={inputClass}
+                    />
+                  </div>
+                </div>
+              )}
+            </section>
+
+            <section className="space-y-3">
+              <h3 className={sectionTitle}>
+                <Smartphone className="w-4 h-4 text-primary" />
+                Device
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className={labelClass}>
+                    Brand <span className="text-primary">*</span>
+                  </label>
+                  <CustomSelect
+                    value={deviceDetails.brand}
+                    onChange={(value) => setDeviceDetails({ ...deviceDetails, brand: value })}
+                    options={brandOptions}
+                    placeholder="Select brand"
+                    aria-label="Brand"
+                  />
+                  {deviceDetails.brand === 'OTHER' && (
+                    <input
+                      required
+                      placeholder="Type brand name"
+                      value={deviceDetails.custom_brand}
+                      onChange={(e) => setDeviceDetails({ ...deviceDetails, custom_brand: e.target.value })}
+                      className={`${inputClass} mt-2`}
+                    />
+                  )}
+                </div>
+                <div>
+                  <label className={labelClass}>
+                    Model <span className="text-primary">*</span>
+                  </label>
+                  <CustomSelect
+                    value={deviceDetails.model}
+                    onChange={(value) => setDeviceDetails({ ...deviceDetails, model: value })}
+                    options={modelOptions}
+                    placeholder="Select model"
+                    aria-label="Model"
+                  />
+                  {deviceDetails.model === 'OTHER' && (
+                    <input
+                      required
+                      placeholder="Type model name"
+                      value={deviceDetails.custom_model}
+                      onChange={(e) => setDeviceDetails({ ...deviceDetails, custom_model: e.target.value })}
+                      className={`${inputClass} mt-2`}
+                    />
+                  )}
+                </div>
+                <div>
+                  <label className={labelClass}>Primary IMEI / serial</label>
+                  <input
+                    placeholder="15-digit IMEI or serial"
+                    value={deviceDetails.imei_primary}
+                    onChange={(e) => setDeviceDetails({ ...deviceDetails, imei_primary: e.target.value })}
+                    className={`${inputClass} font-mono`}
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>Color</label>
+                  <input
+                    placeholder="e.g. Natural Titanium"
+                    value={deviceDetails.color}
+                    onChange={(e) => setDeviceDetails({ ...deviceDetails, color: e.target.value })}
+                    className={inputClass}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className={labelClass}>
+                    Storage <span className="text-primary">*</span>
+                  </label>
+                  <input
+                    required
+                    placeholder="e.g. 128GB, 256GB"
+                    value={deviceDetails.storage_capacity}
+                    onChange={(e) => setDeviceDetails({ ...deviceDetails, storage_capacity: e.target.value })}
+                    className={inputClass}
+                  />
+                </div>
+              </div>
+            </section>
+
+            <section className="space-y-3">
+              <h3 className={sectionTitle}>Service</h3>
+              <div>
+                <label className={labelClass}>
+                  Diagnostics / repair service <span className="text-primary">*</span>
+                </label>
+                <CustomSelect
+                  value={selectedServiceId}
+                  onChange={setSelectedServiceId}
+                  options={serviceOptions}
+                  placeholder="Select service"
+                  aria-label="Service"
+                />
+              </div>
+              {selectedServiceId === 'OTHER_SERVICE' && (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-3 border border-border crm-radius-section bg-muted/10">
+                  <div>
+                    <label className={labelClass}>
+                      Custom service name <span className="text-primary">*</span>
+                    </label>
+                    <input
+                      required
+                      placeholder="e.g. Motherboard IC Repair"
+                      value={customServiceName}
+                      onChange={(e) => setCustomServiceName(e.target.value)}
+                      className={inputClass}
+                    />
+                  </div>
+                  <div>
+                    <label className={labelClass}>
+                      Estimate price (₹) <span className="text-primary">*</span>
+                    </label>
+                    <input
+                      type="number"
+                      required
+                      placeholder="e.g. 4500"
+                      value={customServicePrice}
+                      onChange={(e) => setCustomServicePrice(e.target.value)}
+                      className={inputClass}
+                    />
+                  </div>
+                </div>
+              )}
+            </section>
+
+            <section className="space-y-3">
+              <h3 className={sectionTitle}>
+                <ListTodo className="w-4 h-4 text-primary" />
+                Physical condition
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className={labelClass}>Power status</label>
+                  <CustomSelect
+                    value={intakeDetails.power_status}
+                    onChange={(value) => setIntakeDetails({ ...intakeDetails, power_status: value })}
+                    options={POWER_OPTIONS}
+                    aria-label="Power status"
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>Screen condition</label>
+                  <CustomSelect
+                    value={intakeDetails.screen_condition}
+                    onChange={(value) => setIntakeDetails({ ...intakeDetails, screen_condition: value })}
+                    options={SCREEN_OPTIONS}
+                    aria-label="Screen condition"
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>Body / frame</label>
+                  <CustomSelect
+                    value={intakeDetails.body_condition}
+                    onChange={(value) => setIntakeDetails({ ...intakeDetails, body_condition: value })}
+                    options={BODY_OPTIONS}
+                    aria-label="Body condition"
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>Accessories</label>
+                  <input
+                    placeholder="e.g. Case, SIM tray, box, charger"
+                    value={intakeDetails.accessories}
+                    onChange={(e) => setIntakeDetails({ ...intakeDetails, accessories: e.target.value })}
+                    className={inputClass}
+                  />
+                </div>
+              </div>
+            </section>
+          </div>
+
+          <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
+            <button
+              type="button"
+              onClick={() => resetForm()}
+              disabled={isSubmitting}
+              className={secondaryButton}
+            >
+              Clear
+            </button>
+            <button type="submit" disabled={isSubmitting || loadingCatalog} className={primaryButton}>
+              {isSubmitting ? (
+                <>
+                  <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+                  Registering...
+                </>
+              ) : (
+                'Register intake'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

app/(admin)/settings/page.tsx

@@ -0,0 +1,756 @@
+'use client';
+
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import {
+  Settings,
+  Save,
+  Loader2,
+  User,
+  Shield,
+  FileText,
+  Building,
+  RefreshCw,
+  Upload,
+  Image as ImageIcon,
+  KeyRound,
+  LayoutDashboard,
+  Search,
+  Copy,
+  Check,
+  Lock,
+} from 'lucide-react';
+import { parseJwt, getAccessToken } from '@/services/api/client';
+import { userService, UserResponse } from '@/services/api/userService';
+import { toast } from 'sonner';
+import { format } from 'date-fns';
+
+type SettingsBlade = 'overview' | 'profile' | 'security' | 'branding';
+
+function PropertyRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-[118px_minmax(0,1fr)] gap-x-3 gap-y-1 py-3 border-b border-border items-start sm:items-center min-w-0">
+      <dt className="text-[13px] text-muted-foreground leading-5 truncate">{label}</dt>
+      <dd className="text-[13px] font-semibold text-foreground leading-5 min-w-0 overflow-hidden">
+        {typeof children === 'string' ? (
+          <span className="block truncate" title={children}>
+            {children}
+          </span>
+        ) : (
+          children
+        )}
+      </dd>
+    </div>
+  );
+}
+
+export default function SettingsPage() {
+  const [userRole, setUserRole] = useState('');
+  const [blade, setBlade] = useState<SettingsBlade>('overview');
+  const [navSearch, setNavSearch] = useState('');
+  const [copiedId, setCopiedId] = useState(false);
+
+  const [profile, setProfile] = useState<UserResponse | null>(null);
+  const [loadingProfile, setLoadingProfile] = useState(true);
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [userName, setUserName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [savingProfile, setSavingProfile] = useState(false);
+
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [savingPassword, setSavingPassword] = useState(false);
+
+  const [invoiceLogoUrl, setInvoiceLogoUrl] = useState('https://ifixkart.com/logo.png');
+  const [invoiceCompanyName, setInvoiceCompanyName] = useState('iFixKart Solutions Platform');
+  const [invoiceGstin, setInvoiceGstin] = useState('33AAAAA0000A1Z5');
+  const [invoiceStoreAddress, setInvoiceStoreAddress] = useState(
+    'Offline Main Store Counter, Chennai | +91 9876543210'
+  );
+  const [invoiceGstRate, setInvoiceGstRate] = useState('18.0');
+  const [uploadingLogo, setUploadingLogo] = useState(false);
+
+  const isSuperAdmin =
+    userRole === 'super admin' || userRole === 'super_admin' || userRole === 'superadmin';
+
+  const fetchBrandingSettings = async () => {
+    if (typeof window === 'undefined') return;
+    const savedBranding = localStorage.getItem('ifixkart_invoice_branding');
+    if (savedBranding) {
+      try {
+        const parsed = JSON.parse(savedBranding);
+        if (parsed.logoUrl) setInvoiceLogoUrl(parsed.logoUrl);
+        if (parsed.companyName) setInvoiceCompanyName(parsed.companyName);
+        if (parsed.gstin) setInvoiceGstin(parsed.gstin);
+        if (parsed.storeAddress) setInvoiceStoreAddress(parsed.storeAddress);
+        if (parsed.gstRate !== undefined) setInvoiceGstRate(String(parsed.gstRate));
+      } catch {
+        /* ignore corrupt local branding */
+      }
+    }
+
+    try {
+      const token = getAccessToken();
+      const backendUrl = '';
+      const res = await fetch(`${backendUrl}/api/v1/settings/key/invoice_branding`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (res.ok) {
+        const data = await res.json();
+        const val = data.setting_value;
+        if (val && typeof val === 'object') {
+          if (val.logoUrl) setInvoiceLogoUrl(val.logoUrl);
+          if (val.companyName) setInvoiceCompanyName(val.companyName);
+          if (val.gstin) setInvoiceGstin(val.gstin);
+          if (val.storeAddress) setInvoiceStoreAddress(val.storeAddress);
+          if (val.gstRate !== undefined) setInvoiceGstRate(String(val.gstRate));
+        }
+      }
+    } catch {
+      /* branding endpoint optional */
+    }
+  };
+
+  const fetchUserProfile = async () => {
+    setLoadingProfile(true);
+    try {
+      const token = getAccessToken();
+      if (!token) return;
+
+      const payload = parseJwt(token);
+      const userId = payload?.sub as string;
+      if (!userId) return;
+
+      const user = await userService.getProfile(userId);
+      setProfile(user);
+      setFirstName(user.first_name || '');
+      setLastName(user.last_name || '');
+      setPhone(user.phone || '');
+      setEmail(user.email || '');
+      setUserName(user.display_name || user.email.split('@')[0]);
+    } catch {
+      toast.error('Failed to load user profile');
+    } finally {
+      setLoadingProfile(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getAccessToken();
+    if (token) {
+      const payload = parseJwt(token);
+      if (payload) {
+        setUserRole(((payload.role as string) || '').toLowerCase());
+      }
+    }
+    fetchBrandingSettings();
+    fetchUserProfile();
+  }, []);
+
+  useEffect(() => {
+    if (blade === 'branding' && !isSuperAdmin) setBlade('overview');
+  }, [blade, isSuperAdmin]);
+
+  const handleSaveProfile = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!profile) return;
+    setSavingProfile(true);
+    try {
+      await userService.update(profile.user_id, {
+        first_name: firstName,
+        last_name: lastName,
+        phone: phone,
+        display_name: userName,
+      });
+      toast.success('Profile saved');
+      fetchUserProfile();
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to update profile';
+      toast.error(message);
+    } finally {
+      setSavingProfile(false);
+    }
+  };
+
+  const handleDiscardProfile = () => {
+    if (!profile) return;
+    setFirstName(profile.first_name || '');
+    setLastName(profile.last_name || '');
+    setPhone(profile.phone || '');
+    setEmail(profile.email || '');
+    setUserName(profile.display_name || profile.email.split('@')[0]);
+  };
+
+  const handleUpdatePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newPassword || !confirmPassword) {
+      toast.error('Enter a new password');
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      toast.error('New password and confirmation do not match');
+      return;
+    }
+    setSavingPassword(true);
+    try {
+      if (!profile) return;
+      await userService.update(profile.user_id, {
+        password: newPassword,
+      });
+      toast.success('Password updated');
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Password update failed';
+      toast.error(message);
+    } finally {
+      setSavingPassword(false);
+    }
+  };
+
+  const handleLogoFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploadingLogo(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('entity_type', 'invoice_branding');
+      formData.append('entity_id', 'logo');
+
+      const token = getAccessToken();
+      const backendUrl = '';
+      const res = await fetch(`${backendUrl}/api/v1/files/upload`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token}` },
+        body: formData,
+      });
+
+      if (!res.ok) {
+        const reader = new FileReader();
+        reader.onload = (evt) => {
+          if (evt.target?.result) {
+            setInvoiceLogoUrl(evt.target.result as string);
+            toast.success('Invoice logo uploaded');
+          }
+        };
+        reader.readAsDataURL(file);
+        return;
+      }
+
+      const data = await res.json();
+      const relativePath =
+        data.webp_path || data.storage_path || data.thumbnail_path || data.raw_path || data.url || data.file_path || '';
+      const uploadedUrl = relativePath.startsWith('http')
+        ? relativePath
+        : `${backendUrl}${relativePath.startsWith('/') ? '' : '/'}${relativePath}`;
+      setInvoiceLogoUrl(uploadedUrl);
+      toast.success('Invoice logo uploaded');
+    } catch {
+      const reader = new FileReader();
+      reader.onload = (evt) => {
+        if (evt.target?.result) {
+          setInvoiceLogoUrl(evt.target.result as string);
+          toast.success('Invoice logo loaded');
+        }
+      };
+      reader.readAsDataURL(file);
+    } finally {
+      setUploadingLogo(false);
+    }
+  };
+
+  const handleSaveInvoiceBranding = async () => {
+    const brandingData = {
+      logoUrl: invoiceLogoUrl,
+      companyName: invoiceCompanyName,
+      gstin: invoiceGstin,
+      storeAddress: invoiceStoreAddress,
+      gstRate: Number(invoiceGstRate) || 18.0,
+    };
+    localStorage.setItem('ifixkart_invoice_branding', JSON.stringify(brandingData));
+
+    try {
+      const token = getAccessToken();
+      const backendUrl = '';
+      await fetch(`${backendUrl}/api/v1/settings/save/invoice_branding`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+        body: JSON.stringify({
+          setting_value: brandingData,
+          description: 'Invoice logo and store branding configurations',
+          is_public: true,
+        }),
+      });
+    } catch {
+      /* save still persisted locally */
+    }
+
+    toast.success('Invoice logo and branding saved');
+  };
+
+  const copyUserId = async () => {
+    if (!profile?.user_id) return;
+    try {
+      await navigator.clipboard.writeText(profile.user_id);
+      setCopiedId(true);
+      toast.success('User ID copied to clipboard');
+      setTimeout(() => setCopiedId(false), 1500);
+    } catch {
+      toast.error('Could not copy the user ID');
+    }
+  };
+
+  const reloadAll = () => {
+    fetchUserProfile();
+    fetchBrandingSettings();
+  };
+
+  const navItems = useMemo(
+    () =>
+      [
+        { id: 'overview' as const, label: 'Overview', hint: 'Resource essentials', icon: LayoutDashboard },
+        { id: 'profile' as const, label: 'Identity', hint: 'Name, phone, username', icon: User },
+        { id: 'security' as const, label: 'Access', hint: 'Password credentials', icon: KeyRound },
+        ...(isSuperAdmin
+          ? [{ id: 'branding' as const, label: 'Invoice branding', hint: 'Logo, GSTIN, store', icon: FileText }]
+          : []),
+      ].filter((item) => {
+        const q = navSearch.trim().toLowerCase();
+        if (!q) return true;
+        return item.label.toLowerCase().includes(q) || item.hint.toLowerCase().includes(q);
+      }),
+    [isSuperAdmin, navSearch]
+  );
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-visible min-w-0';
+  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
+  const inputClass =
+    'w-full h-9 px-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 min-h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50 whitespace-nowrap';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 min-h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50 whitespace-nowrap';
+
+  const fullName = [firstName, lastName].filter(Boolean).join(' ') || profile?.email || 'Administrator';
+  const roleLabel = userRole ? userRole.replace(/_/g, ' ') : 'Admin';
+
+  const bladeMeta: Record<SettingsBlade, { title: string; subtitle: string }> = {
+    overview: {
+      title: 'Overview',
+      subtitle: 'Account resource essentials and current identity status.',
+    },
+    profile: {
+      title: 'Identity',
+      subtitle: 'Update the display credentials used across the admin console.',
+    },
+    security: {
+      title: 'Access credentials',
+      subtitle: 'Rotate the password used to sign in to this administrator account.',
+    },
+    branding: {
+      title: 'Invoice branding',
+      subtitle: 'Logo, legal name, GSTIN and store contact printed on invoices.',
+    },
+  };
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">System Settings</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none capitalize">
+              {roleLabel}
+            </span>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={reloadAll}
+          className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+          title="Reload"
+        >
+          <RefreshCw className={`w-3.5 h-3.5 ${loadingProfile ? 'animate-spin' : ''}`} />
+        </button>
+      </div>
+
+      <div className={`${dataCardShell} p-4`}>
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 min-w-0">
+          <div className="flex items-center gap-3 min-w-0">
+            <div className="w-11 h-11 crm-radius-icon bg-primary/10 text-primary flex items-center justify-center shrink-0">
+              <Settings className="w-5 h-5" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-[15px] font-semibold text-foreground truncate">{fullName}</p>
+              <p className="text-[13px] text-muted-foreground truncate">
+                {email || profile?.email || 'Administrator account'} · iFixKart console
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span
+              className={`inline-flex items-center px-2 py-0.5 crm-radius-badge text-[11px] font-semibold ${
+                profile?.is_active !== false ? 'bg-success text-white' : 'bg-muted text-muted-foreground'
+              }`}
+            >
+              {profile?.is_active !== false ? 'Active' : 'Inactive'}
+            </span>
+            <span className="inline-flex items-center px-2 py-0.5 crm-radius-badge bg-muted text-foreground text-[11px] font-semibold capitalize">
+              {roleLabel}
+            </span>
+            {profile?.email_verified && (
+              <span className="inline-flex items-center px-2 py-0.5 crm-radius-badge bg-success/10 text-success text-[11px] font-semibold">
+                Email verified
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-[240px_minmax(0,1fr)] gap-4 min-w-0 items-start">
+        <aside className={`${dataCardShell} p-3 xl:sticky xl:top-5`}>
+          <div className="relative mb-2">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+            <input
+              type="text"
+              value={navSearch}
+              onChange={(e) => setNavSearch(e.target.value)}
+              placeholder="Filter settings"
+              className="w-full h-9 pl-8 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary"
+            />
+          </div>
+          <nav className="flex flex-col gap-1">
+            {navItems.length === 0 ? (
+              <p className="px-3 py-6 text-center text-[12px] text-muted-foreground">No matching settings.</p>
+            ) : (
+              navItems.map((item) => {
+                const Icon = item.icon;
+                const selected = blade === item.id;
+                return (
+                  <button
+                    key={item.id}
+                    type="button"
+                    onClick={() => setBlade(item.id)}
+                    className={`relative w-full flex items-center gap-2.5 h-auto min-h-10 px-3 py-2 text-left crm-radius-toggle cursor-pointer transition-colors ${
+                      selected
+                        ? 'bg-card border border-[#b8c0d4] text-foreground'
+                        : 'border border-transparent text-foreground hover:bg-muted'
+                    }`}
+                  >
+                    {selected && <span className="absolute left-0 top-1.5 bottom-1.5 w-[3px] bg-primary" />}
+                    <span
+                      className={`w-7 h-7 crm-radius-icon flex items-center justify-center shrink-0 ${
+                        selected ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'
+                      }`}
+                    >
+                      <Icon className="w-3.5 h-3.5" />
+                    </span>
+                    <span className="min-w-0 overflow-hidden">
+                      <span className="block text-[13px] font-semibold leading-5 truncate">{item.label}</span>
+                      <span className="block text-[12px] text-muted-foreground mt-0.5 truncate">{item.hint}</span>
+                    </span>
+                  </button>
+                );
+              })
+            )}
+          </nav>
+        </aside>
+
+        <section className={`${dataCardShell} overflow-hidden`}>
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-5 py-4 border-b border-border min-w-0">
+            <div className="min-w-0">
+              <h2 className="text-[16px] font-semibold text-foreground">{bladeMeta[blade].title}</h2>
+              <p className="text-[13px] text-muted-foreground mt-1">{bladeMeta[blade].subtitle}</p>
+            </div>
+            {blade === 'profile' && (
+              <div className="flex items-center gap-2 shrink-0">
+                <button type="button" onClick={handleDiscardProfile} className={secondaryButton}>
+                  Discard
+                </button>
+                <button type="submit" form="settings-profile-form" disabled={savingProfile} className={primaryButton}>
+                  {savingProfile ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                  Save
+                </button>
+              </div>
+            )}
+            {blade === 'security' && (
+              <button type="submit" form="settings-security-form" disabled={savingPassword} className={primaryButton}>
+                {savingPassword ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Lock className="w-3.5 h-3.5" />}
+                Update password
+              </button>
+            )}
+            {blade === 'branding' && isSuperAdmin && (
+              <button type="button" onClick={handleSaveInvoiceBranding} className={primaryButton}>
+                <Save className="w-3.5 h-3.5" />
+                Save branding
+              </button>
+            )}
+          </div>
+
+          <div className="p-5 min-w-0 overflow-hidden">
+            {loadingProfile && blade !== 'branding' ? (
+              <div className="py-16 flex justify-center">
+                <Loader2 className="w-6 h-6 animate-spin text-primary" />
+              </div>
+            ) : blade === 'overview' ? (
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-6 min-w-0">
+                <dl className="min-w-0 overflow-hidden">
+                  <p className="text-[14px] font-semibold text-foreground mb-1">Essentials</p>
+                  <PropertyRow label="Resource">{fullName}</PropertyRow>
+                  <PropertyRow label="User name">{userName || '—'}</PropertyRow>
+                  <PropertyRow label="Email">{email || '—'}</PropertyRow>
+                  <PropertyRow label="Phone">{phone || '—'}</PropertyRow>
+                  <PropertyRow label="Role">
+                    <span className="block truncate capitalize">{roleLabel}</span>
+                  </PropertyRow>
+                </dl>
+                <dl className="min-w-0 overflow-hidden">
+                  <p className="text-[14px] font-semibold text-foreground mb-1">Directory</p>
+                  <PropertyRow label="User ID">
+                    <div className="flex items-center gap-2 min-w-0 w-full">
+                      <span className="block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[13px]" title={profile?.user_id}>
+                        {profile?.user_id || '—'}
+                      </span>
+                      {profile?.user_id && (
+                        <button
+                          type="button"
+                          title="Copy user ID"
+                          onClick={copyUserId}
+                          className="w-7 h-7 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer flex items-center justify-center shrink-0"
+                        >
+                          {copiedId ? <Check className="w-3.5 h-3.5 text-success" /> : <Copy className="w-3.5 h-3.5" />}
+                        </button>
+                      )}
+                    </div>
+                  </PropertyRow>
+                  <PropertyRow label="Employee code">{profile?.employee_code || '—'}</PropertyRow>
+                  <PropertyRow label="Last login">
+                    {profile?.last_login ? format(new Date(profile.last_login), 'dd MMM yyyy, hh:mm a') : '—'}
+                  </PropertyRow>
+                  <PropertyRow label="Created">
+                    {profile?.created_at ? format(new Date(profile.created_at), 'dd MMM yyyy') : '—'}
+                  </PropertyRow>
+                  <PropertyRow label="Status">
+                    <span
+                      className={`inline-flex items-center px-2 py-0.5 crm-radius-badge text-[12px] font-semibold ${
+                        profile?.is_active !== false ? 'bg-success text-white' : 'bg-muted text-muted-foreground'
+                      }`}
+                    >
+                      {profile?.is_active !== false ? 'Active' : 'Inactive'}
+                    </span>
+                  </PropertyRow>
+                </dl>
+                <div className="lg:col-span-2 flex flex-wrap gap-2 pt-1">
+                  <button type="button" onClick={() => setBlade('profile')} className={secondaryButton}>
+                    <User className="w-3.5 h-3.5" />
+                    Edit identity
+                  </button>
+                  <button type="button" onClick={() => setBlade('security')} className={secondaryButton}>
+                    <Shield className="w-3.5 h-3.5" />
+                    Manage access
+                  </button>
+                </div>
+              </div>
+            ) : blade === 'profile' ? (
+              <form id="settings-profile-form" onSubmit={handleSaveProfile} className="space-y-4 max-w-3xl">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className={labelClass}>First name</label>
+                    <input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} className={inputClass} />
+                  </div>
+                  <div>
+                    <label className={labelClass}>Last name</label>
+                    <input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} className={inputClass} />
+                  </div>
+                  <div>
+                    <label className={labelClass}>Username</label>
+                    <input type="text" value={userName} onChange={(e) => setUserName(e.target.value)} className={inputClass} />
+                  </div>
+                  <div>
+                    <label className={labelClass}>Phone number</label>
+                    <input type="text" value={phone} onChange={(e) => setPhone(e.target.value)} className={inputClass} />
+                  </div>
+                  <div className="md:col-span-2">
+                    <label className={labelClass}>Email address</label>
+                    <input
+                      type="email"
+                      value={email}
+                      disabled
+                      className={`${inputClass} bg-muted text-muted-foreground cursor-not-allowed`}
+                    />
+                    <p className="text-[13px] text-muted-foreground mt-1.5">Email is bound to this directory account and cannot be changed here.</p>
+                  </div>
+                </div>
+              </form>
+            ) : blade === 'security' ? (
+              <form id="settings-security-form" onSubmit={handleUpdatePassword} className="space-y-4 max-w-3xl">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="md:col-span-2">
+                    <label className={labelClass}>Current password</label>
+                    <input
+                      type="password"
+                      placeholder="••••••••"
+                      value={currentPassword}
+                      onChange={(e) => setCurrentPassword(e.target.value)}
+                      className={inputClass}
+                    />
+                  </div>
+                  <div>
+                    <label className={labelClass}>New password</label>
+                    <input
+                      type="password"
+                      placeholder="••••••••"
+                      value={newPassword}
+                      onChange={(e) => setNewPassword(e.target.value)}
+                      className={inputClass}
+                    />
+                  </div>
+                  <div>
+                    <label className={labelClass}>Confirm new password</label>
+                    <input
+                      type="password"
+                      placeholder="••••••••"
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      className={inputClass}
+                    />
+                  </div>
+                </div>
+                <p className="text-[13px] text-muted-foreground">
+                  Updating the password signs this administrator in with the new credential on the next login.
+                </p>
+              </form>
+            ) : (
+              <div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_260px] gap-5 min-w-0">
+                <div className="space-y-4 min-w-0">
+                  <div>
+                    <label className={labelClass}>Company / invoice brand logo</label>
+                    <div className="flex items-start gap-3 min-w-0">
+                      {invoiceLogoUrl ? (
+                        <div className="w-16 h-16 crm-radius-icon border border-border bg-card p-1.5 flex items-center justify-center overflow-hidden shrink-0">
+                          <img src={invoiceLogoUrl} alt="Invoice logo preview" className="max-w-full max-h-full object-contain" />
+                        </div>
+                      ) : (
+                        <div className="w-16 h-16 crm-radius-icon border border-dashed border-border bg-muted/20 flex flex-col items-center justify-center shrink-0 text-muted-foreground">
+                          <ImageIcon className="w-5 h-5" />
+                        </div>
+                      )}
+                      <div className="flex-1 min-w-0 space-y-2">
+                        <input
+                          type="text"
+                          value={invoiceLogoUrl}
+                          onChange={(e) => setInvoiceLogoUrl(e.target.value)}
+                          placeholder="https://ifixkart.com/logo.png"
+                          className={inputClass}
+                        />
+                        <input
+                          type="file"
+                          accept="image/*"
+                          id="invoiceLogoFileInput"
+                          className="hidden"
+                          onChange={handleLogoFileUpload}
+                        />
+                        <button
+                          type="button"
+                          disabled={uploadingLogo}
+                          onClick={() => document.getElementById('invoiceLogoFileInput')?.click()}
+                          className={secondaryButton}
+                        >
+                          {uploadingLogo ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Upload className="w-3.5 h-3.5" />}
+                          {uploadingLogo ? 'Uploading...' : 'Upload logo'}
+                        </button>
+                        <p className="text-[13px] text-muted-foreground">PNG, JPG, WebP or SVG. Transparent logos print cleanest.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <label className={labelClass}>Company legal name</label>
+                    <input
+                      type="text"
+                      value={invoiceCompanyName}
+                      onChange={(e) => setInvoiceCompanyName(e.target.value)}
+                      placeholder="iFixKart Solutions Platform"
+                      className={inputClass}
+                    />
+                  </div>
+                  <div>
+                    <label className={labelClass}>GSTIN / tax registration no.</label>
+                    <input
+                      type="text"
+                      value={invoiceGstin}
+                      onChange={(e) => setInvoiceGstin(e.target.value)}
+                      placeholder="33AAAAA0000A1Z5"
+                      className={inputClass}
+                    />
+                  </div>
+                  <div>
+                    <label className={labelClass}>Default GST / Tax Rate (%)</label>
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="number"
+                        step="0.1"
+                        min="0"
+                        max="100"
+                        value={invoiceGstRate}
+                        onChange={(e) => setInvoiceGstRate(e.target.value)}
+                        placeholder="18.0"
+                        className={inputClass}
+                      />
+                      <span className="text-[13px] font-semibold text-muted-foreground">%</span>
+                    </div>
+                    <p className="text-[12px] text-muted-foreground mt-1">
+                      Configures default GST split on generated tax invoices (e.g. 18% = CGST {(Number(invoiceGstRate) / 2 || 9)}% + SGST {(Number(invoiceGstRate) / 2 || 9)}%).
+                    </p>
+                  </div>
+                  <div>
+                    <label className={labelClass}>Store address & contact</label>
+                    <input
+                      type="text"
+                      value={invoiceStoreAddress}
+                      onChange={(e) => setInvoiceStoreAddress(e.target.value)}
+                      placeholder="Offline Main Store Counter, Chennai | +91 9876543210"
+                      className={inputClass}
+                    />
+                  </div>
+                </div>
+
+                <aside className="crm-radius-section border border-border bg-muted/20 p-4 min-w-0 overflow-hidden h-fit">
+                  <p className="text-[13px] font-semibold text-foreground mb-3">Invoice preview</p>
+                  <div className="crm-radius-section border border-border bg-card p-4 min-w-0 overflow-hidden">
+                    <div className="flex items-center gap-2 pb-3 border-b border-border min-w-0">
+                      {invoiceLogoUrl ? (
+                        <img src={invoiceLogoUrl} alt="" className="h-8 w-8 object-contain shrink-0" />
+                      ) : (
+                        <Building className="w-5 h-5 text-muted-foreground shrink-0" />
+                      )}
+                      <div className="min-w-0 overflow-hidden">
+                        <p className="text-[13px] font-semibold text-foreground truncate">{invoiceCompanyName || 'Company name'}</p>
+                        <p className="text-[12px] text-muted-foreground truncate">Tax invoice</p>
+                      </div>
+                    </div>
+                    <dl className="mt-3 space-y-2 text-[13px] min-w-0">
+                      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+                        <dt className="text-muted-foreground shrink-0">GSTIN</dt>
+                        <dd className="font-mono font-semibold text-foreground min-w-0 truncate">{invoiceGstin || '—'}</dd>
+                      </div>
+                      <div className="min-w-0">
+                        <dt className="text-muted-foreground">Store</dt>
+                        <dd className="font-medium text-foreground mt-0.5 leading-5 break-words">{invoiceStoreAddress || '—'}</dd>
+                      </div>
+                    </dl>
+                  </div>
+                </aside>
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

app/(admin)/staff-directory/page.tsx

@@ -0,0 +1,448 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Search,
+  Filter,
+  Loader2,
+  Mail,
+  Phone,
+  MapPin,
+  Plus,
+  RefreshCw,
+  Download,
+  FileSpreadsheet,
+  ChevronDown,
+  MoreVertical,
+  ExternalLink,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { userService, UserResponse } from '@/services/api/userService';
+import { ViewModeToggle } from '@/components/ui/ViewModeToggle';
+import { CustomSelect } from '@/components/ui/CustomSelect';
+import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';
+
+const ROLES = [
+  { id: '01KXRF5VQ1GQ58RDRX45BY9X1D', name: 'Super Admin' },
+  { id: '01KXRF5VQ2X83NF2950KTMZT45', name: 'Admin' },
+  { id: '01KXRF5VQ2X83NF2950KTMZT46', name: 'Technician' },
+  { id: '01KXRF5VQ3QPM1CJZ679R152CQ', name: 'Sales' },
+  { id: '01KXRF5VQ4Z7YXKKX83VSR532Q', name: 'Customer Support' },
+];
+
+const DEPARTMENTS = [
+  { id: '01KXRF5VQ5NB1GN907TGZZ3C9Q', name: 'Administration' },
+  { id: '01KXRF5VQ6D0NJC1RT6422QT0Y', name: 'Technical Repair' },
+  { id: '01KXRF5VQ6D0NJC1RT6422QT0Z', name: 'Sales & Billing' },
+  { id: '01KXRF5VQ74CRWS1951WETKC38', name: 'Support Desk' },
+];
+
+const DESIGNATIONS = [
+  { id: '01KXRF5VQ8GXRR9JEMNW6VS215', name: 'General Administrator' },
+  { id: '01KXRF5VQ92Q2DA0VED445M6PJ', name: 'Senior Technician' },
+  { id: '01KXRF5VQ92Q2DA0VED445M6PK', name: 'Junior Technician' },
+  { id: '01KXRF5VQ92Q2DA0VED445M6PM', name: 'Billing Representative' },
+];
+
+export default function StaffDirectoryPage() {
+  const router = useRouter();
+  const [users, setUsers] = useState<UserResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [roleFilter, setRoleFilter] = useState('');
+  const [sortBy, setSortBy] = useState('name');
+  const [viewMode, setViewMode] = useState<'table' | 'grid'>('grid');
+  const [showFilters, setShowFilters] = useState(false);
+  const [draftRole, setDraftRole] = useState('');
+  const [draftSort, setDraftSort] = useState('name');
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
+  const filterRef = useRef<HTMLDivElement>(null);
+
+  const fetchUsers = async () => {
+    setLoading(true);
+    try {
+      const data = await userService.getAll(0, 100);
+      setUsers(data);
+    } catch {
+      toast.error('Failed to load staff directory');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  useEffect(() => {
+    if (!showFilters) return;
+    const onPointerDown = (event: MouseEvent) => {
+      if (!filterRef.current?.contains(event.target as Node)) setShowFilters(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    return () => document.removeEventListener('mousedown', onPointerDown);
+  }, [showFilters]);
+
+  useEffect(() => {
+    if (!openMenuId) return;
+    const onPointerDown = () => setOpenMenuId(null);
+    document.addEventListener('mousedown', onPointerDown);
+    return () => document.removeEventListener('mousedown', onPointerDown);
+  }, [openMenuId]);
+
+  const getRoleName = (roleId: string) => ROLES.find((r) => r.id === roleId)?.name || 'Staff Member';
+  const getDeptName = (deptId: string) => DEPARTMENTS.find((d) => d.id === deptId)?.name || 'Operations';
+  const getDesigName = (desigId: string) => DESIGNATIONS.find((d) => d.id === desigId)?.name || '';
+
+  const sortedUsers = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    const filtered = users.filter((u) => {
+      const fullName = `${u.first_name} ${u.last_name}`.toLowerCase();
+      const roleName = getRoleName(u.role_id).toLowerCase();
+      const matchesSearch =
+        !q ||
+        fullName.includes(q) ||
+        u.email.toLowerCase().includes(q) ||
+        (u.phone || '').toLowerCase().includes(q) ||
+        roleName.includes(q);
+      const matchesRole = roleFilter ? u.role_id === roleFilter : true;
+      return matchesSearch && matchesRole;
+    });
+
+    return [...filtered].sort((a, b) => {
+      if (sortBy === 'role') {
+        return getRoleName(a.role_id).localeCompare(getRoleName(b.role_id));
+      }
+      return `${a.first_name} ${a.last_name}`.localeCompare(`${b.first_name} ${b.last_name}`);
+    });
+  }, [users, search, roleFilter, sortBy]);
+
+  const pager = useClientPagination(sortedUsers);
+
+  const filtersActive = Boolean(roleFilter);
+
+  const handleExportCSV = () => {
+    const headers = ['Name', 'Role', 'Department', 'Email', 'Phone', 'Status'];
+    const rows = sortedUsers.map((u) => [
+      `${u.first_name} ${u.last_name}`,
+      getRoleName(u.role_id),
+      getDeptName(u.department_id),
+      u.email,
+      u.phone || '',
+      u.is_active ? 'Active' : 'Inactive',
+    ]);
+    const csv = [headers, ...rows]
+      .map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
+      .join('\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'staff-directory.csv';
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const dataCardShell =
+    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-visible min-w-0';
+  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
+  const primaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
+  const secondaryButton =
+    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50';
+
+  const initials = (user: UserResponse) =>
+    `${user.first_name.charAt(0).toUpperCase()}${user.last_name.charAt(0).toUpperCase()}`;
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Staff Directory</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
+              {users.length}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <div className="relative group">
+            <button type="button" className={secondaryButton}>
+              <Download className="w-3.5 h-3.5" />
+              Export
+              <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+            </button>
+            <div className="absolute right-0 top-full mt-1 z-50 w-48 crm-radius-section border border-border bg-card shadow-[0_8px_24px_rgba(16,24,40,0.12)] hidden group-hover:block p-1.5">
+              <button
+                type="button"
+                onClick={handleExportCSV}
+                className="w-full text-left px-3 py-2 crm-radius-section text-[13px] text-[#6b7280] hover:bg-[#eef0f4] hover:text-[#3d4654] cursor-pointer flex items-center gap-1.5"
+              >
+                <FileSpreadsheet className="w-4 h-4" /> Excel (.csv)
+              </button>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={fetchUsers}
+            className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
+            title="Reload"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+          </button>
+          <button type="button" onClick={() => router.push('/users')} className={primaryButton}>
+            <span className="w-[18px] h-[18px] rounded-full bg-white text-primary flex items-center justify-center">
+              <Plus className="w-3 h-3" strokeWidth={3} />
+            </span>
+            Add staff
+          </button>
+        </div>
+      </div>
+
+      <div className={dataCardShell}>
+        <div className="p-4">
+          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2.5 min-w-0">
+            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 min-w-0">
+              <div className="relative" ref={filterRef}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setDraftRole(roleFilter);
+                    setDraftSort(sortBy);
+                    setShowFilters((open) => !open);
+                  }}
+                  className={`inline-flex items-center gap-1.5 h-9 px-3 crm-radius-control border bg-card text-[13px] font-medium cursor-pointer transition-colors ${
+                    filtersActive || showFilters
+                      ? 'border-primary text-primary bg-primary/5'
+                      : 'border-border text-foreground hover:bg-muted'
+                  }`}
+                >
+                  <Filter className="w-3.5 h-3.5" />
+                  Filter
+                  {filtersActive && <span className="w-1.5 h-1.5 rounded-full bg-primary" />}
+                  <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                </button>
+                {showFilters && (
+                  <div className="absolute left-0 top-full mt-1.5 z-50 w-[240px] crm-radius-section border border-border bg-card shadow-lg p-3 space-y-3">
+                    <div>
+                      <label className={labelClass}>Role</label>
+                      <CustomSelect
+                        value={draftRole}
+                        onChange={setDraftRole}
+                        aria-label="Role"
+                        options={[
+                          { value: '', label: 'All roles' },
+                          ...ROLES.map((r) => ({ value: r.id, label: r.name })),
+                        ]}
+                      />
+                    </div>
+                    <div>
+                      <label className={labelClass}>Sort</label>
+                      <CustomSelect
+                        value={draftSort}
+                        onChange={setDraftSort}
+                        aria-label="Sort"
+                        options={[
+                          { value: 'name', label: 'Sort by name' },
+                          { value: 'role', label: 'Sort by role' },
+                        ]}
+                      />
+                    </div>
+                    <div className="flex items-center justify-end gap-2 pt-1">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setDraftRole('');
+                          setDraftSort('name');
+                          setRoleFilter('');
+                          setSortBy('name');
+                          setShowFilters(false);
+                        }}
+                        className={secondaryButton}
+                      >
+                        Clear
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setRoleFilter(draftRole);
+                          setSortBy(draftSort);
+                          setShowFilters(false);
+                        }}
+                        className={primaryButton}
+                      >
+                        Apply
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="relative w-full sm:w-[240px]">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+                <input
+                  type="text"
+                  placeholder="Search"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  className="w-full h-9 pl-8 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
+                />
+              </div>
+            </div>
+
+            <ViewModeToggle value={viewMode} onChange={setViewMode} />
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="py-16 flex justify-center border-t border-border">
+            <Loader2 className="w-6 h-6 animate-spin text-primary" />
+          </div>
+        ) : sortedUsers.length === 0 ? (
+          <div className="py-16 text-center text-[13px] text-muted-foreground border-t border-border">
+            No staff found matching your criteria.
+          </div>
+        ) : viewMode === 'grid' ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 p-4 border-t border-border">
+            {pager.items.map((user) => {
+              const roleName = getRoleName(user.role_id);
+              const title = getDesigName(user.designation_id) || roleName;
+              return (
+                <div
+                  key={user.user_id}
+                  className="crm-radius-section border border-border bg-card p-4 min-w-0 shadow-[0_1px_3px_rgba(16,24,40,0.06)] flex flex-col"
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex items-center gap-3 min-w-0">
+                      <div className="w-11 h-11 rounded-full bg-primary/10 text-primary text-[13px] font-bold flex items-center justify-center shrink-0">
+                        {initials(user)}
+                      </div>
+                      <div className="min-w-0">
+                        <p className="text-[14px] font-semibold text-foreground truncate">
+                          {user.first_name} {user.last_name}
+                        </p>
+                        <p className="text-[12px] text-muted-foreground truncate">{title}</p>
+                      </div>
+                    </div>
+                    <div className="relative shrink-0" onMouseDown={(e) => e.stopPropagation()}>
+                      <button
+                        type="button"
+                        onClick={() => setOpenMenuId(openMenuId === user.user_id ? null : user.user_id)}
+                        className="w-8 h-8 crm-radius-control flex items-center justify-center text-muted-foreground hover:bg-muted cursor-pointer"
+                        aria-label="Staff actions"
+                      >
+                        <MoreVertical className="w-4 h-4" />
+                      </button>
+                      {openMenuId === user.user_id && (
+                        <div className="absolute right-0 top-full mt-1 z-20 w-40 crm-radius-section border border-border bg-card shadow-[0_8px_24px_rgba(16,24,40,0.12)] p-1.5">
+                          <button
+                            type="button"
+                            onClick={() => router.push('/users')}
+                            className="w-full text-left px-3 py-2 crm-radius-section text-[13px] text-[#6b7280] hover:bg-[#eef0f4] hover:text-[#3d4654] cursor-pointer flex items-center gap-1.5"
+                          >
+                            <ExternalLink className="w-3.5 h-3.5" />
+                            Manage user
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="mt-4 space-y-2 text-[13px] text-muted-foreground">
+                    <p className="flex items-center gap-2 min-w-0">
+                      <Mail className="w-3.5 h-3.5 shrink-0" />
+                      <span className="truncate">{user.email}</span>
+                    </p>
+                    <p className="flex items-center gap-2 min-w-0">
+                      <Phone className="w-3.5 h-3.5 shrink-0" />
+                      <span className="truncate">{user.phone || '—'}</span>
+                    </p>
+                    <p className="flex items-center gap-2 min-w-0">
+                      <MapPin className="w-3.5 h-3.5 shrink-0" />
+                      <span className="truncate">{getDeptName(user.department_id)}</span>
+                    </p>
+                  </div>
+
+                  <div className="mt-3 flex flex-wrap gap-1.5">
+                    <span
+                      className={`inline-flex items-center px-2 py-0.5 crm-radius-badge text-[11px] font-semibold ${
+                        user.is_active ? 'bg-success text-white' : 'bg-muted text-muted-foreground'
+                      }`}
+                    >
+                      {user.is_active ? 'Active' : 'Inactive'}
+                    </span>
+                    <span className="inline-flex items-center px-2 py-0.5 crm-radius-badge text-[11px] font-semibold bg-warning/15 text-warning">
+                      {roleName}
+                    </span>
+                  </div>
+
+                  <div className="mt-auto pt-3 border-t border-border flex items-center justify-between">
+                    <div className="flex items-center gap-1">
+                      <a
+                        href={`mailto:${user.email}`}
+                        className="w-8 h-8 crm-radius-control flex items-center justify-center text-muted-foreground hover:bg-muted hover:text-foreground"
+                        title="Email"
+                      >
+                        <Mail className="w-3.5 h-3.5" />
+                      </a>
+                      {user.phone && (
+                        <a
+                          href={`tel:${user.phone}`}
+                          className="w-8 h-8 crm-radius-control flex items-center justify-center text-muted-foreground hover:bg-muted hover:text-foreground"
+                          title="Call"
+                        >
+                          <Phone className="w-3.5 h-3.5" />
+                        </a>
+                      )}
+                    </div>
+                    <div className="w-7 h-7 rounded-full bg-primary/10 text-primary text-[10px] font-bold flex items-center justify-center">
+                      {initials(user)}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="overflow-x-auto border-t border-border">
+            <table className="crm-data-table min-w-[860px]">
+              <thead>
+                <tr className="border-b border-border bg-gray-50">
+                  <th className="px-5 py-3 text-[13px] font-semibold text-gray-700">Staff member</th>
+                  <th className="px-5 py-3 text-[13px] font-semibold text-gray-700">Role</th>
+                  <th className="px-5 py-3 text-[13px] font-semibold text-gray-700">Department</th>
+                  <th className="px-5 py-3 text-[13px] font-semibold text-gray-700">Email</th>
+                  <th className="px-5 py-3 text-[13px] font-semibold text-gray-700">Last activity</th>
+                </tr>
+              </thead>
+              <tbody>
+                {pager.items.map((user) => (
+                  <tr key={user.user_id} className="border-b border-border hover:bg-muted/10">
+                    <td className="px-5 py-3.5">
+                      <div className="flex items-center gap-3">
+                        <div className="w-9 h-9 rounded-full bg-primary/10 text-primary text-[12px] font-bold flex items-center justify-center shrink-0">
+                          {initials(user)}
+                        </div>
+                        <span className="text-[13px] font-semibold text-foreground">
+                          {user.first_name} {user.last_name}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="px-5 py-3.5 text-[13px] text-foreground">{getRoleName(user.role_id)}</td>
+                    <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{getDeptName(user.department_id)}</td>
+                    <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{user.email}</td>
+                    <td className="px-5 py-3.5 text-[13px] text-muted-foreground">
+                      {user.last_activity || 'No recent activity'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+        <TablePagination {...pager} />
+      </div>
+    </div>
+  );
+}

app/(admin)/storefront-carousel/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function StorefrontCarouselPage() {
+  const router = useRouter();
+  useEffect(() => {
+    router.replace('/storefront-sections');
+  }, [router]);
+
+  return (
+    <div className="p-12 text-center text-muted-foreground font-sans">
+      <p className="text-sm font-semibold">Redirecting to unified Homepage Layout Sections manager...</p>
+    </div>
+  );
+}

app/(admin)/storefront-cms/page.tsx

@@ -0,0 +1,603 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import {
+  Store, Globe, Image as ImageIcon, Phone, Mail, MapPin, Link,
+  Settings, Menu, SlidersHorizontal, ShieldCheck, RefreshCw,
+  Save, Plus, Trash2, ChevronDown, CreditCard, Star, MessageSquare, Upload,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { adminService } from '@/services/api/adminService';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tabs
+// ─────────────────────────────────────────────────────────────────────────────
+type Tab = 'branding' | 'footer' | 'megamenu' | 'filters';
+
+const TABS: { id: Tab; label: string; icon: React.ReactNode }[] = [
+  { id: 'branding', label: 'Branding & Settings', icon: <Store className="w-4 h-4" /> },
+  { id: 'footer',   label: 'Footer',              icon: <Globe className="w-4 h-4" /> },
+  { id: 'megamenu', label: 'Mega Menu',            icon: <Menu className="w-4 h-4" /> },
+  { id: 'filters',  label: 'Catalog Filters',      icon: <SlidersHorizontal className="w-4 h-4" /> },
+];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Branding Tab
+// ─────────────────────────────────────────────────────────────────────────────
+function BrandingTab() {
+  const [form, setForm] = useState<Record<string, string | number>>({
+    store_name: '', logo_url: '', primary_wordmark_url: '', secondary_wordmark_url: '',
+    favicon_url: '', support_phone: '', currency_code: 'INR', advance_percent: 20, theme_color: '#6D28D9',
+  });
+  const [sizeChart, setSizeChart] = useState<{ size: string; width: string; height: string; depth: string }[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    adminService.getCmsSettings().then((data: Record<string, any>) => {
+      const { size_chart, ...rest } = data;
+      setForm((prev) => ({ ...prev, ...rest }));
+      if (Array.isArray(size_chart)) setSizeChart(size_chart);
+      setLoading(false);
+    }).catch(() => { setLoading(false); toast.error('Failed to load settings'); });
+  }, []);
+
+  const set = (k: string, v: string | number) => setForm((p) => ({ ...p, [k]: v }));
+
+  const addSizeRow = () => setSizeChart((rows) => [...rows, { size: '', width: '', height: '', depth: '' }]);
+  const updateSizeRow = (i: number, field: string, v: string) =>
+    setSizeChart((rows) => rows.map((r, j) => j === i ? { ...r, [field]: v } : r));
+  const deleteSizeRow = (i: number) => setSizeChart((rows) => rows.filter((_, j) => j !== i));
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      await adminService.updateCmsSettings({ ...form, size_chart: sizeChart } as Record<string, unknown>);
+      toast.success('Store settings saved');
+    } catch { toast.error('Failed to save'); } finally { setSaving(false); }
+  };
+
+  if (loading) return <Spinner />;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <SectionCard title="Store Identity" icon={<Store className="w-4 h-4" />}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <Field label="Store Name" value={form.store_name as string} onChange={(v) => set('store_name', v)} />
+          <Field label="Support Phone" value={form.support_phone as string} onChange={(v) => set('support_phone', v)} icon={<Phone className="w-3.5 h-3.5" />} />
+          <Field label="Currency Code" value={form.currency_code as string} onChange={(v) => set('currency_code', v)} />
+          <div>
+            <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">Repair Advance %</label>
+            <div className="flex items-center gap-2">
+              <input
+                type="number" min={0} max={100} step={1}
+                value={form.advance_percent as number}
+                onChange={(e) => set('advance_percent', Number(e.target.value))}
+                className="w-24 h-9 px-3 crm-radius-control border border-border bg-card text-[13px] text-foreground focus:outline-none focus:border-primary"
+              />
+              <span className="text-[13px] text-muted-foreground">% of order total collected as deposit</span>
+            </div>
+          </div>
+          <Field label="Theme Color (hex)" value={form.theme_color as string} onChange={(v) => set('theme_color', v)} />
+        </div>
+      </SectionCard>
+
+      {/* ── Size Chart ── */}
+      <SectionCard title="Size Chart (Global — applies to all products)" icon={<SlidersHorizontal className="w-4 h-4" />}>
+        <p className="text-[12px] text-muted-foreground mb-3">
+          Configure the global size chart shown on every product detail page under the &quot;Size Chart&quot; tab.
+        </p>
+        <div className="flex flex-col gap-2">
+          {/* Header */}
+          {sizeChart.length > 0 && (
+            <div className="grid grid-cols-[1fr_1fr_1fr_1fr_auto] gap-2 mb-1">
+              {['Size', 'Width', 'Height', 'Depth', ''].map((h) => (
+                <span key={h} className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide px-1">{h}</span>
+              ))}
+            </div>
+          )}
+          {/* Rows */}
+          {sizeChart.map((row, i) => (
+            <div key={i} className="grid grid-cols-[1fr_1fr_1fr_1fr_auto] gap-2 items-center">
+              <Field label="" value={row.size} onChange={(v) => updateSizeRow(i, 'size', v)} placeholder="e.g. S / M / L" />
+              <Field label="" value={row.width} onChange={(v) => updateSizeRow(i, 'width', v)} placeholder="e.g. 70 mm" />
+              <Field label="" value={row.height} onChange={(v) => updateSizeRow(i, 'height', v)} placeholder="e.g. 140 mm" />
+              <Field label="" value={row.depth} onChange={(v) => updateSizeRow(i, 'depth', v)} placeholder="e.g. 20 mm" />
+              <button type="button" onClick={() => deleteSizeRow(i)}
+                className="w-8 h-9 flex items-center justify-center text-destructive hover:bg-destructive/10 crm-radius-control border border-border">
+                <Trash2 className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          ))}
+          {sizeChart.length === 0 && (
+            <p className="text-[12px] text-muted-foreground py-3 text-center border border-dashed border-border crm-radius-section">
+              No size chart rows yet. Add a row to get started.
+            </p>
+          )}
+          <button type="button" onClick={addSizeRow}
+            className="inline-flex items-center gap-1.5 text-[12px] text-primary font-medium cursor-pointer mt-1 self-start">
+            <Plus className="w-3.5 h-3.5" /> Add Row
+          </button>
+        </div>
+      </SectionCard>
+
+      <div className="flex justify-end">
+        <SaveBtn saving={saving} onClick={save} />
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Footer Tab
+// ─────────────────────────────────────────────────────────────────────────────
+interface SocialLink { platform: string; url: string; icon: string; }
+interface NavLink { label: string; href: string; }
+interface FooterColumn { title: string; links: NavLink[]; }
+interface PaymentMethod { name: string; icon_url: string; }
+
+function FooterTab() {
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [address, setAddress] = useState('');
+  const [copyright, setCopyright] = useState('');
+  const [socials, setSocials] = useState<SocialLink[]>([]);
+  const [columns, setColumns] = useState<FooterColumn[]>([]);
+  const [payments, setPayments] = useState<PaymentMethod[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    adminService.getCmsFooterInfo().then((d: any) => {
+      setPhone(d.phone || ''); setEmail(d.email || '');
+      setAddress(d.address || ''); setCopyright(d.copyright || '');
+      setSocials(d.social_links || []); setColumns(d.columns || []);
+      setPayments(d.payment_methods || []); setLoading(false);
+    }).catch(() => { setLoading(false); toast.error('Failed to load footer info'); });
+  }, []);
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      await adminService.updateCmsFooterInfo({ phone, email, address, copyright, social_links: socials, columns, payment_methods: payments });
+      toast.success('Footer info saved');
+    } catch { toast.error('Failed to save'); } finally { setSaving(false); }
+  };
+
+  if (loading) return <Spinner />;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <SectionCard title="Contact Details" icon={<Phone className="w-4 h-4" />}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <Field label="Phone" value={phone} onChange={setPhone} icon={<Phone className="w-3.5 h-3.5" />} />
+          <Field label="Email" value={email} onChange={setEmail} icon={<Mail className="w-3.5 h-3.5" />} />
+          <div className="sm:col-span-2">
+            <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">Address</label>
+            <textarea rows={2} value={address} onChange={(e) => setAddress(e.target.value)}
+              className="w-full px-3 py-2 crm-radius-control border border-border bg-card text-[13px] text-foreground focus:outline-none focus:border-primary resize-none" />
+          </div>
+          <div className="sm:col-span-2">
+            <Field label="Copyright Text" value={copyright} onChange={setCopyright} />
+          </div>
+        </div>
+      </SectionCard>
+
+      <SectionCard title="Social Links" icon={<Link className="w-4 h-4" />}>
+        <div className="flex flex-col gap-2">
+          {socials.map((s, i) => (
+            <div key={i} className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 items-center">
+              <Field label="" value={s.platform} onChange={(v) => setSocials(socials.map((x, j) => j === i ? { ...x, platform: v } : x))} placeholder="Platform" />
+              <Field label="" value={s.url} onChange={(v) => setSocials(socials.map((x, j) => j === i ? { ...x, url: v } : x))} placeholder="URL" />
+              <Field label="" value={s.icon} onChange={(v) => setSocials(socials.map((x, j) => j === i ? { ...x, icon: v } : x))} placeholder="Icon key" />
+              <button type="button" onClick={() => setSocials(socials.filter((_, j) => j !== i))} className="w-8 h-9 flex items-center justify-center text-destructive hover:bg-destructive/10 crm-radius-control border border-border"><Trash2 className="w-3.5 h-3.5" /></button>
+            </div>
+          ))}
+          <button type="button" onClick={() => setSocials([...socials, { platform: '', url: '', icon: '' }])}
+            className="inline-flex items-center gap-1.5 text-[12px] text-primary font-medium cursor-pointer">
+            <Plus className="w-3.5 h-3.5" /> Add Social Link
+          </button>
+        </div>
+      </SectionCard>
+
+      <SectionCard title="Navigation Columns" icon={<Menu className="w-4 h-4" />}>
+        <div className="flex flex-col gap-4">
+          {columns.map((col, ci) => (
+            <div key={ci} className="border border-border crm-radius-section p-4 flex flex-col gap-2">
+              <div className="flex items-center gap-2 justify-between">
+                <Field label="Column Title" value={col.title} onChange={(v) => setColumns(columns.map((c, j) => j === ci ? { ...c, title: v } : c))} />
+                <button type="button" onClick={() => setColumns(columns.filter((_, j) => j !== ci))} className="mt-5 w-8 h-8 flex items-center justify-center text-destructive hover:bg-destructive/10 crm-radius-control border border-border"><Trash2 className="w-3.5 h-3.5" /></button>
+              </div>
+              {col.links.map((lnk, li) => (
+                <div key={li} className="grid grid-cols-[1fr_1fr_auto] gap-2">
+                  <Field label="" value={lnk.label} onChange={(v) => setColumns(columns.map((c, j) => j !== ci ? c : { ...c, links: c.links.map((l, k) => k === li ? { ...l, label: v } : l) }))} placeholder="Label" />
+                  <Field label="" value={lnk.href} onChange={(v) => setColumns(columns.map((c, j) => j !== ci ? c : { ...c, links: c.links.map((l, k) => k === li ? { ...l, href: v } : l) }))} placeholder="/path" />
+                  <button type="button" onClick={() => setColumns(columns.map((c, j) => j !== ci ? c : { ...c, links: c.links.filter((_, k) => k !== li) }))} className="w-8 h-9 flex items-center justify-center text-destructive hover:bg-destructive/10 crm-radius-control border border-border"><Trash2 className="w-3 h-3" /></button>
+                </div>
+              ))}
+              <button type="button" onClick={() => setColumns(columns.map((c, j) => j === ci ? { ...c, links: [...c.links, { label: '', href: '' }] } : c))}
+                className="inline-flex items-center gap-1 text-[11px] text-primary font-medium cursor-pointer"><Plus className="w-3 h-3" /> Add Link</button>
+            </div>
+          ))}
+          <button type="button" onClick={() => setColumns([...columns, { title: '', links: [] }])}
+            className="inline-flex items-center gap-1.5 text-[12px] text-primary font-medium cursor-pointer">
+            <Plus className="w-3.5 h-3.5" /> Add Column
+          </button>
+        </div>
+      </SectionCard>
+
+      <SectionCard title="Payment Methods" icon={<CreditCard className="w-4 h-4" />}>
+        <div className="flex flex-col gap-3">
+          {payments.map((p, i) => (
+            <div key={i} className="border border-border crm-radius-section p-3 flex flex-col sm:flex-row items-start sm:items-center gap-3">
+              <div className="w-full sm:w-48 shrink-0">
+                <Field label="Payment Name" value={p.name} onChange={(v) => setPayments(payments.map((x, j) => j === i ? { ...x, name: v } : x))} placeholder="Visa / MasterCard / UPI" />
+              </div>
+              <div className="flex-1 w-full min-w-0">
+                <ImageUploadField label="Icon Image" value={p.icon_url} onChange={(v) => setPayments(payments.map((x, j) => j === i ? { ...x, icon_url: v } : x))} placeholder="/images/payments/visa.svg" />
+              </div>
+              <button type="button" onClick={() => setPayments(payments.filter((_, j) => j !== i))} className="mt-2 sm:mt-5 w-8 h-9 flex items-center justify-center text-destructive hover:bg-destructive/10 crm-radius-control border border-border shrink-0 self-end sm:self-center"><Trash2 className="w-3.5 h-3.5" /></button>
+            </div>
+          ))}
+          <button type="button" onClick={() => setPayments([...payments, { name: '', icon_url: '' }])}
+            className="inline-flex items-center gap-1.5 text-[12px] text-primary font-medium cursor-pointer self-start">
+            <Plus className="w-3.5 h-3.5" /> Add Payment Method
+          </button>
+        </div>
+      </SectionCard>
+
+      <div className="flex justify-end">
+        <SaveBtn saving={saving} onClick={save} />
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Mega Menu Tab
+// ─────────────────────────────────────────────────────────────────────────────
+const MENU_KEYS = ['shop', 'deals', 'products'] as const;
+type MenuKey = typeof MENU_KEYS[number];
+
+interface MenuGroup { title: string; links: NavLink[]; }
+interface MenuPromo { image_url: string; badge: string; title: string; href: string; }
+interface MenuData { nav_key: MenuKey; groups: MenuGroup[]; promo: MenuPromo | null; featured_category_ids: string[]; }
+
+function MegaMenuTab() {
+  const [activeKey, setActiveKey] = useState<MenuKey>('shop');
+  const [menus, setMenus] = useState<Record<MenuKey, MenuData>>({
+    shop: { nav_key: 'shop', groups: [], promo: null, featured_category_ids: [] },
+    deals: { nav_key: 'deals', groups: [], promo: null, featured_category_ids: [] },
+    products: { nav_key: 'products', groups: [], promo: null, featured_category_ids: [] },
+  });
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    adminService.getCmsMegaMenu().then((data: any) => {
+      setMenus({
+        shop: data.shop || menus.shop,
+        deals: data.deals || menus.deals,
+        products: data.products || menus.products,
+      });
+      setLoading(false);
+    }).catch(() => { setLoading(false); toast.error('Failed to load mega menu'); });
+  }, []);
+
+  const menu = menus[activeKey];
+  const setMenu = (patch: Partial<MenuData>) => setMenus((p) => ({ ...p, [activeKey]: { ...p[activeKey], ...patch } }));
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      await adminService.updateCmsMegaMenu({
+        nav_key: activeKey,
+        groups: menu.groups,
+        promo: menu.promo ?? undefined,
+        featured_category_ids: menu.featured_category_ids,
+      });
+      toast.success(`"${activeKey}" menu saved`);
+    } catch { toast.error('Failed to save'); } finally { setSaving(false); }
+  };
+
+  if (loading) return <Spinner />;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Nav key selector */}
+      <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1 self-start">
+        {MENU_KEYS.map((k) => (
+          <button key={k} type="button" onClick={() => setActiveKey(k)}
+            className={`h-8 px-4 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors capitalize ${activeKey === k ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'}`}>
+            {k}
+          </button>
+        ))}
+      </div>
+
+      <SectionCard title={`"${activeKey.charAt(0).toUpperCase() + activeKey.slice(1)}" Menu Groups`} icon={<Menu className="w-4 h-4" />}>
+        <div className="flex flex-col gap-3">
+          {menu.groups.map((grp, gi) => (
+            <div key={gi} className="border border-border crm-radius-section p-4 flex flex-col gap-2">
+              <div className="flex items-center gap-2 justify-between">
+                <Field label="Group Title" value={grp.title} onChange={(v) => setMenu({ groups: menu.groups.map((g, j) => j === gi ? { ...g, title: v } : g) })} />
+                <button type="button" onClick={() => setMenu({ groups: menu.groups.filter((_, j) => j !== gi) })} className="mt-5 w-8 h-8 flex items-center justify-center text-destructive hover:bg-destructive/10 crm-radius-control border border-border"><Trash2 className="w-3.5 h-3.5" /></button>
+              </div>
+              {grp.links.map((lnk, li) => (
+                <div key={li} className="grid grid-cols-[1fr_1fr_auto] gap-2">
+                  <Field label="" value={lnk.label} onChange={(v) => setMenu({ groups: menu.groups.map((g, j) => j !== gi ? g : { ...g, links: g.links.map((l, k) => k === li ? { ...l, label: v } : l) }) })} placeholder="Label" />
+                  <Field label="" value={lnk.href} onChange={(v) => setMenu({ groups: menu.groups.map((g, j) => j !== gi ? g : { ...g, links: g.links.map((l, k) => k === li ? { ...l, href: v } : l) }) })} placeholder="/path" />
+                  <button type="button" onClick={() => setMenu({ groups: menu.groups.map((g, j) => j !== gi ? g : { ...g, links: g.links.filter((_, k) => k !== li) }) })} className="w-8 h-9 flex items-center justify-center text-destructive hover:bg-destructive/10 crm-radius-control border border-border"><Trash2 className="w-3 h-3" /></button>
+                </div>
+              ))}
+              <button type="button" onClick={() => setMenu({ groups: menu.groups.map((g, j) => j === gi ? { ...g, links: [...g.links, { label: '', href: '' }] } : g) })}
+                className="inline-flex items-center gap-1 text-[11px] text-primary font-medium cursor-pointer"><Plus className="w-3 h-3" /> Add Link</button>
+            </div>
+          ))}
+          <button type="button" onClick={() => setMenu({ groups: [...menu.groups, { title: '', links: [] }] })}
+            className="inline-flex items-center gap-1.5 text-[12px] text-primary font-medium cursor-pointer">
+            <Plus className="w-3.5 h-3.5" /> Add Group
+          </button>
+        </div>
+      </SectionCard>
+
+      <SectionCard title="Promo Card (Optional)" icon={<ImageIcon className="w-4 h-4" />}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="sm:col-span-2">
+            <ImageUploadField label="Promo Image URL" value={menu.promo?.image_url || ''} onChange={(v) => setMenu({ promo: { ...(menu.promo || { badge: '', title: '', href: '' }), image_url: v } })} placeholder="/uploads/storefront/promo.webp" />
+          </div>
+          <Field label="Badge Text" value={menu.promo?.badge || ''} onChange={(v) => setMenu({ promo: { ...(menu.promo || { image_url: '', title: '', href: '' }), badge: v } })} placeholder="e.g. HOT SALE" />
+          <Field label="Promo Title" value={menu.promo?.title || ''} onChange={(v) => setMenu({ promo: { ...(menu.promo || { image_url: '', badge: '', href: '' }), title: v } })} />
+          <Field label="Promo Link" value={menu.promo?.href || ''} onChange={(v) => setMenu({ promo: { ...(menu.promo || { image_url: '', badge: '', title: '' }), href: v } })} placeholder="/deals" />
+        </div>
+      </SectionCard>
+
+      <div className="flex justify-end">
+        <SaveBtn saving={saving} onClick={save} />
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Catalog Filters Tab
+// ─────────────────────────────────────────────────────────────────────────────
+interface HighlightFilter { label: string; value: string; icon: string; }
+interface PriceRange { label: string; min: number | null; max: number | null; }
+
+function CatalogFiltersTab() {
+  const [highlights, setHighlights] = useState<HighlightFilter[]>([]);
+  const [priceRanges, setPriceRanges] = useState<PriceRange[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    adminService.getCmsCatalogFilters().then((d: any) => {
+      setHighlights(d.highlights || []); setPriceRanges(d.price_ranges || []);
+      setLoading(false);
+    }).catch(() => { setLoading(false); toast.error('Failed to load filters'); });
+  }, []);
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      await adminService.updateCmsCatalogFilters({ highlights, price_ranges: priceRanges });
+      toast.success('Catalog filters saved');
+    } catch { toast.error('Failed to save'); } finally { setSaving(false); }
+  };
+
+  if (loading) return <Spinner />;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <SectionCard title="Highlight Filter Tabs" icon={<SlidersHorizontal className="w-4 h-4" />}>
+        <div className="flex flex-col gap-2">
+          {highlights.map((h, i) => (
+            <div key={i} className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 items-center">
+              <Field label="" value={h.label} onChange={(v) => setHighlights(highlights.map((x, j) => j === i ? { ...x, label: v } : x))} placeholder="Label" />
+              <Field label="" value={h.value} onChange={(v) => setHighlights(highlights.map((x, j) => j === i ? { ...x, value: v } : x))} placeholder="Value key" />
+              <Field label="" value={h.icon} onChange={(v) => setHighlights(highlights.map((x, j) => j === i ? { ...x, icon: v } : x))} placeholder="Icon key" />
+              <button type="button" onClick={() => setHighlights(highlights.filter((_, j) => j !== i))} className="w-8 h-9 flex items-center justify-center text-destructive hover:bg-destructive/10 crm-radius-control border border-border"><Trash2 className="w-3.5 h-3.5" /></button>
+            </div>
+          ))}
+          <button type="button" onClick={() => setHighlights([...highlights, { label: '', value: '', icon: '' }])}
+            className="inline-flex items-center gap-1.5 text-[12px] text-primary font-medium cursor-pointer">
+            <Plus className="w-3.5 h-3.5" /> Add Highlight Tab
+          </button>
+        </div>
+      </SectionCard>
+
+      <SectionCard title="Price Range Buckets" icon={<Settings className="w-4 h-4" />}>
+        <div className="flex flex-col gap-2">
+          {priceRanges.map((r, i) => (
+            <div key={i} className="grid grid-cols-[2fr_1fr_1fr_auto] gap-2 items-center">
+              <Field label="" value={r.label} onChange={(v) => setPriceRanges(priceRanges.map((x, j) => j === i ? { ...x, label: v } : x))} placeholder="Label (e.g. Under ₹500)" />
+              <div>
+                <input type="number" placeholder="Min (₹)" value={r.min ?? ''} onChange={(e) => setPriceRanges(priceRanges.map((x, j) => j === i ? { ...x, min: e.target.value ? Number(e.target.value) : null } : x))}
+                  className="w-full h-9 px-3 crm-radius-control border border-border bg-card text-[13px] text-foreground focus:outline-none focus:border-primary" />
+              </div>
+              <div>
+                <input type="number" placeholder="Max (₹)" value={r.max ?? ''} onChange={(e) => setPriceRanges(priceRanges.map((x, j) => j === i ? { ...x, max: e.target.value ? Number(e.target.value) : null } : x))}
+                  className="w-full h-9 px-3 crm-radius-control border border-border bg-card text-[13px] text-foreground focus:outline-none focus:border-primary" />
+              </div>
+              <button type="button" onClick={() => setPriceRanges(priceRanges.filter((_, j) => j !== i))} className="w-8 h-9 flex items-center justify-center text-destructive hover:bg-destructive/10 crm-radius-control border border-border"><Trash2 className="w-3.5 h-3.5" /></button>
+            </div>
+          ))}
+          <button type="button" onClick={() => setPriceRanges([...priceRanges, { label: '', min: null, max: null }])}
+            className="inline-flex items-center gap-1.5 text-[12px] text-primary font-medium cursor-pointer">
+            <Plus className="w-3.5 h-3.5" /> Add Price Range
+          </button>
+        </div>
+      </SectionCard>
+
+      <div className="flex justify-end">
+        <SaveBtn saving={saving} onClick={save} />
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Shared UI primitives
+// ─────────────────────────────────────────────────────────────────────────────
+function ImageUploadField({ label, value, onChange, placeholder }: {
+  label: string; value: string; onChange: (v: string) => void; placeholder?: string;
+}) {
+  const [uploading, setUploading] = useState(false);
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      toast.error('Please select an image file (PNG, JPG, WEBP, SVG)');
+      return;
+    }
+
+    setUploading(true);
+    try {
+      const res = await adminService.uploadStorefrontImage(file);
+      onChange(res.image_url);
+      toast.success('Image uploaded successfully');
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to upload image');
+    } finally {
+      setUploading(false);
+      e.target.value = '';
+    }
+  };
+
+  const previewUrl = value
+    ? (value.startsWith('http') ? value : `https://ifixkartdev.trionixsolution.com${value.startsWith('/') ? '' : '/'}${value}`)
+    : '';
+
+  return (
+    <div>
+      {label && <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">{label}</label>}
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 shrink-0 rounded-md border border-border bg-muted/40 overflow-hidden flex items-center justify-center relative">
+          {value ? (
+            /* eslint-disable-next-line @next/next/no-img-element */
+            <img src={previewUrl} alt="Preview" className="w-full h-full object-contain p-1" onError={(e) => { (e.target as HTMLElement).style.display = 'none'; }} />
+          ) : (
+            <ImageIcon className="w-4 h-4 text-muted-foreground/50" />
+          )}
+        </div>
+
+        <div className="flex-1 flex items-center gap-2 min-w-0">
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder || '/uploads/storefront/logo.webp or click Upload'}
+            className="flex-1 h-9 px-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors min-w-0"
+          />
+          <label className="inline-flex items-center gap-1.5 h-9 px-3.5 crm-radius-control bg-secondary text-secondary-foreground text-[12px] font-semibold hover:bg-secondary/80 border border-border cursor-pointer transition-colors shrink-0">
+            {uploading ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Upload className="w-3.5 h-3.5 text-primary" />}
+            <span>{uploading ? 'Uploading...' : 'Upload'}</span>
+            <input type="file" accept="image/*" className="hidden" onChange={handleFileChange} disabled={uploading} />
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, value, onChange, placeholder, icon }: {
+  label: string; value: string; onChange: (v: string) => void; placeholder?: string; icon?: React.ReactNode;
+}) {
+  return (
+    <div>
+      {label && <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">{label}</label>}
+      <div className="relative">
+        {icon && <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">{icon}</span>}
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          className={`w-full h-9 ${icon ? 'pl-9' : 'px-3'} pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors`}
+        />
+      </div>
+    </div>
+  );
+}
+
+function SectionCard({ title, icon, children }: { title: string; icon: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden">
+      <div className="px-5 py-4 border-b border-border flex items-center gap-2">
+        <span className="text-primary">{icon}</span>
+        <h3 className="text-[13px] font-semibold text-foreground">{title}</h3>
+      </div>
+      <div className="p-5">{children}</div>
+    </div>
+  );
+}
+
+function SaveBtn({ saving, onClick }: { saving: boolean; onClick: () => void }) {
+  return (
+    <button type="button" onClick={onClick} disabled={saving}
+      className="inline-flex items-center gap-2 h-9 px-5 crm-radius-control bg-primary text-white text-[13px] font-semibold hover:bg-primary/90 disabled:opacity-60 transition-colors cursor-pointer">
+      {saving ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+      {saving ? 'Saving...' : 'Save Changes'}
+    </button>
+  );
+}
+
+function Spinner() {
+  return (
+    <div className="flex items-center justify-center py-16">
+      <RefreshCw className="w-5 h-5 text-primary animate-spin" />
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Page
+// ─────────────────────────────────────────────────────────────────────────────
+export default function StorefrontCmsPage() {
+  const [tab, setTab] = useState<Tab>('branding');
+
+  return (
+    <div className="flex flex-col gap-5 min-w-0">
+      {/* Header */}
+      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h1 className="text-lg font-semibold text-foreground">Storefront CMS</h1>
+            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">Live</span>
+          </div>
+          <p className="text-[12px] text-muted-foreground mt-0.5">Configure store branding, footer, mega-menu, and catalog filters from one place.</p>
+        </div>
+      </div>
+
+      {/* Tab Bar */}
+      <div className="crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden">
+        <div className="flex border-b border-border overflow-x-auto">
+          {TABS.map((t) => (
+            <button
+              key={t.id}
+              type="button"
+              onClick={() => setTab(t.id)}
+              className={`flex items-center gap-2 h-12 px-5 text-[13px] font-medium whitespace-nowrap cursor-pointer border-b-2 transition-colors ${
+                tab === t.id
+                  ? 'border-primary text-primary'
+                  : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50'
+              }`}
+            >
+              {t.icon}
+              {t.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="p-5">
+          {tab === 'branding' && <BrandingTab />}
+          {tab === 'footer'   && <FooterTab />}
+          {tab === 'megamenu' && <MegaMenuTab />}
+          {tab === 'filters'  && <CatalogFiltersTab />}
+        </div>
+      </div>
+    </div>
+  );
+}

app/(auth)/login/page.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Wrench, Eye, EyeOff, Loader2 } from 'lucide-react';
+import { authService } from '@/services/api/authService';
+import { toast } from 'sonner';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email || !password) {
+      toast.error('Enter your email and password');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await authService.login({ email, password });
+      toast.success('Signed in successfully');
+      router.push('/dashboard');
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Login failed';
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4 bg-background">
+      <div className="w-full max-w-[420px]">
+        {/* Logo */}
+        <div className="flex flex-col items-center mb-8">
+          <div className="w-14 h-14 rounded-2xl flex items-center justify-center mb-4 bg-primary">
+            <Wrench className="w-7 h-7 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-foreground">
+            iFixKart
+          </h1>
+          <p className="text-sm mt-1 text-muted-foreground">
+            Enterprise ERP Platform
+          </p>
+        </div>
+
+        {/* Login Card */}
+        <div className="bg-card rounded-[5px] shadow-sm border border-border p-5 sm:p-8">
+          <h2 className="text-lg font-bold mb-1 text-foreground">
+            Sign In
+          </h2>
+          <p className="text-xs mb-6 text-muted-foreground">
+            Enter your credentials to access the admin panel
+          </p>
+
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+            {/* Email */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="email" className="text-xs font-semibold text-foreground">
+                Email Address
+              </label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="admin@ifixkart.com"
+                className="w-full px-3.5 py-2.5 rounded-lg border border-border bg-muted text-sm text-foreground outline-hidden transition-colors focus:ring-2 focus:ring-primary/20 focus:border-primary"
+                autoComplete="email"
+              />
+            </div>
+
+            {/* Password */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="password" className="text-xs font-semibold text-foreground">
+                Password
+              </label>
+              <div className="relative">
+                <input
+                  id="password"
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Enter your password"
+                  className="w-full px-3.5 py-2.5 rounded-lg border border-border bg-muted text-sm text-foreground outline-hidden transition-colors focus:ring-2 focus:ring-primary/20 focus:border-primary pr-10"
+                  autoComplete="current-password"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-muted-foreground"
+                  tabIndex={-1}
+                >
+                  {showPassword ? (
+                    <EyeOff className="w-4 h-4" />
+                  ) : (
+                    <Eye className="w-4 h-4" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Submit */}
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-2.5 rounded-lg text-sm font-semibold text-white bg-primary cursor-pointer transition-opacity disabled:opacity-70 flex items-center justify-center gap-2 min-h-[44px] mt-2"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  <span>Signing in...</span>
+                </>
+              ) : (
+                <span>Sign In</span>
+              )}
+            </button>
+          </form>
+        </div>
+
+        <p className="text-center text-[11px] mt-6 text-muted-foreground">
+          © 2026 iFixKart. All rights reserved.
+        </p>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,486 @@
+@import "tailwindcss";
+
+/* next-themes uses class="dark" on <html>; Tailwind v4 defaults to prefers-color-scheme */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-active: var(--sidebar-active);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+}
+
+#main-content {
+  min-width: 0;
+}
+
+#main-content > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
+@layer components {
+  .crm-radius-card {
+    border-radius: 5px;
+  }
+
+  .crm-radius-control {
+    border-radius: 6px;
+  }
+
+  .crm-radius-toggle {
+    border-radius: 4px;
+  }
+
+  .crm-radius-icon {
+    border-radius: 8px;
+  }
+
+  .crm-radius-none {
+    border-radius: 0 !important;
+  }
+
+  .crm-radius-section {
+    border-radius: 5px;
+  }
+
+  .crm-radius-badge {
+    border-radius: 5px;
+  }
+
+  .crm-data-table {
+    width: 100%;
+    text-align: left;
+    border-collapse: collapse;
+  }
+
+  .crm-data-table th,
+  .crm-data-table td {
+    white-space: nowrap;
+    vertical-align: middle;
+    font-size: 12px !important;
+  }
+
+  .crm-data-table td[colspan] {
+    white-space: normal;
+  }
+
+  .crm-data-table td.whitespace-normal,
+  .crm-data-table .whitespace-normal {
+    white-space: normal;
+  }
+
+  .crm-data-table th {
+    font-weight: 600;
+  }
+
+  .crm-data-table td .crm-cell-clip,
+  .crm-data-table .crm-cell-clip {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 160px;
+  }
+
+  .crm-data-table .crm-cell-clip.max-w-\[140px\] { max-width: 140px; }
+  .crm-data-table .crm-cell-clip.max-w-\[180px\] { max-width: 180px; }
+  .crm-data-table .crm-cell-clip.max-w-\[200px\] { max-width: 200px; }
+  .crm-data-table .crm-cell-clip.max-w-\[220px\] { max-width: 220px; }
+}
+
+/* ===== CRMS-Matched Light Theme ===== */
+:root {
+  --background: #f4f7fe;
+  --foreground: #1b2559;
+  --card: #ffffff;
+  --card-foreground: #1b2559;
+  --primary: #5BA4C7;
+  --primary-foreground: #ffffff;
+  --secondary: #f4f7fe;
+  --secondary-foreground: #1b2559;
+  --muted: #f0f3f9;
+  --muted-foreground: #707eae;
+  --accent: #f4f7fe;
+  --accent-foreground: #1b2559;
+  --destructive: #e31a1a;
+  --border: #e9edf4;
+  --input: #e9edf4;
+  --ring: #5BA4C7;
+  --sidebar: #1b2559;
+  --sidebar-foreground: #d7def5;
+  --sidebar-active: #5BA4C7;
+  --success: #01b574;
+  --warning: #5BA4C7;
+  --info: #4318ff;
+}
+
+/* ===== Dark Theme ===== */
+.dark {
+  --background: #0b1437;
+  --foreground: #e0e5f2;
+  --card: #111c44;
+  --card-foreground: #e0e5f2;
+  --primary: #5BA4C7;
+  --primary-foreground: #ffffff;
+  --secondary: #1b254b;
+  --secondary-foreground: #e0e5f2;
+  --muted: #1b254b;
+  --muted-foreground: #a3aed0;
+  --accent: #1b254b;
+  --accent-foreground: #e0e5f2;
+  --destructive: #e31a1a;
+  --border: #1f2c5c;
+  --input: #1f2c5c;
+  --ring: #5BA4C7;
+  --sidebar: #0b1437;
+  --sidebar-foreground: #e8eefc;
+  --sidebar-active: #5BA4C7;
+  --success: #01b574;
+  --warning: #5BA4C7;
+  --info: #7551ff;
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  html {
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
+  textarea,
+  select {
+    color: var(--foreground);
+    background-color: var(--muted);
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  option {
+    color: var(--foreground);
+    background-color: var(--card);
+  }
+
+  *:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #a3aed050; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #a3aed080; }
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Keyboard skip link */
+.skip-link {
+  position: absolute;
+  top: -40px; left: 0;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  padding: 8px; z-index: 100;
+  transition: top 0.2s ease;
+}
+.skip-link:focus { top: 0; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   DARK MODE OVERRIDES
+   Pages that use hardcoded Tailwind light-palette classes (slate, gray, white)
+   instead of design-system CSS vars are fixed here so the dark theme works
+   without touching every JSX file individually.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Text color overrides ────────────────────────────────────────────────── */
+.dark .text-slate-900,
+.dark .text-slate-800,
+.dark .text-slate-700,
+.dark .text-slate-650,
+.dark .text-gray-900,
+.dark .text-gray-800,
+.dark .text-gray-700,
+.dark .text-gray-200,
+.dark .text-gray-450 {
+  color: var(--foreground);
+}
+
+.dark .text-slate-600,
+.dark .text-slate-500,
+.dark .text-slate-450,
+.dark .text-slate-400,
+.dark .text-slate-300,
+.dark .text-slate-200,
+.dark .text-gray-600,
+.dark .text-gray-500,
+.dark .text-gray-400,
+.dark .text-gray-300 {
+  color: var(--muted-foreground);
+}
+
+/* Specific design-system hex that shows up in some pages */
+.dark .text-\[\#1b2559\] {
+  color: var(--foreground);
+}
+
+/* indigo accent text → use info variable */
+.dark .text-indigo-600,
+.dark .text-indigo-500 {
+  color: var(--info);
+}
+
+/* ── Background overrides ─────────────────────────────────────────────────── */
+
+/* White → card */
+.dark .bg-white {
+  background-color: var(--card) !important;
+}
+
+/* Slate backgrounds → muted */
+.dark .bg-slate-50,
+.dark .bg-slate-100,
+.dark [class*="bg-slate-50"],
+.dark [class*="bg-slate-100"] {
+  background-color: color-mix(in srgb, var(--muted) 60%, transparent);
+}
+
+.dark .bg-slate-200 {
+  background-color: var(--muted);
+}
+
+.dark .bg-slate-800,
+.dark .bg-slate-700 {
+  background-color: var(--muted);
+}
+
+.dark .bg-slate-900 {
+  background-color: var(--background);
+}
+
+/* Gray backgrounds */
+.dark .bg-gray-50,
+.dark .bg-gray-100 {
+  background-color: color-mix(in srgb, var(--muted) 60%, transparent);
+}
+
+/* Rose/red tinted backgrounds */
+.dark .bg-rose-50 {
+  background-color: color-mix(in srgb, #e31a1a 8%, var(--card));
+}
+
+/* Indigo tinted backgrounds */
+.dark .bg-indigo-50,
+.dark [class*="bg-indigo-50"] {
+  background-color: color-mix(in srgb, var(--info) 12%, var(--card));
+}
+
+/* ring utilities using indigo */
+.dark .ring-indigo-500,
+.dark [class*="ring-indigo-500"] {
+  --tw-ring-color: var(--info);
+}
+
+/* ── Border overrides ────────────────────────────────────────────────────── */
+.dark .border-slate-200,
+.dark .border-slate-300,
+.dark .border-slate-100 {
+  border-color: var(--border);
+}
+
+.dark .border-slate-800 {
+  border-color: color-mix(in srgb, var(--border) 60%, transparent);
+}
+
+.dark .border-gray-200,
+.dark .border-gray-300 {
+  border-color: var(--border);
+}
+
+/* Rose border */
+.dark .border-rose-200,
+.dark .border-rose-300 {
+  border-color: color-mix(in srgb, #e31a1a 40%, var(--border));
+}
+
+/* Indigo border */
+.dark .border-indigo-600,
+.dark .border-indigo-500 {
+  border-color: var(--info);
+}
+
+/* ── Hover overrides ─────────────────────────────────────────────────────── */
+.dark .hover\:bg-slate-100:hover,
+.dark .hover\:bg-slate-200:hover {
+  background-color: var(--muted);
+}
+
+.dark .hover\:bg-slate-300:hover {
+  background-color: color-mix(in srgb, var(--muted) 150%, transparent);
+}
+
+.dark .hover\:bg-white:hover {
+  background-color: color-mix(in srgb, var(--card) 120%, transparent);
+}
+
+.dark .hover\:bg-rose-50:hover {
+  background-color: color-mix(in srgb, #e31a1a 8%, var(--card));
+}
+
+.dark .hover\:border-slate-300:hover {
+  border-color: color-mix(in srgb, var(--border) 150%, transparent);
+}
+
+/* ── Divide (table separators) ───────────────────────────────────────────── */
+.dark .divide-slate-100 > * + *,
+.dark .divide-slate-200 > * + * {
+  border-color: var(--border);
+}
+
+/* ── Purple / violet overrides (used in storefront file upload cards) ────── */
+.dark .hover\:border-purple-500\/50:hover {
+  border-color: color-mix(in srgb, #8b5cf6 50%, transparent);
+}
+
+/* ── Storefront section card: bg-white → bg-card, bg-slate-50 → bg-muted ── */
+.dark .rounded-2xl.bg-white {
+  background-color: var(--card) !important;
+}
+
+/* ── Scrollbar in dark panels ────────────────────────────────────────────── */
+.dark ::-webkit-scrollbar-thumb {
+  background: #1f2c5c;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   RESPONSIVE SHELL
+   Phone / tablet / desktop rules applied to every admin page via #main-content
+   so list toolbars, tables, drawers, and headers scale without per-page CSS.
+   Breakpoints: 479px (small phone), 639px (phone), 767px (large phone),
+   1023px (tablet), 1279px (laptop).
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+html {
+  overflow-x: hidden;
+}
+
+#main-content img {
+  max-width: 100%;
+}
+
+@media (max-width: 1279px) {
+  #main-content .xl\:grid-cols-4 {
+    min-width: 0;
+  }
+}
+
+@media (max-width: 1023px) {
+  #main-content .md\:flex-nowrap {
+    flex-wrap: wrap !important;
+  }
+
+  #main-content .absolute.z-50,
+  #main-content .absolute[class*="z-50"] {
+    max-width: min(100vw - 1.5rem, 360px);
+  }
+}
+
+@media (max-width: 767px) {
+  #main-content > .flex.flex-col > .flex.items-start.justify-between,
+  #main-content > .flex.flex-col > .flex.items-center.justify-between {
+    flex-wrap: wrap;
+    row-gap: 10px;
+  }
+
+  #main-content .crm-radius-section .flex.items-center.justify-between,
+  #main-content .crm-radius-section .flex.items-start.justify-between {
+    flex-wrap: wrap;
+    row-gap: 10px;
+  }
+
+  #main-content .max-w-\[480px\] {
+    max-width: 100% !important;
+    min-width: 0 !important;
+    flex: 1 1 100% !important;
+    width: 100%;
+  }
+
+  #main-content .min-w-\[180px\],
+  #main-content .min-w-\[160px\],
+  #main-content .min-w-\[220px\] {
+    min-width: 0 !important;
+  }
+
+  #main-content .overflow-x-auto {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .crm-data-table th,
+  .crm-data-table td {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
+@media (max-width: 639px) {
+  #main-content .max-w-\[480px\] + button,
+  #main-content .max-w-\[480px\] ~ button {
+    margin-left: auto;
+  }
+}
+
+@media (max-width: 479px) {
+  #main-content {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}

app/layout.tsx

@@ -0,0 +1,48 @@
+import type { Metadata, Viewport } from 'next';
+import { Inter } from 'next/font/google';
+import { AppProviders } from '@/providers/AppProviders';
+import './globals.css';
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+});
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | iFixKart ERP',
+    default: 'iFixKart ERP - Enterprise Service, CRM & E-Commerce Platform',
+  },
+  description: 'High-performance ERP, CRM, and Inventory Management system for iFixKart, optimized for large-scale operations and instant responsiveness.',
+  keywords: ['ERP', 'CRM', 'E-commerce', 'Inventory Management', 'Repair Jobs', 'Technician Scheduler'],
+  authors: [{ name: 'iFixKart Engineering' }],
+  robots: 'noindex, nofollow', // ERP panels are administrative and should not be crawled by public search bots
+};
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 5,
+  viewportFit: 'cover',
+};
+
+export default function RootLayout({
+  children,
+  }: Readonly<{
+    children: React.ReactNode;
+  }>) {
+  return (
+    <html lang="en" className={`${inter.variable} h-full antialiased`} suppressHydrationWarning>
+      <body className="min-h-full flex flex-col font-sans selection:bg-primary/20 bg-background text-foreground">
+        {/* Skip Navigation Link for WCAG AA Keyboard Accessibility */}
+        <a href="#main-content" className="skip-link">
+          Skip to main content
+        </a>
+        <AppProviders>
+          {children}
+        </AppProviders>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { getAccessToken } from '@/services/api/client';
+
+export default function RootPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const token = getAccessToken();
+    if (token) {
+      router.replace('/dashboard');
+    } else {
+      router.replace('/login');
+    }
+  }, [router]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#f4f7fe' }}>
+      <div className="w-8 h-8 border-3 border-t-transparent rounded-full animate-spin" style={{ borderColor: '#5BA4C7', borderTopColor: 'transparent' }} />
+    </div>
+  );
+}

components/catalog/CreateAttributeModal.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import React, { useState } from 'react';
+import { X, Plus, Tag } from 'lucide-react';
+import { catalogService } from '@/services/api/catalogService';
+
+interface CreateAttributeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: (newAttr: { attribute_id: string; name: string; code: string }) => void;
+}
+
+export const CreateAttributeModal: React.FC<CreateAttributeModalProps> = ({
+  isOpen,
+  onClose,
+  onSuccess
+}) => {
+  const [name, setName] = useState('');
+  const [code, setCode] = useState('');
+  const [presetValuesStr, setPresetValuesStr] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  if (!isOpen) return null;
+
+  const handleNameChange = (val: string) => {
+    setName(val);
+    if (!code) {
+      setCode(val.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, ''));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || !code.trim()) {
+      setError('Name and Code are required.');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      const presets = presetValuesStr
+        .split(',')
+        .map(v => v.trim())
+        .filter(Boolean);
+
+      const created = await catalogService.createAttribute({
+        name: name.trim(),
+        code: code.trim(),
+        preset_values: presets.length ? presets : undefined
+      });
+
+      onSuccess({
+        attribute_id: created.attribute_id,
+        name: created.name,
+        code: created.code
+      });
+      setName('');
+      setCode('');
+      setPresetValuesStr('');
+      onClose();
+    } catch (err: any) {
+      console.error('Failed to create attribute type:', err);
+      setError(err?.message || 'Failed to create attribute type.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[200] bg-slate-950/80 backdrop-blur-xs flex items-center justify-center p-4">
+      <div className="bg-slate-900 border border-slate-700/80 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden font-sans">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-800 bg-slate-800/50">
+          <div className="flex items-center gap-2">
+            <Tag size={18} className="text-red-500" />
+            <h3 className="text-sm font-bold text-slate-100">Create New Attribute Type</h3>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-slate-400 hover:text-white p-1 rounded-lg hover:bg-slate-700/60 transition-colors"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/30 text-red-400 p-2.5 rounded-lg text-xs">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-xs font-bold text-slate-300 mb-1.5">
+              Attribute Display Name *
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => handleNameChange(e.target.value)}
+              placeholder="e.g. Screen Quality, Storage Capacity"
+              className="w-full bg-slate-850 border border-slate-700/70 rounded-xl px-3.5 py-2 text-xs text-white focus:outline-none focus:border-red-500 transition-colors"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-bold text-slate-300 mb-1.5">
+              Attribute Code (Slug) *
+            </label>
+            <input
+              type="text"
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              placeholder="e.g. screen_quality, storage"
+              className="w-full bg-slate-850 border border-slate-700/70 rounded-xl px-3.5 py-2 text-xs text-white focus:outline-none focus:border-red-500 transition-colors font-mono"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-bold text-slate-300 mb-1.5">
+              Preset Values (Optional, comma-separated)
+            </label>
+            <input
+              type="text"
+              value={presetValuesStr}
+              onChange={(e) => setPresetValuesStr(e.target.value)}
+              placeholder="e.g. OLED, Incell, Original"
+              className="w-full bg-slate-850 border border-slate-700/70 rounded-xl px-3.5 py-2 text-xs text-white focus:outline-none focus:border-red-500 transition-colors"
+            />
+          </div>
+
+          <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-800">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-xs font-bold text-slate-300 hover:text-white bg-slate-800 hover:bg-slate-700 rounded-xl transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="px-4 py-2 text-xs font-bold text-white bg-red-600 hover:bg-red-500 rounded-xl transition-colors flex items-center gap-1.5 disabled:opacity-50"
+            >
+              <Plus size={14} />
+              <span>{loading ? 'Creating...' : 'Create Attribute'}</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

components/charts/ApexChart.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { ApexOptions } from 'apexcharts';
+import { cn } from '@/lib/utils';
+
+interface ApexChartProps {
+  type: 'line' | 'area' | 'bar' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'boxPlot' | 'radar' | 'polarArea' | 'rangeBar' | 'rangeArea' | 'treemap';
+  series: ApexOptions['series'];
+  options: ApexOptions;
+  height?: number | string;
+  width?: string | number;
+  className?: string;
+}
+
+export function ApexChart({ type, series, options, height = 280, width = '100%', className }: ApexChartProps) {
+  const [Chart, setChart] = useState<typeof import('react-apexcharts').default | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    import('react-apexcharts').then((mod) => {
+      if (!cancelled) setChart(() => mod.default);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!Chart) {
+    return (
+      <div
+        className={cn('min-w-0 w-full max-w-full overflow-hidden animate-pulse rounded-[5px] bg-muted', className)}
+        style={{ height }}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'min-w-0 w-full max-w-full overflow-hidden [&_.apexcharts-canvas]:!w-full [&_.apexcharts-canvas]:!max-w-full [&_.apexcharts-canvas]:!overflow-hidden [&_.apexcharts-svg]:!max-w-full',
+        className
+      )}
+    >
+      <Chart type={type} series={series} options={options} height={height} width={width} />
+    </div>
+  );
+}

components/layouts/Header.tsx

@@ -0,0 +1,317 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { 
+  Search, 
+  Bell, 
+  Sun, 
+  Moon, 
+  LogOut, 
+  Menu, 
+  User, 
+  Settings, 
+  HelpCircle, 
+  ShieldAlert, 
+  AlertTriangle, 
+  ShoppingCart, 
+  Package,
+  ChevronDown,
+} from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { authService } from '@/services/api/authService';
+import { parseJwt, getAccessToken } from '@/services/api/client';
+import { useState, useEffect } from 'react';
+import { toast } from 'sonner';
+import Link from 'next/link';
+import { SlideOver } from '@/components/ui/SlideOver';
+
+interface HeaderProps {
+  onMenuToggle: () => void;
+}
+
+interface NotificationItem {
+  id: string;
+  title: string;
+  message: string;
+  time: string;
+  type: 'security' | 'stock' | 'order' | 'ticket';
+  read: boolean;
+}
+
+export function Header({ onMenuToggle }: HeaderProps) {
+  const router = useRouter();
+  const { theme, setTheme } = useTheme();
+  const [userName, setUserName] = useState('');
+  const [userEmail, setUserEmail] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [notificationsOpen, setNotificationsOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
+
+  const unreadCount = notifications.filter(n => !n.read).length;
+
+  const markAllAsRead = () => {
+    setNotifications(notifications.map(n => ({ ...n, read: true })));
+    toast.success('All notifications marked as read');
+  };
+
+  const toggleReadStatus = (id: string) => {
+    setNotifications(notifications.map(n => n.id === id ? { ...n, read: !n.read } : n));
+  };
+
+  useEffect(() => {
+    setMounted(true);
+    const token = getAccessToken();
+    if (token) {
+      const payload = parseJwt(token);
+      if (payload) {
+        setUserEmail((payload.email as string) || '');
+        setUserName((payload.email as string)?.split('@')[0] || 'Admin');
+      }
+    }
+  }, []);
+
+  const handleLogout = async () => {
+    try {
+      await authService.logout();
+      toast.success('Signed out');
+    } catch {
+      // Logout anyway on client side
+    }
+    router.push('/login');
+  };
+
+  return (
+    <>
+    <header className="sticky top-0 z-10 h-14 bg-card border-b border-border flex items-center justify-between px-3 sm:px-5">
+      {/* Left Side */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={onMenuToggle}
+          className="lg:hidden w-[38px] h-[38px] rounded-[5px] border border-border shadow-xs flex items-center justify-center hover:bg-muted cursor-pointer transition-colors"
+          aria-label="Toggle menu"
+        >
+          <Menu className="w-[18px] h-[18px] text-foreground" />
+        </button>
+
+        <div className="relative hidden sm:block">
+          <input
+            type="text"
+            placeholder="Search Keyword"
+            className="pl-3 pr-9 h-[38px] w-[240px] bg-card border border-border rounded-[5px] shadow-xs text-[13px] text-foreground placeholder:text-muted-foreground outline-hidden focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
+          />
+          <Search className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+        </div>
+      </div>
+
+      {/* Right Side */}
+      <div className="flex items-center gap-2">
+        {/* Theme Toggle */}
+        <button
+          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+          className="w-[38px] h-[38px] rounded-[5px] border border-border shadow-xs flex items-center justify-center bg-warning/10 text-warning hover:bg-warning hover:text-white cursor-pointer transition-colors"
+          aria-label="Toggle theme"
+        >
+          {mounted && theme === 'dark' ? (
+            <Sun className="w-[18px] h-[18px]" />
+          ) : (
+            <Moon className="w-[18px] h-[18px]" />
+          )}
+        </button>
+
+        <button
+            type="button"
+            onClick={() => setNotificationsOpen(true)}
+            className="w-[38px] h-[38px] rounded-[5px] border border-border shadow-xs flex items-center justify-center hover:bg-muted cursor-pointer transition-colors relative"
+            aria-label="Notifications"
+          >
+            <Bell className="w-[18px] h-[18px] text-foreground" />
+            {unreadCount > 0 && (
+              <span className="absolute -top-0.5 -right-0.5 min-w-[14px] h-[14px] px-0.5 rounded-full bg-primary text-[8px] font-bold text-white flex items-center justify-center">
+                {unreadCount}
+              </span>
+            )}
+          </button>
+
+        {/* Divider */}
+        <div className="w-px h-5 bg-border mx-1" />
+
+        {/* User Profile Dropdown */}
+        <div className="relative">
+          <button 
+            onClick={() => setDropdownOpen(!dropdownOpen)}
+            className="flex items-center gap-2.5 pl-1 cursor-pointer focus:outline-hidden group"
+          >
+            <div className="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold text-white relative bg-sidebar">
+              {userName ? userName.charAt(0).toUpperCase() : 'A'}
+              <span className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-success border-2 border-card" />
+            </div>
+            <div className="hidden md:block text-left">
+              <p className="text-[13px] font-semibold text-foreground leading-tight capitalize group-hover:text-primary transition-colors">
+                {userName || 'Admin'}
+              </p>
+              <p className="text-[11px] text-muted-foreground leading-tight">
+                {userEmail || 'admin@ifixkart.com'}
+              </p>
+            </div>
+            <ChevronDown className="hidden md:block w-3.5 h-3.5 text-muted-foreground" />
+          </button>
+
+          {dropdownOpen && (
+            <>
+              <div 
+                className="fixed inset-0 z-30" 
+                onClick={() => setDropdownOpen(false)} 
+              />
+              <div className="absolute right-0 mt-2 w-60 rounded-[5px] bg-card border border-border shadow-lg py-1 z-40">
+                {/* User Info Header */}
+                <div className="px-4 py-3 flex items-center gap-3 border-b border-border">
+                  <div className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold text-white bg-sidebar">
+                    {userName ? userName.charAt(0).toUpperCase() : 'A'}
+                  </div>
+                  <div>
+                    <h4 className="text-[13px] font-semibold text-foreground capitalize">{userName || 'Admin'}</h4>
+                    <p className="text-[11px] text-muted-foreground mt-0.5">Administrator</p>
+                  </div>
+                </div>
+                
+                {/* Menu Items */}
+                <div className="p-1 space-y-0.5 text-[13px] text-muted-foreground">
+                  <Link 
+                    href="/settings?tab=profile" 
+                    onClick={() => setDropdownOpen(false)}
+                    className="flex items-center gap-2.5 px-3 py-2 rounded-md hover:bg-muted hover:text-foreground transition-colors"
+                  >
+                    <User className="w-4 h-4" />
+                    <span>Profile Settings</span>
+                  </Link>
+                  <div className="flex items-center justify-between px-3 py-2 rounded-md hover:bg-muted hover:text-foreground transition-colors">
+                    <div className="flex items-center gap-2.5">
+                      <Bell className="w-4 h-4" />
+                      <span>Notifications</span>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input type="checkbox" className="sr-only peer" defaultChecked />
+                      <div className="w-7 h-4 bg-muted peer-focus:outline-hidden rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-card after:border-border after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-primary"></div>
+                    </label>
+                  </div>
+                  <Link 
+                    href="/settings?tab=help" 
+                    onClick={() => setDropdownOpen(false)}
+                    className="flex items-center gap-2.5 px-3 py-2 rounded-md hover:bg-muted hover:text-foreground transition-colors"
+                  >
+                    <HelpCircle className="w-4 h-4" />
+                    <span>Help & Support</span>
+                  </Link>
+                  <Link 
+                    href="/settings" 
+                    onClick={() => setDropdownOpen(false)}
+                    className="flex items-center gap-2.5 px-3 py-2 rounded-md hover:bg-muted hover:text-foreground transition-colors"
+                  >
+                    <Settings className="w-4 h-4" />
+                    <span>Settings</span>
+                  </Link>
+                </div>
+
+                <div className="h-px bg-border my-1" />
+
+                {/* Sign Out */}
+                <div className="p-1">
+                  <button
+                    onClick={() => {
+                      setDropdownOpen(false);
+                      handleLogout();
+                    }}
+                    className="w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-[13px] font-medium text-destructive hover:bg-destructive/10 cursor-pointer transition-colors"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    <span>Sign Out</span>
+                  </button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+
+    <SlideOver
+      open={notificationsOpen}
+      onClose={() => setNotificationsOpen(false)}
+      title="Notifications"
+      icon={<Bell className="w-4 h-4 text-primary" />}
+      size="compact"
+    >
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="shrink-0 px-5 py-3 border-b border-border flex items-center justify-between gap-3">
+          <p className="text-[13px] text-muted-foreground">
+            {unreadCount > 0 ? `${unreadCount} unread` : 'You are all caught up'}
+          </p>
+          {unreadCount > 0 && (
+            <button
+              type="button"
+              onClick={markAllAsRead}
+              className="text-[13px] font-semibold text-primary hover:text-primary/80 cursor-pointer"
+            >
+              Mark all as read
+            </button>
+          )}
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto">
+          {notifications.length === 0 ? (
+            <div className="py-16 px-5 text-center text-[13px] text-muted-foreground">No notifications yet.</div>
+          ) : (
+            notifications.map((notification) => (
+              <button
+                key={notification.id}
+                type="button"
+                onClick={() => toggleReadStatus(notification.id)}
+                className={`w-full text-left px-5 py-3.5 flex items-start gap-3 border-b border-border cursor-pointer transition-colors ${
+                  notification.read ? 'bg-card hover:bg-muted/40' : 'bg-primary/5 hover:bg-primary/10'
+                }`}
+              >
+                <div
+                  className={`w-9 h-9 crm-radius-icon flex items-center justify-center shrink-0 text-white ${
+                    notification.type === 'security'
+                      ? 'bg-destructive'
+                      : notification.type === 'stock'
+                        ? 'bg-warning'
+                        : notification.type === 'order'
+                          ? 'bg-[#3b82f6]'
+                          : 'bg-success'
+                  }`}
+                >
+                  {notification.type === 'security' && <ShieldAlert className="w-4 h-4" />}
+                  {notification.type === 'stock' && <AlertTriangle className="w-4 h-4" />}
+                  {notification.type === 'order' && <ShoppingCart className="w-4 h-4" />}
+                  {notification.type === 'ticket' && <Package className="w-4 h-4" />}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-3">
+                    <p className="text-[13px] font-semibold text-foreground leading-5">{notification.title}</p>
+                    <span className="text-[12px] text-muted-foreground whitespace-nowrap shrink-0">{notification.time}</span>
+                  </div>
+                  <p className="text-[13px] text-muted-foreground mt-1 leading-5">{notification.message}</p>
+                </div>
+                {!notification.read && <span className="w-1.5 h-1.5 rounded-full bg-primary shrink-0 mt-2" />}
+              </button>
+            ))
+          )}
+        </div>
+
+        <div className="shrink-0 px-5 py-3 border-t border-border">
+          <Link
+            href="/activity-logs"
+            onClick={() => setNotificationsOpen(false)}
+            className="inline-flex items-center justify-center h-9 w-full crm-radius-control border border-border bg-card text-[13px] font-semibold text-foreground hover:bg-muted cursor-pointer"
+          >
+            View all activity logs
+          </Link>
+        </div>
+      </div>
+    </SlideOver>
+    </>
+  );
+}

components/layouts/NavigationProgress.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+
+export function NavigationProgress() {
+  const pathname = usePathname();
+  const [visible, setVisible] = useState(false);
+  const [width, setWidth] = useState(0);
+  const timer = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    setVisible(false);
+    setWidth(100);
+    const hide = window.setTimeout(() => {
+      setWidth(0);
+    }, 180);
+    if (timer.current) clearInterval(timer.current);
+    return () => window.clearTimeout(hide);
+  }, [pathname]);
+
+  useEffect(() => {
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      const anchor = (event.target as HTMLElement | null)?.closest('a');
+      if (!anchor) return;
+      const href = anchor.getAttribute('href');
+      if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:')) return;
+      if (anchor.target === '_blank' || anchor.hasAttribute('download')) return;
+      try {
+        const url = new URL(href, window.location.origin);
+        if (url.origin !== window.location.origin) return;
+        if (url.pathname === window.location.pathname && url.search === window.location.search) return;
+      } catch {
+        return;
+      }
+      setVisible(true);
+      setWidth(18);
+      if (timer.current) clearInterval(timer.current);
+      timer.current = setInterval(() => {
+        setWidth((current) => (current >= 88 ? current : current + 6 + Math.random() * 8));
+      }, 180);
+    };
+
+    document.addEventListener('click', onClick, true);
+    return () => {
+      document.removeEventListener('click', onClick, true);
+      if (timer.current) clearInterval(timer.current);
+    };
+  }, []);
+
+  if (!visible && width === 0) return null;
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-[80] h-[2px] pointer-events-none">
+      <div
+        className="h-full bg-primary transition-[width] duration-200 ease-out"
+        style={{ width: `${width}%` }}
+      />
+    </div>
+  );
+}

components/layouts/Sidebar.tsx

@@ -0,0 +1,315 @@
+'use client';
+
+import { useEffect, useState, type ComponentType } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { parseJwt, getAccessToken } from '@/services/api/client';
+import {
+  LayoutDashboard,
+  Users,
+  Shield,
+  ChevronLeft,
+  ChevronDown,
+  Wrench,
+  Package,
+  Megaphone,
+  Warehouse,
+  Receipt,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface SidebarProps {
+  collapsed: boolean;
+  onToggle: () => void;
+  overlay?: boolean;
+}
+
+type NavChild = { name: string; href: string };
+
+type NavGroup = {
+  name: string;
+  icon: ComponentType<{ className?: string }>;
+  children: NavChild[];
+};
+
+const NAV_GROUPS: NavGroup[] = [
+  {
+    name: 'Dashboard',
+    icon: LayoutDashboard,
+    children: [
+      { name: 'Main Dashboard', href: '/dashboard' },
+      { name: 'Product Dashboard', href: '/products/dashboard' },
+    ],
+  },
+  {
+    name: 'Catalog Management',
+    icon: Package,
+    children: [
+      { name: 'Product Categories', href: '/categories' },
+      { name: 'Brands', href: '/brands' },
+      { name: 'Device Series', href: '/series' },
+      { name: 'Device Models', href: '/models' },
+      { name: 'Products', href: '/products' },
+      { name: 'Master Attributes', href: '/attributes' },
+      { name: 'Bulk Product Import', href: '/migration' },
+    ],
+  },
+  {
+    name: 'Marketing',
+    icon: Megaphone,
+    children: [
+      { name: 'Homepage Layout', href: '/storefront-sections' },
+      { name: 'Storefront CMS', href: '/storefront-cms' },
+      { name: 'Customer Reviews', href: '/reviews-moderation' },
+    ],
+  },
+  {
+    name: 'Inventory and Purchase',
+    icon: Warehouse,
+    children: [
+      { name: 'Stock Ledger', href: '/inventory' },
+      { name: 'Supplier Purchase Orders', href: '/purchases' },
+    ],
+  },
+  {
+    name: 'Sales and Billings',
+    icon: Receipt,
+    children: [
+      { name: 'Customer Store Orders', href: '/orders' },
+      { name: 'Sales Invoices', href: '/invoices' },
+      { name: 'POS Synchronization', href: '/pos-sync' },
+    ],
+  },
+  {
+    name: 'Repair and Services',
+    icon: Wrench,
+    children: [
+      { name: 'Service Catalog Manager', href: '/service-catalog' },
+      { name: 'Service Jobs Queue', href: '/services' },
+      { name: 'Walk-In Device Queue', href: '/services/intake' },
+      { name: 'Technician Workspace', href: '/technician' },
+      { name: 'Service Quotations', href: '/service-quotes' },
+      { name: 'Service Invoices', href: '/service-invoices' },
+    ],
+  },
+  {
+    name: 'User Management',
+    icon: Users,
+    children: [
+      { name: 'Manage Users', href: '/users' },
+      { name: 'E-Commerce Customers', href: '/customers' },
+      { name: 'Roles & Permissions', href: '/roles' },
+      { name: 'Staff Directory', href: '/staff-directory' },
+      { name: 'User Activity Logs', href: '/activity-logs' },
+    ],
+  },
+  {
+    name: 'System Infrastructure',
+    icon: Shield,
+    children: [
+      { name: 'Security & Sessions', href: '/security' },
+      { name: 'System Settings', href: '/settings' },
+    ],
+  },
+];
+
+function pathMatches(href: string, pathname: string) {
+  if (pathname === href) return true;
+  if (href === '/products' && pathname.startsWith('/products/') && pathname !== '/products/dashboard') {
+    return true;
+  }
+  if (href === '/services' && pathname.startsWith('/services/') && !pathname.startsWith('/services/intake')) {
+    return true;
+  }
+  return false;
+}
+
+function groupHasActive(group: NavGroup, pathname: string) {
+  return group.children.some((child) => pathMatches(child.href, pathname));
+}
+
+export function Sidebar({ collapsed, onToggle, overlay = false }: SidebarProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [userRole, setUserRole] = useState('');
+  const [openGroups, setOpenGroups] = useState<string[]>([]);
+
+  useEffect(() => {
+    const token = getAccessToken();
+    if (token) {
+      const payload = parseJwt(token);
+      if (payload) {
+        setUserRole(((payload.role as string) || '').toLowerCase());
+      }
+    }
+  }, []);
+
+  const isSuperAdmin = userRole === 'super admin' || userRole === 'super_admin' || userRole === 'superadmin';
+  const isAdmin = userRole === 'admin' || isSuperAdmin;
+
+  const groups = NAV_GROUPS.filter((group) => {
+    if (group.name === 'System Infrastructure') return isSuperAdmin;
+    if (group.name === 'User Management') return isAdmin;
+    return true;
+  }).map((group) => {
+    if (group.name !== 'System Infrastructure') return group;
+    return {
+      ...group,
+      children: group.children.filter((item) => {
+        if (item.name === 'System Settings') return isSuperAdmin;
+        return isSuperAdmin;
+      }),
+    };
+  });
+
+  useEffect(() => {
+    const active = groups.find((group) => groupHasActive(group, pathname));
+    if (active) {
+      setOpenGroups((current) => (current.includes(active.name) ? current : [...current, active.name]));
+    }
+  }, [pathname, userRole]);
+
+  useEffect(() => {
+    groups.forEach((group) => {
+      if (!openGroups.includes(group.name)) return;
+      group.children.forEach((child) => {
+        router.prefetch(child.href);
+      });
+    });
+  }, [openGroups, userRole, router]);
+
+  useEffect(() => {
+    const prefetchAll = () => {
+      groups.forEach((group) => {
+        group.children.forEach((child) => router.prefetch(child.href));
+      });
+    };
+    const idle = window.requestIdleCallback?.(prefetchAll);
+    if (idle) {
+      return () => window.cancelIdleCallback(idle);
+    }
+    const timeout = window.setTimeout(prefetchAll, 1000);
+    return () => window.clearTimeout(timeout);
+  }, [userRole, router]);
+
+  const toggleGroup = (name: string) => {
+    if (collapsed) {
+      onToggle();
+      setOpenGroups((current) => (current.includes(name) ? current : [...current, name]));
+      return;
+    }
+    setOpenGroups((current) =>
+      current.includes(name) ? current.filter((item) => item !== name) : [...current, name]
+    );
+  };
+
+  return (
+    <aside
+      className={cn(
+        'h-screen flex flex-col bg-card border-r border-border transition-[width] duration-200 ease-out shrink-0',
+        overlay && 'fixed left-0 top-0 z-20',
+        collapsed ? 'w-[70px] min-w-[70px] max-w-[70px]' : 'w-[260px] min-w-[260px] max-w-[260px]'
+      )}
+    >
+      <div
+        className={cn(
+          'relative flex items-center h-14 shrink-0 border-b border-border',
+          collapsed ? 'justify-center px-2' : 'justify-between px-4'
+        )}
+      >
+        <Link href="/dashboard" className="flex items-center gap-2.5 min-w-0">
+          <div className="w-8 h-8 crm-radius-icon flex items-center justify-center shrink-0 bg-primary">
+            <Wrench className="w-4 h-4 text-white" />
+          </div>
+          {!collapsed && (
+            <span className="text-[15px] font-semibold text-foreground tracking-tight truncate">iFixKart</span>
+          )}
+        </Link>
+        <button
+          type="button"
+          onClick={onToggle}
+          className={cn(
+            'w-[22px] h-[22px] rounded-full flex items-center justify-center hover:bg-muted cursor-pointer transition-colors border border-border bg-card',
+            collapsed && 'absolute -right-2.5 top-1/2 -translate-y-1/2 rotate-180 z-10'
+          )}
+          aria-label="Toggle sidebar"
+        >
+          <ChevronLeft className="w-3.5 h-3.5 text-muted-foreground" />
+        </button>
+      </div>
+
+      <nav className={cn('flex-1 overflow-y-auto py-3', collapsed ? 'px-2' : 'px-3')}>
+        <div className="flex flex-col gap-1">
+          {groups.map((group) => {
+            const Icon = group.icon;
+            const open = !collapsed && openGroups.includes(group.name);
+            const active = groupHasActive(group, pathname);
+            const highlighted = open || active;
+
+            return (
+              <div key={group.name}>
+                <button
+                  type="button"
+                  title={collapsed ? group.name : undefined}
+                  onClick={() => toggleGroup(group.name)}
+                  className={cn(
+                    'w-full flex items-center crm-radius-section text-[13px] font-medium cursor-pointer transition-colors',
+                    collapsed ? 'justify-center p-1' : 'gap-2.5 px-2 py-1.5',
+                    highlighted ? 'bg-primary/10 text-primary' : 'text-foreground hover:bg-muted'
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'w-8 h-8 crm-radius-icon flex items-center justify-center shrink-0',
+                      highlighted ? 'bg-primary text-white' : 'bg-muted text-muted-foreground'
+                    )}
+                  >
+                    <Icon className="w-4 h-4" />
+                  </span>
+                  {!collapsed && (
+                    <>
+                      <span className="flex-1 text-left truncate">{group.name}</span>
+                      <ChevronDown className={cn('w-3.5 h-3.5 shrink-0 transition-transform', open && 'rotate-180')} />
+                    </>
+                  )}
+                </button>
+
+                {open && (
+                  <div className="relative ml-[26px] mt-1 mb-1 pl-4">
+                    <span className="absolute left-0 top-1 bottom-2 border-l border-dashed border-border" />
+                    <div className="flex flex-col">
+                      {group.children.map((child) => {
+                        const childActive = pathMatches(child.href, pathname);
+                        return (
+                          <Link
+                            key={child.href}
+                            href={child.href}
+                            prefetch={true}
+                            className={cn(
+                              'relative flex items-center gap-2.5 py-[7px] text-[13px] transition-colors min-w-0',
+                              childActive
+                                ? 'text-primary font-semibold'
+                                : 'text-muted-foreground hover:text-foreground'
+                            )}
+                          >
+                            <span
+                              className={cn(
+                                'w-1.5 h-1.5 rounded-full shrink-0',
+                                childActive ? 'bg-primary' : 'bg-[#c5cad3]'
+                              )}
+                            />
+                            <span className="truncate">{child.name}</span>
+                          </Link>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </nav>
+    </aside>
+  );
+}

components/ui/BlurHashImage.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Image, { ImageProps } from "next/image";
+import { blurHashToDataURL } from "@/lib/blurhash";
+
+export interface BlurHashImageProps extends Omit<ImageProps, "blurDataURL" | "placeholder"> {
+  blurHash?: string | null;
+  fallbackSrc?: string;
+}
+
+export function BlurHashImage({
+  src,
+  blurHash,
+  alt,
+  fallbackSrc = "/placeholder.png",
+  className = "",
+  style,
+  ...restProps
+}: BlurHashImageProps) {
+  const [imgSrc, setImgSrc] = useState<string>(typeof src === "string" ? src : "");
+  const [blurDataUrl, setBlurDataUrl] = useState<string>(() => blurHashToDataURL(blurHash));
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    if (typeof src === "string") {
+      setImgSrc(src);
+    }
+  }, [src]);
+
+  useEffect(() => {
+    setBlurDataUrl(blurHashToDataURL(blurHash));
+  }, [blurHash]);
+
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    if (!hasError && fallbackSrc) {
+      setHasError(true);
+      setImgSrc(fallbackSrc);
+    }
+    if (restProps.onError) {
+      restProps.onError(e);
+    }
+  };
+
+  return (
+    <Image
+      {...restProps}
+      src={imgSrc || fallbackSrc}
+      alt={alt || "Image"}
+      placeholder="blur"
+      blurDataURL={blurDataUrl}
+      onError={handleError}
+      className={className}
+      style={style}
+    />
+  );
+}
+
+export default BlurHashImage;

components/ui/BulkImageUpload.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { Upload, Loader2, Images } from 'lucide-react';
+import { toast } from 'sonner';
+import { getAccessToken } from '@/services/api/client';
+import { API_BASE_URL } from '@/services/api/config';
+
+interface BulkImageUploadProps {
+  entityType: string;
+  onUploadBatch: (urls: string[]) => void;
+  className?: string;
+}
+
+export const BulkImageUpload: React.FC<BulkImageUploadProps> = ({
+  entityType,
+  onUploadBatch,
+  className = '',
+}) => {
+  const [uploading, setUploading] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFiles = async (fileList: FileList | File[]) => {
+    const files = Array.from(fileList);
+    if (files.length === 0) return;
+
+    const allowedExtensions = ['jpg', 'jpeg', 'png', 'webp'];
+    const validFiles = files.filter((f) => {
+      const ext = f.name.split('.').pop()?.toLowerCase() || '';
+      return (f.type && f.type.startsWith('image/')) || allowedExtensions.includes(ext);
+    });
+
+    if (validFiles.length === 0) {
+      toast.error('Only JPG, JPEG, PNG, or WebP images are supported.');
+      return;
+    }
+
+    setUploading(true);
+    const token = getAccessToken();
+    const headers: Record<string, string> = {};
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+
+    try {
+      const uploads = await Promise.all(
+        validFiles.map(async (file) => {
+          const formData = new FormData();
+          formData.append('file', file);
+          formData.append('entity_type', entityType);
+          formData.append('entity_id', 'temp_' + Math.random().toString(36).substring(2, 11));
+
+          const res = await fetch(`${API_BASE_URL}/api/v1/files/upload`, {
+            method: 'POST',
+            headers,
+            body: formData,
+          });
+
+          if (res.ok) {
+            const data = await res.json();
+            const rawPath = data?.webp_path || data?.storage_path || data?.raw_path || data?.url || '';
+            if (rawPath) {
+              return rawPath.startsWith('/') ? rawPath : `/${rawPath}`;
+            }
+          }
+          return null;
+        })
+      );
+
+      const uploadedUrls = uploads.filter((u): u is string => Boolean(u));
+
+      if (uploadedUrls.length > 0) {
+        toast.success(`Successfully uploaded ${uploadedUrls.length} image(s)!`);
+        onUploadBatch(uploadedUrls);
+      } else {
+        toast.error('Failed to upload image(s).');
+      }
+    } catch (err) {
+      console.error('Bulk image upload error:', err);
+      toast.error('Bulk image upload failed.');
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <div
+      onDragOver={(e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+      }}
+      onDragLeave={() => setIsDragOver(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+        if (e.dataTransfer.files) handleFiles(e.dataTransfer.files);
+      }}
+      onClick={() => fileInputRef.current?.click()}
+      className={`relative border-2 border-dashed rounded-xl p-4 transition-all cursor-pointer flex items-center justify-center text-center select-none ${
+        isDragOver
+          ? 'border-red-500 bg-red-500/10'
+          : 'border-slate-700 hover:border-slate-600 bg-slate-800/40 hover:bg-slate-800/80'
+      } ${className}`}
+    >
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        accept="image/jpeg,image/png,image/webp,image/jpg"
+        onChange={(e) => e.target.files && handleFiles(e.target.files)}
+        className="hidden"
+      />
+
+      <div className="flex items-center gap-3">
+        {uploading ? (
+          <Loader2 className="w-5 h-5 text-red-500 animate-spin" />
+        ) : (
+          <div className="p-2 bg-slate-700/50 rounded-lg text-red-400">
+            <Images size={20} />
+          </div>
+        )}
+        <div className="text-left">
+          <p className="text-xs font-bold text-slate-200">
+            {uploading ? 'Uploading multiple images...' : 'Bulk Drag & Drop Images'}
+          </p>
+          <p className="text-[10px] text-slate-400">
+            Drag & drop multiple files or click to multi-select PNG, JPG, WEBP
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

components/ui/ConfirmDeleteModal.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { AlertTriangle, Trash2, X } from 'lucide-react';
+
+interface ConfirmDeleteModalProps {
+  isOpen: boolean;
+  title?: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export default function ConfirmDeleteModal({
+  isOpen,
+  title = "Confirm Deletion",
+  message,
+  confirmText = "Delete",
+  cancelText = "Cancel",
+  onConfirm,
+  onClose,
+}: ConfirmDeleteModalProps) {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-150">
+      <div 
+        className="relative w-full max-w-md bg-card border border-border rounded-xl shadow-2xl overflow-hidden p-6 space-y-5 animate-in zoom-in-95 duration-150"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute top-4 right-4 text-muted-foreground hover:text-foreground p-1.5 rounded-lg hover:bg-muted transition-colors cursor-pointer"
+        >
+          <X size={16} />
+        </button>
+
+        <div className="flex items-start gap-4">
+          <div className="w-10 h-10 rounded-full bg-destructive/10 text-destructive flex items-center justify-center shrink-0">
+            <AlertTriangle size={20} />
+          </div>
+          <div className="space-y-1">
+            <h3 className="text-base font-semibold text-foreground tracking-tight">{title}</h3>
+            <p className="text-sm text-muted-foreground leading-relaxed">{message}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-3 pt-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-xs font-semibold text-muted-foreground hover:text-foreground hover:bg-muted border border-border rounded-lg transition-colors cursor-pointer"
+          >
+            {cancelText}
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              onConfirm();
+              onClose();
+            }}
+            className="px-4 py-2 text-xs font-semibold text-white bg-destructive hover:bg-destructive/90 rounded-lg shadow-sm transition-colors cursor-pointer flex items-center gap-1.5"
+          >
+            <Trash2 size={13} />
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ui/CustomSelect.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useEffect, useId, useRef, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+export interface CustomSelectOption {
+  value: string;
+  label: string;
+}
+
+interface CustomSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: CustomSelectOption[];
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  size?: 'md' | 'sm';
+  'aria-label'?: string;
+}
+
+export function CustomSelect({
+  value,
+  onChange,
+  options,
+  placeholder = 'Select',
+  className = '',
+  disabled = false,
+  size = 'md',
+  'aria-label': ariaLabel,
+}: CustomSelectProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const listId = useId();
+  const selected = options.find((option) => option.value === value);
+  const compact = size === 'sm';
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  return (
+    <div ref={rootRef} className={`relative min-w-0 ${className}`}>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={listId}
+        aria-label={ariaLabel}
+        onClick={() => !disabled && setOpen((current) => !current)}
+        className={`relative w-full pl-3 pr-8 bg-card text-left text-foreground crm-radius-section border border-border cursor-pointer transition-colors flex items-center truncate disabled:opacity-50 ${
+          compact ? 'h-8 text-[12px]' : 'h-9 text-[13px]'
+        }`}
+      >
+        <span className={`truncate ${selected ? 'text-foreground' : 'text-muted-foreground'}`}>
+          {selected?.label || placeholder}
+        </span>
+        <ChevronDown
+          className={`absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-foreground pointer-events-none transition-transform duration-200 ${
+            open ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {open && (
+        <ul
+          id={listId}
+          role="listbox"
+          className="absolute left-0 top-full mt-1 z-50 w-full max-h-60 overflow-y-auto bg-card border border-border crm-radius-section p-1.5 shadow-[0_8px_24px_rgba(16,24,40,0.12)]"
+        >
+          {options.length === 0 ? (
+            <li className="px-3 py-2 text-[13px] text-muted-foreground">No options</li>
+          ) : (
+            options.map((option) => {
+              const isSelected = option.value === value;
+              return (
+                <li key={option.value} role="option" aria-selected={isSelected}>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onChange(option.value);
+                      setOpen(false);
+                    }}
+                    className={`w-full text-left px-3 py-2 text-[13px] cursor-pointer crm-radius-section transition-colors ${
+                      isSelected
+                        ? 'bg-[#eef0f4] text-[#3d4654]'
+                        : 'text-[#6b7280] hover:bg-[#eef0f4] hover:text-[#3d4654]'
+                    }`}
+                  >
+                    {option.label}
+                  </button>
+                </li>
+              );
+            })
+          )}
+        </ul>
+      )}
+    </div>
+  );
+}

components/ui/ImageUpload.tsx

@@ -0,0 +1,299 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Upload, X, Loader2, Image as ImageIcon } from 'lucide-react';
+import { toast } from 'sonner';
+import { getAccessToken } from '@/services/api/client';
+import { API_BASE_URL } from '@/services/api/config';
+
+interface ImageUploadProps {
+  entityType: string;
+  entityId?: string;
+  onUploadSuccess: (url: string) => void;
+  onBatchUpload?: (urls: string[]) => void;
+  value?: string;
+  onClear?: () => void;
+  className?: string;
+  size?: 'sm' | 'md';
+}
+
+export default function ImageUpload({
+  entityType,
+  entityId,
+  onUploadSuccess,
+  onBatchUpload,
+  value,
+  onClear,
+  className = '',
+  size = 'md',
+}: ImageUploadProps) {
+  const [uploading, setUploading] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [localPreview, setLocalPreview] = useState<string>('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setLocalPreview(value || '');
+  }, [value]);
+
+  // Generate a random ID if not provided, for temporary upload directory mapping
+  const resolveEntityId = () => {
+    if (entityId && entityId.trim() !== '') return entityId;
+    return 'temp_' + Math.random().toString(36).substring(2, 11);
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      if (e.target.files.length > 1) {
+        uploadMultipleFiles(Array.from(e.target.files));
+      } else {
+        uploadFile(e.target.files[0]);
+      }
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      if (e.dataTransfer.files.length > 1) {
+        uploadMultipleFiles(Array.from(e.dataTransfer.files));
+      } else {
+        uploadFile(e.dataTransfer.files[0]);
+      }
+    }
+  };
+
+  const triggerFileSelect = () => {
+    fileInputRef.current?.click();
+  };
+
+  const uploadFile = async (file: File) => {
+    // Basic file validation
+    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
+    if (!allowedTypes.includes(file.type)) {
+      toast.error('Only JPG, JPEG, PNG, or WebP images are allowed');
+      return;
+    }
+
+    const maxSize = 20 * 1024 * 1024; // 20MB
+    if (file.size > maxSize) {
+      toast.error('Image is larger than 20MB');
+      return;
+    }
+
+    setUploading(true);
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('entity_type', entityType);
+    formData.append('entity_id', resolveEntityId());
+
+    try {
+      const token = getAccessToken();
+      const headers: Record<string, string> = {};
+      if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+      }
+
+      const response = await fetch(`${API_BASE_URL}/api/v1/files/upload`, {
+        method: 'POST',
+        headers,
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ detail: 'Upload failed' }));
+        throw new Error(errorData.detail || 'Upload failed');
+      }
+
+      const data = await response.json();
+      // Format the public URL paths properly (prefer webp_path, fallback to storage_path / raw_path)
+      const rawPath = data?.webp_path || data?.storage_path || data?.raw_path || data?.url || '';
+      const imageUrl = rawPath ? (rawPath.startsWith('/') ? rawPath : `/${rawPath}`) : '';
+      setLocalPreview(imageUrl);
+      onUploadSuccess(imageUrl);
+      toast.success('Image uploaded');
+    } catch (err: any) {
+      toast.error(err?.message || 'Could not upload the image. Check that the server is running.');
+      console.error('File upload error:', err);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const uploadMultipleFiles = async (files: File[]) => {
+    const allowedExtensions = ['jpg', 'jpeg', 'png', 'webp'];
+    const validFiles = files.filter((f) => {
+      const ext = f.name.split('.').pop()?.toLowerCase() || '';
+      return (f.type && f.type.startsWith('image/')) || allowedExtensions.includes(ext);
+    });
+
+    if (validFiles.length === 0) {
+      toast.error('Only JPG, JPEG, PNG, or WebP images are allowed');
+      return;
+    }
+
+    setUploading(true);
+    const token = getAccessToken();
+    const headers: Record<string, string> = {};
+    if (token) headers['Authorization'] = `Bearer ${token}`;
+
+    try {
+      const uploads = await Promise.all(
+        validFiles.map(async (file) => {
+          const formData = new FormData();
+          formData.append('file', file);
+          formData.append('entity_type', entityType);
+          formData.append('entity_id', resolveEntityId());
+
+          const res = await fetch(`${API_BASE_URL}/api/v1/files/upload`, {
+            method: 'POST',
+            headers,
+            body: formData,
+          });
+
+          if (res.ok) {
+            const data = await res.json();
+            const rawPath = data?.webp_path || data?.storage_path || data?.raw_path || data?.url || '';
+            if (rawPath) {
+              return rawPath.startsWith('/') ? rawPath : `/${rawPath}`;
+            }
+          }
+          return null;
+        })
+      );
+
+      const urls = uploads.filter((u): u is string => Boolean(u));
+      if (urls.length > 0) {
+        toast.success(`Uploaded ${urls.length} image(s)`);
+        if (onBatchUpload) {
+          onBatchUpload(urls);
+        } else {
+          setLocalPreview(urls[0]);
+          onUploadSuccess(urls[0]);
+        }
+      } else {
+        toast.error('Failed to upload image(s)');
+      }
+    } catch (err: any) {
+      toast.error('Upload failed');
+      console.error(err);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setLocalPreview('');
+    if (onClear) {
+      onClear();
+    } else {
+      onUploadSuccess('');
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const activeValue = localPreview || value || '';
+  const hasValue = Boolean(activeValue && typeof activeValue === 'string' && activeValue.trim() !== '');
+  const displaySrc = hasValue
+    ? activeValue.startsWith('http://') || activeValue.startsWith('https://')
+      ? activeValue
+      : `${API_BASE_URL}${activeValue.startsWith('/') ? activeValue : `/${activeValue}`}`
+    : '';
+
+  const compact = size === 'sm';
+
+  return (
+    <div className={`relative ${className}`}>
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        accept=".jpg,.jpeg,.png,.webp"
+        className="hidden"
+      />
+
+      {hasValue && displaySrc ? (
+        <div
+          onClick={triggerFileSelect}
+          className={`relative group w-full overflow-hidden border border-border bg-muted/50 flex items-center cursor-pointer hover:border-primary/40 transition-all ${
+            compact ? 'h-9 crm-radius-control px-1.5 gap-2' : 'h-32 rounded-[5px] justify-center'
+          }`}
+        >
+          <img
+            src={displaySrc}
+            alt="Upload Preview"
+            className={compact ? 'h-7 w-7 object-cover crm-radius-toggle shrink-0' : 'w-full h-full object-contain transition-transform duration-300 group-hover:scale-105'}
+          />
+          {compact ? (
+            <span className="text-[13px] text-foreground truncate flex-1">Image selected</span>
+          ) : (
+            <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-200">
+              <span className="text-xs font-semibold text-white bg-black/60 px-2.5 py-1.5 rounded-md backdrop-blur-xs">
+                Change Image
+              </span>
+            </div>
+          )}
+          <button
+            type="button"
+            onClick={handleClear}
+            className={`absolute p-1 bg-red-600/90 hover:bg-red-600 text-white rounded-full shadow-lg transition-all cursor-pointer z-10 hover:scale-115 active:scale-95 ${
+              compact ? 'top-1.5 right-1.5' : 'top-2 right-2 p-1.5'
+            }`}
+            title="Remove Image"
+          >
+            <X className={compact ? 'w-3 h-3' : 'w-3.5 h-3.5'} />
+          </button>
+        </div>
+      ) : (
+        <div
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={triggerFileSelect}
+          className={`w-full border-2 border-dashed flex cursor-pointer transition-all ${
+            compact
+              ? 'h-9 crm-radius-control flex-row items-center gap-2 px-3'
+              : 'h-32 rounded-[5px] flex-col items-center justify-center p-4 text-center'
+          } ${isDragOver ? 'border-red-500 bg-red-500/10' : 'border-border bg-muted/50 hover:border-border hover:bg-muted'}`}
+        >
+          {uploading ? (
+            <div className={`flex items-center ${compact ? 'gap-2' : 'space-y-2 flex-col'}`}>
+              <Loader2 className={`${compact ? 'w-4 h-4' : 'w-8 h-8'} text-red-500 animate-spin`} />
+              <span className="text-xs text-muted-foreground">Uploading...</span>
+            </div>
+          ) : compact ? (
+            <>
+              <Upload className="w-4 h-4 text-muted-foreground shrink-0" />
+              <span className="text-[13px] text-muted-foreground truncate">
+                <span className="font-medium text-foreground">Upload image</span>
+                <span className="hidden sm:inline"> · PNG, JPG, WEBP</span>
+              </span>
+            </>
+          ) : (
+            <div className="space-y-1.5 flex flex-col items-center">
+              <Upload className="w-7 h-7 text-muted-foreground" />
+              <div>
+                <span className="text-xs font-semibold text-red-400 hover:underline">Click to upload</span>
+                <span className="text-xs text-muted-foreground"> or drag and drop</span>
+              </div>
+              <span className="text-[10px] text-muted-foreground uppercase font-mono">PNG, JPG, WEBP (Max 20MB)</span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

components/ui/MediaProofModal.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Upload, Video, Image as ImageIcon, X, Loader2, CheckCircle2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { adminService } from '@/services/api/adminService';
+
+interface MediaProofModalProps {
+  open: boolean;
+  onClose: () => void;
+  jobId: string;
+  targetStatus: 'INSPECTION_COMPLETED' | 'READY_FOR_DELIVERY';
+  onSuccess: () => void;
+}
+
+export function MediaProofModal({
+  open,
+  onClose,
+  jobId,
+  targetStatus,
+  onSuccess,
+}: MediaProofModalProps) {
+  const [files, setFiles] = useState<File[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<string>('');
+
+  if (!open) return null;
+
+  const isInspection = targetStatus === 'INSPECTION_COMPLETED';
+  const title = isInspection ? 'Inspection Done Proof Required' : 'Ready for Delivery Proof Required';
+  const category = isInspection ? 'INSPECTION_DONE' : 'READY_FOR_DELIVERY';
+  const subtitle = isInspection
+    ? 'Upload 1 short video (max 30 seconds) OR up to 4 photos of the inspected product condition before proceeding.'
+    : 'Upload video or photo proof of the completed repair showing the device fully functional and ready for delivery.';
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files || e.target.files.length === 0) return;
+    const selectedList = Array.from(e.target.files);
+
+    const hasVideo = selectedList.some((f) => f.type.startsWith('video/'));
+    const images = selectedList.filter((f) => f.type.startsWith('image/'));
+
+    if (hasVideo && selectedList.length > 1) {
+      toast.error('Please upload either 1 video OR photos (not combined).');
+      return;
+    }
+
+    if (hasVideo) {
+      const videoFile = selectedList.find((f) => f.type.startsWith('video/'))!;
+      const videoEl = document.createElement('video');
+      videoEl.preload = 'metadata';
+      videoEl.onloadedmetadata = () => {
+        window.URL.revokeObjectURL(videoEl.src);
+        if (videoEl.duration > 30.5) {
+          toast.error(`Video length is ${Math.round(videoEl.duration)}s. Maximum allowed video length is 30 seconds.`);
+        } else {
+          setFiles([videoFile]);
+          toast.success(`Video verified (${Math.round(videoEl.duration)}s). Ready to upload.`);
+        }
+      };
+      videoEl.onerror = () => {
+        toast.error('Failed to parse video file duration.');
+      };
+      videoEl.src = URL.createObjectURL(videoFile);
+      return;
+    }
+
+    if (images.length > 4) {
+      toast.error('Maximum 4 photos allowed.');
+      setFiles(images.slice(0, 4));
+    } else {
+      setFiles(images);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async () => {
+    if (files.length === 0) {
+      toast.warning('Please select at least 1 video or photo proof to continue.');
+      return;
+    }
+
+    setUploading(true);
+    setUploadProgress('Starting upload...');
+    try {
+      const fileIds: string[] = [];
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const fileSizeMb = (file.size / (1024 * 1024)).toFixed(1);
+        setUploadProgress(`Uploading file ${i + 1} of ${files.length} (${fileSizeMb} MB)...`);
+        const res = await adminService.uploadMediaFile(file);
+        if (res.file_id) {
+          fileIds.push(res.file_id);
+        }
+      }
+
+      if (fileIds.length === 0) {
+        throw new Error('Media file upload failed.');
+      }
+
+      setUploadProgress('Saving job status & linking proof...');
+      await adminService.attachJobMedia(jobId, category, fileIds);
+      await adminService.updateServiceJobStatus(jobId, targetStatus);
+
+      toast.success(`${isInspection ? 'Inspection proof' : 'Ready for delivery proof'} uploaded successfully.`);
+      onSuccess();
+      onClose();
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to attach media proof.');
+    } finally {
+      setUploading(false);
+      setUploadProgress('');
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+      <div className="bg-white dark:bg-slate-900 rounded-xl shadow-2xl max-w-lg w-full p-6 border border-slate-200 dark:border-slate-800 animate-in fade-in zoom-in-95 duration-200">
+        <div className="flex items-start justify-between border-b border-slate-100 dark:border-slate-800 pb-4">
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="p-2 rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
+                {isInspection ? <Video className="w-5 h-5" /> : <CheckCircle2 className="w-5 h-5" />}
+              </span>
+              <h3 className="text-lg font-bold text-slate-900 dark:text-white">{title}</h3>
+            </div>
+            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">{subtitle}</p>
+          </div>
+          <button
+            onClick={onClose}
+            disabled={uploading}
+            className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 p-1 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="my-6 space-y-4">
+          <label className="border-2 border-dashed border-slate-300 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-400 rounded-xl p-6 flex flex-col items-center justify-center cursor-pointer bg-slate-50/50 dark:bg-slate-800/50 hover:bg-blue-50/30 dark:hover:bg-blue-950/20 transition group">
+            <Upload className="w-8 h-8 text-slate-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 mb-2 transition-transform group-hover:-translate-y-1" />
+            <span className="text-sm font-semibold text-slate-700 dark:text-slate-300">
+              Click to select 30s Video or Photos
+            </span>
+            <span className="text-xs text-slate-400 mt-1">
+              Supports MP4, WEBM (Max 30s) or JPG, PNG (Max 4 photos)
+            </span>
+            <input
+              type="file"
+              accept="video/*,image/*"
+              multiple
+              onChange={handleFileChange}
+              disabled={uploading}
+              className="hidden"
+            />
+          </label>
+
+          {files.length > 0 && (
+            <div className="space-y-2">
+              <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                Selected Proof Files ({files.length})
+              </span>
+              <div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto pr-1">
+                {files.map((file, idx) => (
+                  <div
+                    key={idx}
+                    className="flex items-center justify-between p-2 rounded-lg bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-xs"
+                  >
+                    <div className="flex items-center gap-2 truncate pr-2">
+                      {file.type.startsWith('video/') ? (
+                        <Video className="w-4 h-4 text-blue-500 shrink-0" />
+                      ) : (
+                        <ImageIcon className="w-4 h-4 text-emerald-500 shrink-0" />
+                      )}
+                      <span className="truncate text-slate-700 dark:text-slate-300 font-medium">
+                        {file.name}
+                      </span>
+                    </div>
+                    {!uploading && (
+                      <button
+                        onClick={() => removeFile(idx)}
+                        className="text-slate-400 hover:text-red-500 p-0.5 rounded transition"
+                      >
+                        <X className="w-3.5 h-3.5" />
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-end gap-3 border-t border-slate-100 dark:border-slate-800 pt-4">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={uploading}
+            className="px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={uploading || files.length === 0}
+            className="px-5 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg shadow-sm flex items-center gap-2 transition"
+          >
+            {uploading ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                {uploadProgress || 'Uploading...'}
+              </>
+            ) : (
+              'Confirm & Save Status'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ui/PhoneInput.tsx

@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { validatePhone } from '@/lib/validation';
+
+interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  value?: string;
+  onChange: (val: string) => void;
+  label?: string;
+  error?: string;
+  required?: boolean;
+  className?: string;
+  placeholder?: string;
+}
+
+export const PhoneInput: React.FC<PhoneInputProps> = ({
+  value,
+  onChange,
+  label,
+  error: customError,
+  required = false,
+  className = '',
+  placeholder = '98765 43210',
+  disabled,
+  ...props
+}) => {
+  const [touched, setTouched] = useState(false);
+
+  // Normalize current value to bare 10 digits for input display
+  let displayValue = value || '';
+  if (displayValue.startsWith('+91')) displayValue = displayValue.slice(3);
+  else if (displayValue.startsWith('91') && displayValue.length === 12) displayValue = displayValue.slice(2);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let raw = e.target.value.replace(/\D/g, ''); // keep only numbers
+    if (raw.length > 10) raw = raw.slice(0, 10);
+    onChange(raw);
+  };
+
+  const validationError = touched ? validatePhone(displayValue, required) : null;
+  const displayError = customError || validationError;
+
+  return (
+    <div className={`space-y-1 ${className}`}>
+      {label && (
+        <label className="block text-[13px] font-medium text-gray-700">
+          {label} {required && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      <div className="relative flex rounded-lg shadow-sm">
+        {/* Fixed +91 Prefix Badge */}
+        <span className="inline-flex items-center px-3 rounded-l-lg border border-r-0 border-gray-300 bg-gray-50 text-gray-700 font-semibold text-[13px] select-none shrink-0">
+          🇮🇳 +91
+        </span>
+        <input
+          {...props}
+          type="tel"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          maxLength={10}
+          value={displayValue}
+          onChange={handleChange}
+          onBlur={() => setTouched(true)}
+          disabled={disabled}
+          placeholder={placeholder}
+          className={`block w-full min-w-0 flex-1 rounded-none rounded-r-lg border text-[13px] px-3 py-2 transition-colors focus:outline-none focus:ring-2 focus:ring-primary/20 ${
+            displayError
+              ? 'border-red-500 text-red-900 focus:border-red-500 focus:ring-red-200'
+              : 'border-gray-300 focus:border-primary text-gray-900'
+          } ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}`}
+        />
+      </div>
+      {displayError && (
+        <p className="text-[11px] font-medium text-red-500 mt-1 flex items-center gap-1">
+          <span>⚠️</span> {displayError}
+        </p>
+      )}
+    </div>
+  );
+};
+
+interface PincodeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  value?: string;
+  onChange: (val: string) => void;
+  label?: string;
+  error?: string;
+  required?: boolean;
+  className?: string;
+}
+
+export const PincodeInput: React.FC<PincodeInputProps> = ({
+  value,
+  onChange,
+  label,
+  error: customError,
+  required = false,
+  className = '',
+  placeholder = '6-digit PIN code (e.g. 560001)',
+  disabled,
+  ...props
+}) => {
+  const [touched, setTouched] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let raw = e.target.value.replace(/\D/g, '');
+    if (raw.length > 6) raw = raw.slice(0, 6);
+    onChange(raw);
+  };
+
+  const validationError = touched && required && !value ? 'PIN code is required' : (touched && value && value.length !== 6 ? 'PIN code must be exactly 6 digits' : null);
+  const displayError = customError || validationError;
+
+  return (
+    <div className={`space-y-1 ${className}`}>
+      {label && (
+        <label className="block text-[13px] font-medium text-gray-700">
+          {label} {required && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      <input
+        {...props}
+        type="text"
+        inputMode="numeric"
+        maxLength={6}
+        value={value || ''}
+        onChange={handleChange}
+        onBlur={() => setTouched(true)}
+        disabled={disabled}
+        placeholder={placeholder}
+        className={`block w-full rounded-lg border text-[13px] px-3 py-2 transition-colors focus:outline-none focus:ring-2 focus:ring-primary/20 ${
+          displayError
+            ? 'border-red-500 text-red-900 focus:border-red-500 focus:ring-red-200'
+            : 'border-gray-300 focus:border-primary text-gray-900'
+        } ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}`}
+      />
+      {displayError && (
+        <p className="text-[11px] font-medium text-red-500 mt-1 flex items-center gap-1">
+          <span>⚠️</span> {displayError}
+        </p>
+      )}
+    </div>
+  );
+};

components/ui/RichTextEditor.tsx

@@ -0,0 +1,839 @@
+"use client";
+
+import React, { useRef, useEffect, useState } from 'react';
+import {
+  Bold,
+  Italic,
+  Underline as UnderlineIcon,
+  Strikethrough,
+  List,
+  ListOrdered,
+  Link as LinkIcon,
+  Unlink,
+  ExternalLink,
+  Image as ImageIcon,
+  Code2,
+  RemoveFormatting,
+  Sparkles,
+  X,
+  Check,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify,
+  Indent,
+  Outdent,
+  ChevronDown,
+  Upload,
+} from 'lucide-react';
+
+interface RichTextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  maxLength?: number;
+  placeholder?: string;
+}
+
+const HEADING_OPTIONS = [
+  { label: 'Paragraph', tag: 'p' },
+  { label: 'Heading 1', tag: 'h1' },
+  { label: 'Heading 2', tag: 'h2' },
+  { label: 'Heading 3', tag: 'h3' },
+  { label: 'Heading 4', tag: 'h4' },
+  { label: 'Heading 5', tag: 'h5' },
+  { label: 'Heading 6', tag: 'h6' },
+];
+
+function normalizeHtmlString(val: string): string {
+  if (!val) return '';
+  let normalized = val;
+  if (/<[a-z0-9_\/!]/i.test(normalized) || />/i.test(normalized)) {
+    if (typeof window !== 'undefined') {
+      const doc = new DOMParser().parseFromString(normalized, 'text/html');
+      normalized = doc.body.textContent || normalized;
+    } else {
+      normalized = normalized
+        .replace(/&lt;/gi, '<')
+        .replace(/&gt;/gi, '>')
+        .replace(/&quot;/gi, '"')
+        .replace(/&#39;/gi, "'")
+        .replace(/&amp;/gi, '&');
+    }
+  }
+  return normalized;
+}
+
+export const RichTextEditor: React.FC<RichTextEditorProps> = ({
+  value,
+  onChange,
+  maxLength = 20000,
+  placeholder = "Write rich product description...",
+}) => {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const [charCount, setCharCount] = useState(0);
+  const [isHtmlMode, setIsHtmlMode] = useState(false);
+  const [rawHtml, setRawHtml] = useState(() => normalizeHtmlString(value || ''));
+
+  // Heading / Block Format Dropdown State
+  const [activeBlock, setActiveBlock] = useState('p');
+  const [showHeadingDropdown, setShowHeadingDropdown] = useState(false);
+
+  // Hyperlink Modal State
+  const [showLinkModal, setShowLinkModal] = useState(false);
+  const [linkUrl, setLinkUrl] = useState('');
+  const [linkText, setLinkText] = useState('');
+  const [linkTargetBlank, setLinkTargetBlank] = useState(true);
+  const [activeAnchor, setActiveAnchor] = useState<HTMLAnchorElement | null>(null);
+  const savedRangeRef = useRef<Range | null>(null);
+
+  // Image Modal State
+  const [showImageModal, setShowImageModal] = useState(false);
+  const [imageUrl, setImageUrl] = useState('');
+  const [imageAlt, setImageAlt] = useState('');
+
+  useEffect(() => {
+    const normalized = normalizeHtmlString(value || '');
+    if (!isHtmlMode && editorRef.current) {
+      if (editorRef.current.innerHTML !== normalized) {
+        editorRef.current.innerHTML = normalized;
+        updateCharCount();
+      }
+    }
+    if (isHtmlMode && value !== undefined) {
+      setRawHtml(normalized);
+    }
+  }, [value, isHtmlMode]);
+
+  const updateCharCount = () => {
+    if (editorRef.current) {
+      const text = editorRef.current.innerText || '';
+      setCharCount(text.length);
+    } else {
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = rawHtml || '';
+      setCharCount((tempDiv.innerText || '').length);
+    }
+  };
+
+  const handleInput = () => {
+    if (editorRef.current) {
+      const html = editorRef.current.innerHTML;
+      const text = editorRef.current.innerText || '';
+      setCharCount(text.length);
+      setRawHtml(html);
+      onChange(html);
+      detectActiveBlock();
+    }
+  };
+
+  const handleRawHtmlChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const html = e.target.value;
+    setRawHtml(html);
+    onChange(html);
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = html || '';
+    setCharCount((tempDiv.innerText || '').length);
+  };
+
+  const toggleHtmlMode = () => {
+    if (isHtmlMode) {
+      // Switching from Code mode to Visual mode — inject raw HTML into editor DOM
+      const targetHtml = rawHtml || '';
+      setIsHtmlMode(false);
+      onChange(targetHtml);
+      requestAnimationFrame(() => {
+        if (editorRef.current) {
+          editorRef.current.innerHTML = targetHtml;
+          editorRef.current.focus();
+          updateCharCount();
+        }
+      });
+    } else {
+      // Switching from Visual to Code mode — write innerHTML to textarea
+      if (editorRef.current) {
+        const currentHtml = editorRef.current.innerHTML || '';
+        setRawHtml(currentHtml);
+        onChange(currentHtml);
+      }
+      setIsHtmlMode(true);
+    }
+  };
+
+  const detectActiveBlock = () => {
+    if (!editorRef.current) return;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+
+    let parent: Node | null = sel.anchorNode;
+    if (parent && parent.nodeType === 3) {
+      parent = parent.parentNode;
+    }
+
+    let block = 'p';
+    while (parent && parent !== editorRef.current) {
+      const tag = (parent as HTMLElement).tagName?.toLowerCase();
+      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(tag)) {
+        block = tag;
+        break;
+      }
+      parent = parent.parentNode;
+    }
+    setActiveBlock(block);
+  };
+
+  const execCommand = (command: string, valueArg: string = '') => {
+    if (isHtmlMode) return;
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+    document.execCommand(command, false, valueArg);
+    handleInput();
+  };
+
+  const setHeading = (tag: string) => {
+    setShowHeadingDropdown(false);
+    if (isHtmlMode) return;
+    execCommand('formatBlock', `<${tag}>`);
+    setActiveBlock(tag);
+  };
+
+  // Paste handler: preserve HTML structure, alignment styles, lists, and formatting tags
+  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const clipboardData = e.clipboardData;
+    const pastedHtml = clipboardData.getData('text/html');
+    const pastedText = clipboardData.getData('text/plain');
+
+    if (pastedHtml) {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(pastedHtml, 'text/html');
+
+      const allElements = doc.body.querySelectorAll('*');
+      allElements.forEach((el) => {
+        const element = el as HTMLElement;
+        if (element.style) {
+          // Preserve text-align, list-style, font-weight, remove unwanted font-sizes & families
+          const align = element.style.textAlign;
+          element.style.fontSize = '';
+          element.style.fontFamily = '';
+          element.style.color = '';
+          element.style.backgroundColor = '';
+          element.style.lineHeight = '';
+          if (align) {
+            element.style.textAlign = align;
+          }
+          if (!element.getAttribute('style')?.trim()) {
+            element.removeAttribute('style');
+          }
+        }
+        if (element.tagName === 'FONT') {
+          element.removeAttribute('size');
+          element.removeAttribute('face');
+          element.removeAttribute('color');
+        }
+      });
+
+      const cleanHtml = doc.body.innerHTML;
+      document.execCommand('insertHTML', false, cleanHtml);
+    } else if (pastedText) {
+      // If raw HTML text (like <ul><li>...</li></ul>) was pasted as plain text
+      if (/<[a-z][\s\S]*>/i.test(pastedText)) {
+        document.execCommand('insertHTML', false, pastedText);
+      } else {
+        document.execCommand('insertText', false, pastedText);
+      }
+    }
+    handleInput();
+  };
+
+  // Open Link Modal
+  const openLinkModal = (existingAnchor?: HTMLAnchorElement | null) => {
+    if (isHtmlMode) return;
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      savedRangeRef.current = sel.getRangeAt(0).cloneRange();
+    } else {
+      savedRangeRef.current = null;
+    }
+
+    let anchor = existingAnchor || null;
+    if (!anchor && sel && sel.rangeCount > 0) {
+      let parent: Node | null = sel.anchorNode;
+      while (parent && parent !== editorRef.current) {
+        if (parent.nodeName === 'A') {
+          anchor = parent as HTMLAnchorElement;
+          break;
+        }
+        parent = parent.parentNode;
+      }
+    }
+
+    if (anchor) {
+      setActiveAnchor(anchor);
+      setLinkUrl(anchor.getAttribute('href') || '');
+      setLinkText(anchor.innerText || '');
+      setLinkTargetBlank(anchor.getAttribute('target') === '_blank');
+    } else {
+      setActiveAnchor(null);
+      setLinkUrl('');
+      setLinkText(sel ? sel.toString() : '');
+      setLinkTargetBlank(true);
+    }
+
+    setShowLinkModal(true);
+  };
+
+  const handleApplyLink = () => {
+    if (!editorRef.current) return;
+    editorRef.current.focus();
+
+    if (savedRangeRef.current) {
+      const sel = window.getSelection();
+      if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(savedRangeRef.current);
+      }
+    }
+
+    const finalUrl = linkUrl.trim();
+    if (!finalUrl) {
+      handleRemoveLink();
+      return;
+    }
+
+    const formattedUrl = /^https?:\/\//i.test(finalUrl) || finalUrl.startsWith('/') || finalUrl.startsWith('#')
+      ? finalUrl
+      : `https://${finalUrl}`;
+
+    if (activeAnchor) {
+      activeAnchor.setAttribute('href', formattedUrl);
+      if (linkTargetBlank) {
+        activeAnchor.setAttribute('target', '_blank');
+        activeAnchor.setAttribute('rel', 'noopener noreferrer');
+      } else {
+        activeAnchor.removeAttribute('target');
+        activeAnchor.removeAttribute('rel');
+      }
+      if (linkText.trim()) {
+        activeAnchor.innerText = linkText;
+      }
+    } else {
+      const targetAttr = linkTargetBlank ? ' target="_blank" rel="noopener noreferrer"' : '';
+      const display = linkText.trim() || formattedUrl;
+      const linkHtml = `<a href="${formattedUrl}"${targetAttr} class="text-primary underline font-medium hover:text-primary/80">${display}</a>`;
+      document.execCommand('insertHTML', false, linkHtml);
+    }
+
+    setShowLinkModal(false);
+    handleInput();
+  };
+
+  const handleRemoveLink = () => {
+    if (!editorRef.current) return;
+    editorRef.current.focus();
+
+    if (savedRangeRef.current) {
+      const sel = window.getSelection();
+      if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(savedRangeRef.current);
+      }
+    }
+
+    if (activeAnchor) {
+      const textNode = document.createTextNode(activeAnchor.innerText || activeAnchor.textContent || '');
+      activeAnchor.parentNode?.replaceChild(textNode, activeAnchor);
+    } else {
+      document.execCommand('unlink', false);
+    }
+
+    setShowLinkModal(false);
+    handleInput();
+  };
+
+  const handleEditorClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement;
+    const anchor = target.closest('a') as HTMLAnchorElement | null;
+    if (anchor && editorRef.current?.contains(anchor)) {
+      e.preventDefault();
+      openLinkModal(anchor);
+    }
+  };
+
+  const handleApplyImage = () => {
+    const url = imageUrl.trim();
+    if (!url) return;
+    const alt = imageAlt.trim() || 'Product image';
+    const imgHtml = `<img src="${url}" alt="${alt}" class="max-w-full h-auto rounded-lg my-2 inline-block border border-border" />`;
+    if (!isHtmlMode && editorRef.current) {
+      editorRef.current.focus();
+      document.execCommand('insertHTML', false, imgHtml);
+      handleInput();
+    } else {
+      setRawHtml((prev) => prev + imgHtml);
+      onChange(rawHtml + imgHtml);
+    }
+    setShowImageModal(false);
+    setImageUrl('');
+    setImageAlt('');
+  };
+
+  const handleImageFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target?.result) {
+          setImageUrl(event.target.result as string);
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const isOverLimit = charCount > maxLength;
+  const currentHeadingLabel = HEADING_OPTIONS.find((h) => h.tag === activeBlock)?.label || 'Paragraph';
+
+  return (
+    <div className="border border-border rounded-xl overflow-hidden bg-card text-foreground shadow-sm relative">
+      <style>{`
+        [contenteditable]:empty:before {
+          content: attr(data-placeholder);
+          color: #94a3b8;
+          opacity: 0.7;
+          pointer-events: none;
+          display: block;
+        }
+        .editor-content {
+          font-family: inherit;
+        }
+        .editor-content h1 { font-size: 1.75rem; font-weight: 700; margin-top: 1rem; margin-bottom: 0.5rem; line-height: 1.25; }
+        .editor-content h2 { font-size: 1.4rem; font-weight: 700; margin-top: 0.875rem; margin-bottom: 0.375rem; line-height: 1.3; }
+        .editor-content h3 { font-size: 1.2rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.25rem; line-height: 1.35; }
+        .editor-content h4 { font-size: 1rem; font-weight: 600; margin-top: 0.6rem; margin-bottom: 0.25rem; }
+        .editor-content h5 { font-size: 0.875rem; font-weight: 600; margin-top: 0.5rem; margin-bottom: 0.25rem; }
+        .editor-content h6 { font-size: 0.75rem; font-weight: 600; margin-top: 0.5rem; margin-bottom: 0.25rem; }
+        .editor-content p { margin-bottom: 0.5rem; line-height: 1.6; }
+        .editor-content ul, .editor-content ul li { list-style-type: disc !important; }
+        .editor-content ol, .editor-content ol li { list-style-type: decimal !important; }
+        .editor-content ul, .editor-content ol { padding-left: 1.75rem !important; margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
+        .editor-content li { display: list-item !important; margin-bottom: 0.25rem !important; }
+        .editor-content [style*="text-align: center"], .editor-content p[style*="text-align: center"], .editor-content div[style*="text-align: center"] { text-align: center !important; }
+        .editor-content [style*="text-align: right"], .editor-content p[style*="text-align: right"], .editor-content div[style*="text-align: right"] { text-align: right !important; }
+        .editor-content [style*="text-align: justify"], .editor-content p[style*="text-align: justify"], .editor-content div[style*="text-align: justify"] { text-align: justify !important; }
+        .editor-content [style*="text-align: left"], .editor-content p[style*="text-align: left"], .editor-content div[style*="text-align: left"] { text-align: left !important; }
+        .editor-content a { color: #3b82f6; text-decoration: underline; cursor: pointer; }
+        .editor-content blockquote { border-left: 3px solid #3b82f6; padding-left: 0.75rem; margin-left: 0; margin-bottom: 0.5rem; color: #64748b; font-style: italic; }
+        .editor-content pre { background: rgba(0,0,0,0.05); padding: 0.5rem; rounded: 0.375rem; font-family: monospace; font-size: 0.8rem; overflow-x: auto; margin-bottom: 0.5rem; }
+      `}</style>
+      
+      {/* Formatting Toolbar */}
+      <div className="flex flex-wrap items-center gap-1 p-2 bg-muted/60 border-b border-border select-none text-xs">
+        
+        {/* Shopify-Style Heading Dropdown */}
+        <div className="relative">
+          <button
+            type="button"
+            disabled={isHtmlMode}
+            onClick={() => setShowHeadingDropdown(!showHeadingDropdown)}
+            className="flex items-center gap-1.5 h-7 px-2.5 rounded-md border border-border bg-card hover:bg-accent text-foreground text-xs font-medium cursor-pointer disabled:opacity-40 transition-colors"
+          >
+            <span>{currentHeadingLabel}</span>
+            <ChevronDown size={13} className="text-muted-foreground" />
+          </button>
+
+          {showHeadingDropdown && !isHtmlMode && (
+            <div className="absolute left-0 top-full mt-1 z-30 w-40 bg-card border border-border rounded-lg shadow-xl py-1 text-xs text-foreground animate-in fade-in zoom-in-95 duration-100">
+              {HEADING_OPTIONS.map((h) => (
+                <button
+                  key={h.tag}
+                  type="button"
+                  onClick={() => setHeading(h.tag)}
+                  className={`w-full text-left px-3 py-1.5 hover:bg-muted flex items-center justify-between cursor-pointer transition-colors ${
+                    activeBlock === h.tag ? 'font-bold text-primary bg-primary/10' : ''
+                  }`}
+                >
+                  <span>{h.label}</span>
+                  {activeBlock === h.tag && <Check size={13} className="text-primary" />}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="w-px h-4 bg-border mx-1" />
+
+        {/* Text Formatting */}
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('bold')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Bold (Ctrl+B)"
+        >
+          <Bold size={15} />
+        </button>
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('italic')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Italic (Ctrl+I)"
+        >
+          <Italic size={15} />
+        </button>
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('underline')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Underline (Ctrl+U)"
+        >
+          <UnderlineIcon size={15} />
+        </button>
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('strikeThrough')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Strikethrough"
+        >
+          <Strikethrough size={15} />
+        </button>
+
+        <div className="w-px h-4 bg-border mx-1" />
+
+        {/* Alignment */}
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('justifyLeft')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Align Left"
+        >
+          <AlignLeft size={15} />
+        </button>
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('justifyCenter')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Align Center"
+        >
+          <AlignCenter size={15} />
+        </button>
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('justifyRight')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Align Right"
+        >
+          <AlignRight size={15} />
+        </button>
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('justifyFull')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Justify"
+        >
+          <AlignJustify size={15} />
+        </button>
+
+        <div className="w-px h-4 bg-border mx-1" />
+
+        {/* Lists & Indents */}
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('insertUnorderedList')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Bulleted List"
+        >
+          <List size={15} />
+        </button>
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('insertOrderedList')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Numbered List"
+        >
+          <ListOrdered size={15} />
+        </button>
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('outdent')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Outdent"
+        >
+          <Outdent size={15} />
+        </button>
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('indent')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Indent"
+        >
+          <Indent size={15} />
+        </button>
+
+        <div className="w-px h-4 bg-border mx-1" />
+
+        {/* Hyperlink & Media */}
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => openLinkModal()}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Insert / Edit Hyperlink"
+        >
+          <LinkIcon size={15} />
+        </button>
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => setShowImageModal(true)}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Insert Image"
+        >
+          <ImageIcon size={15} />
+        </button>
+
+        <div className="w-px h-4 bg-border mx-1" />
+
+        {/* Clear Formatting */}
+        <button
+          type="button"
+          disabled={isHtmlMode}
+          onClick={() => execCommand('removeFormat')}
+          className="p-1.5 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors cursor-pointer disabled:opacity-40"
+          title="Clear Formatting"
+        >
+          <RemoveFormatting size={15} />
+        </button>
+
+        {/* HTML Source Code Toggle (<>) */}
+        <button
+          type="button"
+          onClick={toggleHtmlMode}
+          className={`ml-auto px-2 py-1 rounded-md text-xs font-mono font-semibold flex items-center gap-1 transition-colors cursor-pointer ${
+            isHtmlMode ? 'bg-primary text-primary-foreground shadow-xs' : 'bg-card border border-border hover:bg-accent text-muted-foreground hover:text-foreground'
+          }`}
+          title={isHtmlMode ? "Switch to WYSIWYG Visual Editor" : "Show HTML Source Code (<>)"}
+        >
+          <Code2 size={14} />
+          <span>{isHtmlMode ? 'Visual' : '<>'}</span>
+        </button>
+      </div>
+
+      {/* Editor Main Content Area */}
+      {isHtmlMode ? (
+        <textarea
+          value={rawHtml}
+          onChange={handleRawHtmlChange}
+          placeholder="<h1>Title</h1><p>Write raw HTML code here...</p>"
+          className="w-full min-h-[160px] max-h-[340px] p-3 text-xs font-mono bg-muted/20 text-foreground focus:outline-none leading-relaxed border-none resize-y"
+        />
+      ) : (
+        <div
+          ref={editorRef}
+          contentEditable
+          onInput={handleInput}
+          onBlur={handleInput}
+          onPaste={handlePaste}
+          onClick={(e) => {
+            handleEditorClick(e);
+            detectActiveBlock();
+          }}
+          onKeyUp={detectActiveBlock}
+          className="editor-content p-3.5 min-h-[160px] max-h-[340px] overflow-y-auto text-xs text-foreground focus:outline-none leading-relaxed prose prose-sm max-w-none"
+          data-placeholder={placeholder}
+        />
+      )}
+
+      {/* Interactive Link Modal */}
+      {showLinkModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs p-4">
+          <div className="bg-card border border-border rounded-xl shadow-2xl w-full max-w-md p-5 space-y-4 text-foreground animate-in fade-in zoom-in-95 duration-150">
+            <div className="flex items-center justify-between border-b border-border pb-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
+                <LinkIcon size={16} className="text-primary" />
+                <span>{activeAnchor ? 'Edit Hyperlink' : 'Add Hyperlink'}</span>
+              </div>
+              <button
+                type="button"
+                onClick={() => setShowLinkModal(false)}
+                className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <label className="block text-xs font-medium text-muted-foreground mb-1">Link URL</label>
+                <input
+                  type="url"
+                  placeholder="https://example.com"
+                  value={linkUrl}
+                  onChange={(e) => setLinkUrl(e.target.value)}
+                  className="w-full h-9 px-3 bg-muted/40 border border-border rounded-lg text-xs text-foreground focus:outline-none focus:border-primary transition-colors"
+                  autoFocus
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-muted-foreground mb-1">Display Text</label>
+                <input
+                  type="text"
+                  placeholder="Text to display..."
+                  value={linkText}
+                  onChange={(e) => setLinkText(e.target.value)}
+                  className="w-full h-9 px-3 bg-muted/40 border border-border rounded-lg text-xs text-foreground focus:outline-none focus:border-primary transition-colors"
+                />
+              </div>
+
+              <label className="flex items-center gap-2 cursor-pointer pt-1">
+                <input
+                  type="checkbox"
+                  checked={linkTargetBlank}
+                  onChange={(e) => setLinkTargetBlank(e.target.checked)}
+                  className="rounded border-border text-primary focus:ring-primary w-4 h-4"
+                />
+                <span className="text-xs text-muted-foreground flex items-center gap-1">
+                  Open link in new tab <ExternalLink size={12} />
+                </span>
+              </label>
+            </div>
+
+            <div className="flex items-center justify-between border-t border-border pt-3 gap-2">
+              {activeAnchor ? (
+                <button
+                  type="button"
+                  onClick={handleRemoveLink}
+                  className="px-3 py-1.5 text-xs text-destructive hover:bg-destructive/10 border border-destructive/30 rounded-lg transition-colors flex items-center gap-1 font-medium cursor-pointer"
+                >
+                  <Unlink size={14} /> Remove Link
+                </button>
+              ) : (
+                <div />
+              )}
+
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => setShowLinkModal(false)}
+                  className="px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted rounded-lg transition-colors font-medium cursor-pointer"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={handleApplyLink}
+                  className="px-4 py-1.5 text-xs bg-primary text-primary-foreground font-semibold rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-1 cursor-pointer"
+                >
+                  <Check size={14} /> Apply Link
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Interactive Image Modal */}
+      {showImageModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs p-4">
+          <div className="bg-card border border-border rounded-xl shadow-2xl w-full max-w-md p-5 space-y-4 text-foreground animate-in fade-in zoom-in-95 duration-150">
+            <div className="flex items-center justify-between border-b border-border pb-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
+                <ImageIcon size={16} className="text-primary" />
+                <span>Insert Image</span>
+              </div>
+              <button
+                type="button"
+                onClick={() => setShowImageModal(false)}
+                className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <label className="block text-xs font-medium text-muted-foreground mb-1">Image URL</label>
+                <input
+                  type="url"
+                  placeholder="https://example.com/image.jpg"
+                  value={imageUrl}
+                  onChange={(e) => setImageUrl(e.target.value)}
+                  className="w-full h-9 px-3 bg-muted/40 border border-border rounded-lg text-xs text-foreground focus:outline-none focus:border-primary transition-colors"
+                  autoFocus
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-muted-foreground mb-1">Or Upload Image File</label>
+                <label className="flex items-center justify-center gap-2 w-full h-10 px-3 border border-dashed border-border rounded-lg bg-muted/20 hover:bg-muted/40 text-xs text-muted-foreground cursor-pointer transition-colors">
+                  <Upload size={14} />
+                  <span>Choose file to embed</span>
+                  <input type="file" accept="image/*" onChange={handleImageFileUpload} className="hidden" />
+                </label>
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-muted-foreground mb-1">Alt Description</label>
+                <input
+                  type="text"
+                  placeholder="Product image description..."
+                  value={imageAlt}
+                  onChange={(e) => setImageAlt(e.target.value)}
+                  className="w-full h-9 px-3 bg-muted/40 border border-border rounded-lg text-xs text-foreground focus:outline-none focus:border-primary transition-colors"
+                />
+              </div>
+
+              {imageUrl && (
+                <div className="border border-border rounded-lg p-2 bg-muted/20 max-h-32 overflow-hidden flex items-center justify-center">
+                  <img src={imageUrl} alt="Preview" className="max-h-28 object-contain rounded" />
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center justify-end border-t border-border pt-3 gap-2">
+              <button
+                type="button"
+                onClick={() => setShowImageModal(false)}
+                className="px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted rounded-lg transition-colors font-medium cursor-pointer"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleApplyImage}
+                disabled={!imageUrl.trim()}
+                className="px-4 py-1.5 text-xs bg-primary text-primary-foreground font-semibold rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-1 cursor-pointer disabled:opacity-50"
+              >
+                <Check size={14} /> Insert Image
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Footer Character Counter & Limit Warning */}
+      <div className="flex items-center justify-between px-3 py-1.5 bg-muted/40 border-t border-border text-[11px]">
+        <div className="flex items-center gap-1.5 text-muted-foreground font-medium">
+          <Sparkles size={12} className="text-primary" />
+          <span>{isHtmlMode ? 'HTML Source Code Mode' : 'WYSIWYG Rich Editor'}</span>
+        </div>
+        <div className={`font-mono font-bold ${isOverLimit ? 'text-destructive animate-pulse' : 'text-muted-foreground'}`}>
+          {charCount} / {maxLength} chars
+          {isOverLimit && <span className="ml-1 text-destructive">(Limit Exceeded)</span>}
+        </div>
+      </div>
+    </div>
+  );
+};

components/ui/RowActionsMenu.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from '@/lib/motion';
+import { EllipsisVertical, Edit, Trash2 } from 'lucide-react';
+
+const MENU_WIDTH = 148;
+const MENU_ESTIMATED_HEIGHT = 84;
+const GAP = 6;
+const VIEWPORT_PAD = 8;
+
+interface RowActionsMenuProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function RowActionsMenu({ open, onOpenChange, onEdit, onDelete }: RowActionsMenuProps) {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const updatePosition = () => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+
+    const rect = trigger.getBoundingClientRect();
+    const menuHeight = menuRef.current?.offsetHeight || MENU_ESTIMATED_HEIGHT;
+    const spaceBelow = window.innerHeight - rect.bottom - VIEWPORT_PAD;
+    const placeAbove = spaceBelow < menuHeight && rect.top > menuHeight + GAP;
+
+    let top = placeAbove ? rect.top - menuHeight - GAP : rect.bottom + GAP;
+    let left = rect.right - MENU_WIDTH;
+
+    if (left < VIEWPORT_PAD) left = VIEWPORT_PAD;
+    if (left + MENU_WIDTH > window.innerWidth - VIEWPORT_PAD) {
+      left = window.innerWidth - MENU_WIDTH - VIEWPORT_PAD;
+    }
+    if (top < VIEWPORT_PAD) top = VIEWPORT_PAD;
+    if (top + menuHeight > window.innerHeight - VIEWPORT_PAD) {
+      top = Math.max(VIEWPORT_PAD, window.innerHeight - menuHeight - VIEWPORT_PAD);
+    }
+
+    setCoords({ top, left });
+  };
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    updatePosition();
+    const frame = requestAnimationFrame(updatePosition);
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onOpenChange(false);
+    };
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      onOpenChange(false);
+    };
+    const onReposition = () => updatePosition();
+
+    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener('mousedown', onPointerDown);
+    window.addEventListener('resize', onReposition);
+    window.addEventListener('scroll', onReposition, true);
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('mousedown', onPointerDown);
+      window.removeEventListener('resize', onReposition);
+      window.removeEventListener('scroll', onReposition, true);
+    };
+  }, [open, onOpenChange]);
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label="Row actions"
+        title="Actions"
+        onClick={() => onOpenChange(!open)}
+        className={`w-8 h-8 crm-radius-toggle border flex items-center justify-center cursor-pointer transition-colors ${
+          open
+            ? 'border-primary bg-primary text-white'
+            : 'border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground'
+        }`}
+      >
+        <EllipsisVertical className="w-4 h-4" />
+      </button>
+      {mounted &&
+        createPortal(
+          <AnimatePresence>
+            {open && (
+              <motion.div
+                ref={menuRef}
+                role="menu"
+                initial={{ opacity: 0, scale: 0.96, y: -4 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.96, y: -4 }}
+                transition={{ duration: 0.15, ease: 'easeOut' }}
+                style={{ top: coords.top, left: coords.left, width: MENU_WIDTH }}
+                className="fixed z-[90] origin-top-right crm-radius-none border border-border bg-card py-1 shadow-lg"
+              >
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={() => {
+                    onOpenChange(false);
+                    onEdit();
+                  }}
+                  className="w-full flex items-center gap-2.5 px-3.5 py-2 text-[13px] text-foreground hover:bg-muted cursor-pointer"
+                >
+                  <Edit className="w-3.5 h-3.5 text-muted-foreground" />
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={() => {
+                    onOpenChange(false);
+                    onDelete();
+                  }}
+                  className="w-full flex items-center gap-2.5 px-3.5 py-2 text-[13px] text-foreground hover:bg-muted cursor-pointer"
+                >
+                  <Trash2 className="w-3.5 h-3.5 text-muted-foreground" />
+                  Delete
+                </button>
+              </motion.div>
+            )}
+          </AnimatePresence>,
+          document.body
+        )}
+    </>
+  );
+}

components/ui/SlideOver.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { AnimatePresence, motion } from '@/lib/motion';
+import { X } from 'lucide-react';
+
+interface SlideOverProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  size?: 'form' | 'compact';
+}
+
+const SIZE_CLASS = {
+  form: 'w-full sm:w-[78vw] lg:w-[min(50vw,600px)] sm:max-w-[650px]',
+  compact: 'w-full sm:w-[min(100%,380px)] sm:max-w-[380px]',
+};
+
+export function SlideOver({ open, onClose, title, icon, children, size = 'form' }: SlideOverProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [open, onClose]);
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <div className="fixed inset-0 z-[80]" role="dialog" aria-modal="true" aria-labelledby="slideover-title">
+          <motion.button
+            type="button"
+            aria-label="Close drawer overlay"
+            className="absolute inset-0 bg-black/50 cursor-default"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
+            onClick={onClose}
+          />
+          <motion.div
+            ref={panelRef}
+            className={`absolute right-0 top-0 flex h-full min-w-0 flex-col bg-card border-l border-border shadow-xl ${SIZE_CLASS[size]}`}
+            initial={{ x: '100%' }}
+            animate={{ x: 0 }}
+            exit={{ x: '100%' }}
+            transition={{ duration: 0.32, ease: [0.22, 1, 0.36, 1] }}
+            onAnimationComplete={() => {
+              if (!open) return;
+              const focusable = panelRef.current?.querySelector<HTMLElement>(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+              );
+              focusable?.focus();
+            }}
+          >
+            <div className="shrink-0 h-12 px-5 flex items-center justify-between border-b border-border">
+              <h2 id="slideover-title" className="text-[16px] font-semibold text-foreground flex items-center gap-2 min-w-0">
+                {icon}
+                <span className="truncate">{title}</span>
+              </h2>
+              <button
+                type="button"
+                onClick={onClose}
+                aria-label="Close"
+                className="w-8 h-8 rounded-[8px] text-primary hover:bg-muted cursor-pointer transition-colors flex items-center justify-center shrink-0"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+            <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}

components/ui/StatsSparklineCard.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { useId } from 'react';
+import { ArrowDownRight, ArrowUpRight, type LucideIcon } from 'lucide-react';
+
+export type StatsSparklineTone = 'green' | 'violet' | 'orange' | 'blue';
+
+const TONES: Record<
+  StatsSparklineTone,
+  { stroke: string; iconBox: string; value: string }
+> = {
+  green: {
+    stroke: 'var(--success)',
+    iconBox: 'bg-success/10 border-success/25 text-success',
+    value: 'text-success',
+  },
+  violet: {
+    stroke: 'var(--info)',
+    iconBox: 'bg-info/10 border-info/25 text-info',
+    value: 'text-info',
+  },
+  orange: {
+    stroke: 'var(--warning)',
+    iconBox: 'bg-warning/10 border-warning/30 text-warning',
+    value: 'text-warning',
+  },
+  blue: {
+    stroke: '#3b82f6',
+    iconBox: 'bg-[#3b82f6]/10 border-[#3b82f6]/25 text-[#3b82f6]',
+    value: 'text-[#3b82f6]',
+  },
+};
+
+export function datesToSparkline(
+  dates: Array<string | Date | null | undefined>,
+  days = 7
+): number[] {
+  const buckets = Array.from({ length: days }, () => 0);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  for (const raw of dates) {
+    if (!raw) continue;
+    const d = new Date(raw);
+    if (Number.isNaN(d.getTime())) continue;
+    d.setHours(0, 0, 0, 0);
+    const diff = Math.round((today.getTime() - d.getTime()) / 86400000);
+    if (diff >= 0 && diff < days) buckets[days - 1 - diff] += 1;
+  }
+  return buckets;
+}
+
+export function weekOverWeekChange(dates: Array<string | Date | null | undefined>): number {
+  const now = Date.now();
+  const week = 7 * 86400000;
+  let thisWeek = 0;
+  let lastWeek = 0;
+  for (const raw of dates) {
+    if (!raw) continue;
+    const t = new Date(raw).getTime();
+    if (Number.isNaN(t)) continue;
+    const age = now - t;
+    if (age >= 0 && age < week) thisWeek += 1;
+    else if (age >= week && age < week * 2) lastWeek += 1;
+  }
+  if (lastWeek === 0) return thisWeek === 0 ? 0 : 100;
+  return ((thisWeek - lastWeek) / lastWeek) * 100;
+}
+
+function MiniSparkline({ data, color }: { data: number[]; color: string }) {
+  const gradientId = useId();
+  const width = 118;
+  const height = 52;
+  const padX = 2;
+  const padY = 6;
+  const values = data.length > 1 ? data : [0, 0];
+  const max = Math.max(...values, 1);
+  const points = values.map((value, index) => {
+    const x = padX + (index / Math.max(values.length - 1, 1)) * (width - padX * 2);
+    const y = height - padY - (value / max) * (height - padY * 2);
+    return { x, y };
+  });
+  const line = points.map((point, index) => `${index === 0 ? 'M' : 'L'}${point.x},${point.y}`).join(' ');
+  const area = `${line} L${points[points.length - 1].x},${height - 2} L${points[0].x},${height - 2} Z`;
+
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} className="overflow-visible shrink-0">
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={color} stopOpacity="0.32" />
+          <stop offset="100%" stopColor={color} stopOpacity="0.02" />
+        </linearGradient>
+      </defs>
+      <line
+        x1={padX}
+        x2={width - padX}
+        y1={height - 4}
+        y2={height - 4}
+        stroke="currentColor"
+        strokeDasharray="3 4"
+        className="text-border"
+        strokeWidth="1"
+      />
+      <path d={area} fill={`url(#${gradientId})`} />
+      <path d={line} fill="none" stroke={color} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+interface StatsSparklineCardProps {
+  title: string;
+  value: string | number;
+  icon: LucideIcon;
+  tone: StatsSparklineTone;
+  series: number[];
+  deltaPercent?: number;
+  deltaLabel?: string;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+export function StatsSparklineCard({
+  title,
+  value,
+  icon: Icon,
+  tone,
+  series,
+  deltaPercent = 0,
+  deltaLabel = 'vs Last Week',
+  active = false,
+  onClick,
+}: StatsSparklineCardProps) {
+  const theme = TONES[tone];
+  const positive = deltaPercent >= 0;
+  const TrendIcon = positive ? ArrowUpRight : ArrowDownRight;
+  const deltaText = `${positive ? '+' : ''}${deltaPercent.toFixed(1)}%`;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`bg-card border text-left cursor-pointer transition-colors crm-radius-section p-4 shadow-[0_1px_3px_rgba(16,24,40,0.06)] min-w-0 ${
+        active ? 'border-[#b8c0d4]' : 'border-border'
+      }`}
+    >
+      <div className="flex items-center gap-3 min-w-0">
+        <div className={`w-10 h-10 crm-radius-section border flex items-center justify-center shrink-0 ${theme.iconBox}`}>
+          <Icon className="w-[18px] h-[18px]" strokeWidth={1.75} />
+        </div>
+        <p className="text-[14px] font-medium text-foreground truncate">{title}</p>
+      </div>
+
+      <div className="mt-4 border border-border crm-radius-section px-3.5 py-3 flex items-end justify-between gap-2 min-w-0">
+        <div className="min-w-0">
+          <p className={`text-[26px] font-bold tracking-tight leading-none ${theme.value}`}>{value}</p>
+          <p className="text-[12px] mt-2 leading-none truncate">
+            <span className={`font-semibold ${theme.value}`}>{deltaText}</span>
+            <span className="text-muted-foreground"> {deltaLabel}</span>
+          </p>
+        </div>
+        <div className="flex items-center gap-0.5 shrink-0">
+          <TrendIcon className={`w-4 h-4 mb-3 ${theme.value}`} strokeWidth={2.25} />
+          <MiniSparkline data={series} color={theme.stroke} />
+        </div>
+      </div>
+    </button>
+  );
+}

components/ui/TablePagination.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export const TABLE_PAGE_SIZE = 10;
+
+export interface TablePagerProps {
+  page: number;
+  totalPages: number;
+  total: number;
+  pageSize: number;
+  onPageChange: (page: number) => void;
+}
+
+export function useClientPagination<T>(items: T[], pageSize: number = TABLE_PAGE_SIZE) {
+  const [page, setPage] = useState(1);
+  const total = items.length;
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const currentPage = Math.min(Math.max(1, page), totalPages);
+
+  useEffect(() => {
+    if (page !== currentPage) setPage(currentPage);
+  }, [page, currentPage]);
+
+  const pagedItems = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return items.slice(start, start + pageSize);
+  }, [items, currentPage, pageSize]);
+
+  return {
+    items: pagedItems,
+    page: currentPage,
+    totalPages,
+    total,
+    pageSize,
+    onPageChange: setPage,
+  };
+}
+
+function pageWindow(current: number, totalPages: number) {
+  if (totalPages <= 5) return Array.from({ length: totalPages }, (_, i) => i + 1);
+  if (current <= 3) return [1, 2, 3, 4, 5];
+  if (current >= totalPages - 2) return [totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
+  return [current - 2, current - 1, current, current + 1, current + 2];
+}
+
+export function TablePagination({
+  page,
+  totalPages,
+  total,
+  pageSize,
+  onPageChange,
+}: TablePagerProps & { items?: unknown }) {
+  if (total === 0) return null;
+
+  const from = (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, total);
+  const pages = pageWindow(page, totalPages);
+
+  const btnClass =
+    'inline-flex items-center justify-center h-8 min-w-8 px-2.5 crm-radius-control border border-border bg-card text-[12px] font-medium text-foreground hover:bg-muted cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-card';
+
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-3 sm:px-4 py-3 border-t border-border bg-card">
+      <p className="text-[12px] text-muted-foreground">
+        Showing <span className="font-semibold text-foreground">{from}</span> to{' '}
+        <span className="font-semibold text-foreground">{to}</span> of{' '}
+        <span className="font-semibold text-foreground">{total}</span>
+      </p>
+      <div className="flex items-center gap-1 overflow-x-auto max-w-full">
+        <button
+          type="button"
+          aria-label="Previous page"
+          disabled={page <= 1}
+          onClick={() => onPageChange(page - 1)}
+          className={btnClass}
+        >
+          <ChevronLeft className="w-3.5 h-3.5" />
+          <span className="hidden sm:inline">Previous</span>
+        </button>
+        {pages.map((n) => (
+          <button
+            key={n}
+            type="button"
+            aria-label={`Page ${n}`}
+            aria-current={n === page ? 'page' : undefined}
+            onClick={() => onPageChange(n)}
+            className={`${btnClass} ${n === page ? 'bg-primary text-white border-primary hover:bg-primary/90 hover:text-white' : ''}`}
+          >
+            {n}
+          </button>
+        ))}
+        <button
+          type="button"
+          aria-label="Next page"
+          disabled={page >= totalPages}
+          onClick={() => onPageChange(page + 1)}
+          className={btnClass}
+        >
+          <span className="hidden sm:inline">Next</span>
+          <ChevronRight className="w-3.5 h-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}

components/ui/ViewModeToggle.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { Grid3x3, List } from 'lucide-react';
+
+type ViewMode = 'table' | 'grid';
+
+interface ViewModeToggleProps {
+  value: ViewMode;
+  onChange: (mode: ViewMode) => void;
+}
+
+export function ViewModeToggle({ value, onChange }: ViewModeToggleProps) {
+  return (
+    <div className="crm-radius-toggle inline-flex items-center gap-1.5 border border-border bg-card p-1 shrink-0">
+      <button
+        type="button"
+        onClick={() => onChange('table')}
+        aria-label="List view"
+        aria-pressed={value === 'table'}
+        title="List view"
+        className={`crm-radius-toggle w-8 h-8 flex items-center justify-center cursor-pointer transition-colors ${
+          value === 'table'
+            ? 'bg-[#108E7A] text-white shadow-none'
+            : 'text-foreground hover:bg-muted/50'
+        }`}
+      >
+        <List className="w-4 h-4" strokeWidth={2.25} />
+      </button>
+      <button
+        type="button"
+        onClick={() => onChange('grid')}
+        aria-label="Grid view"
+        aria-pressed={value === 'grid'}
+        title="Grid view"
+        className={`crm-radius-toggle w-8 h-8 flex items-center justify-center cursor-pointer transition-colors ${
+          value === 'grid'
+            ? 'bg-[#108E7A] text-white shadow-none'
+            : 'text-foreground hover:bg-muted/50'
+        }`}
+      >
+        <Grid3x3 className="w-4 h-4" strokeWidth={2.25} />
+      </button>
+    </div>
+  );
+}

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

lib/blurhash.ts

@@ -0,0 +1,53 @@
+import { decode } from "blurhash";
+
+export const DEFAULT_FALLBACK_BLUR_HASH = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
+
+const cache = new Map<string, string>();
+
+/**
+ * Decodes a BlurHash string into a Base64 PNG Data URL using browser Canvas API.
+ * Uses local Map cache to avoid re-decoding identical hashes.
+ */
+export function blurHashToDataURL(
+  blurHash?: string | null,
+  width: number = 32,
+  height: number = 32
+): string {
+  const hash = blurHash && blurHash.trim().length > 5 ? blurHash : DEFAULT_FALLBACK_BLUR_HASH;
+  const cacheKey = `${hash}_${width}x${height}`;
+
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey)!;
+  }
+
+  if (typeof window === "undefined") {
+    // SSR static fallback SVG placeholder
+    return "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e5e7eb'/%3E%3C/svg%3E";
+  }
+
+  try {
+    const pixels = decode(hash, width, height);
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+
+    if (!ctx) {
+      return "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e5e7eb'/%3E%3C/svg%3E";
+    }
+
+    const imageData = ctx.createImageData(width, height);
+    imageData.data.set(pixels);
+    ctx.putImageData(imageData, 0, 0);
+
+    const dataUrl = canvas.toDataURL("image/png");
+    cache.set(cacheKey, dataUrl);
+    return dataUrl;
+  } catch (error) {
+    console.warn("Failed to decode BlurHash, using default fallback:", error);
+    if (hash !== DEFAULT_FALLBACK_BLUR_HASH) {
+      return blurHashToDataURL(DEFAULT_FALLBACK_BLUR_HASH, width, height);
+    }
+    return "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e5e7eb'/%3E%3C/svg%3E";
+  }
+}

lib/motion.ts

@@ -0,0 +1,4 @@
+import { motion as motionOriginal, AnimatePresence } from 'framer-motion';
+
+export const motion = motionOriginal as any;
+export { AnimatePresence };

lib/utils.ts

@@ -0,0 +1,14 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: 'INR',
+    minimumFractionDigits: 0,
+  }).format(amount);
+}

lib/validation.ts

@@ -0,0 +1,97 @@
+/**
+ * iFixKart India-specific field validators & input utilities
+ * Centralised validation rules for phone, email, pincode, and address fields.
+ */
+
+// ─── Regex Patterns ────────────────────────────────────────────────────────────
+/** Exactly 10 digits starting with 6-9 */
+export const PHONE_DIGITS_REGEX = /^[6-9]\d{9}$/;
+/** Accepts formats: 9876543210 | +919876543210 | 09876543210 */
+export const PHONE_FULL_REGEX = /^(?:\+91|0)?[6-9]\d{9}$/;
+/** Standard email address validation */
+export const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+/** Gmail specific validation */
+export const GMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@gmail\.com$/i;
+/** Indian 6-digit pincode starting with 1-9 */
+export const PINCODE_REGEX = /^[1-9]\d{5}$/;
+
+// ─── Validators (return error string or null) ──────────────────────────────────
+
+export function validatePhone(raw: string, required = false): string | null {
+  const stripped = raw.replace(/[\s\-()]/g, '');
+  if (!stripped) {
+    return required ? 'Phone number is required' : null;
+  }
+  
+  // Extract digits
+  let digits = stripped;
+  if (digits.startsWith('+91')) digits = digits.slice(3);
+  else if (digits.startsWith('91') && digits.length === 12) digits = digits.slice(2);
+  else if (digits.startsWith('0') && digits.length === 11) digits = digits.slice(1);
+
+  if (digits.length !== 10) {
+    return 'Phone number must be exactly 10 digits';
+  }
+  if (!/^[6-9]/.test(digits)) {
+    return 'Mobile number must start with 6, 7, 8, or 9';
+  }
+  if (!PHONE_DIGITS_REGEX.test(digits)) {
+    return 'Enter a valid 10-digit Indian mobile number';
+  }
+  return null;
+}
+
+export function validateEmail(raw: string, required = false, gmailOnly = false): string | null {
+  const stripped = raw.trim();
+  if (!stripped) {
+    return required ? 'Email address is required' : null;
+  }
+  if (gmailOnly && !GMAIL_REGEX.test(stripped)) {
+    return 'Please enter a valid Gmail address (e.g. user@gmail.com)';
+  }
+  if (!EMAIL_REGEX.test(stripped)) {
+    return 'Enter a valid email address (e.g. name@example.com)';
+  }
+  return null;
+}
+
+export function validatePincode(raw: string, required = false): string | null {
+  const stripped = raw.trim();
+  if (!stripped) {
+    return required ? 'PIN code is required' : null;
+  }
+  if (stripped.length !== 6) {
+    return 'PIN code must be exactly 6 digits';
+  }
+  if (!PINCODE_REGEX.test(stripped)) {
+    return 'Enter a valid 6-digit Indian PIN code (cannot start with 0)';
+  }
+  return null;
+}
+
+export function validateAddress(raw: string, required = false, minLength = 10): string | null {
+  const stripped = raw.trim();
+  if (!stripped) {
+    return required ? 'Address is required' : null;
+  }
+  if (stripped.length < minLength) {
+    return `Address must be at least ${minLength} characters long`;
+  }
+  return null;
+}
+
+// ─── Normalizers ──────────────────────────────────────────────────────────────
+
+export function normalizePhone(raw: string): string {
+  const stripped = raw.replace(/[\s\-().]/g, '');
+  if (stripped.startsWith('+91') && stripped.length === 13) return stripped.slice(3);
+  if (stripped.startsWith('91') && stripped.length === 12) return stripped.slice(2);
+  if (stripped.startsWith('0') && stripped.length === 11) return stripped.slice(1);
+  return stripped;
+}
+
+export function formatPhoneE164(raw: string): string {
+  const digits = normalizePhone(raw);
+  if (PHONE_DIGITS_REGEX.test(digits)) return `+91${digits}`;
+  return raw;
+}

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,54 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactCompiler: true,
+  experimental: {
+    proxyClientMaxBodySize: "200mb",
+    optimizePackageImports: ['lucide-react', 'framer-motion', 'date-fns', 'recharts'],
+  },
+  turbopack: {
+    root: process.cwd(),
+  },
+  async rewrites() {
+    const backendUrl = (process.env.NEXT_PUBLIC_API_URL || "https://ifixkartbe.trionixsolution.com")
+      .replace(/\/api\/v1\/?$/, '')
+      .replace(/\/+$/, '');
+
+    // Media files always served from production (files don't exist on local dev machine)
+    const mediaUrl = "https://ifixkartbe.trionixsolution.com";
+
+    return [
+      {
+        source: "/api/v1/:path*",
+        destination: `${backendUrl}/api/v1/:path*`,
+      },
+      {
+        source: "/uploads/:path*",
+        destination: `${mediaUrl}/uploads/:path*`,
+      },
+    ];
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'http',
+        hostname: 'localhost',
+        port: '8000',
+        pathname: '/uploads/**',
+      },
+      {
+        protocol: 'http',
+        hostname: '127.0.0.1',
+        port: '8000',
+        pathname: '/uploads/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'ifixkartbe.trionixsolution.com',
+        pathname: '/uploads/**',
+      },
+    ],
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "admin-ecommerce",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3022",
+    "build": "next build",
+    "start": "next start -p 3022",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.4.0",
+    "@radix-ui/react-context": "^1.2.0",
+    "@radix-ui/react-dialog": "^1.1.19",
+    "@radix-ui/react-dismissable-layer": "^1.1.15",
+    "@radix-ui/react-focus-guards": "^1.1.4",
+    "@radix-ui/react-focus-scope": "^1.1.12",
+    "@radix-ui/react-id": "^1.1.2",
+    "@radix-ui/react-portal": "^1.1.13",
+    "@radix-ui/react-presence": "^1.1.7",
+    "@radix-ui/react-primitive": "^2.1.7",
+    "@radix-ui/react-use-controllable-state": "^1.2.3",
+    "@tanstack/react-query": "^5.101.2",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.6",
+    "apexcharts": "^6.6.1",
+    "blurhash": "^2.0.5",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "framer-motion": "^12.42.2",
+    "lucide-react": "^1.24.0",
+    "next": "16.2.10",
+    "next-themes": "^0.4.6",
+    "react": "19.2.4",
+    "react-apexcharts": "^2.1.1",
+    "react-dom": "19.2.4",
+    "react-hook-form": "^7.81.0",
+    "recharts": "^3.9.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3",
+    "zustand": "^5.0.14"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.10",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+allowBuilds:
+  sharp: set this to true or false
+  unrs-resolver: set this to true or false
+ignoredBuiltDependencies:
+  - sharp
+  - unrs-resolver

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

providers/AppProviders.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ThemeProvider, useTheme } from 'next-themes';
+import { useState } from 'react';
+import { Toaster } from 'sonner';
+
+// Filter out the React 19 warning caused by next-themes
+if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+  const orig = console.error;
+  console.error = (...args: unknown[]) => {
+    if (typeof args[0] === 'string' && args[0].includes('Encountered a script tag')) {
+      return;
+    }
+    orig.apply(console, args);
+  };
+}
+
+function ThemedToaster() {
+  const { resolvedTheme } = useTheme();
+  return (
+    <Toaster
+      position="top-right"
+      closeButton
+      richColors
+      theme={resolvedTheme === 'dark' ? 'dark' : 'light'}
+    />
+  );
+}
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  // Create query client once in component state to maintain caching integrity across routing
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 30 * 1000,          // 30 seconds stale-while-revalidate threshold
+            gcTime: 5 * 60 * 1000,          // 5 minutes caching lifetime before garbage collection
+            refetchOnWindowFocus: false,   // Disable automatic refetching on click to avoid redundant API loads
+            retry: 1,                      // Restrict retry attempts to 1 for responsive offline detection
+          },
+        },
+      })
+  );
+
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <QueryClientProvider client={queryClient}>
+        {children}
+        <ThemedToaster />
+      </QueryClientProvider>
+    </ThemeProvider>
+  );
+}

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

scripts/fix_theme_contrast.py

@@ -0,0 +1,108 @@
+#!/usr/bin/env python3
+"""Rewrite hardcoded dark-only / light-only colors to semantic theme tokens."""
+from __future__ import annotations
+
+import re
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[1]
+TARGETS = [
+    ROOT / "app",
+    ROOT / "components" / "ui",
+]
+
+SKIP_NAMES = {"Sidebar.tsx"}
+
+TOKEN_MAP = {
+    "text-gray-300": "text-muted-foreground",
+    "text-gray-400": "text-muted-foreground",
+    "text-gray-500": "text-muted-foreground",
+    "text-gray-600": "text-muted-foreground",
+    "text-gray-700": "text-foreground",
+    "text-gray-800": "text-foreground",
+    "text-gray-900": "text-foreground",
+    "placeholder-gray-500": "placeholder:text-muted-foreground",
+    "placeholder:text-gray-400": "placeholder:text-muted-foreground",
+    "placeholder:text-gray-500": "placeholder:text-muted-foreground",
+    "bg-white/5": "bg-muted/50",
+    "bg-white/[0.02]": "bg-muted/30",
+    "bg-white/[0.01]": "bg-muted/20",
+    "hover:bg-white/5": "hover:bg-muted",
+    "hover:bg-white/10": "hover:bg-muted",
+    "border-white/10": "border-border",
+    "border-white/5": "border-border",
+    "border-white/20": "border-border",
+    "divide-white/5": "divide-border",
+    "divide-white/10": "divide-border",
+    "bg-zinc-900": "bg-card",
+    "bg-zinc-800": "bg-muted",
+    "border-white/30": "border-border",
+}
+
+COLORED_BG = re.compile(
+    r"bg-(red-|primary|green-|emerald-|blue-500|blue-600|blue-700|amber-500|navy|\[#|black)"
+)
+
+CLASS_ATTR = re.compile(
+    r"""(?:className|class)\s*=\s*(?:\{`([^`]*)`\}|"([^"]*)"|\{"([^"]*)"\})""",
+    re.MULTILINE,
+)
+
+
+def rewrite_class_string(raw: str) -> str:
+    tokens = raw.split()
+    has_colored = any(COLORED_BG.search(t) for t in tokens)
+    out = []
+    for token in tokens:
+        if token in TOKEN_MAP:
+            out.append(TOKEN_MAP[token])
+            continue
+        if token == "text-white" and not has_colored:
+            out.append("text-foreground")
+            continue
+        if token == "hover:text-white" and not has_colored:
+            out.append("hover:text-foreground")
+            continue
+        out.append(token)
+    return " ".join(out)
+
+
+def rewrite_file(path: Path) -> bool:
+    original = path.read_text(encoding="utf-8")
+    updated = original
+
+    def repl(match: re.Match) -> str:
+        full = match.group(0)
+        body = match.group(1) or match.group(2) or match.group(3) or ""
+        new_body = rewrite_class_string(body)
+        if new_body == body:
+            return full
+        return full.replace(body, new_body, 1)
+
+    updated = CLASS_ATTR.sub(repl, updated)
+
+    # Bare replacements outside className (template fragments)
+    for old, new in TOKEN_MAP.items():
+        updated = updated.replace(old, new)
+
+    if updated != original:
+        path.write_text(updated, encoding="utf-8")
+        return True
+    return False
+
+
+def main() -> None:
+    changed = []
+    for folder in TARGETS:
+        for path in folder.rglob("*.tsx"):
+            if path.name in SKIP_NAMES:
+                continue
+            if rewrite_file(path):
+                changed.append(str(path.relative_to(ROOT)))
+    print(f"updated {len(changed)} files")
+    for name in changed:
+        print(f"  {name}")
+
+
+if __name__ == "__main__":
+    main()

services/api/adminService.ts

@@ -0,0 +1,337 @@
+import { apiFetch } from './client';
+import { API_ENDPOINTS } from './config';
+
+export interface SessionInfo {
+  session_id: string;
+  user_id: string;
+  device_name: string;
+  device_type: string;
+  browser: string;
+  operating_system: string;
+  ip_address: string;
+  expires_at: string;
+  is_active: boolean;
+}
+
+export interface AuditLogEntry {
+  audit_id: string;
+  request_id: string;
+  user_id: string | null;
+  entity_type: string;
+  entity_id: string;
+  action: string;
+  old_value: Record<string, unknown> | null;
+  new_value: Record<string, unknown> | null;
+  ip_address: string;
+  user_agent: string | null;
+  created_at: string;
+  user?: {
+    name: string;
+    avatarInitials: string;
+  } | null;
+}
+
+export interface DashboardRevenuePoint {
+  date: string;
+  revenue: number;
+  orders: number;
+}
+
+export interface DashboardMonthlyPoint {
+  label: string;
+  revenue: number;
+  orders: number;
+}
+
+export interface DashboardTopProduct {
+  name: string;
+  total_sold: number;
+  total_revenue: number;
+}
+
+export interface DashboardRecentOrder {
+  order_no: string;
+  amount: number;
+  status: string;
+  payment_status: string;
+  created_at: string | null;
+  customer_name: string;
+  customer_email: string | null;
+}
+
+export interface DashboardStats {
+  total_users: number;
+  total_orders: number;
+  total_products: number;
+  total_brands: number;
+  total_device_models: number;
+  total_device_series: number;
+  total_categories: number;
+  revenue_all_time: number;
+  revenue_last_30_days: number;
+  revenue_last_7_days: number;
+  orders_by_status: Record<string, number>;
+  revenue_chart_daily: DashboardRevenuePoint[];
+  revenue_chart_monthly: DashboardMonthlyPoint[];
+  top_products: DashboardTopProduct[];
+  recent_orders: DashboardRecentOrder[];
+  low_stock_variants: number;
+  out_of_stock_variants: number;
+  total_stock_units: number;
+}
+
+export const adminService = {
+  async listSessions(skip = 0, limit = 100): Promise<{ sessions: SessionInfo[] }> {
+    return apiFetch<{ sessions: SessionInfo[] }>(
+      `${API_ENDPOINTS.ADMIN_LIST_SESSIONS}?skip=${skip}&limit=${limit}`
+    );
+  },
+
+  async revokeSession(sessionId: string): Promise<{ detail: string }> {
+    return apiFetch<{ detail: string }>(
+      `${API_ENDPOINTS.ADMIN_REVOKE_SESSION}?session_id=${sessionId}`,
+      { method: 'POST' }
+    );
+  },
+
+  async getFailedLogins(limit = 10): Promise<AuditLogEntry[]> {
+    return apiFetch<AuditLogEntry[]>(
+      `${API_ENDPOINTS.ADMIN_FAILED_LOGINS}?limit=${limit}`
+    );
+  },
+
+  async getAuditLogs(limit = 100): Promise<AuditLogEntry[]> {
+    return apiFetch<AuditLogEntry[]>(
+      `${API_ENDPOINTS.ADMIN_AUDIT_LOGS}?limit=${limit}`
+    );
+  },
+
+  async requestKillSwitch(approverId: string, mfaCode: string): Promise<{ detail: string }> {
+    return apiFetch<{ detail: string }>(
+      `${API_ENDPOINTS.ADMIN_KILL_SWITCH}?approver_id=${approverId}&mfa_code=${mfaCode}`,
+      { method: 'POST' }
+    );
+  },
+
+  async cancelKillSwitch(adminId: string): Promise<{ detail: string }> {
+    return apiFetch<{ detail: string }>(
+      `${API_ENDPOINTS.ADMIN_CANCEL_KILL_SWITCH}?admin_id=${adminId}`,
+      { method: 'POST' }
+    );
+  },
+
+  async selfDestruct(adminId: string, mfaCode: string): Promise<{ detail: string }> {
+    return apiFetch<{ detail: string }>(
+      `${API_ENDPOINTS.ADMIN_SELF_DESTRUCT}?admin_id=${adminId}&mfa_code=${mfaCode}`,
+      { method: 'POST' }
+    );
+  },
+
+  async getDashboardStats(): Promise<DashboardStats> {
+    return apiFetch<DashboardStats>(API_ENDPOINTS.DASHBOARD_STATS);
+  },
+
+  async listServiceJobs(): Promise<any[]> {
+    return apiFetch<any[]>('/api/v1/service/jobs');
+  },
+
+  async fetchServiceCatalog(): Promise<any[]> {
+    return apiFetch<any[]>('/api/v1/service/catalog');
+  },
+
+  async createServiceBooking(payload: any): Promise<any> {
+    return apiFetch<any>('/api/v1/service/booking/create', {
+      method: 'POST',
+      body: JSON.stringify(payload)
+    });
+  },
+
+  async getServiceJobDetailsAdmin(jobId: string): Promise<any> {
+    return apiFetch<any>(`/api/v1/service/jobs/${jobId}`);
+  },
+
+  async submitDeviceIntake(jobId: string, payload: any): Promise<any> {
+    return apiFetch<any>(`/api/v1/service/jobs/${jobId}/intake`, {
+      method: 'POST',
+      body: JSON.stringify(payload)
+    });
+  },
+
+  async submitDiagnosticInspection(jobId: string, payload: any): Promise<any> {
+    return apiFetch<any>(`/api/v1/service/jobs/${jobId}/inspect`, {
+      method: 'POST',
+      body: JSON.stringify(payload)
+    });
+  },
+
+  async createOrReviseQuote(jobId: string, payload: any): Promise<any> {
+    return apiFetch<any>(`/api/v1/service/jobs/${jobId}/quotes`, {
+      method: 'POST',
+      body: JSON.stringify(payload)
+    });
+  },
+
+  async rescheduleAppointmentAdmin(jobId: string, payload: any): Promise<any> {
+    return apiFetch<any>(`/api/v1/service/jobs/${jobId}/reschedule`, {
+      method: 'POST',
+      body: JSON.stringify(payload)
+    });
+  },
+
+  async fetchDeviceTypes(): Promise<any[]> {
+    return apiFetch<any[]>('/api/v1/catalog/device-types');
+  },
+
+  async fetchBrands(): Promise<any[]> {
+    return apiFetch<any[]>('/api/v1/catalog/brands/all');
+  },
+
+  async fetchDeviceSeries(): Promise<any[]> {
+    return apiFetch<any[]>('/api/v1/catalog/device-series/all');
+  },
+
+  async fetchDeviceModels(): Promise<any[]> {
+    return apiFetch<any[]>('/api/v1/catalog/device-models/all');
+  },
+
+  async updateServiceJobStatus(jobId: string, status: string): Promise<any> {
+    return apiFetch<any>(`/api/v1/service/jobs/${jobId}/status?status=${encodeURIComponent(status)}`, {
+      method: 'POST'
+    });
+  },
+
+  async updateServiceJobLogistics(jobId: string, payload: { courier_name?: string; awb_number?: string; pickup_status?: string }): Promise<any> {
+    return apiFetch<any>(`/api/v1/service/jobs/${jobId}/logistics`, {
+      method: 'POST',
+      body: JSON.stringify(payload)
+    });
+  },
+
+  async fetchServiceTypes(): Promise<any[]> {
+    return apiFetch<any[]>('/api/v1/catalog/service-types/all');
+  },
+
+  async createServiceType(payload: { name: string; description?: string; icon_url?: string }): Promise<any> {
+    return apiFetch<any>('/api/v1/catalog/service-types/create', {
+      method: 'POST',
+      body: JSON.stringify(payload)
+    });
+  },
+
+  async fetchRepairServices(): Promise<any[]> {
+    return apiFetch<any[]>('/api/v1/catalog/repair-services/all');
+  },
+
+  async createRepairService(payload: { model_id: string; service_type_id: string; description?: string }): Promise<any> {
+    return apiFetch<any>('/api/v1/catalog/repair-services/create', {
+      method: 'POST',
+      body: JSON.stringify(payload)
+    });
+  },
+
+  async fetchRepairVariants(): Promise<any[]> {
+    return apiFetch<any[]>('/api/v1/catalog/repair-variants/all');
+  },
+
+  async createRepairVariant(payload: {
+    repair_service_id: string;
+    name: string;
+    price: number;
+    cost?: number;
+    duration_minutes?: number;
+    warranty_days?: number;
+    parts?: { part_id: string; quantity: number }[];
+  }): Promise<any> {
+    return apiFetch<any>('/api/v1/catalog/repair-variants/create', {
+      method: 'POST',
+      body: JSON.stringify(payload)
+    });
+  },
+
+  async attachJobMedia(jobId: string, category: string, fileIds: string[]): Promise<any> {
+    return apiFetch<any>(`/api/v1/service/jobs/${jobId}/media`, {
+      method: 'POST',
+      body: JSON.stringify({ category, file_ids: fileIds })
+    });
+  },
+
+  async uploadMediaFile(file: File): Promise<{ file_id: string; webp_path?: string; raw_path?: string }> {
+    const formData = new FormData();
+    formData.append('file', file);
+    return apiFetch<{ file_id: string; webp_path?: string; raw_path?: string }>('/api/v1/files/upload', {
+      method: 'POST',
+      body: formData
+    });
+  },
+
+  async uploadStorefrontImage(file: File): Promise<{ image_url: string; thumbnail_url: string; medium_url: string; large_url: string }> {
+    const formData = new FormData();
+    formData.append('file', file);
+    return apiFetch<{ image_url: string; thumbnail_url: string; medium_url: string; large_url: string }>('/api/v1/admin/storefront/upload-image', {
+      method: 'POST',
+      body: formData,
+    });
+  },
+
+  // ─── Storefront CMS ────────────────────────────────────────────────────────
+  async getCmsFooterInfo(): Promise<any> {
+    return apiFetch<any>('/api/v1/admin/storefront/cms/footer-info');
+  },
+  async updateCmsFooterInfo(payload: Record<string, unknown>): Promise<any> {
+    return apiFetch<any>('/api/v1/admin/storefront/cms/footer-info', {
+      method: 'PUT', body: JSON.stringify(payload),
+    });
+  },
+
+  async getCmsSettings(): Promise<any> {
+    return apiFetch<any>('/api/v1/admin/storefront/cms/settings');
+  },
+  async updateCmsSettings(payload: Record<string, unknown>): Promise<any> {
+    return apiFetch<any>('/api/v1/admin/storefront/cms/settings', {
+      method: 'PUT', body: JSON.stringify(payload),
+    });
+  },
+
+  async getCmsMegaMenu(): Promise<any> {
+    return apiFetch<any>('/api/v1/admin/storefront/cms/mega-menu');
+  },
+  async updateCmsMegaMenu(payload: { nav_key: string; groups?: unknown[]; promo?: unknown; featured_category_ids?: string[] }): Promise<any> {
+    return apiFetch<any>('/api/v1/admin/storefront/cms/mega-menu', {
+      method: 'PUT', body: JSON.stringify(payload),
+    });
+  },
+
+  async getCmsCatalogFilters(): Promise<any> {
+    return apiFetch<any>('/api/v1/admin/storefront/cms/catalog-filters');
+  },
+  async updateCmsCatalogFilters(payload: { highlights?: unknown[]; price_ranges?: unknown[] }): Promise<any> {
+    return apiFetch<any>('/api/v1/admin/storefront/cms/catalog-filters', {
+      method: 'PUT', body: JSON.stringify(payload),
+    });
+  },
+
+  async updateCmsCategory(categoryId: string, payload: Record<string, unknown>): Promise<any> {
+    return apiFetch<any>(`/api/v1/admin/storefront/cms/categories/${categoryId}`, {
+      method: 'PUT', body: JSON.stringify(payload),
+    });
+  },
+
+  async getCmsReviews(approved?: boolean): Promise<any[]> {
+    const q = approved !== undefined ? `?approved=${approved}` : '';
+    return apiFetch<any[]>(`/api/v1/admin/storefront/cms/reviews${q}`);
+  },
+  async approveReview(reviewId: string, adminReply?: string): Promise<any> {
+    return apiFetch<any>(`/api/v1/admin/storefront/cms/reviews/${reviewId}/approve`, {
+      method: 'PUT', body: JSON.stringify({ admin_reply: adminReply ?? null }),
+    });
+  },
+  async rejectReview(reviewId: string): Promise<any> {
+    return apiFetch<any>(`/api/v1/admin/storefront/cms/reviews/${reviewId}/reject`, { method: 'PUT' });
+  },
+
+  async fetchCustomers(): Promise<any[]> {
+    return apiFetch<any[]>('/api/v1/admin/customers');
+  },
+};
+
+

services/api/authService.ts

@@ -0,0 +1,40 @@
+import { apiFetch, setAccessToken, clearTokens } from './client';
+import { API_ENDPOINTS } from './config';
+
+export interface LoginPayload {
+  email: string;
+  password: string;
+  device_fingerprint?: string;
+  latitude?: number;
+  longitude?: number;
+  location_name?: string;
+}
+
+export interface TokenResponse {
+  access_token: string;
+  refresh_token: string;
+  token_type: string;
+}
+
+export const authService = {
+  async login(payload: LoginPayload): Promise<TokenResponse> {
+    const data = await apiFetch<TokenResponse>(API_ENDPOINTS.AUTH_LOGIN, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      skipAuth: true,
+    });
+    setAccessToken(data.access_token);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('refresh_token', data.refresh_token);
+    }
+    return data;
+  },
+
+  async logout(): Promise<void> {
+    try {
+      await apiFetch(API_ENDPOINTS.AUTH_LOGOUT, { method: 'POST' });
+    } finally {
+      clearTokens();
+    }
+  },
+};

services/api/catalogService.ts

@@ -0,0 +1,566 @@
+import { apiFetch } from './client';
+import { API_ENDPOINTS } from './config';
+
+export interface BrandResponse {
+  brand_id: string;
+  name: string;
+  slug: string;
+  logo_url: string | null;
+  is_active: boolean;
+  device_types?: string[];
+  created_at: string;
+}
+
+export interface CategoryResponse {
+  category_id: string;
+  parent_category_id: string | null;
+  name: string;
+  slug: string;
+  description: string | null;
+  image_url: string | null;
+  sort_order: string;
+  is_parent_feature?: boolean;
+  is_active: boolean;
+  created_at: string;
+}
+
+export interface PartResponse {
+  part_id: string;
+  sku: string;
+  name: string;
+  cost_price: number;
+  low_stock_alert: number;
+  supplier: string | null;
+  barcode: string | null;
+  is_active: boolean;
+  stock: number;
+}
+
+export interface DeviceSeriesResponse {
+  series_id: string;
+  brand_id: string;
+  name: string;
+  slug: string;
+  device_type?: string | null;
+  sort_order: number;
+  is_active: boolean;
+}
+
+export interface DeviceModelResponse {
+  model_id: string;
+  series_id: string;
+  brand_id: string;
+  name: string;
+  slug: string;
+  device_type?: string | null;
+  full_path: string;
+  release_year: number | null;
+  image_url: string | null;
+  is_active: boolean;
+}
+
+export interface ServiceTypeResponse {
+  service_type_id: string;
+  name: string;
+  slug: string;
+  icon_url: string | null;
+  description: string | null;
+  is_active: boolean;
+}
+
+export interface RepairServiceResponse {
+  repair_service_id: string;
+  model_id: string;
+  service_type_id: string;
+  slug: string;
+  full_path: string;
+  description: string | null;
+}
+
+export interface RepairVariantPartResponse {
+  id: string;
+  variant_id: string;
+  part_id: string;
+  quantity: number;
+}
+
+export interface RepairVariantResponse {
+  variant_id: string;
+  repair_service_id: string;
+  name: string;
+  price: number;
+  cost: number;
+  duration_minutes: number;
+  warranty_days: number;
+  status: string;
+  created_at: string;
+  bom_parts?: RepairVariantPartResponse[];
+}
+
+export interface StockMovementResponse {
+  movement_id: string;
+  entity_type: string;
+  entity_id: string;
+  movement_type: string;
+  quantity: number;
+  reference_type: string;
+  reference_id: string;
+  created_at: string;
+}
+
+export interface PurchaseOrderItemResponse {
+  id: string;
+  part_id: string;
+  quantity_ordered: number;
+  quantity_received: number;
+  unit_price: number;
+}
+
+export interface PurchaseOrderResponse {
+  purchase_order_id: string;
+  po_number: string;
+  supplier_name: string;
+  status: string;
+  total_amount: number;
+  created_at: string;
+  items: PurchaseOrderItemResponse[];
+}
+
+export interface AttributeTypeResponse {
+  attribute_id: string;
+  name: string;
+  code: string;
+  status: string;
+  preset_values?: string[];
+  created_at?: string;
+}
+
+export const catalogService = {
+  // Brands
+  async getBrands(): Promise<BrandResponse[]> {
+    return apiFetch<BrandResponse[]>(API_ENDPOINTS.CATALOG_BRANDS_ALL, { skipAuth: true });
+  },
+  async createBrand(data: { name: string; logo_url?: string; device_types?: string[] }): Promise<BrandResponse> {
+    return apiFetch<BrandResponse>(API_ENDPOINTS.CATALOG_BRANDS_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  // Categories
+  async getCategories(): Promise<CategoryResponse[]> {
+    return apiFetch<CategoryResponse[]>(API_ENDPOINTS.CATALOG_CATEGORIES_ALL, { skipAuth: true });
+  },
+  async createCategory(data: {
+    name: string;
+    parent_category_id?: string | null;
+    description?: string;
+    image_url?: string;
+    sort_order?: string;
+    is_parent_feature?: boolean;
+  }): Promise<CategoryResponse> {
+    return apiFetch<CategoryResponse>(API_ENDPOINTS.CATALOG_CATEGORIES_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  // Parts (Inventory Items)
+  async getParts(): Promise<PartResponse[]> {
+    return apiFetch<PartResponse[]>(API_ENDPOINTS.CATALOG_PARTS_ALL, { skipAuth: true });
+  },
+  async createPart(data: {
+    sku: string;
+    name: string;
+    cost_price: number;
+    low_stock_alert?: number;
+    supplier?: string;
+    barcode?: string;
+  }): Promise<PartResponse> {
+    return apiFetch<PartResponse>(API_ENDPOINTS.CATALOG_PARTS_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  // Device Series
+  async getDeviceSeries(): Promise<DeviceSeriesResponse[]> {
+    return apiFetch<DeviceSeriesResponse[]>(API_ENDPOINTS.CATALOG_DEVICE_SERIES_ALL, { skipAuth: true });
+  },
+  async createDeviceSeries(data: { brand_id: string; name: string; device_type?: string | null; sort_order?: number }): Promise<DeviceSeriesResponse> {
+    return apiFetch<DeviceSeriesResponse>(API_ENDPOINTS.CATALOG_DEVICE_SERIES_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  // Device Models
+  async getDeviceModels(): Promise<DeviceModelResponse[]> {
+    return apiFetch<DeviceModelResponse[]>(API_ENDPOINTS.CATALOG_DEVICE_MODELS_ALL, { skipAuth: true });
+  },
+  async createDeviceModel(data: {
+    series_id?: string;
+    brand_id: string;
+    name: string;
+    device_type?: string | null;
+    release_year?: number;
+    image_url?: string;
+  }): Promise<DeviceModelResponse> {
+    return apiFetch<DeviceModelResponse>(API_ENDPOINTS.CATALOG_DEVICE_MODELS_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  // Service Types
+  async getServiceTypes(): Promise<ServiceTypeResponse[]> {
+    return apiFetch<ServiceTypeResponse[]>(API_ENDPOINTS.CATALOG_SERVICE_TYPES_ALL, { skipAuth: true });
+  },
+  async createServiceType(data: { name: string; icon_url?: string; description?: string }): Promise<ServiceTypeResponse> {
+    return apiFetch<ServiceTypeResponse>(API_ENDPOINTS.CATALOG_SERVICE_TYPES_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  // Repair Services
+  async getRepairServices(): Promise<RepairServiceResponse[]> {
+    return apiFetch<RepairServiceResponse[]>(API_ENDPOINTS.CATALOG_REPAIR_SERVICES_ALL, { skipAuth: true });
+  },
+  async createRepairService(data: { model_id: string; service_type_id: string; description?: string }): Promise<RepairServiceResponse> {
+    return apiFetch<RepairServiceResponse>(API_ENDPOINTS.CATALOG_REPAIR_SERVICES_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  // Repair Variants
+  async getRepairVariants(): Promise<RepairVariantResponse[]> {
+    return apiFetch<RepairVariantResponse[]>(API_ENDPOINTS.CATALOG_REPAIR_VARIANTS_ALL, { skipAuth: true });
+  },
+  async createRepairVariant(data: {
+    repair_service_id: string;
+    name: string;
+    price: number;
+    cost: number;
+    duration_minutes?: number;
+    warranty_days?: number;
+    parts: Array<{ part_id: string; quantity?: number }>;
+  }): Promise<RepairVariantResponse> {
+    return apiFetch<RepairVariantResponse>(API_ENDPOINTS.CATALOG_REPAIR_VARIANTS_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  // Stock Ledger
+  async getStockHistory(): Promise<StockMovementResponse[]> {
+    return apiFetch<StockMovementResponse[]>(API_ENDPOINTS.CATALOG_STOCK_HISTORY, { skipAuth: true });
+  },
+  async adjustStock(data: {
+    entity_type: 'variant' | 'part';
+    entity_id: string;
+    movement_type: 'Adjustment' | 'Damage';
+    quantity: number;
+    reference_type: 'ManualAdjustment';
+    reference_id: string;
+  }): Promise<StockMovementResponse> {
+    return apiFetch<StockMovementResponse>(API_ENDPOINTS.CATALOG_STOCK_ADJUST, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  // Purchase Orders
+  async getPurchaseOrders(): Promise<PurchaseOrderResponse[]> {
+    return apiFetch<PurchaseOrderResponse[]>(API_ENDPOINTS.CATALOG_PO_ALL, { skipAuth: true });
+  },
+  async createPurchaseOrder(data: {
+    supplier_name: string;
+    items: Array<{ part_id: string; quantity_ordered: number; unit_price: number }>;
+  }): Promise<PurchaseOrderResponse> {
+    return apiFetch<PurchaseOrderResponse>(API_ENDPOINTS.CATALOG_PO_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+  async receivePurchaseOrder(
+    poId: string,
+    itemsReceived: Array<{ id: string; quantity_received: number }>
+  ): Promise<PurchaseOrderResponse> {
+    return apiFetch<PurchaseOrderResponse>(API_ENDPOINTS.CATALOG_PO_RECEIVE(poId), {
+      method: 'POST',
+      body: JSON.stringify({ items_received: itemsReceived }),
+    });
+  },
+
+  // Attributes
+  async getAttributes(): Promise<AttributeTypeResponse[]> {
+    return apiFetch<AttributeTypeResponse[]>(API_ENDPOINTS.CATALOG_ATTRIBUTES_ALL, { skipAuth: true });
+  },
+  async createAttribute(data: { name: string; code: string; preset_values?: string[] }): Promise<AttributeTypeResponse> {
+    return apiFetch<AttributeTypeResponse>(API_ENDPOINTS.CATALOG_ATTRIBUTES_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+  async updateAttribute(attributeId: string, data: { name?: string; code?: string; preset_values?: string[] }): Promise<AttributeTypeResponse> {
+    return apiFetch<AttributeTypeResponse>(API_ENDPOINTS.CATALOG_ATTRIBUTES_UPDATE(attributeId), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+
+  // Products
+  async getProducts(params: { page?: number; limit?: number; search?: string } = {}): Promise<{
+    total: number;
+    page: number;
+    limit: number;
+    products: ProductResponse[];
+  }> {
+    const query = new URLSearchParams();
+    query.set('page', String(params.page || 1));
+    query.set('limit', String(params.limit || 50));
+    if (params.search) query.set('search', params.search);
+    return apiFetch(`${API_ENDPOINTS.CATALOG_PRODUCTS_ALL}?${query.toString()}`, { skipAuth: true });
+  },
+  async getSellableSkus(params: { page?: number; limit?: number; q?: string } = {}): Promise<{
+    total: number;
+    page: number;
+    limit: number;
+    items: SellableSkuRow[];
+  }> {
+    const query = new URLSearchParams();
+    query.set('page', String(params.page || 1));
+    query.set('limit', String(params.limit || 50));
+    if (params.q) query.set('q', params.q);
+    return apiFetch(`${API_ENDPOINTS.INVENTORY_SKUS}?${query.toString()}`);
+  },
+  async adjustSellableStock(data: {
+    variant_id: string;
+    event_type: string;
+    qty: number;
+    notes?: string;
+  }): Promise<{ message: string; ledger_id: string }> {
+    return apiFetch(API_ENDPOINTS.INVENTORY_ADJUST, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+  async createProduct(data: {
+    category_id: string;
+    brand_id?: string | null;
+    device_series_id?: string | null;
+    device_model_id?: string | null;
+    name: string;
+    description?: string;
+    warranty_type?: string;
+    warranty_summary?: string;
+    seo_title?: string;
+    seo_description?: string;
+    meta_keywords?: string;
+    images?: Array<{ image_url: string; alt_text?: string; sort_order?: number; is_banner?: boolean }>;
+    variants: Array<{
+      sku: string;
+      barcode?: string;
+      price: number;
+      compare_price?: number;
+      cost_price: number;
+      low_stock_threshold?: number;
+      initial_stock?: number;
+      attributes: Array<{ attribute_id: string; attribute_value: string }>;
+      images?: Array<{ image_url: string; sort_order?: number; is_primary?: boolean }>;
+    }>;
+  }): Promise<ProductResponse> {
+    return apiFetch<ProductResponse>(API_ENDPOINTS.CATALOG_PRODUCTS_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  async bulkDeleteProducts(productIds: string[]): Promise<{ status: string; deleted_products_count: number; deleted_images_count: number; message: string }> {
+    return apiFetch('/api/v1/catalog/products/bulk-delete', {
+      method: 'POST',
+      body: JSON.stringify({ product_ids: productIds }),
+    });
+  },
+
+  async updateBrand(brandId: string, data: { name: string; logo_url?: string; is_active?: boolean; device_types?: string[] }): Promise<BrandResponse> {
+    return apiFetch<BrandResponse>(API_ENDPOINTS.CATALOG_BRANDS_UPDATE(brandId), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+  async updateCategory(categoryId: string, data: {
+    name?: string;
+    parent_category_id?: string | null;
+    description?: string;
+    image_url?: string;
+    sort_order?: string;
+    is_active?: boolean;
+    is_parent_feature?: boolean;
+  }): Promise<CategoryResponse> {
+    return apiFetch<CategoryResponse>(API_ENDPOINTS.CATALOG_CATEGORIES_UPDATE(categoryId), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+  async updateDeviceSeries(seriesId: string, data: { brand_id?: string; name?: string; device_type?: string | null; sort_order?: number; is_active?: boolean }): Promise<DeviceSeriesResponse> {
+    return apiFetch<DeviceSeriesResponse>(API_ENDPOINTS.CATALOG_DEVICE_SERIES_UPDATE(seriesId), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+  async updateDeviceModel(modelId: string, data: {
+    series_id?: string;
+    brand_id?: string;
+    name?: string;
+    device_type?: string | null;
+    release_year?: number;
+    image_url?: string;
+    is_active?: boolean;
+  }): Promise<DeviceModelResponse> {
+    return apiFetch<DeviceModelResponse>(API_ENDPOINTS.CATALOG_DEVICE_MODELS_UPDATE(modelId), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+  async updateServiceType(serviceTypeId: string, data: { name?: string; icon_url?: string; description?: string; is_active?: boolean }): Promise<ServiceTypeResponse> {
+    return apiFetch<ServiceTypeResponse>(API_ENDPOINTS.CATALOG_SERVICE_TYPES_UPDATE(serviceTypeId), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+  async updateRepairService(repairServiceId: string, data: { model_id?: string; service_type_id?: string; description?: string }): Promise<RepairServiceResponse> {
+    return apiFetch<RepairServiceResponse>(API_ENDPOINTS.CATALOG_REPAIR_SERVICES_UPDATE(repairServiceId), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+  async updateRepairVariant(variantId: string, data: {
+    repair_service_id?: string;
+    name?: string;
+    price?: number;
+    cost?: number;
+    duration_minutes?: number;
+    warranty_days?: number;
+    parts?: Array<{ part_id: string; quantity?: number }>;
+    status?: string;
+  }): Promise<RepairVariantResponse> {
+    return apiFetch<RepairVariantResponse>(API_ENDPOINTS.CATALOG_REPAIR_VARIANTS_UPDATE(variantId), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+  async updateProduct(productId: string, data: any): Promise<ProductResponse> {
+    return apiFetch<ProductResponse>(API_ENDPOINTS.CATALOG_PRODUCTS_UPDATE(productId), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+  async deleteProduct(id: string): Promise<any> {
+    return apiFetch<any>(API_ENDPOINTS.CATALOG_PRODUCTS_DELETE(id), { method: 'DELETE' });
+  },
+  async deleteCategory(id: string): Promise<any> {
+    return apiFetch<any>(API_ENDPOINTS.CATALOG_CATEGORIES_DELETE(id), { method: 'DELETE' });
+  },
+  async deleteBrand(id: string): Promise<any> {
+    return apiFetch<any>(API_ENDPOINTS.CATALOG_BRANDS_DELETE(id), { method: 'DELETE' });
+  },
+  async deleteDeviceSeries(id: string): Promise<any> {
+    return apiFetch<any>(API_ENDPOINTS.CATALOG_DEVICE_SERIES_DELETE(id), { method: 'DELETE' });
+  },
+  async deleteDeviceModel(id: string): Promise<any> {
+    return apiFetch<any>(API_ENDPOINTS.CATALOG_DEVICE_MODELS_DELETE(id), { method: 'DELETE' });
+  },
+  async deleteAttribute(id: string): Promise<any> {
+    return apiFetch<any>(API_ENDPOINTS.CATALOG_ATTRIBUTES_DELETE(id), { method: 'DELETE' });
+  },
+};
+
+export interface AttributeTypeResponse {
+  attribute_id: string;
+  name: string;
+  code: string;
+  status: string;
+  preset_values?: string[];
+  created_at?: string;
+}
+
+export interface VariantAttributeResponse {
+  id: string;
+  variant_id: string;
+  attribute_id: string;
+  attribute_value: string;
+}
+
+export interface ProductImageResponse {
+  image_id: string;
+  product_id: string;
+  image_url: string;
+  alt_text: string | null;
+  sort_order: number;
+  is_banner: boolean;
+}
+
+export interface VariantImageResponse {
+  image_id: string;
+  variant_id: string;
+  image_url: string;
+  sort_order: number;
+  is_primary: boolean;
+}
+
+export interface ProductVariantResponse {
+  variant_id: string;
+  product_id: string;
+  sku: string;
+  barcode: string | null;
+  price: number;
+  compare_price: number | null;
+  cost_price: number;
+  low_stock_threshold: number;
+  status: string;
+  available_stock?: number;
+  attributes?: VariantAttributeResponse[];
+  images?: VariantImageResponse[];
+}
+
+export interface SellableSkuRow {
+  variant_id: string;
+  product_id: string;
+  product_name: string;
+  sku: string;
+  barcode: string | null;
+  price: number;
+  cost_price: number;
+  available_stock: number;
+  pending_confirmation_units?: number;
+  confirmed_units?: number;
+  low_stock_threshold: number;
+  status: string;
+  is_low: boolean;
+}
+
+export interface ProductResponse {
+  product_id: string;
+  category_id: string;
+  brand_id: string | null;
+  device_series_id: string | null;
+  device_model_id: string | null;
+  device_type?: string | null;
+  name: string;
+  slug: string;
+  full_path: string;
+  description: string | null;
+  warranty_type?: string | null;
+  warranty_summary?: string | null;
+  seo_title?: string | null;
+  seo_description?: string | null;
+  meta_keywords?: string | null;
+  show_specifications?: boolean;
+  status: string;
+  created_at: string;
+  images: ProductImageResponse[];
+  variants: ProductVariantResponse[];
+}

services/api/client.ts

@@ -0,0 +1,202 @@
+import { API_BASE_URL } from './config';
+
+// Token management
+let accessToken: string | null = null;
+
+export function setAccessToken(token: string | null): void {
+  accessToken = token;
+  if (token) {
+    localStorage.setItem('access_token', token);
+  } else {
+    localStorage.removeItem('access_token');
+  }
+}
+
+export function getAccessToken(): string | null {
+  if (accessToken) return accessToken;
+  if (typeof window !== 'undefined') {
+    accessToken = localStorage.getItem('access_token');
+  }
+  return accessToken;
+}
+
+export function clearTokens(): void {
+  accessToken = null;
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('refresh_token');
+  }
+}
+
+// Parse JWT payload without library dependency
+export function parseJwt(token: string): Record<string, unknown> | null {
+  try {
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join('')
+    );
+    return JSON.parse(jsonPayload);
+  } catch {
+    return null;
+  }
+}
+
+interface FetchOptions extends RequestInit {
+  skipAuth?: boolean;
+}
+
+export function invalidateApiCache() {
+  // No-op: Caching disabled for real-time admin management
+}
+
+// Core API fetch wrapper with auth header injection
+export async function apiFetch<T>(
+  endpoint: string,
+  options: FetchOptions = {}
+): Promise<T> {
+  const { skipAuth = false, headers: customHeaders, ...rest } = options;
+  const method = (rest.method || 'GET').toUpperCase();
+  return runApiFetch<T>(endpoint, { skipAuth, headers: customHeaders, ...rest }, method);
+}
+
+async function runApiFetch<T>(
+  endpoint: string,
+  options: FetchOptions,
+  method: string
+): Promise<T> {
+  const { skipAuth = false, headers: customHeaders, ...rest } = options;
+
+  const headers: Record<string, string> = {
+    'Cache-Control': 'no-cache, no-store, must-revalidate',
+    'Pragma': 'no-cache',
+    ...(customHeaders as Record<string, string>),
+  };
+
+  if (method !== 'GET' && method !== 'HEAD' && !headers['Content-Type']) {
+    if (!(rest.body instanceof FormData)) {
+      headers['Content-Type'] = 'application/json';
+    }
+  }
+
+  if (!skipAuth) {
+    const token = getAccessToken();
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+  } else {
+    delete headers['Authorization'];
+  }
+
+  try {
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+      cache: 'no-store',
+      ...rest,
+      headers,
+      credentials: 'include',
+    });
+
+    if (response.status === 401 && !skipAuth) {
+      // Try token refresh
+      const refreshed = await refreshAccessToken();
+      if (refreshed) {
+        headers['Authorization'] = `Bearer ${getAccessToken()}`;
+        const retryResponse = await fetch(`${API_BASE_URL}${endpoint}`, {
+          ...rest,
+          headers,
+          credentials: 'include',
+        });
+        if (!retryResponse.ok) {
+          const err = await retryResponse.json().catch(() => ({ detail: 'Request failed' }));
+          throw new ApiError(retryResponse.status, formatErrorMessage(err.detail));
+        }
+        return retryResponse.json();
+      }
+      // Refresh failed — redirect to login
+      clearTokens();
+      if (typeof window !== 'undefined') {
+        window.location.href = '/login';
+      }
+      throw new ApiError(401, 'Session expired');
+    }
+
+    if (!response.ok) {
+      const err = await response.json().catch(() => ({ detail: 'Request failed' }));
+      throw new ApiError(response.status, formatErrorMessage(err.detail));
+    }
+
+    return response.json();
+  } catch (error: any) {
+    if (error instanceof ApiError) {
+      throw error;
+    }
+    console.error('apiFetch network/CORS error:', error);
+    throw new ApiError(
+      503,
+      'Network issue — please refresh page or check connection'
+    );
+  }
+}
+
+async function refreshAccessToken(): Promise<boolean> {
+  try {
+    const refreshToken = typeof window !== 'undefined' ? localStorage.getItem('refresh_token') : null;
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json'
+    };
+    if (refreshToken) {
+      headers['Authorization'] = `Bearer ${refreshToken}`;
+      headers['X-Refresh-Token'] = refreshToken;
+    }
+    const response = await fetch(`${API_BASE_URL}/api/v1/auth/refresh`, {
+      method: 'POST',
+      headers,
+      credentials: 'include',
+    });
+    if (!response.ok) return false;
+    const data = await response.json();
+    if (data.access_token) {
+      setAccessToken(data.access_token);
+    }
+    if (data.refresh_token) {
+      localStorage.setItem('refresh_token', data.refresh_token);
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function formatErrorMessage(detail: any): string {
+  if (!detail) return 'Request failed';
+  if (typeof detail === 'string') return detail;
+  if (Array.isArray(detail)) {
+    return detail
+      .map((item: any) => {
+        if (typeof item === 'string') return item;
+        if (item && typeof item === 'object') {
+          const loc = Array.isArray(item.loc) ? item.loc.slice(1).join('.') : '';
+          const msg = item.msg || item.message || JSON.stringify(item);
+          return loc ? `${loc}: ${msg}` : msg;
+        }
+        return String(item);
+      })
+      .join(' | ');
+  }
+  if (typeof detail === 'object') {
+    return detail.message || detail.msg || JSON.stringify(detail);
+  }
+  return String(detail);
+}
+
+export class ApiError extends Error {
+  status: number;
+  constructor(status: number, message: string) {
+    super(message);
+    this.status = status;
+    this.name = 'ApiError';
+  }
+}

services/api/config.ts

@@ -0,0 +1,131 @@
+const getBaseUrl = (): string => {
+  if (typeof window !== 'undefined') {
+    const host = window.location.hostname;
+    if (host !== 'localhost' && host !== '127.0.0.1') {
+      return '';
+    }
+  }
+  if (process.env.NODE_ENV === 'production') {
+    return '';
+  }
+  return process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+};
+
+const rawBaseUrl = getBaseUrl();
+const API_BASE_URL = rawBaseUrl.replace(/\/api\/v1\/?$/, '').replace(/\/+$/, '');
+
+export const API_ENDPOINTS = {
+  // Auth
+  AUTH_LOGIN: '/api/v1/auth/login',
+  AUTH_REFRESH: '/api/v1/auth/refresh',
+  AUTH_LOGOUT: '/api/v1/auth/logout',
+
+  // Users
+  USERS_CREATE: '/api/v1/users/create',
+  USERS_ALL: '/api/v1/users/all',
+  USERS_PROFILE: (id: string) => `/api/v1/users/profile/${id}`,
+  USERS_UPDATE: (id: string) => `/api/v1/users/update/${id}`,
+  USERS_DELETE: (id: string) => `/api/v1/users/delete/${id}`,
+
+  // Admin Security
+  ADMIN_LIST_SESSIONS: '/api/v1/admin/list_sessions',
+  ADMIN_REVOKE_SESSION: '/api/v1/admin/revoke_session',
+  ADMIN_KILL_SWITCH: '/api/v1/admin/request_kill_switch',
+  ADMIN_CANCEL_KILL_SWITCH: '/api/v1/admin/cancel_kill_switch',
+  ADMIN_SELF_DESTRUCT: '/api/v1/admin/self_destruct',
+  ADMIN_FAILED_LOGINS: '/api/v1/admin/failed-logins',
+  ADMIN_AUDIT_LOGS: '/api/v1/admin/audit-logs',
+  DASHBOARD_STATS: '/api/v1/dashboard/stats',
+
+  // Settings
+  SETTINGS_CREATE: '/api/v1/settings/create',
+  SETTINGS_PUBLIC: '/api/v1/settings/public',
+  SETTINGS_BY_KEY: (key: string) => `/api/v1/settings/key/${key}`,
+  SETTINGS_UPDATE: (key: string) => `/api/v1/settings/update/${key}`,
+
+  // MFA
+  MFA_SETUP: '/api/v1/mfa/setup',
+  MFA_VERIFY: '/api/v1/mfa/verify',
+
+  // Files
+  FILES_UPLOAD: '/api/v1/files/upload',
+  FILES_BY_ENTITY: (type: string, id: string) => `/api/v1/files/entity/${type}/${id}`,
+  FILES_DELETE: (id: string) => `/api/v1/files/delete/${id}`,
+
+  // Geo
+  GEO_COUNTRIES: '/api/v1/geo/countries',
+  GEO_STATES: (countryId: number) => `/api/v1/geo/countries/${countryId}/states`,
+  GEO_CITIES: (stateId: number) => `/api/v1/geo/states/${stateId}/cities`,
+
+  // Role & Permissions Control
+  ROLE_PERM_ROLES_ALL: '/api/v1/role-permissions/roles/all',
+  ROLE_PERM_ROLES_CREATE: '/api/v1/role-permissions/roles/create',
+  ROLE_PERM_ROLES_DELETE: (id: string) => `/api/v1/role-permissions/roles/delete/${id}`,
+  ROLE_PERM_PERMISSIONS_ALL: '/api/v1/role-permissions/permissions/all',
+  ROLE_PERM_ROLE_GET_PERMISSIONS: (id: string) => `/api/v1/role-permissions/roles/${id}/permissions`,
+  ROLE_PERM_ROLE_SET_PERMISSIONS: (id: string) => `/api/v1/role-permissions/roles/${id}/permissions`,
+
+  // Catalog, Devices, and Inventory Control
+  CATALOG_BRANDS_ALL: '/api/v1/catalog/brands/all',
+  CATALOG_BRANDS_CREATE: '/api/v1/catalog/brands/create',
+  CATALOG_CATEGORIES_ALL: '/api/v1/catalog/categories/all',
+  CATALOG_CATEGORIES_CREATE: '/api/v1/catalog/categories/create',
+  CATALOG_PARTS_ALL: '/api/v1/catalog/parts/all',
+  CATALOG_PARTS_CREATE: '/api/v1/catalog/parts/create',
+  CATALOG_DEVICE_SERIES_ALL: '/api/v1/catalog/device-series/all',
+  CATALOG_DEVICE_SERIES_CREATE: '/api/v1/catalog/device-series/create',
+  CATALOG_DEVICE_MODELS_ALL: '/api/v1/catalog/device-models/all',
+  CATALOG_DEVICE_MODELS_CREATE: '/api/v1/catalog/device-models/create',
+  CATALOG_SERVICE_TYPES_ALL: '/api/v1/catalog/service-types/all',
+  CATALOG_SERVICE_TYPES_CREATE: '/api/v1/catalog/service-types/create',
+  CATALOG_REPAIR_SERVICES_ALL: '/api/v1/catalog/repair-services/all',
+  CATALOG_REPAIR_SERVICES_CREATE: '/api/v1/catalog/repair-services/create',
+  CATALOG_REPAIR_VARIANTS_ALL: '/api/v1/catalog/repair-variants/all',
+  CATALOG_REPAIR_VARIANTS_CREATE: '/api/v1/catalog/repair-variants/create',
+  CATALOG_STOCK_HISTORY: '/api/v1/catalog/stock-movements/history',
+  CATALOG_STOCK_ADJUST: '/api/v1/catalog/stock-movements/adjust',
+  CATALOG_PO_ALL: '/api/v1/catalog/purchase-orders/all',
+  CATALOG_PO_CREATE: '/api/v1/catalog/purchase-orders/create',
+  CATALOG_PO_RECEIVE: (id: string) => `/api/v1/catalog/purchase-orders/${id}/receive`,
+  CATALOG_ATTRIBUTES_ALL: '/api/v1/catalog/attributes/all',
+  CATALOG_ATTRIBUTES_CREATE: '/api/v1/catalog/attributes/create',
+  CATALOG_PRODUCTS_ALL: '/api/v1/catalog/products/all',
+  CATALOG_PRODUCTS_CREATE: '/api/v1/catalog/products/create',
+  CATALOG_BRANDS_UPDATE: (id: string) => `/api/v1/catalog/brands/update/${id}`,
+  CATALOG_CATEGORIES_UPDATE: (id: string) => `/api/v1/catalog/categories/update/${id}`,
+  CATALOG_DEVICE_SERIES_UPDATE: (id: string) => `/api/v1/catalog/device-series/update/${id}`,
+  CATALOG_DEVICE_MODELS_UPDATE: (id: string) => `/api/v1/catalog/device-models/update/${id}`,
+  CATALOG_SERVICE_TYPES_UPDATE: (id: string) => `/api/v1/catalog/service-types/update/${id}`,
+  CATALOG_REPAIR_SERVICES_UPDATE: (id: string) => `/api/v1/catalog/repair-services/update/${id}`,
+  CATALOG_REPAIR_VARIANTS_UPDATE: (id: string) => `/api/v1/catalog/repair-variants/update/${id}`,
+  CATALOG_ATTRIBUTES_UPDATE: (id: string) => `/api/v1/catalog/attributes/update/${id}`,
+  CATALOG_PRODUCTS_UPDATE: (id: string) => `/api/v1/catalog/products/update/${id}`,
+  CATALOG_PRODUCTS_DELETE: (id: string) => `/api/v1/catalog/products/${id}`,
+  CATALOG_CATEGORIES_DELETE: (id: string) => `/api/v1/catalog/categories/${id}`,
+  CATALOG_BRANDS_DELETE: (id: string) => `/api/v1/catalog/brands/${id}`,
+  CATALOG_DEVICE_SERIES_DELETE: (id: string) => `/api/v1/catalog/device-series/${id}`,
+  CATALOG_DEVICE_MODELS_DELETE: (id: string) => `/api/v1/catalog/device-models/${id}`,
+  CATALOG_ATTRIBUTES_DELETE: (id: string) => `/api/v1/catalog/attributes/${id}`,
+  INVENTORY_SKUS: '/api/v1/inventory/skus',
+  INVENTORY_ADJUST: '/api/v1/inventory/adjust',
+} as const;
+
+export { API_BASE_URL };
+
+/**
+ * Resolves a media URL returned by the backend.
+ * If already absolute (http/https), returned as-is.
+ * If relative (e.g. /uploads/...), returned as-is so Next.js rewrites
+ * can proxy it transparently to the production media server.
+ */
+export function getMediaUrl(url: string | null | undefined): string {
+  if (!url) return '';
+  const cleanUrl = url.trim();
+  if (!cleanUrl) return '';
+  if (cleanUrl.startsWith('http://') || cleanUrl.startsWith('https://') || cleanUrl.startsWith('//')) return cleanUrl;
+  if (cleanUrl.startsWith('/uploads/')) return cleanUrl;
+  if (cleanUrl.startsWith('uploads/')) return `/${cleanUrl}`;
+  const path = cleanUrl.startsWith('/') ? cleanUrl.slice(1) : cleanUrl;
+  return `/uploads/${path}`;
+}
+

services/api/rolePermissionService.ts

@@ -0,0 +1,56 @@
+import { apiFetch } from './client';
+import { API_ENDPOINTS } from './config';
+
+export interface RoleResponse {
+  role_id: string;
+  role_name: string;
+  role_prefix: string;
+  description: string | null;
+  is_system: boolean;
+  is_active: boolean;
+  created_at: string;
+}
+
+export interface PermissionResponse {
+  permission_id: string;
+  permission_code: string;
+  module: string;
+  resource: string;
+  action: string;
+  description: string | null;
+  is_active: boolean;
+}
+
+export const rolePermissionService = {
+  async getRoles(): Promise<RoleResponse[]> {
+    return apiFetch<RoleResponse[]>(API_ENDPOINTS.ROLE_PERM_ROLES_ALL);
+  },
+
+  async createRole(data: { role_name: string; role_prefix: string; description?: string }): Promise<RoleResponse> {
+    return apiFetch<RoleResponse>(API_ENDPOINTS.ROLE_PERM_ROLES_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  async deleteRole(roleId: string): Promise<{ detail: string }> {
+    return apiFetch<{ detail: string }>(API_ENDPOINTS.ROLE_PERM_ROLES_DELETE(roleId), {
+      method: 'DELETE',
+    });
+  },
+
+  async getPermissions(): Promise<PermissionResponse[]> {
+    return apiFetch<PermissionResponse[]>(API_ENDPOINTS.ROLE_PERM_PERMISSIONS_ALL);
+  },
+
+  async getRolePermissions(roleId: string): Promise<string[]> {
+    return apiFetch<string[]>(API_ENDPOINTS.ROLE_PERM_ROLE_GET_PERMISSIONS(roleId));
+  },
+
+  async updateRolePermissions(roleId: string, permissionIds: string[]): Promise<{ detail: string }> {
+    return apiFetch<{ detail: string }>(API_ENDPOINTS.ROLE_PERM_ROLE_SET_PERMISSIONS(roleId), {
+      method: 'POST',
+      body: JSON.stringify({ permission_ids: permissionIds }),
+    });
+  },
+};

services/api/settingsService.ts

@@ -0,0 +1,48 @@
+import { apiFetch } from './client';
+import { API_ENDPOINTS } from './config';
+
+export interface SettingResponse {
+  setting_id: string;
+  setting_key: string;
+  setting_value: unknown;
+  description: string | null;
+  is_public: boolean;
+  updated_at: string;
+}
+
+export interface SettingCreate {
+  setting_key: string;
+  setting_value: unknown;
+  description?: string;
+  is_public?: boolean;
+}
+
+export interface SettingUpdate {
+  setting_value: unknown;
+  description?: string;
+  is_public?: boolean;
+}
+
+export const settingsService = {
+  async getPublic(): Promise<SettingResponse[]> {
+    return apiFetch<SettingResponse[]>(API_ENDPOINTS.SETTINGS_PUBLIC);
+  },
+
+  async getByKey(key: string): Promise<SettingResponse> {
+    return apiFetch<SettingResponse>(API_ENDPOINTS.SETTINGS_BY_KEY(key));
+  },
+
+  async create(data: SettingCreate): Promise<SettingResponse> {
+    return apiFetch<SettingResponse>(API_ENDPOINTS.SETTINGS_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  async update(key: string, data: SettingUpdate): Promise<SettingResponse> {
+    return apiFetch<SettingResponse>(API_ENDPOINTS.SETTINGS_UPDATE(key), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+};

services/api/userService.ts

@@ -0,0 +1,88 @@
+import { apiFetch } from './client';
+import { API_ENDPOINTS } from './config';
+
+export interface UserResponse {
+  user_id: string;
+  employee_code: string | null;
+  first_name: string;
+  last_name: string;
+  display_name: string | null;
+  email: string;
+  phone: string;
+  profile_image_id: string | null;
+  gender: string | null;
+  dob: string | null;
+  department_id: string;
+  designation_id: string;
+  role_id: string;
+  manager_id: string | null;
+  is_active: boolean;
+  email_verified: boolean;
+  phone_verified: boolean;
+  created_at: string;
+  last_login?: string | null;
+  last_activity?: string | null;
+}
+
+export interface UserCreate {
+  first_name: string;
+  last_name: string;
+  display_name?: string;
+  email: string;
+  phone: string;
+  password: string;
+  gender?: string;
+  dob?: string;
+  department_id: string;
+  designation_id: string;
+  role_id: string;
+  manager_id?: string;
+}
+
+export interface UserUpdate {
+  first_name?: string;
+  last_name?: string;
+  display_name?: string;
+  email?: string;
+  phone?: string;
+  password?: string;
+  gender?: string;
+  dob?: string;
+  department_id?: string;
+  designation_id?: string;
+  role_id?: string;
+  manager_id?: string;
+  profile_image_id?: string;
+}
+
+export const userService = {
+  async getAll(skip = 0, limit = 100): Promise<UserResponse[]> {
+    return apiFetch<UserResponse[]>(
+      `${API_ENDPOINTS.USERS_ALL}?skip=${skip}&limit=${limit}`
+    );
+  },
+
+  async getProfile(userId: string): Promise<UserResponse> {
+    return apiFetch<UserResponse>(API_ENDPOINTS.USERS_PROFILE(userId));
+  },
+
+  async create(data: UserCreate): Promise<UserResponse> {
+    return apiFetch<UserResponse>(API_ENDPOINTS.USERS_CREATE, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  async update(userId: string, data: UserUpdate): Promise<UserResponse> {
+    return apiFetch<UserResponse>(API_ENDPOINTS.USERS_UPDATE(userId), {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  },
+
+  async delete(userId: string): Promise<{ detail: string }> {
+    return apiFetch<{ detail: string }>(API_ENDPOINTS.USERS_DELETE(userId), {
+      method: 'DELETE',
+    });
+  },
+};

store/uiStore.ts

@@ -0,0 +1,135 @@
+import { create } from 'zustand';
+
+export interface NotificationItem {
+  id: string;
+  title: string;
+  message: string;
+  type: 'info' | 'success' | 'warning' | 'error';
+  read: boolean;
+  createdAt: Date;
+}
+
+export interface OfflineAction {
+  id: string;
+  url: string;
+  method: 'POST' | 'PUT' | 'DELETE';
+  payload: any;
+  timestamp: number;
+}
+
+interface UIState {
+  // Sidebar State
+  sidebarCollapsed: boolean;
+  toggleSidebar: () => void;
+  setSidebarCollapsed: (collapsed: boolean) => void;
+
+  // Command Palette State
+  commandPaletteOpen: boolean;
+  setCommandPaletteOpen: (open: boolean) => void;
+
+  // Notifications State
+  notifications: NotificationItem[];
+  unreadCount: number;
+  addNotification: (notification: Omit<NotificationItem, 'id' | 'read' | 'createdAt'>) => void;
+  markAsRead: (id: string) => void;
+  markAllAsRead: () => void;
+  clearNotifications: () => void;
+
+  // Network/Offline State
+  isOnline: boolean;
+  setIsOnline: (online: boolean) => void;
+  offlineQueue: OfflineAction[];
+  enqueueOfflineAction: (action: Omit<OfflineAction, 'id' | 'timestamp'>) => void;
+  clearOfflineQueue: () => void;
+}
+
+export const useUIStore = create<UIState>((set) => ({
+  // Sidebar defaults
+  sidebarCollapsed: false,
+  toggleSidebar: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
+  setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
+
+  // Command palette defaults
+  commandPaletteOpen: false,
+  setCommandPaletteOpen: (open) => set({ commandPaletteOpen: open }),
+
+  // Mock Notifications for design alignment
+  notifications: [
+    {
+      id: '1',
+      title: 'New Repair Job Assigned',
+      message: 'Repair ticket #REP0089 assigned to Technician John Doe',
+      type: 'info',
+      read: false,
+      createdAt: new Date(),
+    },
+    {
+      id: '2',
+      title: 'Low Stock Alert',
+      message: 'iPhone 15 Screen replacement modules are below safety levels (2 units remaining)',
+      type: 'warning',
+      read: false,
+      createdAt: new Date(Date.now() - 3600000),
+    },
+    {
+      id: '3',
+      title: 'Invoice Paid',
+      message: 'Payment received for Invoice #INV10452 ($450.00)',
+      type: 'success',
+      read: true,
+      createdAt: new Date(Date.now() - 7200000),
+    }
+  ],
+  unreadCount: 2,
+
+  addNotification: (n) =>
+    set((state) => {
+      const item: NotificationItem = {
+        ...n,
+        id: Math.random().toString(36).substr(2, 9),
+        read: false,
+        createdAt: new Date(),
+      };
+      const updated = [item, ...state.notifications];
+      return {
+        notifications: updated,
+        unreadCount: updated.filter((x) => !x.read).length,
+      };
+    }),
+
+  markAsRead: (id) =>
+    set((state) => {
+      const updated = state.notifications.map((n) =>
+        n.id === id ? { ...n, read: true } : n
+      );
+      return {
+        notifications: updated,
+        unreadCount: updated.filter((x) => !x.read).length,
+      };
+    }),
+
+  markAllAsRead: () =>
+    set((state) => ({
+      notifications: state.notifications.map((n) => ({ ...n, read: true })),
+      unreadCount: 0,
+    })),
+
+  clearNotifications: () => set({ notifications: [], unreadCount: 0 }),
+
+  // Network states
+  isOnline: true,
+  setIsOnline: (online) => set({ isOnline: online }),
+  offlineQueue: [],
+  enqueueOfflineAction: (action) =>
+    set((state) => ({
+      offlineQueue: [
+        ...state.offlineQueue,
+        {
+          ...action,
+          id: Math.random().toString(36).substr(2, 9),
+          timestamp: Date.now(),
+        },
+      ],
+    })),
+  clearOfflineQueue: () => set({ offlineQueue: [] }),
+}));

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}