embedingHF commited on Jun 3

Commit

46463e1

verified ·

1 Parent(s): b3d79de

Upload folder using huggingface_hub

Browse files

Files changed (21) hide show

.env.example +9 -0
.gitignore +8 -0
README.md +20 -0
assets/.aistudio/.gitignore +1 -0
index.html +13 -0
metadata.json +6 -0
package.json +35 -0
src/App.tsx +545 -0
src/components/Dashboard.tsx +507 -0
src/components/InventoryManager.tsx +714 -0
src/components/InvoiceGenerator.tsx +1277 -0
src/components/Settings.tsx +490 -0
src/components/SocialPromoter.tsx +408 -0
src/components/StaffManager.tsx +347 -0
src/index.css +1 -0
src/initialData.ts +387 -0
src/main.tsx +10 -0
src/types.ts +91 -0
src/utils/backup.ts +84 -0
tsconfig.json +26 -0
vite.config.ts +22 -0

.env.example ADDED Viewed

	@@ -0,0 +1,9 @@

+# GEMINI_API_KEY: Required for Gemini AI API calls.
+# AI Studio automatically injects this at runtime from user secrets.
+# Users configure this via the Secrets panel in the AI Studio UI.
+GEMINI_API_KEY="MY_GEMINI_API_KEY"
+# APP_URL: The URL where this applet is hosted.
+# AI Studio automatically injects this at runtime with the Cloud Run service URL.
+# Used for self-referential links, OAuth callbacks, and API endpoints.
+APP_URL="MY_APP_URL"

.gitignore ADDED Viewed

	@@ -0,0 +1,8 @@

+node_modules/
+build/
+dist/
+coverage/
+.DS_Store
+*.log
+.env*
+!.env.example

README.md ADDED Viewed

	@@ -0,0 +1,20 @@

+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://ai.google.dev/static/site-assets/images/share-ais-513315318.png" />
+</div>
+# Run and deploy your AI Studio app
+This contains everything you need to run your app locally.
+View your app in AI Studio: https://ai.studio/apps/e3c86eb8-3256-4b0c-aa17-a2893c04b228
+## Run Locally
+**Prerequisites:**  Node.js
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

assets/.aistudio/.gitignore ADDED Viewed

	@@ -0,0 +1 @@


1	+ *

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Google AI Studio App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

metadata.json ADDED Viewed

	@@ -0,0 +1,6 @@

+{
+  "name": "Haider Brother Traders",
+  "description": "Invoice generator and shop management software for Haider Brother Traders tire shop, containing real-time stock tracking, monthly reports, automated receipt layouts, multi-user permissions, and off-line modes.",
+  "requestFramePermissions": [],
+  "majorCapabilities": ["MAJOR_CAPABILITY_SERVER_SIDE_GEMINI_API"]
+}

package.json ADDED Viewed

	@@ -0,0 +1,35 @@

+{
+  "name": "react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3000 --host=0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist server.js",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@google/genai": "^2.4.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@vitejs/plugin-react": "^5.0.4",
+    "lucide-react": "^0.546.0",
+    "react": "^19.0.1",
+    "react-dom": "^19.0.1",
+    "vite": "^6.2.3",
+    "express": "^4.21.2",
+    "dotenv": "^17.2.3",
+    "motion": "^12.23.24"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "autoprefixer": "^10.4.21",
+    "esbuild": "^0.25.0",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.21.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.3",
+    "@types/express": "^4.17.21"
+  }
+}

src/App.tsx ADDED Viewed

	@@ -0,0 +1,545 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import {
+  LayoutDashboard,
+  ShoppingCart,
+  Package,
+  Users,
+  Megaphone,
+  Settings,
+  Activity,
+  CloudLightning,
+  Wifi,
+  WifiOff,
+  Clock,
+  PhoneCall,
+  UserCircle
+} from 'lucide-react';
+import { TireProduct, StockHistoryItem, StaffUser, Invoice, SystemSettings, StaffRole } from './types';
+import {
+  INITIAL_PRODUCTS,
+  INITIAL_HISTORY,
+  INITIAL_STAFF,
+  INITIAL_INVOICES,
+  INITIAL_SETTINGS
+} from './initialData';
+// Subcomponents
+import Dashboard from './components/Dashboard';
+import InvoiceGenerator from './components/InvoiceGenerator';
+import InventoryManager from './components/InventoryManager';
+import StaffManager from './components/StaffManager';
+import SocialPromoter from './components/SocialPromoter';
+import SettingsComponent from './components/Settings';
+export default function App() {
+  const [activeTab, setActiveTab] = useState('dashboard');
+  const [isOnline, setIsOnline] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  // Core database state hooks
+  const [settings, setSettings] = useState<SystemSettings>(INITIAL_SETTINGS);
+  const [products, setProducts] = useState<TireProduct[]>(INITIAL_PRODUCTS);
+  const [invoices, setInvoices] = useState<Invoice[]>(INITIAL_INVOICES);
+  const [history, setHistory] = useState<StockHistoryItem[]>(INITIAL_HISTORY);
+  const [staffList, setStaffList] = useState<StaffUser[]>(INITIAL_STAFF);
+  const [currentStaff, setCurrentStaff] = useState<StaffUser>(INITIAL_STAFF[1]); // Zin Brother as default cashier
+  // Invoice review overlay trigger state
+  const [selectedInvoiceForView, setSelectedInvoiceForView] = useState<Invoice | null>(null);
+  // Initialize and load from local storage if existing
+  useEffect(() => {
+    // Clock tick
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    const storedSettings = localStorage.getItem('HBT_SETTINGS');
+    const storedProducts = localStorage.getItem('HBT_PRODUCTS');
+    const storedInvoices = localStorage.getItem('HBT_INVOICES');
+    const storedHistory = localStorage.getItem('HBT_HISTORY');
+    const storedStaff = localStorage.getItem('HBT_STAFF');
+    const storedCurrent = localStorage.getItem('HBT_CURRENT_STAFF');
+    if (storedSettings) setSettings(JSON.parse(storedSettings));
+    if (storedProducts) setProducts(JSON.parse(storedProducts));
+    if (storedInvoices) setInvoices(JSON.parse(storedInvoices));
+    if (storedHistory) setHistory(JSON.parse(storedHistory));
+    if (storedStaff) setStaffList(JSON.parse(storedStaff));
+    if (storedCurrent) {
+      const parsedCurrent = JSON.parse(storedCurrent);
+      // Ensure currentStaff matches the parsed currentStaff safely
+      setCurrentStaff(parsedCurrent);
+    } else {
+      setCurrentStaff(INITIAL_STAFF[1]); // Zain Brother manager
+    }
+    return () => clearInterval(timer);
+  }, []);
+  // Sync utilities to persistence
+  const syncToLocalStorage = (key: string, data: any) => {
+    localStorage.setItem(key, JSON.stringify(data));
+  };
+  // State Adjustments multipliers
+  const handleUpdateSettings = (updated: SystemSettings) => {
+    setSettings(updated);
+    syncToLocalStorage('HBT_SETTINGS', updated);
+  };
+  // Triggered from Dashboard replenishment alarms
+  const handleQuickAddStock = (productId: string, amount: number) => {
+    const adjustedProducts = products.map(p => {
+      if (p.id === productId) {
+        const resultingStock = p.stock + amount;
+        // Append history log immediately
+        const logItem: StockHistoryItem = {
+          id: 'log_' + Math.random().toString(36).substr(2, 9),
+          productId: p.id,
+          productLabel: `${p.brand} ${p.model} (${p.size})`,
+          dateTime: new Date().toISOString(),
+          type: 'STOCK_IN',
+          quantity: amount,
+          resultingStock,
+          adjustedBy: `${currentStaff.name} (${currentStaff.role})`,
+          reason: `Quick Restock of Alarm: Restocked cargo pallet.`
+        };
+        const updatedHistory = [logItem, ...history];
+        setHistory(updatedHistory);
+        syncToLocalStorage('HBT_HISTORY', updatedHistory);
+        return { ...p, stock: resultingStock };
+      }
+      return p;
+    });
+    setProducts(adjustedProducts);
+    syncToLocalStorage('HBT_PRODUCTS', adjustedProducts);
+  };
+  // Triggered from InventoryManager manual configurations
+  const handleAdjustProductStock = (
+    productId: string,
+    quantityChange: number,
+    type: StockHistoryItem['type'],
+    reason: string
+  ) => {
+    const adjustedProducts = products.map(p => {
+      if (p.id === productId) {
+        const resultingStock = p.stock + quantityChange;
+        // Create log item
+        const logItem: StockHistoryItem = {
+          id: 'log_' + Math.random().toString(36).substr(2, 9),
+          productId: p.id,
+          productLabel: `${p.brand} ${p.model} (${p.size})`,
+          dateTime: new Date().toISOString(),
+          type,
+          quantity: Math.abs(quantityChange),
+          resultingStock,
+          adjustedBy: `${currentStaff.name} (${currentStaff.role})`,
+          reason
+        };
+        const updatedHistory = [logItem, ...history];
+        setHistory(updatedHistory);
+        syncToLocalStorage('HBT_HISTORY', updatedHistory);
+        return { ...p, stock: resultingStock };
+      }
+      return p;
+    });
+    setProducts(adjustedProducts);
+    syncToLocalStorage('HBT_PRODUCTS', adjustedProducts);
+  };
+  const handleAddNewProduct = (prod: TireProduct) => {
+    const updatedProducts = [prod, ...products];
+    setProducts(updatedProducts);
+    syncToLocalStorage('HBT_PRODUCTS', updatedProducts);
+    // Write initial STOCK_IN history entry
+    const logItem: StockHistoryItem = {
+      id: 'log_' + Math.random().toString(36).substr(2, 9),
+      productId: prod.id,
+      productLabel: `${prod.brand} ${prod.model} (${prod.size})`,
+      dateTime: new Date().toISOString(),
+      type: 'STOCK_IN',
+      quantity: prod.stock,
+      resultingStock: prod.stock,
+      adjustedBy: `${currentStaff.name} (${currentStaff.role})`,
+      reason: `First inventory system initialization of tyre profile SKU.`
+    };
+    const updatedHistory = [logItem, ...history];
+    setHistory(updatedHistory);
+    syncToLocalStorage('HBT_HISTORY', updatedHistory);
+  };
+  const handleDeleteProduct = (productId: string) => {
+    const updatedProducts = products.filter(p => p.id !== productId);
+    setProducts(updatedProducts);
+    syncToLocalStorage('HBT_PRODUCTS', updatedProducts);
+  };
+  // Adding Client Invoice automatically reduces matching tire quantities and writes logs
+  const handleAddInvoice = (newInv: Invoice) => {
+    // Append invoice
+    const updatedInvoices = [...invoices, newInv];
+    setInvoices(updatedInvoices);
+    syncToLocalStorage('HBT_INVOICES', updatedInvoices);
+    // Iterate items and decrease physical stock counts
+    let revisedProducts = [...products];
+    let newLogs: StockHistoryItem[] = [];
+    newInv.items.forEach((item) => {
+      revisedProducts = revisedProducts.map(p => {
+        if (p.id === item.productId) {
+          const resultingStock = p.stock - item.quantity;
+          // Construct checkout history block
+          const logItem: StockHistoryItem = {
+            id: 'log_' + Math.random().toString(36).substr(2, 9),
+            productId: p.id,
+            productLabel: `${p.brand} ${p.model} (${p.size})`,
+            dateTime: new Date().toISOString(),
+            type: 'STOCK_OUT',
+            quantity: item.quantity,
+            resultingStock,
+            adjustedBy: `${currentStaff.name} (${currentStaff.role})`,
+            reason: `Retail Invoice checkout sales: Ref ${newInv.invoiceNumber}`
+          };
+          newLogs.push(logItem);
+          return { ...p, stock: resultingStock };
+        }
+        return p;
+      });
+    });
+    const revisedHistory = [...newLogs, ...history];
+    setHistory(revisedHistory);
+    setProducts(revisedProducts);
+    syncToLocalStorage('HBT_PRODUCTS', revisedProducts);
+    syncToLocalStorage('HBT_HISTORY', revisedHistory);
+  };
+  // Staff managers
+  const handleAddStaffMember = (newUser: StaffUser) => {
+    const updated = [...staffList, newUser];
+    setStaffList(updated);
+    syncToLocalStorage('HBT_STAFF', updated);
+  };
+  const handleToggleStaffStatus = (staffId: string) => {
+    const updated = staffList.map(s =>
+      s.id === staffId ? { ...s, active: !s.active } : s
+    );
+    setStaffList(updated);
+    syncToLocalStorage('HBT_STAFF', updated);
+  };
+  const handleUpdateStaffRole = (staffId: string, role: StaffRole) => {
+    const updated = staffList.map(s =>
+      s.id === staffId ? { ...s, role } : s
+    );
+    setStaffList(updated);
+    syncToLocalStorage('HBT_STAFF', updated);
+  };
+  const handleSetCurrentStaff = (staff: StaffUser) => {
+    setCurrentStaff(staff);
+    syncToLocalStorage('HBT_CURRENT_STAFF', staff);
+  };
+  // Decrypted Restore logic
+  const handleRestoreDatabase = (decoded: {
+    settings: SystemSettings;
+    products: any[];
+    invoices: any[];
+    history: any[];
+    staff: any[];
+  }) => {
+    setSettings(decoded.settings);
+    setProducts(decoded.products);
+    setInvoices(decoded.invoices);
+    setHistory(decoded.history);
+    setStaffList(decoded.staff);
+    // Save and persist all entries
+    syncToLocalStorage('HBT_SETTINGS', decoded.settings);
+    syncToLocalStorage('HBT_PRODUCTS', decoded.products);
+    syncToLocalStorage('HBT_INVOICES', decoded.invoices);
+    syncToLocalStorage('HBT_HISTORY', decoded.history);
+    syncToLocalStorage('HBT_STAFF', decoded.staff);
+    // Set Owner as current operator safely if there's any owner in the backup list
+    const firstOwner = decoded.staff.find(s => s.role === 'owner' && s.active);
+    if (firstOwner) {
+      setCurrentStaff(firstOwner);
+      syncToLocalStorage('HBT_CURRENT_STAFF', firstOwner);
+    }
+  };
+  // Factory defaults
+  const handleClearCacheToDefault = () => {
+    localStorage.clear();
+  };
+  return (
+    <div className="min-h-screen bg-[#F8FAFC] flex flex-col md:flex-row antialiased select-none font-sans" id="application-shell">
+      {/* 1. COLLAPSIBLE OR RESPONSIVE STATIC SIDEBAR */}
+      <aside className="w-full md:w-64 bg-white border-b md:border-r border-slate-200 text-slate-800 flex flex-col justify-between shrink-0 shadow-sm" id="sidebar-panel">
+        <div className="space-y-6">
+          {/* Top Shop Brand Logo */}
+          <div className="p-6 border-b border-slate-100 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-lg bg-slate-900 flex items-center justify-center font-bold text-white text-base shadow-sm">
+                HBT
+              </div>
+              <div className="space-y-0.5">
+                <h2 className="text-xs font-bold tracking-tight text-slate-900 uppercase">Haider Brothers</h2>
+                <span className="text-[10px] text-slate-400 font-medium block">Tire Shop Manager</span>
+              </div>
+            </div>
+          </div>
+          {/* Navigation Links list */}
+          <nav className="px-3 space-y-1">
+            <button
+              onClick={() => setActiveTab('dashboard')}
+              className={`w-full flex items-center gap-3 px-3.5 py-2.5 rounded-lg text-xs font-medium font-sans transition cursor-pointer ${
+                activeTab === 'dashboard'
+                  ? 'bg-slate-900 text-white shadow-sm font-semibold'
+                  : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50'
+              }`}
+            >
+              <LayoutDashboard className="w-4 h-4 text-inherit" />
+              Reporting Cockpit
+            </button>
+            <button
+              onClick={() => {
+                setActiveTab('invoices');
+                setSelectedInvoiceForView(null);
+              }}
+              className={`w-full flex items-center gap-3 px-3.5 py-2.5 rounded-lg text-xs font-medium font-sans transition cursor-pointer ${
+                activeTab === 'invoices'
+                  ? 'bg-slate-900 text-white shadow-sm font-semibold'
+                  : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50'
+              }`}
+            >
+              <ShoppingCart className="w-4 h-4 text-inherit" />
+              Invoice Generator
+            </button>
+            <button
+              onClick={() => setActiveTab('inventory')}
+              className={`w-full flex items-center gap-3 px-3.5 py-2.5 rounded-lg text-xs font-medium font-sans transition cursor-pointer ${
+                activeTab === 'inventory'
+                  ? 'bg-slate-900 text-white shadow-sm font-semibold'
+                  : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50'
+              }`}
+            >
+              <Package className="w-4 h-4 text-inherit" />
+              Stock Inventory
+            </button>
+            <button
+              onClick={() => setActiveTab('staff')}
+              className={`w-full flex items-center gap-3 px-3.5 py-2.5 rounded-lg text-xs font-medium font-sans transition cursor-pointer ${
+                activeTab === 'staff'
+                  ? 'bg-slate-900 text-white shadow-sm font-semibold'
+                  : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50'
+              }`}
+            >
+              <Users className="w-4 h-4 text-inherit" />
+              Cashiers &amp; RBAC
+            </button>
+            <button
+              onClick={() => setActiveTab('social')}
+              className={`w-full flex items-center gap-3 px-3.5 py-2.5 rounded-lg text-xs font-medium font-sans transition cursor-pointer ${
+                activeTab === 'social'
+                  ? 'bg-slate-900 text-white shadow-sm font-semibold'
+                  : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50'
+              }`}
+            >
+              <Megaphone className="w-4 h-4 text-inherit" />
+              Outreach Promos
+            </button>
+            <button
+              onClick={() => setActiveTab('settings')}
+              className={`w-full flex items-center gap-3 px-3.5 py-2.5 rounded-lg text-xs font-medium font-sans transition cursor-pointer ${
+                activeTab === 'settings'
+                  ? 'bg-slate-900 text-white shadow-sm font-semibold'
+                  : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50'
+              }`}
+            >
+              <Settings className="w-4 h-4 text-inherit" />
+              Settings &amp; Vault
+            </button>
+          </nav>
+        </div>
+        {/* Bottom Operator profile card in sidebar */}
+        <div className="p-4 border-t border-slate-100 bg-slate-50 space-y-2">
+          <div className="flex items-center gap-2.5 text-xs">
+            <UserCircle className="w-8 h-8 text-slate-400" />
+            <div className="flex-1 min-w-0">
+              <p className="font-semibold text-slate-950 truncate text-[11px]">{currentStaff.name}</p>
+              <p className="text-[10px] text-slate-400 uppercase tracking-wider font-medium">{currentStaff.role}</p>
+            </div>
+          </div>
+          <div className="bg-white rounded-lg p-2 flex justify-between items-center text-[10px] border border-slate-200">
+            <span className="text-slate-400 font-medium">Node secure:</span>
+            <span className="font-mono text-emerald-600 font-bold flex items-center gap-1.5">
+              <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span>
+              ONLINE
+            </span>
+          </div>
+        </div>
+      </aside>
+      {/* 2. CORE WORKSPACE: HEADER + SCROLLABLE PAGE VIEWS */}
+      <main className="flex-1 flex flex-col min-w-0 overflow-y-auto h-screen" id="workspace-viewport">
+        {/* Top Navbar */}
+        <header className="bg-white border-b border-slate-200 px-6 md:px-8 py-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 shrink-0">
+          {/* Left info */}
+          <div className="flex items-center gap-2.5">
+            <span className="w-2 h-2 bg-slate-900 rounded-full animate-pulse"></span>
+            <span className="text-[11px] font-bold text-slate-800 font-sans tracking-wider uppercase">
+              SECURE CASHIER LEDGER
+            </span>
+            <span className="text-slate-200">|</span>
+            <span className="text-[11px] text-slate-500 flex items-center gap-1">
+              Store Support: {settings.shopPhone}
+            </span>
+          </div>
+          {/* Right systems specs */}
+          <div className="flex items-center gap-3.5 text-xs">
+            {/* Real-time Clock */}
+            <div className="text-slate-600 flex items-center gap-1.5 bg-[#F8FAFC] px-2.5 py-1.5 rounded-lg border border-slate-200/80">
+              <Clock className="w-3.5 h-3.5 text-slate-400" />
+              <span className="font-mono font-medium text-[11px] text-slate-700">{currentTime.toLocaleTimeString()}</span>
+            </div>
+            {/* Offline vs Online Beacons and alarms */}
+            {isOnline ? (
+              <span className="bg-emerald-50 text-emerald-800 border border-emerald-200/60 font-semibold font-sans px-2.5 py-1.5 rounded-lg flex items-center gap-1.5 text-[10px]">
+                <Wifi className="w-3.5 h-3.5 text-emerald-600" />
+                VAULT OK
+              </span>
+            ) : (
+              <span className="bg-amber-50 text-amber-800 border border-amber-200/60 font-semibold font-sans px-2.5 py-1.5 rounded-lg flex items-center gap-1.5 text-[10px] animate-pulse">
+                <WifiOff className="w-3.5 h-3.5 text-amber-600" />
+                AIR-GAPPED LOCAL
+              </span>
+            )}
+          </div>
+        </header>
+        {/* Tab Pages dispatcher Router panel */}
+        <div className="flex-1 p-6 md:p-8 overflow-y-auto">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={activeTab}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.15 }}
+              className="h-full"
+            >
+              {activeTab === 'dashboard' && (
+                <Dashboard
+                  products={products}
+                  invoices={invoices}
+                  currentStaff={currentStaff}
+                  settings={settings}
+                  setActiveTab={setActiveTab}
+                  onQuickAddStock={handleQuickAddStock}
+                  setSelectedInvoiceForView={(inv) => {
+                    setSelectedInvoiceForView(inv);
+                    setActiveTab('invoices');
+                  }}
+                />
+              )}
+              {activeTab === 'invoices' && (
+                <InvoiceGenerator
+                  products={products}
+                  invoices={invoices}
+                  currentStaff={currentStaff}
+                  settings={settings}
+                  isOnline={isOnline}
+                  onAddInvoice={handleAddInvoice}
+                  selectedInvoiceForView={selectedInvoiceForView}
+                  setSelectedInvoiceForView={setSelectedInvoiceForView}
+                />
+              )}
+              {activeTab === 'inventory' && (
+                <InventoryManager
+                  products={products}
+                  history={history}
+                  currentStaff={currentStaff}
+                  settings={settings}
+                  onAdjustProductStock={handleAdjustProductStock}
+                  onAddNewProduct={handleAddNewProduct}
+                  onDeleteProduct={handleDeleteProduct}
+                />
+              )}
+              {activeTab === 'staff' && (
+                <StaffManager
+                  staffList={staffList}
+                  currentStaff={currentStaff}
+                  onSetCurrentStaff={handleSetCurrentStaff}
+                  onAddStaffMember={handleAddStaffMember}
+                  onToggleStaffStatus={handleToggleStaffStatus}
+                  onUpdateStaffRole={handleUpdateStaffRole}
+                />
+              )}
+              {activeTab === 'social' && (
+                <SocialPromoter
+                  products={products}
+                  settings={settings}
+                />
+              )}
+              {activeTab === 'settings' && (
+                <SettingsComponent
+                  settings={settings}
+                  isOnline={isOnline}
+                  onUpdateSettings={handleUpdateSettings}
+                  onToggleOnlineMode={() => setIsOnline(!isOnline)}
+                  onRestoreDatabase={handleRestoreDatabase}
+                  onClearCacheToDefault={handleClearCacheToDefault}
+                  activeProducts={products}
+                  activeInvoices={invoices}
+                  activeHistory={history}
+                  activeStaff={staffList}
+                />
+              )}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </main>
+    </div>
+  );
+}

src/components/Dashboard.tsx ADDED Viewed

	@@ -0,0 +1,507 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { useState } from 'react';
+import { motion } from 'motion/react';
+import {
+  TrendingUp,
+  Package,
+  AlertTriangle,
+  FileText,
+  UserCheck,
+  Currency,
+  ArrowRight,
+  Plus,
+  RefreshCw,
+  Search,
+  ShoppingCart
+} from 'lucide-react';
+import { TireProduct, Invoice, StaffUser, SystemSettings } from '../types';
+interface DashboardProps {
+  products: TireProduct[];
+  invoices: Invoice[];
+  currentStaff: StaffUser;
+  settings: SystemSettings;
+  setActiveTab: (tab: string) => void;
+  onQuickAddStock: (productId: string, amount: number) => void;
+  setSelectedInvoiceForView: (invoice: Invoice | null) => void;
+}
+export default function Dashboard({
+  products,
+  invoices,
+  currentStaff,
+  settings,
+  setActiveTab,
+  onQuickAddStock,
+  setSelectedInvoiceForView
+}: DashboardProps) {
+  const [replenishAmount, setReplenishAmount] = useState<{ [key: string]: number }>({});
+  const [searchTerm, setSearchTerm] = useState('');
+  // 1. Calculate general statistics
+  const totalInvoiced = invoices.reduce((sum, inv) => sum + (inv.paymentStatus === 'PAID' ? inv.total : 0), 0);
+  const totalActiveItems = products.reduce((sum, p) => sum + p.stock, 0);
+  const lowStockItems = products.filter(p => p.stock <= p.minStock);
+  const totalInvoicesCount = invoices.length;
+  const currentMonthName = "June 2026";
+  const juneInvoices = invoices.filter(inv => {
+    // Basic date checking
+    return inv.dateTime.includes('-06-') || inv.dateTime.includes('/06/') || inv.dateTime.startsWith('02-06-') || inv.dateTime.startsWith('03-06-');
+  });
+  const juneSalesTotal = juneInvoices.reduce((sum, inv) => sum + (inv.paymentStatus === 'PAID' ? inv.total : 0), 0);
+  // 2. Generate custom monthly line metrics for our 2026 sales chart
+  // Group invoices by month
+  const monthlyData = [
+    { label: 'Jan', value: invoices.filter(i => i.dateTime.includes('-01-')).reduce((sum, i) => sum + i.total, 0) },
+    { label: 'Feb', value: invoices.filter(i => i.dateTime.includes('-02-')).reduce((sum, i) => sum + i.total, 0) },
+    { label: 'Mar', value: invoices.filter(i => i.dateTime.includes('-03-')).reduce((sum, i) => sum + i.total, 0) },
+    { label: 'Apr', value: invoices.filter(i => i.dateTime.includes('-04-')).reduce((sum, i) => sum + i.total, 0) },
+    { label: 'May', value: invoices.filter(i => i.dateTime.includes('-05-')).reduce((sum, i) => sum + i.total, 0) },
+    { label: 'Jun', value: invoices.filter(i => i.dateTime.includes('-06-')).reduce((sum, i) => sum + i.total, 0) },
+  ];
+  const maxMonthlyVal = Math.max(...monthlyData.map(d => d.value), 100000);
+  // 3. Category distribution
+  const categories = ['Passenger', 'SUV', 'Commercial', 'Light Truck', 'Truck/Bus'] as const;
+  const categoryStats = categories.map(cat => {
+    const items = products.filter(p => p.category === cat);
+    const count = items.reduce((sum, p) => sum + p.stock, 0);
+    const totalValue = items.reduce((sum, p) => sum + (p.stock * p.price), 0);
+    return { name: cat, count, value: totalValue };
+  });
+  const handleQuickAddClick = (productId: string) => {
+    const amt = replenishAmount[productId] || 10;
+    onQuickAddStock(productId, amt);
+    // Reset counter
+    setReplenishAmount(prev => ({ ...prev, [productId]: 10 }));
+  };
+  // Filter products for low stock alert segment
+  const filteredAlertProducts = lowStockItems.filter(p =>
+    p.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    p.model.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    p.size.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  return (
+    <div className="space-y-6" id="dashboard-container">
+      {/* Welcome Banner */}
+      <div className="bg-white border border-slate-200 rounded-xl p-6 md:p-8 text-slate-900 relative overflow-hidden flex flex-col md:flex-row justify-between items-start md:items-center gap-6 shadow-sm">
+        <div className="relative z-10 space-y-2.5">
+          <span className="bg-slate-100 text-slate-700 text-[10px] font-bold tracking-wider uppercase px-2.5 py-1 rounded-md border border-slate-200/60 inline-block font-sans">
+            ★ Active Session — {currentStaff.role.toUpperCase()} MODE
+          </span>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-900">
+            {settings.shopName}
+          </h1>
+          <p className="text-slate-500 text-xs max-w-xl leading-relaxed">
+            Direct invoicing, tax calculations, dynamic offline persistence, and real-time stock alerts. Welcomed operator: <span className="font-semibold text-slate-900">{currentStaff.name}</span>.
+          </p>
+        </div>
+        <div className="flex gap-2.5 relative z-10">
+          <button
+            onClick={() => setActiveTab('invoices')}
+            className="bg-slate-900 hover:bg-slate-800 text-white text-xs font-medium px-4 py-2.5 rounded-lg transition duration-150 flex items-center gap-2 cursor-pointer shadow-sm"
+          >
+            <ShoppingCart className="w-3.5 h-3.5" />
+            New Invoice
+          </button>
+          <button
+            onClick={() => setActiveTab('inventory')}
+            className="bg-white hover:bg-slate-50 text-slate-700 text-xs font-medium px-4 py-2.5 rounded-lg border border-slate-200 transition duration-150 flex items-center gap-2 cursor-pointer"
+          >
+            <Package className="w-3.5 h-3.5 text-slate-400" />
+            Manage Tires
+          </button>
+        </div>
+        {/* Abstract tire background shadow */}
+        <div className="absolute right-[-40px] bottom-[-40px] opacity-5 pointer-events-none transform rotate-12">
+          <div className="w-64 h-64 rounded-full border-[24px] border-slate-900 flex items-center justify-center">
+            <div className="w-40 h-40 rounded-full border-[12px] border-slate-900 border-dashed"></div>
+          </div>
+        </div>
+      </div>
+      {/* Main Core KPI Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5" id="kpi-grid">
+        {/* Metric 1 */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex items-center justify-between">
+          <div className="space-y-1">
+            <p className="text-[10px] uppercase font-semibold text-slate-400 tracking-wider">Mtd Cash Flow ({currentMonthName})</p>
+            <p className="text-xl font-bold tracking-tight text-slate-900">
+              {settings.currencySymbol} {juneSalesTotal.toLocaleString()}
+            </p>
+            <p className="text-[11px] text-slate-500 flex items-center gap-1">
+              <span className="text-emerald-600 font-semibold flex items-center gap-0.5">
+                <TrendingUp className="w-3 h-3" />
+                +14.2%
+              </span>
+              <span>vs last month</span>
+            </p>
+          </div>
+          <div className="p-2.5 bg-slate-50 text-slate-800 border border-slate-150 rounded-lg">
+            <TrendingUp className="w-4 h-4 text-slate-500" />
+          </div>
+        </div>
+        {/* Metric 2 */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex items-center justify-between">
+          <div className="space-y-1">
+            <p className="text-[10px] uppercase font-semibold text-slate-400 tracking-wider">Total Warehouse Stock</p>
+            <p className="text-xl font-bold tracking-tight text-slate-900">
+              {totalActiveItems} pcs
+            </p>
+            <p className="text-[11px] text-slate-500">
+              Across {products.length} distinct models
+            </p>
+          </div>
+          <div className="p-2.5 bg-slate-50 text-slate-800 border border-slate-150 rounded-lg">
+            <Package className="w-4 h-4 text-slate-500" />
+          </div>
+        </div>
+        {/* Metric 3 */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex items-center justify-between">
+          <div className="space-y-1">
+            <p className="text-[10px] uppercase font-semibold text-slate-400 tracking-wider">Critical Alerts</p>
+            <p className="text-xl font-bold tracking-tight text-red-600">
+              {lowStockItems.length} items
+            </p>
+            <p className="text-[11px] text-red-500 flex items-center gap-1 font-medium">
+              <AlertTriangle className="w-3 h-3" />
+              Urgent restock alert
+            </p>
+          </div>
+          <div className="p-2.5 bg-red-50 text-red-600 border border-red-100 rounded-lg">
+            <AlertTriangle className="w-4 h-4 text-red-500" />
+          </div>
+        </div>
+        {/* Metric 4 */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex items-center justify-between">
+          <div className="space-y-1">
+            <p className="text-[10px] uppercase font-semibold text-slate-400 tracking-wider">Total Sales Invoices</p>
+            <p className="text-xl font-bold tracking-tight text-slate-900">
+              {totalInvoicesCount} sales
+            </p>
+            <p className="text-[11px] text-slate-500">
+              Invoiced: {settings.currencySymbol}{totalInvoiced.toLocaleString()}
+            </p>
+          </div>
+          <div className="p-2.5 bg-slate-50 text-slate-850 border border-slate-150 rounded-lg">
+            <FileText className="w-4 h-4 text-slate-500" />
+          </div>
+        </div>
+      </div>
+      {/* Analytics SVG Graph Row */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6" id="dashboard-analytics">
+        {/* Core SVG Revenue Chart */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm lg:col-span-2 flex flex-col justify-between">
+          <div className="flex justify-between items-center mb-6">
+            <div>
+              <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Monthly Sales Reporting</h3>
+              <p className="text-xs text-slate-400">Telemetry of invoice turnover for year 2026</p>
+            </div>
+            <div className="bg-slate-50 text-slate-700 text-xs font-semibold px-2.5 py-1 rounded-md border border-slate-200">
+              Year {new Date().getFullYear()}
+            </div>
+          </div>
+          {/* SVG Animated Chart */}
+          <div className="relative h-64 w-full">
+            <svg viewBox="0 0 600 240" className="w-full h-full overflow-visible">
+              {/* Grid Lines */}
+              <line x1="40" y1="20" x2="580" y2="20" stroke="#f1f5f9" strokeWidth="1" />
+              <line x1="40" y1="70" x2="580" y2="70" stroke="#f1f5f9" strokeWidth="1" />
+              <line x1="40" y1="120" x2="580" y2="120" stroke="#f1f5f9" strokeWidth="1" />
+              <line x1="40" y1="170" x2="580" y2="170" stroke="#f1f5f9" strokeWidth="1" />
+              <line x1="40" y1="210" x2="580" y2="210" stroke="#e2e8f0" strokeWidth="1.5" />
+              {/* Chart line plotting */}
+              {(() => {
+                const getCoords = () => {
+                  const xSpacing = 540 / 5;
+                  return monthlyData.map((d, index) => {
+                    const x = 40 + index * xSpacing;
+                    // Scale value from 210 (bottom) to 20 (top)
+                    const y = 210 - (d.value / maxMonthlyVal) * 180;
+                    return { x, y, label: d.label, val: d.value };
+                  });
+                };
+                const coords = getCoords();
+                const pathD = coords.reduce((acc, c, idx) => {
+                  return acc + (idx === 0 ? `M ${c.x} ${c.y}` : ` L ${c.x} ${c.y}`);
+                }, "");
+                const areaD = coords.reduce((acc, c, idx) => {
+                  if (idx === 0) return `M ${c.x} 210 L ${c.x} ${c.y}`;
+                  let ret = acc + ` L ${c.x} ${c.y}`;
+                  if (idx === coords.length - 1) ret += ` L ${c.x} 210 Z`;
+                  return ret;
+                }, "");
+                return (
+                  <>
+                    {/* Shaded Area */}
+                    <path d={areaD} fill="url(#blue-gradient)" opacity="0.1" />
+                    {/* Connective Line */}
+                    <path d={pathD} fill="none" stroke="#2563eb" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+                    {/* Dots and Labels */}
+                    {coords.map((c, i) => (
+                      <g key={i} className="group cursor-pointer">
+                        {/* Hidden interactive target block */}
+                        <circle cx={c.x} cy={c.y} r="14" fill="transparent" />
+                        <circle cx={c.x} cy={c.y} r="6" fill="#2563eb" stroke="#ffffff" strokeWidth="2" className="transition-all group-hover:scale-150 duration-100" />
+                        <text x={c.x} y="230" textAnchor="middle" className="text-[11px] font-medium fill-slate-500 font-sans">{c.label}</text>
+                        {/* Turnover Value Overlay on Hover */}
+                        <g className="opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none">
+                          <rect x={c.x - 55} y={c.y - 36} width="110" height="26" rx="6" fill="#0f172a" />
+                          <text x={c.x} y={c.y - 19} textAnchor="middle" className="text-[10px] font-semibold fill-white font-sans">
+                            {settings.currencySymbol}{Math.round(c.val).toLocaleString()}
+                          </text>
+                        </g>
+                      </g>
+                    ))}
+                    {/* Gradiant definitions */}
+                    <defs>
+                      <linearGradient id="blue-gradient" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor="#2563eb" />
+                        <stop offset="100%" stopColor="#2563eb" stopOpacity="0" />
+                      </linearGradient>
+                    </defs>
+                  </>
+                );
+              })()}
+            </svg>
+          </div>
+          <div className="border-t border-slate-50 pt-4 flex justify-between text-xs text-slate-400">
+            <span>Graph starts: Jan 2026</span>
+            <span>Real-time custom math calculation engine active</span>
+            <span>Graph terminal: June 2026</span>
+          </div>
+        </div>
+        {/* Category Breakdown list */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex flex-col justify-between">
+          <div>
+            <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Tire Category Audit</h3>
+            <p className="text-xs text-slate-400">Warehouse composition and valuation</p>
+          </div>
+          <div className="space-y-4 my-6">
+            {categoryStats.map((stat, i) => {
+              const maxCount = Math.max(...categoryStats.map(s => s.count), 1);
+              const percentage = Math.round((stat.count / maxCount) * 100);
+              return (
+                <div key={i} className="space-y-1">
+                  <div className="flex justify-between text-xs">
+                    <span className="font-semibold text-slate-700">{stat.name}</span>
+                    <span className="text-slate-500">{stat.count} pcs — <span className="font-medium text-slate-800">{settings.currencySymbol}{stat.value.toLocaleString()}</span></span>
+                  </div>
+                  <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full rounded-full ${
+                        stat.name === 'Passenger' ? 'bg-blue-600' :
+                        stat.name === 'SUV' ? 'bg-indigo-500' :
+                        stat.name === 'Commercial' ? 'bg-emerald-500' :
+                        stat.name === 'Light Truck' ? 'bg-amber-500' : 'bg-red-500'
+                      }`}
+                      style={{ width: `${percentage}%` }}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <div className="bg-slate-50 rounded-xl p-3 text-center border border-slate-100">
+            <span className="text-xs font-semibold text-slate-600">Total Inventory Valuation:</span>
+            <p className="text-lg font-bold text-slate-900">
+              {settings.currencySymbol} {products.reduce((sum, p) => sum + (p.stock * p.price), 0).toLocaleString()}
+            </p>
+          </div>
+        </div>
+      </div>
+      {/* Stock critical alerts and Quick Add Section */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6" id="dashboard-tables">
+        {/* Real-time low stock warnings widget */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex flex-col justify-between">
+          <div className="space-y-2">
+            <div className="flex justify-between items-center">
+              <h3 className="text-sm font-bold text-slate-900 flex items-center gap-2 uppercase tracking-wide">
+                <AlertTriangle className="w-4 h-4 text-slate-800" />
+                Live Replenishment Alerts
+              </h3>
+              <span className="bg-red-50 text-red-800 text-[10px] font-bold px-2 py-0.5 rounded-md border border-red-100/60 font-sans">
+                {lowStockItems.length} Low Stock
+              </span>
+            </div>
+            <p className="text-xs text-slate-500">
+              The products listed below are currently equal to or below their alert limit. Top up immediately:
+            </p>
+          </div>
+          {/* Search alerts */}
+          <div className="my-4 relative">
+            <span className="absolute left-3.5 top-3 text-slate-400">
+              <Search className="w-4 h-4" />
+            </span>
+            <input
+              type="text"
+              placeholder="Search low-stock products..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full text-xs border border-slate-200 outline-none focus:border-blue-500 bg-slate-50 hover:bg-slate-100 focus:bg-white rounded-xl pl-10 pr-4 py-2.5 transition duration-150"
+            />
+          </div>
+          <div className="space-y-3 max-h-64 overflow-y-auto pr-1 my-2">
+            {filteredAlertProducts.length === 0 ? (
+              <div className="text-center py-8 border border-dashed border-slate-200 rounded-xl">
+                <p className="text-sm text-slate-400">No matching low stock warnings!</p>
+              </div>
+            ) : (
+              filteredAlertProducts.map((p) => {
+                const stockPercent = Math.max(Math.min((p.stock / p.minStock) * 100, 100), 5);
+                const currentReplValue = replenishAmount[p.id] || 10;
+                return (
+                  <div key={p.id} className="border border-slate-100 hover:border-slate-200 rounded-xl p-3 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-slate-50/50">
+                    <div className="space-y-1 col-span-2">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-bold text-slate-800">{p.brand} {p.model}</span>
+                        <span className="text-[10px] bg-slate-200/70 text-slate-600 px-2 py-0.5 rounded font-mono">{p.size}</span>
+                      </div>
+                      <div className="flex items-center gap-3 text-xs">
+                        <span className="text-slate-500">Min. stock threshold: <span className="font-semibold text-slate-700">{p.minStock}</span></span>
+                        <span className="text-slate-300">|</span>
+                        <span className="text-red-600 font-bold">Qty: {p.stock} remaining</span>
+                      </div>
+                      {/* Critical line representing the severe level */}
+                      <div className="w-52 bg-slate-200 h-1 rounded-full overflow-hidden">
+                        <div className="h-full bg-red-500" style={{ width: `${stockPercent}%` }} />
+                      </div>
+                    </div>
+                    {/* Stock quick load inputs */}
+                    {['owner', 'manager'].includes(currentStaff.role) ? (
+                      <div className="flex items-center gap-2 w-full sm:w-auto justify-end">
+                        <input
+                          type="number"
+                          min="1"
+                          max="200"
+                          value={currentReplValue}
+                          onChange={(e) => setReplenishAmount(prev => ({ ...prev, [p.id]: parseInt(e.target.value) || 1 }))}
+                          className="w-16 border border-slate-200 focus:border-blue-500 bg-white shadow-inner outline-none rounded-lg text-xs py-1 px-2 font-mono text-center"
+                        />
+                        <button
+                          onClick={() => handleQuickAddClick(p.id)}
+                          className="bg-blue-600 hover:bg-blue-700 font-bold text-white p-1.5 rounded-lg text-xs flex items-center gap-1 cursor-pointer transition shadow"
+                          title="Restock now"
+                        >
+                          <Plus className="w-3.5 h-3.5" />
+                          Restock
+                        </button>
+                      </div>
+                    ) : (
+                      <span className="text-[10px] text-slate-400 italic">Restock restricted to Managers</span>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </div>
+          <div className="pt-2 border-t border-slate-50 text-right">
+            <button
+              onClick={() => setActiveTab('inventory')}
+              className="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1 ml-auto font-semibold cursor-pointer"
+            >
+              Examine full inventory history
+              <ArrowRight className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+        {/* Recent Invoices Table list */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex flex-col justify-between">
+          <div className="space-y-1">
+            <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Recent Transactions</h3>
+            <p className="text-xs text-slate-400">Review, query, and print historical customer receipts</p>
+          </div>
+          <div className="space-y-3 scrollbar-none overflow-y-auto max-h-80 pr-1 my-4">
+            {invoices.length === 0 ? (
+              <div className="text-center py-12 border border-dashed border-slate-200 rounded-xl">
+                <p className="text-sm text-slate-400">No invoices drafted yet!</p>
+              </div>
+            ) : (
+              [...invoices].reverse().slice(0, 5).map((inv) => (
+                <div
+                  key={inv.id}
+                  onClick={() => setSelectedInvoiceForView(inv)}
+                  className="group border border-slate-50 hover:border-blue-100 hover:bg-blue-50/20 rounded-xl p-3 flex justify-between items-center transition cursor-pointer"
+                >
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      <span className="font-mono text-xs font-semibold text-slate-900">{inv.invoiceNumber}</span>
+                      {inv.isOfflineCreated && (
+                        <span className="bg-orange-100 text-orange-800 text-[9px] font-bold px-1.5 py-0.5 rounded-full" title="Saved locally offline. Ready for vault sync.">
+                          OFFLINE
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-xs font-medium text-slate-700">{inv.customerName}</p>
+                    <p className="text-[10px] text-slate-400">{inv.dateTime}</p>
+                  </div>
+                  <div className="text-right space-y-1">
+                    <span className="text-xs font-bold text-slate-900 font-sans">
+                      {inv.currencySymbol} {inv.total.toLocaleString()}
+                    </span>
+                    <div className="flex items-center gap-1 justify-end">
+                      <span className={`text-[10px] font-bold px-2 py-0.5 rounded ${
+                        inv.paymentStatus === 'PAID' ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'
+                      }`}>
+                        {inv.paymentStatus}
+                      </span>
+                      <span className="text-[9px] text-slate-400 bg-slate-100 px-1.5 rounded uppercase font-mono">
+                        {inv.paymentMethod}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+          <div className="pt-2 border-t border-slate-50">
+            <button
+              onClick={() => setActiveTab('invoices')}
+              className="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1 ml-auto font-semibold cursor-pointer"
+            >
+              Access complete Invoices terminal
+              <ArrowRight className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/InventoryManager.tsx ADDED Viewed

	@@ -0,0 +1,714 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { useState, useMemo } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import {
+  Package,
+  Plus,
+  History,
+  Trash2,
+  Edit,
+  Folder,
+  AlertTriangle,
+  ChevronRight,
+  ArrowUpRight,
+  ArrowDownRight,
+  Search,
+  Filter,
+  Check,
+  PlusCircle,
+  TrendingUp,
+  Sliders,
+  DollarSign,
+  Tag
+} from 'lucide-react';
+import { TireProduct, StockHistoryItem, StaffUser, SystemSettings } from '../types';
+interface InventoryManagerProps {
+  products: TireProduct[];
+  history: StockHistoryItem[];
+  currentStaff: StaffUser;
+  settings: SystemSettings;
+  onAdjustProductStock: (productId: string, quantityChange: number, type: StockHistoryItem['type'], reason: string) => void;
+  onAddNewProduct: (product: TireProduct) => void;
+  onDeleteProduct: (productId: string) => void;
+}
+export default function InventoryManager({
+  products,
+  history,
+  currentStaff,
+  settings,
+  onAdjustProductStock,
+  onAddNewProduct,
+  onDeleteProduct
+}: InventoryManagerProps) {
+  const [selectedProduct, setSelectedProduct] = useState<TireProduct | null>(null);
+  const [inventorySearch, setInventorySearch] = useState('');
+  const [activeSegment, setActiveSegment] = useState<string>('All');
+  // Custom New Product Addition Modal toggle
+  const [showAddModal, setShowAddModal] = useState(false);
+  // Manual Adjustment flow inside details
+  const [adjustmentQty, setAdjustmentQty] = useState<number>(5);
+  const [adjustmentType, setAdjustmentType] = useState<'STOCK_IN' | 'STOCK_OUT' | 'MANUAL_ADJUSTMENT'>('STOCK_IN');
+  const [adjustmentReason, setAdjustmentReason] = useState('');
+  // New Product details state
+  const [newBrand, setNewBrand] = useState('');
+  const [newModel, setNewModel] = useState('');
+  const [newSize, setNewSize] = useState('');
+  const [newCategory, setNewCategory] = useState<TireProduct['category']>('Passenger');
+  const [newPrice, setNewPrice] = useState<number>(15000);
+  const [newPurchasePrice, setNewPurchasePrice] = useState<number>(11000);
+  const [newStock, setNewStock] = useState<number>(10);
+  const [newMinStock, setNewMinStock] = useState<number>(5);
+  const [newSku, setNewSku] = useState('');
+  const [newDesc, setNewDesc] = useState('');
+  // 1. Filtering products
+  const filteredProducts = useMemo(() => {
+    return products.filter(p => {
+      const matchSearch =
+        p.brand.toLowerCase().includes(inventorySearch.toLowerCase()) ||
+        p.model.toLowerCase().includes(inventorySearch.toLowerCase()) ||
+        p.size.toLowerCase().includes(inventorySearch.toLowerCase()) ||
+        p.sku.toLowerCase().includes(inventorySearch.toLowerCase());
+      const matchSegment = activeSegment === 'All' || p.category === activeSegment;
+      return matchSearch && matchSegment;
+    });
+  }, [products, inventorySearch, activeSegment]);
+  // If a product is selected, pull its dedicated history records
+  const selectedProductHistory = useMemo(() => {
+    if (!selectedProduct) return [];
+    return history
+      .filter(h => h.productId === selectedProduct.id)
+      .sort((a, b) => new Date(b.dateTime).getTime() - new Date(a.dateTime).getTime());
+  }, [history, selectedProduct]);
+  // Stock valuation and item counts
+  const totalSkuInSegment = filteredProducts.length;
+  const totalCountInSegment = filteredProducts.reduce((sum, p) => sum + p.stock, 0);
+  const totalValuationInSegment = filteredProducts.reduce((sum, p) => sum + (p.stock * p.price), 0);
+  const totalCostValuation = filteredProducts.reduce((sum, p) => sum + (p.stock * p.purchasePrice), 0);
+  const projectedMargin = totalValuationInSegment - totalCostValuation;
+  // Handle Adjustment submission
+  const handleAdjustmentSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedProduct) return;
+    if (adjustmentQty <= 0) {
+      alert("Adjustment quantity must be greater than zero.");
+      return;
+    }
+    if (!adjustmentReason.trim()) {
+      alert("Please state concrete audit adjustment comments.");
+      return;
+    }
+    // Determine quantity with correct algebraic sign: STOCK_IN (+), OUT/MAN ADJUSTMENT (-)
+    let finalQtyChange = adjustmentQty;
+    if (adjustmentType === 'STOCK_OUT') {
+      finalQtyChange = -adjustmentQty;
+    } else if (adjustmentType === 'MANUAL_ADJUSTMENT') {
+      // Manual adjustment could be adding or subtracting
+      // In our code logic, we'll let manager define positive adjustments as + adjustmentQty
+      // But we can let them input negative values or specify direct relative overrides!
+      // Here let's treat manual adjustment as relative addition. Let's ask them to input signed or we define.
+      // Let's assume standard manual addition. If they want to decrease, they select "Stock Out".
+      finalQtyChange = adjustmentQty;
+    }
+    // Guard stock limit
+    if (adjustmentType === 'STOCK_OUT' && selectedProduct.stock + finalQtyChange < 0) {
+      alert("Cannot complete operation! Net inventory stock cannot go below 0.");
+      return;
+    }
+    onAdjustProductStock(
+      selectedProduct.id,
+      finalQtyChange,
+      adjustmentType,
+      adjustmentReason.trim()
+    );
+    // Sync selected item card visual indicators
+    const updatedProd = products.find(p => p.id === selectedProduct.id);
+    if (updatedProd) {
+      setSelectedProduct({
+        ...updatedProd,
+        stock: updatedProd.stock + finalQtyChange
+      });
+    }
+    // Reset forms
+    setAdjustmentQty(5);
+    setAdjustmentReason('');
+    setAdjustmentType('STOCK_IN');
+  };
+  // Create Product Submit
+  const handleCreateProductSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newBrand.trim() || !newModel.trim() || !newSize.trim() || !newSku.trim()) {
+      alert("Brand, Model, Size and SKU are mandatory properties.");
+      return;
+    }
+    // SKU uniqueness guard
+    if (products.some(p => p.sku.toUpperCase() === newSku.toUpperCase())) {
+      alert("SKU already active under another tire spec. Assign unique tracking barcode.");
+      return;
+    }
+    const newProd: TireProduct = {
+      id: 'p_' + Math.random().toString(36).substr(2, 9),
+      sku: newSku.toUpperCase(),
+      brand: newBrand,
+      model: newModel,
+      size: newSize,
+      category: newCategory,
+      stock: newStock,
+      minStock: newMinStock,
+      price: newPrice,
+      purchasePrice: newPurchasePrice,
+      description: newDesc.trim() || undefined
+    };
+    onAddNewProduct(newProd);
+    // Reset states
+    setNewBrand('');
+    setNewModel('');
+    setNewSize('');
+    setNewSku('');
+    setNewDesc('');
+    setNewStock(10);
+    setNewMinStock(5);
+    setNewPrice(15000);
+    setNewPurchasePrice(11000);
+    setShowAddModal(false);
+  };
+  const handleProductDelete = (productId: string) => {
+    if (confirm("Are you absolutely sure you want to retire and remove this tire product spec? Historical invoice records will still show details, but stock adjustments will be closed.")) {
+      onDeleteProduct(productId);
+      if (selectedProduct?.id === productId) {
+        setSelectedProduct(null);
+      }
+    }
+  };
+  return (
+    <div className="space-y-6" id="warehouse-management-cockpit">
+      {/* Category Summaries & Valuation overview cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="inventory-valuation">
+        <div className="bg-white border border-slate-200 p-5 rounded-xl shadow-sm space-y-1">
+          <span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Active Segment SKUs</span>
+          <h4 className="text-lg font-bold text-slate-900">{totalSkuInSegment} Profiles</h4>
+          <p className="text-xs text-slate-500">Currently filtered category</p>
+        </div>
+        <div className="bg-white border border-slate-200 p-5 rounded-xl shadow-sm space-y-1">
+          <span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Physical Tires Inventory</span>
+          <h4 className="text-lg font-bold text-slate-900">{totalCountInSegment} units</h4>
+          <p className="text-xs text-slate-500">Physical tire units stored</p>
+        </div>
+        <div className="bg-white border border-slate-200 p-5 rounded-xl shadow-sm space-y-1">
+          <span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Estimated Retail Value</span>
+          <h4 className="text-lg font-bold text-slate-900">{settings.currencySymbol} {totalValuationInSegment.toLocaleString()}</h4>
+          <p className="text-xs text-slate-500">Total potential turnover value</p>
+        </div>
+        <div className="bg-white border border-slate-200 p-5 rounded-xl shadow-sm space-y-1">
+          <span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Projected Profit Margin</span>
+          <h4 className="text-lg font-bold text-emerald-600">{settings.currencySymbol} {projectedMargin.toLocaleString()}</h4>
+          <p className="text-xs text-emerald-500 font-medium font-sans">Est. average margin: {Math.round((projectedMargin / (totalValuationInSegment || 1)) * 100)}%</p>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        {/* LEFT COLUMN: Core product list table */}
+        <div className={`${selectedProduct ? 'lg:col-span-7' : 'lg:col-span-12'} bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-4 transition-all duration-300`}>
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-100 pb-4">
+            <div className="space-y-1">
+              <h3 className="text-sm font-bold text-slate-950 flex items-center gap-2 uppercase tracking-wide">
+                <Sliders className="w-4.5 h-4.5 text-slate-800" />
+                Haider Tire Warehouse Records
+              </h3>
+              <p className="text-xs text-slate-400">Configure stocks details, track low alerts, and view specific SKU histories</p>
+            </div>
+            {['owner', 'manager'].includes(currentStaff.role) && (
+              <button
+                type="button"
+                onClick={() => setShowAddModal(true)}
+                className="bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs px-3.5 py-2.5 rounded-lg cursor-pointer shadow-sm transition flex items-center gap-2"
+              >
+                <PlusCircle className="w-4 h-4" />
+                Add New SKU
+              </button>
+            )}
+          </div>
+          {/* Filtering row */}
+          <div className="flex flex-col sm:flex-row gap-3">
+            {/* Search */}
+            <div className="relative flex-1">
+              <span className="absolute left-3.5 top-3 text-slate-400">
+                <Search className="w-4 h-4" />
+              </span>
+              <input
+                type="text"
+                placeholder="Search by Brand, size parameter (e.g. R15), or SKU..."
+                value={inventorySearch}
+                onChange={(e) => setInventorySearch(e.target.value)}
+                className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white hover:bg-slate-50/50 focus:bg-white rounded-lg pl-10 pr-4 py-2.5 transition"
+              />
+            </div>
+            {/* Filter segments tab */}
+            <div className="flex gap-1 overflow-x-auto pb-1 shrink-0 font-sans">
+              {['All', 'Passenger', 'SUV', 'Commercial', 'Light Truck', 'Truck/Bus'].map(seg => (
+                <button
+                  key={seg}
+                  onClick={() => setActiveSegment(seg)}
+                  className={`text-xs px-3 py-1.5 font-semibold rounded-lg shrink-0 cursor-pointer transition ${
+                    activeSegment === seg
+                      ? 'bg-slate-900 text-white shadow-sm'
+                      : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border border-slate-200/60'
+                  }`}
+                >
+                  {seg}
+                </button>
+              ))}
+            </div>
+          </div>
+          {/* Core Table Grid layout */}
+          <div className="overflow-x-auto scrollbar-thin">
+            <table className="w-full text-left border-collapse font-sans text-xs">
+              <thead className="bg-slate-50 text-slate-500 uppercase text-[10px] tracking-wider leading-none">
+                <tr className="border-b border-slate-200">
+                  <th className="py-3 px-4 font-bold">SKU / Tire Name</th>
+                  <th className="py-3 px-4 font-bold">Category</th>
+                  <th className="py-3 px-3 font-bold text-center">Remaining</th>
+                  <th className="py-3 px-3 font-bold text-right">Cost Price</th>
+                  <th className="py-3 px-4 font-bold text-right font-sans font-extrabold">Sell Price</th>
+                  <th className="py-3 px-4 text-center">Audit Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100 align-middle">
+                {filteredProducts.length === 0 ? (
+                  <tr>
+                    <td colSpan={6} className="text-center py-16 text-slate-400 bg-slate-50/20 rounded-xl">No products matched current filters or search query.</td>
+                  </tr>
+                ) : (
+                  filteredProducts.map((p) => {
+                    const isLow = p.stock <= p.minStock;
+                    const isSelected = selectedProduct?.id === p.id;
+                    return (
+                      <tr
+                        key={p.id}
+                        className={`transition hover:bg-blue-50/10 cursor-pointer ${
+                          isSelected ? 'bg-blue-50/30 font-semibold' : ''
+                        }`}
+                        onClick={() => setSelectedProduct(p)}
+                      >
+                        <td className="py-4 px-4 space-y-1">
+                          <div className="flex items-center gap-1.5">
+                            <span className="font-bold text-slate-950 text-sm leading-tight">{p.brand} {p.model}</span>
+                            {isLow && (
+                              <span className="bg-red-100 text-red-800 text-[9px] font-black px-1.5 py-0.5 rounded animate-pulse">
+                                ALERT
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-2 text-[10px] text-slate-500">
+                            <span className="font-mono text-xs text-blue-600 bg-blue-50 font-bold px-1 rounded">{p.size}</span>
+                            <span>•</span>
+                            <span className="font-mono text-[9px] uppercase font-bold text-slate-400 bg-slate-100 px-1 rounded">SKU: {p.sku}</span>
+                          </div>
+                        </td>
+                        <td className="py-4 px-4">
+                          <span className="bg-slate-100 text-slate-700 font-bold text-[10px] px-2.5 py-1 rounded-full">{p.category}</span>
+                        </td>
+                        <td className="py-4 px-3 text-center">
+                          <span className={`font-mono font-black text-sm px-2.5 py-1 rounded-lg ${
+                            p.stock === 0 ? 'bg-red-100 text-red-800' :
+                            isLow ? 'bg-amber-100 text-amber-800' : 'bg-slate-100 text-slate-900'
+                          }`}>
+                            {p.stock}
+                          </span>
+                        </td>
+                        <td className="py-4 px-3 text-right text-slate-500 font-mono">
+                          {settings.currencySymbol} {p.purchasePrice.toLocaleString()}
+                        </td>
+                        <td className="py-4 px-4 text-right font-extrabold text-slate-950 text-sm font-sans">
+                          {settings.currencySymbol} {p.price.toLocaleString()}
+                        </td>
+                        <td className="py-4 px-4 text-center">
+                          <div className="flex items-center justify-center gap-2" onClick={(e) => e.stopPropagation()}>
+                            <button
+                              type="button"
+                              onClick={() => setSelectedProduct(p)}
+                              className="text-blue-600 hover:text-blue-800 p-1.5 rounded-lg hover:bg-blue-50 transition"
+                              title="Examine history logs"
+                            >
+                              <History className="w-4 h-4" />
+                            </button>
+                            {['owner', 'manager'].includes(currentStaff.role) && (
+                              <button
+                                type="button"
+                                onClick={() => handleProductDelete(p.id)}
+                                className="text-slate-400 hover:text-red-600 p-1.5 rounded-lg hover:bg-slate-100 transition"
+                                title="Remove SKU reference"
+                              >
+                                <Trash2 className="w-4 h-4" />
+                              </button>
+                            )}
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+        {/* RIGHT COLUMN: Selective detailed histories & manual stock operations drawer */}
+        {selectedProduct && (
+          <div className="lg:col-span-5 space-y-6">
+            <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-5 relative overflow-visible">
+              <button
+                type="button"
+                onClick={() => setSelectedProduct(null)}
+                className="absolute top-4 right-4 bg-slate-50 hover:bg-slate-150 text-slate-400 hover:text-slate-800 font-bold px-2 py-1 rounded text-xs cursor-pointer"
+              >
+                ✕
+              </button>
+              {/* Product Header Card */}
+              <div className="space-y-3.5">
+                <span className="bg-slate-100 text-slate-800 border border-slate-200/60 text-[10px] font-semibold px-2.5 py-0.5 rounded-md uppercase tracking-wider font-sans">
+                  Detailed Tire Portfolio &amp; Log
+                </span>
+                <div>
+                  <h4 className="text-lg font-bold text-slate-950 uppercase">{selectedProduct.brand}</h4>
+                  <p className="text-xs font-semibold text-slate-500 leading-tight">{selectedProduct.model}</p>
+                </div>
+                <div className="flex flex-wrap gap-2 text-xs">
+                  <span className="font-sans text-[11px] font-semibold text-slate-800 bg-slate-100 border border-slate-200/50 px-2.5 py-0.5 rounded-md">
+                    {selectedProduct.size}
+                  </span>
+                  <span className="bg-slate-150 text-slate-600 font-sans text-[10px] font-bold uppercase rounded-md px-2 py-0.5 self-center">
+                    SKU: {selectedProduct.sku}
+                  </span>
+                </div>
+              </div>
+              {/* MANUAL ADJUSTER STOCK PANEL FOR AUTHORIZED STAFF */}
+              {['owner', 'manager'].includes(currentStaff.role) ? (
+                <form onSubmit={handleAdjustmentSubmit} className="border-t border-b border-dashed border-slate-200 py-4 space-y-4">
+                  <div className="flex items-center gap-1.5">
+                    <Sliders className="w-4.5 h-4.5 text-blue-600" />
+                    <span className="text-xs font-bold text-slate-950 uppercase">Manual Stock Adjuster Node</span>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1">
+                      <label className="text-[10px] text-slate-500 font-bold uppercase">Action Mode</label>
+                      <select
+                        value={adjustmentType}
+                        onChange={(e) => setAdjustmentType(e.target.value as any)}
+                        className="w-full text-xs border border-slate-200 bg-white shadow-sm p-2 rounded-xl outline-none"
+                      >
+                        <option value="STOCK_IN">Stock In (+ Incoming)</option>
+                        <option value="STOCK_OUT">Stock Out (- Outgoing)</option>
+                        <option value="MANUAL_ADJUSTMENT">Recount Adjustment (+/-)</option>
+                      </select>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="text-[10px] text-slate-500 font-bold uppercase">Tire count change</label>
+                      <input
+                        type="number"
+                        min="1"
+                        max="500"
+                        value={adjustmentQty}
+                        onChange={(e) => setAdjustmentQty(Math.max(1, parseInt(e.target.value) || 0))}
+                        className="w-full text-xs font-mono border border-slate-200 bg-white p-2 rounded-xl outline-none focus:border-blue-500 shadow-inner"
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-[10px] text-slate-500 font-bold uppercase">Audit Reason comments *</label>
+                    <input
+                      type="text"
+                      placeholder="e.g. Visual count match: added cargo pallets..."
+                      value={adjustmentReason}
+                      onChange={(e) => setAdjustmentReason(e.target.value)}
+                      className="w-full text-xs border border-slate-200 bg-white p-2 text-slate-700 outline-none focus:border-blue-500 rounded-xl"
+                    />
+                  </div>
+                  <button
+                    type="submit"
+                    className="w-full bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold py-2.5 rounded-xl transition cursor-pointer flex items-center justify-center gap-1 shadow"
+                  >
+                    <Check className="w-4 h-4" />
+                    Commit Stock Adjustment History
+                  </button>
+                </form>
+              ) : (
+                <div className="p-3 bg-slate-50 border border-slate-100 rounded-xl text-center text-xs text-slate-400 italic">
+                  Manual adjustments restricted to Owner &amp; Managers. Contact Zain Brother to restock.
+                </div>
+              )}
+              {/* CHRONOLOGICAL HISTORICAL LEDGER FOR THE ACTIVE TIRE */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-1.5 justify-between">
+                  <span className="text-xs font-bold text-slate-950 uppercase flex items-center gap-1">
+                    <History className="w-4 h-4 text-slate-700" />
+                    Tire Action History
+                  </span>
+                  <span className="bg-slate-100 text-slate-700 font-bold text-[10px] font-mono px-2 py-0.5 rounded">
+                    {selectedProductHistory.length} ledger logs
+                  </span>
+                </div>
+                <div className="space-y-2 max-h-72 overflow-y-auto pr-1">
+                  {selectedProductHistory.length === 0 ? (
+                    <div className="text-center py-10 text-slate-400 text-xs border border-dashed border-slate-150 rounded-xl">
+                      No matching transaction logs for this tire size yet.
+                    </div>
+                  ) : (
+                    selectedProductHistory.map((item) => {
+                      const isAddition = item.type === 'STOCK_IN';
+                      const isReduction = item.type === 'STOCK_OUT';
+                      return (
+                        <div key={item.id} className="border border-slate-50 hover:bg-slate-50/50 p-2.5 rounded-xl space-y-1 text-xs">
+                          <div className="flex justify-between items-center">
+                            <span className="font-mono text-[9px] text-slate-400">
+                              {new Date(item.dateTime).toLocaleString()}
+                            </span>
+                            <div className="flex items-center gap-1">
+                              {isAddition ? (
+                                <span className="bg-emerald-100 text-emerald-800 text-[9px] font-bold px-1.5 py-0.5 rounded font-mono flex items-center gap-0.5">
+                                  <ArrowUpRight className="w-3 h-3" />
+                                  +{item.quantity} In
+                                </span>
+                              ) : isReduction ? (
+                                <span className="bg-red-100 text-red-800 text-[9px] font-bold px-1.5 py-0.5 rounded font-mono flex items-center gap-0.5">
+                                  <ArrowDownRight className="w-3 h-3" />
+                                  {item.quantity} Sold
+                                </span>
+                              ) : (
+                                <span className="bg-blue-100 text-blue-800 text-[9px] font-bold px-1.5 py-0.5 rounded font-mono">
+                                  Recount: {item.quantity > 0 ? `+${item.quantity}` : item.quantity}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                          <p className="font-semibold text-slate-800 leading-tight">
+                            {item.reason}
+                          </p>
+                          <div className="text-[10px] text-slate-500 pt-1 flex justify-between border-t border-slate-100/50">
+                            <span>Adjusted by: <span className="font-bold text-slate-700">{item.adjustedBy}</span></span>
+                            <span>Resulting Stock: <strong className="font-mono">{item.resultingStock}</strong></span>
+                          </div>
+                        </div>
+                      );
+                    })
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      {/* CORE MODAL: NEW PRODUCT ADDITION FORM */}
+      {showAddModal && (
+        <div className="fixed inset-0 bg-slate-950/75 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-white rounded-2xl border border-slate-200 max-w-lg w-full p-6 md:p-8 space-y-6 relative shadow-2xl">
+            <button
+              onClick={() => setShowAddModal(false)}
+              className="absolute top-4 right-4 bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-900 font-bold px-3 py-1 rounded text-xs cursor-pointer"
+            >
+              ✕
+            </button>
+            <div className="pb-3 border-b border-slate-100 text-center">
+              <h3 className="text-xl font-black text-slate-950">Add Brand-New Tire to Database</h3>
+              <p className="text-xs text-slate-500">Configure core sizing parameters, initial stock, and pricing thresholds</p>
+            </div>
+            <form onSubmit={handleCreateProductSubmit} className="space-y-4 font-sans text-xs">
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">Brand SKU Barcode *</label>
+                  <input
+                    type="text"
+                    required
+                    placeholder="e.g. DUN1856514"
+                    value={newSku}
+                    onChange={(e)=>setNewSku(e.target.value)}
+                    className="w-full border border-slate-200 bg-white p-2 rounded-xl outline-none"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">Category Type</label>
+                  <select
+                    value={newCategory}
+                    onChange={(e)=>setNewCategory(e.target.value as any)}
+                    className="w-full border border-slate-200 bg-white p-2 rounded-xl outline-none"
+                  >
+                    <option value="Passenger">Passenger Radial</option>
+                    <option value="SUV">SUV All-Terrain</option>
+                    <option value="Commercial">Heavy Commercial Cargo</option>
+                    <option value="Light Truck">Light Truck Commercial</option>
+                    <option value="Truck/Bus">Truck/Bus Radial (TBR)</option>
+                  </select>
+                </div>
+              </div>
+              <div className="grid grid-cols-3 gap-3">
+                <div className="space-y-1 col-span-1">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">Brand / Maker *</label>
+                  <input
+                    type="text"
+                    required
+                    placeholder="e.g. Dunlop"
+                    value={newBrand}
+                    onChange={(e)=>setNewBrand(e.target.value)}
+                    className="w-full border border-slate-200 bg-white p-2 rounded-xl outline-none"
+                  />
+                </div>
+                <div className="space-y-1 col-span-1">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">Model Spec *</label>
+                  <input
+                    type="text"
+                    required
+                    placeholder="e.g. SP Touring"
+                    value={newModel}
+                    onChange={(e)=>setNewModel(e.target.value)}
+                    className="w-full border border-slate-200 bg-white p-2 rounded-xl outline-none"
+                  />
+                </div>
+                <div className="space-y-1 col-span-1">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">Size Dimension *</label>
+                  <input
+                    type="text"
+                    required
+                    placeholder="e.g. 195/65 R15"
+                    value={newSize}
+                    onChange={(e)=>setNewSize(e.target.value)}
+                    className="w-full border border-slate-200 bg-white p-2 rounded-xl outline-none"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-3 pb-3 border-b border-slate-100">
+                <div className="space-y-1">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">Purchase Cost price ({settings.currencySymbol})</label>
+                  <input
+                    type="number"
+                    min="100"
+                    required
+                    value={newPurchasePrice}
+                    onChange={(e)=>setNewPurchasePrice(parseInt(e.target.value) || 0)}
+                    className="w-full font-mono border border-slate-200 bg-white p-2 rounded-xl outline-none"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">MSRP Sell Retail price ({settings.currencySymbol})</label>
+                  <input
+                    type="number"
+                    min="100"
+                    required
+                    value={newPrice}
+                    onChange={(e)=>setNewPrice(parseInt(e.target.value) || 0)}
+                    className="w-full font-mono border border-slate-200 bg-white p-2 rounded-xl outline-none"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-3 text-xs">
+                <div className="space-y-1">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">Initial Stock Count</label>
+                  <input
+                    type="number"
+                    min="0"
+                    required
+                    value={newStock}
+                    onChange={(e)=>setNewStock(parseInt(e.target.value) || 0)}
+                    className="w-full border border-slate-200 bg-white p-2 rounded-xl outline-none"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">Low Alert Threshold limit</label>
+                  <input
+                    type="number"
+                    min="1"
+                    required
+                    value={newMinStock}
+                    onChange={(e)=>setNewMinStock(parseInt(e.target.value) || 0)}
+                    className="w-full border border-slate-200 bg-white p-2 rounded-xl outline-none"
+                  />
+                </div>
+              </div>
+              <div className="space-y-1">
+                <label className="text-[10px] text-slate-500 font-bold uppercase">Description / Performance parameters</label>
+                <textarea
+                  rows={2}
+                  placeholder="e.g. Robust local steel belted radial with comfortable rolling noise..."
+                  value={newDesc}
+                  onChange={(e)=>setNewDesc(e.target.value)}
+                  className="w-full border border-slate-200 bg-white p-2 rounded-xl outline-none resize-none"
+                />
+              </div>
+              <button
+                type="submit"
+                className="w-full bg-slate-900 hover:bg-slate-800 text-white font-medium py-2.5 rounded-lg transition cursor-pointer shadow-sm flex items-center justify-center gap-1.5"
+              >
+                <Check className="w-4 h-4" />
+                Initialize Tire Profile SKU
+              </button>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/InvoiceGenerator.tsx ADDED Viewed

	@@ -0,0 +1,1277 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { useState, useMemo } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import {
+  FileText,
+  User,
+  Phone,
+  Car,
+  Search,
+  Plus,
+  Trash2,
+  Check,
+  CreditCard,
+  Printer,
+  CheckCircle,
+  CloudLightning,
+  Smartphone,
+  TrendingDown,
+  Briefcase,
+  Share2,
+  Download,
+  Receipt,
+  FileDown,
+  RefreshCw
+} from 'lucide-react';
+import { TireProduct, Invoice, StaffUser, SystemSettings, InvoiceLineItem } from '../types';
+interface InvoiceGeneratorProps {
+  products: TireProduct[];
+  invoices: Invoice[];
+  currentStaff: StaffUser;
+  settings: SystemSettings;
+  isOnline: boolean;
+  onAddInvoice: (invoice: Invoice) => void;
+  selectedInvoiceForView: Invoice | null;
+  setSelectedInvoiceForView: (invoice: Invoice | null) => void;
+}
+export default function InvoiceGenerator({
+  products,
+  invoices,
+  currentStaff,
+  settings,
+  isOnline,
+  onAddInvoice,
+  selectedInvoiceForView,
+  setSelectedInvoiceForView
+}: InvoiceGeneratorProps) {
+  // Wizard steps: 'DRAFT' | 'GATEWAY' | 'COMPLETED'
+  const [generationStep, setGenerationStep] = useState<'DRAFT' | 'GATEWAY' | 'COMPLETED'>('DRAFT');
+  // Invoice Draft State
+  const [customerName, setCustomerName] = useState('');
+  const [customerPhone, setCustomerPhone] = useState('');
+  const [customerVehicle, setCustomerVehicle] = useState('');
+  const [notes, setNotes] = useState('');
+  const [cart, setCart] = useState<Omit<InvoiceLineItem, 'totalPrice'>[]>([]);
+  const [discount, setDiscount] = useState<number>(0);
+  const [paymentMethod, setPaymentMethod] = useState<'CASH' | 'CARD' | 'BANK_TRANSFER' | 'MOBILE_WALLET'>('CASH');
+  // Product search in generator
+  const [prodSearch, setProdSearch] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  // Checkout gateway simulation state
+  const [activeGateway, setActiveGateway] = useState<'Stripe' | 'PayPal' | 'EasyPaisa' | 'JazzCash' | 'Bank'>('Stripe');
+  const [gatewayProcessing, setGatewayProcessing] = useState(false);
+  const [gatewayAuthId, setGatewayAuthId] = useState('');
+  const [gatewayCompleted, setGatewayCompleted] = useState(false);
+  const [ccNumber, setCcNumber] = useState('4242 4242 4242 4242');
+  const [ccExpiry, setCcExpiry] = useState('12/28');
+  const [ccCvc, setCcCvc] = useState('321');
+  // Invoice final outcome
+  const [generatedInvoice, setGeneratedInvoice] = useState<Invoice | null>(null);
+  // Filter products for invoice item selection
+  const filteredProducts = useMemo(() => {
+    return products.filter(p => {
+      const matchSearch =
+        p.brand.toLowerCase().includes(prodSearch.toLowerCase()) ||
+        p.model.toLowerCase().includes(prodSearch.toLowerCase()) ||
+        p.size.toLowerCase().includes(prodSearch.toLowerCase()) ||
+        p.sku.toLowerCase().includes(prodSearch.toLowerCase());
+      const matchCategory = selectedCategory === 'All' || p.category === selectedCategory;
+      return matchSearch && matchCategory;
+    });
+  }, [products, prodSearch, selectedCategory]);
+  // Calculations
+  const subtotal = useMemo(() => {
+    return cart.reduce((sum, item) => sum + (item.quantity * item.unitPrice), 0);
+  }, [cart]);
+  const taxAmount = useMemo(() => {
+    return Math.round((subtotal * settings.taxRate) / 100);
+  }, [subtotal, settings.taxRate]);
+  const total = useMemo(() => {
+    const calculated = subtotal + taxAmount - discount;
+    return calculated < 0 ? 0 : calculated;
+  }, [subtotal, taxAmount, discount]);
+  // Cart operations
+  const addToCart = (product: TireProduct) => {
+    if (product.stock <= 0) {
+      alert(`Cannot add ${product.brand} ${product.model}. Insufficient stock in warehouse.`);
+      return;
+    }
+    const existingItem = cart.find(item => item.productId === product.id);
+    if (existingItem) {
+      if (existingItem.quantity >= product.stock) {
+        alert(`Stock limit reached! Only ${product.stock} tires are currently available.`);
+        return;
+      }
+      setCart(cart.map(item =>
+        item.productId === product.id
+          ? { ...item, quantity: item.quantity + 1 }
+          : item
+      ));
+    } else {
+      setCart([...cart, {
+        id: 'li_' + Math.random().toString(36).substr(2, 9),
+        productId: product.id,
+        brand: product.brand,
+        model: product.model,
+        size: product.size,
+        quantity: 1,
+        unitPrice: product.price
+      }]);
+    }
+  };
+  const updateCartQty = (productId: string, qty: number, stockLimit: number) => {
+    if (qty <= 0) {
+      setCart(cart.filter(item => item.productId !== productId));
+      return;
+    }
+    if (qty > stockLimit) {
+      alert(`Insufficient stock! Only ${stockLimit} items available in warehouse.`);
+      return;
+    }
+    setCart(cart.map(item =>
+      item.productId === productId ? { ...item, quantity: qty } : item
+    ));
+  };
+  const removeFromCart = (productId: string) => {
+    setCart(cart.filter(item => item.productId !== productId));
+  };
+  // Payment triggers
+  const handlePaymentSubmit = () => {
+    if (cart.length === 0) {
+      alert("Cart empty! Build custom tire elements first.");
+      return;
+    }
+    if (!customerName.trim()) {
+      alert("Customer Name is required to bind transaction record.");
+      return;
+    }
+    // Cash checkout needs no gateway simulation
+    if (paymentMethod === 'CASH') {
+      finalizeInvoice(null);
+    } else {
+      // Map gateway based on method
+      if (paymentMethod === 'CARD') {
+        setActiveGateway('Stripe');
+      } else if (paymentMethod === 'MOBILE_WALLET') {
+        setActiveGateway('EasyPaisa');
+      } else {
+        setActiveGateway('Bank');
+      }
+      setGenerationStep('GATEWAY');
+      setGatewayCompleted(false);
+      setGatewayAuthId('TXN-' + Math.floor(100000 + Math.random() * 900000));
+    }
+  };
+  // Secure final commit
+  const finalizeInvoice = (gatewayData: Invoice['gatewayInfo'] | null) => {
+    const invNumber = `HBT-${new Date().getFullYear()}-${1000 + invoices.length + 1}`;
+    // Convert cart to full InvoiceLineItems
+    const finalItems: InvoiceLineItem[] = cart.map(item => ({
+      ...item,
+      totalPrice: item.quantity * item.unitPrice
+    }));
+    // Local Format custom display date
+    const date = new Date();
+    const formattedDate = `${String(date.getDate()).padStart(2, '0')}-${String(date.getMonth() + 1).padStart(2, '0')}-${date.getFullYear()} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
+    const newInvoice: Invoice = {
+      id: 'inv_' + Math.random().toString(36).substr(2, 9),
+      invoiceNumber: invNumber,
+      dateTime: formattedDate,
+      customerName,
+      customerPhone,
+      customerVehicle,
+      items: finalItems,
+      subtotal,
+      taxRate: settings.taxRate,
+      taxAmount,
+      discount,
+      total,
+      currencySymbol: settings.currencySymbol,
+      currencyCode: settings.currencyCode,
+      paymentMethod,
+      paymentStatus: 'PAID',
+      amountPaid: total,
+      cashierName: currentStaff.name,
+      notes: notes.trim() ? notes : undefined,
+      gatewayInfo: gatewayData || undefined,
+      isOfflineCreated: !isOnline // Tracks offline generation tags
+    };
+    onAddInvoice(newInvoice);
+    setGeneratedInvoice(newInvoice);
+    setGenerationStep('COMPLETED');
+    // Wipe drafts
+    setCustomerName('');
+    setCustomerPhone('');
+    setCustomerVehicle('');
+    setNotes('');
+    setCart([]);
+    setDiscount(0);
+  };
+  // Execute Gateway authorization animation
+  const handleAuthorizeGateway = () => {
+    setGatewayProcessing(true);
+    setTimeout(() => {
+      setGatewayProcessing(false);
+      setGatewayCompleted(true);
+      setTimeout(() => {
+        // Complete checkout with authentic keys
+        finalizeInvoice({
+          gatewayName: activeGateway,
+          transactionId: gatewayAuthId,
+          authTime: new Date().toISOString()
+        });
+      }, 1000);
+    }, 1800);
+  };
+  // Format HTML share links
+  const copyShareText = (inv: Invoice) => {
+    const textDetails = `⚡ *Invoice ${inv.invoiceNumber} — Haider Brother Traders* ⚡\nVehicle: ${inv.customerVehicle || 'N/A'}\nCustomer: ${inv.customerName}\nTotal amount settled: *${inv.currencySymbol} ${inv.total.toLocaleString()}*\nPayment: ${inv.paymentMethod} (PAID)\n💼 Shop Phone: ${settings.shopPhone}\nThank you for choosing Haider Brother Traders!`;
+    navigator.clipboard.writeText(textDetails);
+    alert("Invoice share prompt successfully copied to clipboard (optimized for WhatsApp/Social)!");
+  };
+  // Export invoice structure to readable offline-friendly raw layout HTML file
+  const exportOfflineHTMLReceipt = (inv: Invoice) => {
+    const htmlSnippet = `
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <title>Invoice ${inv.invoiceNumber}</title>
+        <style>
+          body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; padding: 40px; line-height: 1.6; }
+          .header { border-bottom: 2px solid #0f172a; padding-bottom: 20px; margin-bottom: 30px; display: flex; justify-content: space-between; }
+          .brand { font-size: 24px; font-weight: bold; text-transform: uppercase; }
+          .meta { text-align: right; font-size: 14px; }
+          .customer { background: #f8fafc; padding: 15px; border-radius: 8px; margin-bottom: 30px; }
+          table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
+          th { background: #0f172a; color: #fff; text-align: left; padding: 12px; font-size: 14px; }
+          td { border-bottom: 1px solid #e2e8f0; padding: 12px; font-size: 14px; }
+          .summary { text-align: right; width: 40%; margin-left: auto; font-size: 14px; }
+          .summary-row { display: flex; justify-content: space-between; padding: 8px 0; }
+          .bold { font-weight: bold; font-size: 16px; border-top: 1px solid #333; padding-top: 10px; }
+          .center { text-align: center; margin-top: 50px; font-size: 12px; color: #777; }
+        </style>
+      </head>
+      <body>
+        <div class="header">
+          <div>
+            <div class="brand">${settings.shopName}</div>
+            <div style="font-size: 13px; color: #555;">${settings.shopAddress}</div>
+            <div style="font-size: 13px; color: #555;">Phone: ${settings.shopPhone}</div>
+          </div>
+          <div class="meta">
+            <h2>INVOICE</h2>
+            <div><strong>Inv No:</strong> ${inv.invoiceNumber}</div>
+            <div><strong>Date:</strong> ${inv.dateTime}</div>
+            <div><strong>Cashier:</strong> ${inv.cashierName}</div>
+          </div>
+        </div>
+        <div class="customer">
+          <strong>Customer Information:</strong>
+          <div>Name: ${inv.customerName}</div>
+          <div>Phone: ${inv.customerPhone || 'N/A'}</div>
+          <div>Vehicle: ${inv.customerVehicle || 'N/A'}</div>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Item / Size</th>
+              <th>Qty</th>
+              <th>Unit Price</th>
+              <th>Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${inv.items.map(item => `
+              <tr>
+                <td>${item.brand} ${item.model} (${item.size})</td>
+                <td>${item.quantity}</td>
+                <td>${inv.currencySymbol}${item.unitPrice.toLocaleString()}</td>
+                <td>${inv.currencySymbol}${item.totalPrice.toLocaleString()}</td>
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+        <div class="summary">
+          <div class="summary-row"><span>Subtotal:</span> <span>${inv.currencySymbol}${inv.subtotal.toLocaleString()}</span></div>
+          <div class="summary-row"><span>${settings.taxName} (${inv.taxRate}%):</span> <span>${inv.currencySymbol}${inv.taxAmount.toLocaleString()}</span></div>
+          <div class="summary-row"><span>Discounts:</span> <span>-${inv.currencySymbol}${inv.discount.toLocaleString()}</span></div>
+          <div class="summary-row class="bold" style="font-weight: bold; border-top: 2px solid #000; padding:10px 0;">
+            <span>Total Settled:</span> <span>${inv.currencySymbol}${inv.total.toLocaleString()}</span>
+          </div>
+        </div>
+        <p style="font-size: 12px; font-style: italic; margin-top: 40px;">* Invoice generated under security ledger vault. Offline tag: ${inv.isOfflineCreated ? 'True' : 'False'}</p>
+        <div class="center">
+          Thank you for choosing Haider Brother Traders!
+        </div>
+      </body>
+      </html>
+    `;
+    const blob = new Blob([htmlSnippet], { type: 'text/html' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = `Invoice_${inv.invoiceNumber}.html`;
+    link.click();
+  };
+  const handleManualPrint = () => {
+    window.print();
+  };
+  return (
+    <div className="space-y-8" id="invoice-builder-panel">
+      {/* Offline Status Warning Indicator */}
+      {!isOnline && (
+        <div className="bg-orange-50 border border-orange-200 text-orange-850 px-4 py-3 rounded-xl flex items-center justify-between gap-3 text-xs md:text-sm">
+          <div className="flex items-center gap-2">
+            <CloudLightning className="w-5 h-5 col-span-1 text-orange-600 animate-pulse" />
+            <span>
+              <strong>Offline Mode Activated</strong> — Internet connection offline. Drafted invoices are instantly committed and backed up locally to cache memory and will sync when system restarts or connects.
+            </span>
+          </div>
+          <span className="font-bold text-orange-900 border border-orange-300 rounded px-2 py-0.5 text-[10px] uppercase font-mono">
+            AIR-GAPPED COCKPIT
+          </span>
+        </div>
+      )}
+      {/* Main split wizard screen */}
+      {generationStep === 'DRAFT' && (
+        <div className="grid grid-cols-1 xl:grid-cols-12 gap-8">
+          {/* LEFT PANEL: Bill drafting & Customer Onboarding */}
+          <div className="xl:col-span-8 space-y-6">
+            <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm space-y-6">
+              <div className="flex items-center gap-3 pb-4 border-b border-slate-100">
+                <div className="bg-slate-100 text-slate-800 p-2.5 rounded-lg">
+                  <User className="w-5 h-5" />
+                </div>
+                <div>
+                  <h3 className="text-base font-bold text-slate-900 uppercase tracking-wide">Customer & Vehicle Details</h3>
+                  <p className="text-xs text-slate-400">Provide client and vehicle details for invoice audit accuracy</p>
+                </div>
+              </div>
+              {/* Patient Fields */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-600 flex items-center gap-1.5">
+                    Customer Name <span className="text-red-500">*</span>
+                  </label>
+                  <div className="relative">
+                    <span className="absolute left-3.5 top-3 text-slate-400">
+                      <User className="w-3.5 h-3.5" />
+                    </span>
+                    <input
+                      type="text"
+                      placeholder="e.g. Mehmood Khan"
+                      value={customerName}
+                      onChange={(e) => setCustomerName(e.target.value)}
+                      className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white rounded-lg pl-9 pr-4 py-2 font-medium transition duration-150"
+                    />
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-600">Client Phone Number</label>
+                  <div className="relative">
+                    <span className="absolute left-3.5 top-3 text-slate-400">
+                      <Phone className="w-3.5 h-3.5" />
+                    </span>
+                    <input
+                      type="text"
+                      placeholder="e.g. 0333-1234567"
+                      value={customerPhone}
+                      onChange={(e) => setCustomerPhone(e.target.value)}
+                      className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white rounded-lg pl-9 pr-4 py-2 font-medium transition duration-150"
+                    />
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-600">Vehicle / Reg Mark</label>
+                  <div className="relative">
+                    <span className="absolute left-3.5 top-3 text-slate-400">
+                      <Car className="w-3.5 h-3.5" />
+                    </span>
+                    <input
+                      type="text"
+                      placeholder="e.g. Toyota Prado (BE-777)"
+                      value={customerVehicle}
+                      onChange={(e) => setCustomerVehicle(e.target.value)}
+                      className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white rounded-lg pl-9 pr-4 py-2 font-medium transition duration-150"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* PRODUCT SEARCH AND SELECTION PANEL */}
+            <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm space-y-5">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-slate-100">
+                <div className="flex items-center gap-3">
+                  <div className="bg-slate-100 text-slate-800 p-2.5 rounded-lg">
+                    <Search className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Tire Stock Matcher</h3>
+                    <p className="text-xs text-slate-400">Search and map tires directly onto live checkout ledger</p>
+                  </div>
+                </div>
+                {/* Categories */}
+                <div className="flex gap-1.5 overflow-x-auto pb-1 sm:pb-0 font-sans">
+                  {['All', 'Passenger', 'SUV', 'Commercial', 'Light Truck', 'Truck/Bus'].map(cat => (
+                    <button
+                      key={cat}
+                      type="button"
+                      onClick={() => setSelectedCategory(cat)}
+                      className={`text-xs px-2.5 py-1.5 font-semibold rounded-md shrink-0 transition cursor-pointer ${
+                        selectedCategory === cat
+                          ? 'bg-slate-900 text-white shadow-sm'
+                          : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border border-slate-200'
+                      }`}
+                    >
+                      {cat}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              {/* Fast Search input */}
+              <div className="relative">
+                <span className="absolute left-3.5 top-3 text-slate-400">
+                  <Search className="w-4 h-4" />
+                </span>
+                <input
+                  type="text"
+                  placeholder="Search by tire brand, profile size (e.g. 195/65), or model/SKU SKU..."
+                  value={prodSearch}
+                  onChange={(e) => setProdSearch(e.target.value)}
+                  className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white rounded-lg pl-10 pr-4 py-2 font-sans transition duration-150"
+                />
+              </div>
+              {/* Searched Items Grid */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-96 overflow-y-auto pr-1">
+                {filteredProducts.length === 0 ? (
+                  <div className="col-span-2 text-center py-12 border border-dashed border-slate-200 rounded-lg bg-slate-50">
+                    <p className="text-sm text-slate-400">No tires matching database entries.</p>
+                  </div>
+                ) : (
+                  filteredProducts.map(p => {
+                    const isLowStock = p.stock <= p.minStock;
+                    const isOutOfStock = p.stock === 0;
+                    return (
+                      <div
+                        key={p.id}
+                        className={`border rounded-lg p-4 flex flex-col justify-between gap-4 transition duration-150 relative overflow-hidden ${
+                          isOutOfStock ? 'bg-slate-50 border-slate-200 opacity-60' :
+                          isLowStock ? 'bg-red-50/20 border-red-200 hover:border-red-300' :
+                          'bg-white hover:border-slate-400 border-slate-200'
+                        }`}
+                      >
+                        {isLowStock && (
+                          <div className={`absolute top-0 right-0 px-2 py-0.5 text-[9px] font-bold uppercase rounded-bl-md ${isOutOfStock ? 'bg-slate-400 text-white' : 'bg-red-600 text-white shadow-sm'}`}>
+                            {isOutOfStock ? 'OUT OF STOCK' : 'LOW STOCK'}
+                          </div>
+                        )}
+                        <div className="space-y-2">
+                          <div className="space-y-0.5">
+                            <span className="text-[9px] text-slate-400 uppercase tracking-wider font-extrabold">{p.category}</span>
+                            <h4 className="font-bold text-slate-900 text-sm">{p.brand} {p.model}</h4>
+                            <p className="font-mono text-xs text-slate-800 font-semibold bg-slate-100 inline-block px-1.5 py-0.5 rounded-sm">
+                              {p.size}
+                            </p>
+                          </div>
+                          <p className="text-xs text-slate-500 line-clamp-2 leading-relaxed">
+                            {p.description || "High structural performance tire."}
+                          </p>
+                        </div>
+                        <div className="flex items-center justify-between border-t border-slate-100 pt-3">
+                          <div className="space-y-0.5">
+                            <span className="text-[10px] text-slate-400 font-semibold font-sans">MSRP Retail Price</span>
+                            <p className="text-sm font-extrabold text-slate-950">
+                              {settings.currencySymbol} {p.price.toLocaleString()}
+                            </p>
+                            <span className="text-[10px] text-slate-400">Qty in stock: <span className="font-bold text-slate-700">{p.stock}</span></span>
+                          </div>
+                          <button
+                            type="button"
+                            disabled={isOutOfStock}
+                            onClick={() => addToCart(p)}
+                            className={`p-2 rounded-md cursor-pointer transition flex items-center justify-center ${
+                              isOutOfStock ? 'bg-slate-200 text-slate-400 cursor-not-allowed' :
+                              'bg-slate-900 hover:bg-slate-800 text-white shadow-sm'
+                            }`}
+                          >
+                            <Plus className="w-4 h-4" />
+                          </button>
+                        </div>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          </div>
+          {/* RIGHT PANEL: Live Cart Summary & Checkout triggers */}
+          <div className="xl:col-span-4 space-y-6">
+            <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex flex-col justify-between min-h-[500px]">
+              <div className="space-y-4">
+                <div className="flex items-center justify-between pb-3 border-b border-slate-200">
+                  <h3 className="font-bold text-slate-900 uppercase tracking-wide text-xs flex items-center gap-2">
+                    <Receipt className="w-4 h-4 text-slate-705" />
+                    Ledger Checkout Cart
+                  </h3>
+                  <span className="bg-slate-950 text-white text-[10px] font-bold px-2 py-0.5 rounded-md font-mono">
+                    {cart.reduce((sum, item) => sum + item.quantity, 0)} Pcs
+                  </span>
+                </div>
+                {/* Items layout */}
+                <div className="space-y-3 overflow-y-auto max-h-[300px] pr-1">
+                  {cart.length === 0 ? (
+                    <div className="text-center py-16 text-slate-400 space-y-2">
+                      <Printer className="w-10 h-10 mx-auto text-slate-300" />
+                      <p className="text-[11px] leading-normal">Ledger is empty. Select products from matching list to queue invoice items.</p>
+                    </div>
+                  ) : (
+                    cart.map((item) => {
+                      const matchedProd = products.find(p => p.id === item.productId);
+                      const maxStock = matchedProd ? matchedProd.stock : 100;
+                      return (
+                        <div key={item.id} className="border border-slate-100 bg-slate-50 p-2.5 rounded-lg space-y-2">
+                          <div className="flex justify-between items-start">
+                            <div className="space-y-0.5">
+                              <h5 className="text-xs font-bold text-slate-900 leading-tight">{item.brand} {item.model}</h5>
+                              <p className="text-[9px] font-mono font-medium text-slate-500 bg-slate-200/50 inline-block px-1 rounded-sm">{item.size}</p>
+                            </div>
+                            <button
+                              type="button"
+                              onClick={() => removeFromCart(item.productId)}
+                              className="text-slate-450 hover:text-red-600 p-1 rounded transition cursor-pointer"
+                            >
+                              <Trash2 className="w-3.5 h-3.5" />
+                            </button>
+                          </div>
+                          <div className="flex items-center justify-between border-t border-slate-100 pt-2">
+                            {/* Quantity buttons */}
+                            <div className="flex items-center border border-slate-200 bg-white rounded-md">
+                              <button
+                                type="button"
+                                onClick={() => updateCartQty(item.productId, item.quantity - 1, maxStock)}
+                                className="px-2 py-0.5 text-xs text-slate-500 hover:bg-slate-100 rounded-l-md transition"
+                              >
+                                -
+                              </button>
+                              <span className="px-2 text-xs font-bold font-mono text-slate-800">{item.quantity}</span>
+                              <button
+                                type="button"
+                                onClick={() => updateCartQty(item.productId, item.quantity + 1, maxStock)}
+                                className="px-2 py-0.5 text-xs text-slate-500 hover:bg-slate-100 rounded-r-md transition"
+                              >
+                                +
+                              </button>
+                            </div>
+                            <span className="text-xs font-bold text-slate-900 font-mono">
+                              {settings.currencySymbol} {(item.quantity * item.unitPrice).toLocaleString()}
+                            </span>
+                          </div>
+                        </div>
+                      );
+                    })
+                  )}
+                </div>
+              </div>
+              {/* Totals Section */}
+              <div className="border-t border-slate-200 pt-4 space-y-3 mt-6">
+                <div className="flex justify-between text-xs">
+                  <span className="text-slate-500 font-semibold">Subtotal</span>
+                  <span className="font-semibold text-slate-800 font-mono">{settings.currencySymbol} {subtotal.toLocaleString()}</span>
+                </div>
+                <div className="flex justify-between text-xs">
+                  <span className="text-slate-500 font-semibold">{settings.taxName} ({settings.taxRate}%)</span>
+                  <span className="font-semibold text-slate-800 font-mono">{settings.currencySymbol} {taxAmount.toLocaleString()}</span>
+                </div>
+                {/* Discount field */}
+                <div className="flex justify-between items-center text-xs">
+                  <span className="text-slate-500 font-semibold flex items-center gap-1">
+                    <TrendingDown className="w-3.5 h-3.5 text-slate-500" />
+                    Special Discount ({settings.currencySymbol})
+                  </span>
+                  <input
+                    type="number"
+                    min="0"
+                    placeholder="0"
+                    value={discount || ''}
+                    onChange={(e) => setDiscount(Math.max(0, parseInt(e.target.value) || 0))}
+                    className="w-20 border border-slate-200 focus:border-slate-800 text-right text-xs outline-none bg-white hover:bg-slate-50 focus:bg-white rounded-md p-1 font-mono font-bold"
+                  />
+                </div>
+                {/* Final calculated total size */}
+                <div className="border-t border-dashed border-slate-200 pt-3 flex justify-between items-center">
+                  <span className="text-xs font-bold text-slate-900 uppercase">Total Settled Amount</span>
+                  <span className="text-base font-black text-slate-950 font-mono">
+                    {settings.currencySymbol} {total.toLocaleString()}
+                  </span>
+                </div>
+                {/* Payment strategy */}
+                <div className="space-y-1.5 pt-2">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">Select Settlement Method</label>
+                  <div className="grid grid-cols-2 gap-2 text-[10px] font-sans">
+                    <button
+                      type="button"
+                      onClick={() => setPaymentMethod('CASH')}
+                      className={`py-1.5 px-2 border rounded-lg flex flex-col items-center gap-1 cursor-pointer font-bold ${
+                        paymentMethod === 'CASH' ? 'bg-slate-900 text-white border-transparent shadow-sm' : 'bg-slate-50 text-slate-700 hover:bg-slate-100 border-slate-200'
+                      }`}
+                    >
+                      <Briefcase className="w-3.5 h-3.5" />
+                      Cash
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setPaymentMethod('CARD')}
+                      className={`py-1.5 px-2 border rounded-lg flex flex-col items-center gap-1 cursor-pointer font-bold ${
+                        paymentMethod === 'CARD' ? 'bg-slate-900 text-white border-transparent shadow-sm' : 'bg-slate-50 text-slate-700 hover:bg-slate-100 border-slate-200'
+                      }`}
+                    >
+                      <CreditCard className="w-3.5 h-3.5" />
+                      Card Swipe
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setPaymentMethod('BANK_TRANSFER')}
+                      className={`py-1.5 px-2 border rounded-lg flex flex-col items-center gap-1 cursor-pointer font-bold ${
+                        paymentMethod === 'BANK_TRANSFER' ? 'bg-slate-900 text-white border-transparent shadow-sm' : 'bg-slate-50 text-slate-700 hover:bg-slate-100 border-slate-200'
+                      }`}
+                    >
+                      <Printer className="w-3.5 h-3.5" />
+                      Bank Wire
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setPaymentMethod('MOBILE_WALLET')}
+                      className={`py-1.5 px-2 border rounded-lg flex flex-col items-center gap-1 cursor-pointer font-bold ${
+                        paymentMethod === 'MOBILE_WALLET' ? 'bg-slate-900 text-white border-transparent shadow-sm' : 'bg-slate-50 text-slate-700 hover:bg-slate-100 border-slate-200'
+                      }`}
+                    >
+                      <Smartphone className="w-3.5 h-3.5" />
+                      M-Wallet
+                    </button>
+                  </div>
+                </div>
+                {/* Comments block */}
+                <div className="space-y-1">
+                  <label className="text-[10px] text-slate-500 font-bold uppercase">Client / Warranty Notes</label>
+                  <textarea
+                    rows={2}
+                    placeholder="e.g. 1 year structural carcass warranty, free alignment included..."
+                    value={notes}
+                    onChange={(e) => setNotes(e.target.value)}
+                    className="w-full text-xs border border-slate-200 outline-none focus:border-slate-800 bg-white rounded-lg p-2 transition resize-none font-sans"
+                  />
+                </div>
+                <button
+                  type="button"
+                  onClick={handlePaymentSubmit}
+                  disabled={cart.length === 0}
+                  className={`w-full py-2.5 text-xs font-semibold rounded-lg flex items-center justify-center gap-2 cursor-pointer transition shadow-sm border ${
+                    cart.length === 0
+                      ? 'bg-slate-100 text-slate-400 border-slate-200 cursor-not-allowed shadow-none'
+                      : 'bg-slate-900 hover:bg-slate-800 border-transparent text-white'
+                  }`}
+                >
+                  <CheckCircle className="w-4 h-4" />
+                  {paymentMethod === 'CASH' ? 'Commit & Cash Invoice' : 'Proceed to Checkout Gate'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {/* MID-GATEWAY SETTLEMENT MODAL */}
+      {generationStep === 'GATEWAY' && (
+        <div className="max-w-2xl mx-auto bg-white border border-slate-200 rounded-xl shadow-sm p-6 md:p-8 space-y-6">
+          <div className="text-center space-y-2 pb-4 border-b border-slate-100">
+            <h3 className="text-base font-bold text-slate-900 uppercase tracking-wider">Haider Brother Gateway Portal</h3>
+            <p className="text-xs text-slate-400">Securing payment gateway transaction pipeline for tire invoice processing</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-6 bg-slate-50 p-4 rounded-lg border border-slate-200">
+            <div className="md:col-span-8 space-y-3">
+              <span className="bg-slate-200 text-slate-800 text-[9px] font-bold px-2 py-0.5 rounded font-mono uppercase">
+                Active Client Invoice Profile
+              </span>
+              <p className="text-xs font-bold text-slate-705">Client Account: <span className="text-slate-900 font-medium">{customerName}</span></p>
+              <p className="text-xs font-bold text-slate-705">Vehicle Mark: <span className="text-slate-900 font-medium">{customerVehicle || 'N/A'}</span></p>
+              <p className="text-base font-black text-slate-950 font-mono">
+                Amount Due: {settings.currencySymbol} {total.toLocaleString()}
+              </p>
+            </div>
+            <div className="md:col-span-4 flex flex-col justify-center items-center bg-white border border-slate-200 rounded-lg p-3 text-center space-y-1">
+              <span className="text-[9px] text-slate-400 uppercase tracking-widest font-black">Checkout Symbol</span>
+              <span className="text-xl font-bold font-mono text-slate-900">{paymentMethod}</span>
+              <span className="text-[9px] text-slate-500 font-semibold uppercase">Ledger Secured</span>
+            </div>
+          </div>
+          {/* Integration Gateway tabs based on payment method */}
+          <div className="space-y-4">
+            <div className="flex justify-center border-b border-slate-100 pb-2 gap-2 text-xs font-sans">
+              {paymentMethod === 'CARD' && (
+                <button
+                  type="button"
+                  onClick={() => setActiveGateway('Stripe')}
+                  className={`px-3 py-1.5 text-xs font-semibold rounded-md ${activeGateway === 'Stripe' ? 'bg-slate-900 text-white' : 'bg-slate-50 text-slate-600 border border-slate-200'}`}
+                >
+                  Stripe Terminal
+                </button>
+              )}
+              {paymentMethod === 'BANK_TRANSFER' && (
+                <button
+                  type="button"
+                  onClick={() => setActiveGateway('Bank')}
+                  className="px-3 py-1.5 text-xs font-semibold rounded-md bg-slate-900 text-white"
+                >
+                  Bank Direct Wire IBFT
+                </button>
+              )}
+              {paymentMethod === 'MOBILE_WALLET' && (
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setActiveGateway('EasyPaisa')}
+                    className={`px-3 py-1.5 text-xs font-semibold rounded-md ${activeGateway === 'EasyPaisa' ? 'bg-slate-900 text-white' : 'bg-slate-50 text-slate-600 border border-slate-200'}`}
+                  >
+                    EasyPaisa Mini QR
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setActiveGateway('JazzCash')}
+                    className={`px-3 py-1.5 text-xs font-semibold rounded-md ${activeGateway === 'JazzCash' ? 'bg-slate-900 text-white' : 'bg-slate-50 text-slate-600 border border-slate-200'}`}
+                  >
+                    JazzCash Wallet
+                  </button>
+                </div>
+              )}
+            </div>
+            {/* Simulated interactive inputs */}
+            <div className="border border-slate-200 rounded-lg p-5 bg-slate-50 space-y-4 font-sans">
+              {activeGateway === 'Stripe' && (
+                <div className="space-y-3">
+                  <div className="flex items-center gap-1">
+                    <CreditCard className="w-4 h-4 text-slate-800" />
+                    <span className="text-xs font-bold text-slate-700">Stripe Live Credit Card Fields</span>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="space-y-1">
+                      <label className="text-[9px] text-slate-500 font-bold uppercase">Card Number</label>
+                      <input
+                        type="text"
+                        value={ccNumber}
+                        onChange={(e)=>setCcNumber(e.target.value)}
+                        className="w-full text-xs font-mono border border-slate-200 bg-white p-2.5 rounded-md outline-none focus:border-slate-800"
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1">
+                        <label className="text-[9px] text-slate-500 font-bold uppercase">Expiry (MM/YY)</label>
+                        <input
+                          type="text"
+                          value={ccExpiry}
+                          onChange={(e)=>setCcExpiry(e.target.value)}
+                          className="w-full text-xs font-mono border border-slate-200 bg-white p-2.5 rounded-md outline-none focus:border-slate-800"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <label className="text-[9px] text-slate-500 font-bold uppercase">Security Code (CVC)</label>
+                        <input
+                          type="text"
+                          value={ccCvc}
+                          onChange={(e)=>setCcCvc(e.target.value)}
+                          className="w-full text-xs font-mono border border-slate-200 bg-white p-2.5 rounded-md outline-none focus:border-slate-800"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+              {activeGateway === 'Bank' && (
+                <div className="space-y-3">
+                  <div className="flex items-center gap-1.5">
+                    <Printer className="w-4 h-4 text-slate-800" />
+                    <span className="text-xs font-bold text-slate-700">Direct IBFT Clearing Account info</span>
+                  </div>
+                  <div className="p-3 bg-white border border-slate-200 rounded-md space-y-1.5 text-xs text-slate-600">
+                    <div>Bank Name: <strong className="text-slate-800">Meezan Bank Limited</strong></div>
+                    <div>Account Number: <strong className="text-slate-800">0123-0104882103</strong></div>
+                    <div>Title of Account: <strong className="text-slate-800">Haider Brother Traders</strong></div>
+                    <div>Branch Code: <strong className="text-slate-800">0210 Quetta Road</strong></div>
+                  </div>
+                  <p className="text-[9px] text-slate-400 leading-relaxed">
+                    Verify physical receipt of funds within the Meezan bank app. Once cleared, cashier clicks authorize below to log the trace code.
+                  </p>
+                </div>
+              )}
+              {(activeGateway === 'EasyPaisa' || activeGateway === 'JazzCash') && (
+                <div className="space-y-4 flex flex-col md:flex-row items-center gap-6">
+                  {/* Digital QR generation element */}
+                  <div className="w-28 h-28 bg-slate-900 border border-slate-800 rounded-lg flex flex-col items-center justify-center text-white p-2 shrink-0">
+                    <div className="w-20 h-20 bg-white p-1 rounded-sm flex items-center justify-center">
+                      {/* Interactive block representing mobile QR code */}
+                      <div className="w-full h-full bg-slate-900 flex flex-wrap gap-0.5 p-0.5">
+                        {Array.from({ length: 64 }).map((_, idx) => (
+                          <div
+                            key={idx}
+                            className={`w-1.5 h-1.5 ${
+                              (idx + 13) % 3 === 0 || (idx * 7) % 5 === 0 ? 'bg-white' : 'bg-slate-900'
+                            }`}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                    <span className="text-[8px] font-bold tracking-wider mt-1.5 text-slate-450">SCAN MERCHANT QR</span>
+                  </div>
+                  <div className="space-y-2 text-xs flex-1">
+                    <h5 className="font-bold text-slate-800">{activeGateway} Merchant Payment Node</h5>
+                    <p className="text-slate-500 leading-relaxed text-[11px]">
+                      QR code is synchronized with merchant checkout account details. User may scan with EasyPaisa/JazzCash app directly. Alternatively, complete instant prompt authentication.
+                    </p>
+                    <div className="space-y-1">
+                      <label className="text-[9px] text-slate-500 font-bold uppercase">Customer Mobile Wallet Phone</label>
+                      <input
+                        type="text"
+                        placeholder="e.g. 0345-1234567"
+                        defaultValue={customerPhone || "0300-1122334"}
+                        className="w-full text-xs font-mono border border-slate-200 bg-white p-2 rounded-md outline-none focus:border-slate-800"
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+              {/* Security parameters */}
+              <div className="grid grid-cols-2 gap-3 border-t border-slate-200 pt-3">
+                <div className="space-y-1">
+                  <label className="text-[9px] text-slate-500 font-bold uppercase">Assigned Transaction Ref Code</label>
+                  <input
+                    type="text"
+                    value={gatewayAuthId}
+                    onChange={(e)=>setGatewayAuthId(e.target.value)}
+                    className="w-full text-xs font-mono border border-slate-200 bg-white p-1.5 rounded-md outline-none focus:border-slate-800"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <label className="text-[9px] text-slate-500 font-bold uppercase">Enforced Security Layer</label>
+                  <div className="bg-slate-200 text-slate-700 p-2 rounded-lg font-mono text-[10px] font-bold text-center">
+                    AES-SHA256 SECURED
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* Checkout controls */}
+          <div className="flex gap-4">
+            <button
+              type="button"
+              disabled={gatewayProcessing}
+              onClick={() => setGenerationStep('DRAFT')}
+              className="flex-1 py-2 px-4 text-xs font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg transition cursor-pointer"
+            >
+              Cancel Bill Draft
+            </button>
+            <button
+              type="button"
+              disabled={gatewayProcessing || gatewayCompleted}
+              onClick={handleAuthorizeGateway}
+              className={`flex-1 py-2 px-4 text-xs font-bold text-white rounded-lg col-span-2 transition cursor-pointer flex items-center justify-center gap-2 shadow-sm ${
+                gatewayCompleted ? 'bg-emerald-600' :
+                gatewayProcessing ? 'bg-slate-700 cursor-wait' : 'bg-slate-900 hover:bg-slate-850'
+              }`}
+            >
+              {gatewayProcessing ? (
+                <>
+                  <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+                  Authorizing Connection...
+                </>
+              ) : gatewayCompleted ? (
+                <>
+                  <Check className="w-3.5 h-3.5" />
+                  Direct Clearance Secured!
+                </>
+              ) : (
+                'Secure Gateway Clearance'
+              )}
+            </button>
+          </div>
+        </div>
+      )}
+      {/* FINAL STEP: COMPLETED INVOICE PRINTOUT CLIENT VIEW */}
+      {generationStep === 'COMPLETED' && generatedInvoice && (
+        <div className="max-w-4xl mx-auto space-y-6 animate-fade-in" id="printable-receipt-card">
+          <div className="bg-emerald-50 border border-emerald-200 text-emerald-800 p-4 rounded-xl flex items-center justify-between gap-3 text-xs font-sans">
+            <div className="flex items-center gap-2">
+              <CheckCircle className="w-5 h-5 text-emerald-600" />
+              <span>
+                <strong>Invoice generated successfully!</strong> Tire stock levels have been updated in the warehouse. Transaction logs saved in local secure buffer.
+              </span>
+            </div>
+            <button
+              type="button"
+              onClick={() => setGenerationStep('DRAFT')}
+              className="bg-emerald-600 hover:bg-emerald-500 text-white font-bold px-3 py-1 rounded-lg text-xs cursor-pointer transition shadow"
+            >
+              Start New Invoice
+            </button>
+          </div>
+          {/* Deep interactive A4 Printable receipt container */}
+          <div className="bg-white border border-slate-200 rounded-2xl shadow-lg p-6 md:p-10 text-slate-800" id="receipt-print-area">
+            {/* Header info */}
+            <div className="flex flex-col md:flex-row justify-between items-start border-b-2 border-slate-900 pb-6 gap-6">
+              <div className="space-y-1">
+                <span className="text-xs font-black bg-slate-900 text-white px-2.5 py-1 rounded font-sans leading-none uppercase">
+                  Haider Brother Traders
+                </span>
+                <h2 className="text-2xl font-black text-slate-950 uppercase mt-2 tracking-tight">Tire Shop & Auto Vault</h2>
+                <div className="text-xs text-slate-500 max-w-sm space-y-0.5 font-sans">
+                  <p>{settings.shopAddress}</p>
+                  <p>Support phone: {settings.shopPhone}</p>
+                  <p className="italic text-[10px] text-slate-400">Security registration code: NBT-VAT-99201</p>
+                </div>
+              </div>
+              <div className="text-start md:text-right space-y-1 font-mono text-xs text-slate-700">
+                <h4 className="text-lg font-black text-slate-900 font-sans tracking-tight">CLIENT INVOICE RECEIPT</h4>
+                <div><strong>Receipt No:</strong> {generatedInvoice.invoiceNumber}</div>
+                <div><strong>Draft Date:</strong> {generatedInvoice.dateTime}</div>
+                <div><strong>Cashier:</strong> {generatedInvoice.cashierName}</div>
+                <div><strong>Secure Back-Up:</strong> Enforced</div>
+              </div>
+            </div>
+            {/* Customer specs */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 py-6 border-b border-slate-150 text-xs">
+              <div className="space-y-1 font-sans">
+                <span className="text-[10px] text-slate-400 uppercase tracking-wider font-extrabold block">Billed To Client</span>
+                <p className="text-sm font-bold text-slate-900">{generatedInvoice.customerName}</p>
+                <p className="text-slate-500">Phone: {generatedInvoice.customerPhone || 'N/A'}</p>
+              </div>
+              <div className="space-y-1 font-sans">
+                <span className="text-[10px] text-slate-400 uppercase tracking-wider font-extrabold block">Vehicle Registered Profile</span>
+                <p className="text-sm font-bold text-slate-900">{generatedInvoice.customerVehicle || 'N/A'}</p>
+                <p className="text-slate-500">Service: Alignment check-in done</p>
+              </div>
+              <div className="space-y-1 font-sans">
+                <span className="text-[10px] text-slate-400 uppercase tracking-wider font-extrabold block">Payment Authentication</span>
+                <p className="text-sm font-bold text-slate-900 flex items-center gap-1">
+                  <span className="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded uppercase">PAID</span>
+                  <span className="font-mono text-xs">{generatedInvoice.paymentMethod}</span>
+                </p>
+                {generatedInvoice.gatewayInfo && (
+                  <p className="text-[10px] text-slate-500 font-mono">
+                    ID: {generatedInvoice.gatewayInfo.transactionId} ({generatedInvoice.gatewayInfo.gatewayName})
+                  </p>
+                )}
+              </div>
+            </div>
+            {/* Line items table */}
+            <div className="py-6 overflow-x-auto">
+              <table className="w-full text-left border-collapse font-sans text-xs">
+                <thead>
+                  <tr className="border-b border-slate-300">
+                    <th className="py-3 font-semibold text-slate-600 block">Tire Specifications & Profile Model</th>
+                    <th className="py-3 font-semibold text-slate-600 text-center">Quantity</th>
+                    <th className="py-3 font-semibold text-slate-600 text-right">Unit Rate</th>
+                    <th className="py-3 font-semibold text-slate-600 text-right">Net Price</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100">
+                  {generatedInvoice.items.map((item) => (
+                    <tr key={item.id} className="align-middle">
+                      <td className="py-4">
+                        <div className="font-bold text-slate-900">{item.brand} {item.model}</div>
+                        <div className="text-[10px] text-slate-400 font-mono">{item.size} — Premium radial rubber compound</div>
+                      </td>
+                      <td className="py-4 text-center font-bold font-mono">{item.quantity} pcs</td>
+                      <td className="py-4 text-right font-mono">{generatedInvoice.currencySymbol} {item.unitPrice.toLocaleString()}</td>
+                      <td className="py-4 text-right font-bold font-mono">{generatedInvoice.currencySymbol} {item.totalPrice.toLocaleString()}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {/* Summary Block */}
+            <div className="flex flex-col md:flex-row justify-between items-start border-t border-slate-200 pt-6 gap-6 text-xs font-sans">
+              <div className="max-w-sm space-y-1">
+                <span className="font-bold text-slate-700">Client / Warranty Note:</span>
+                <p className="text-slate-500 text-xs italic leading-relaxed">
+                  {generatedInvoice.notes || "All core tires sold include standard road hazard manufacturing coverage. Verify wear markers regularly. Balancing checked and calibrated."}
+                </p>
+              </div>
+              {/* Mathematics table */}
+              <div className="w-full md:w-80 space-y-2 border-slate-150">
+                <div className="flex justify-between text-slate-500">
+                  <span>Cart Subtotal:</span>
+                  <span className="font-mono">{generatedInvoice.currencySymbol} {generatedInvoice.subtotal.toLocaleString()}</span>
+                </div>
+                <div className="flex justify-between text-slate-500">
+                  <span>{settings.taxName} ({generatedInvoice.taxRate}%):</span>
+                  <span className="font-mono">{generatedInvoice.currencySymbol} {generatedInvoice.taxAmount.toLocaleString()}</span>
+                </div>
+                <div className="flex justify-between text-slate-500">
+                  <span>Authorized Discount:</span>
+                  <span className="font-mono text-red-600">-{generatedInvoice.currencySymbol} {generatedInvoice.discount.toLocaleString()}</span>
+                </div>
+                <div className="flex justify-between items-center border-t-2 border-slate-900 pt-2 font-bold text-slate-900">
+                  <span className="text-sm">Paid In Full :</span>
+                  <span className="text-base font-black font-mono">
+                    {generatedInvoice.currencySymbol} {generatedInvoice.total.toLocaleString()}
+                  </span>
+                </div>
+              </div>
+            </div>
+            {/* Print Friendly footer */}
+            <div className="border-t border-dashed border-slate-200 mt-10 pt-6 text-center text-[10px] text-slate-400 font-sans space-y-1">
+              <p>System authenticated and encrypted under primary warehouse inventory block.</p>
+              <p>Thank you for shopping at Haider Brother Traders! Have a safe journey!</p>
+            </div>
+          </div>
+          {/* Action bars */}
+          <div className="flex flex-col sm:flex-row justify-center items-center gap-3">
+            <button
+              onClick={handleManualPrint}
+              className="w-full sm:w-auto bg-slate-900 hover:bg-slate-800 text-white font-bold px-6 py-3.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer transition shadow"
+            >
+              <Printer className="w-4 h-4" />
+              Direct Receipt Print / PDF Export
+            </button>
+            <button
+              onClick={() => exportOfflineHTMLReceipt(generatedInvoice)}
+              className="w-full sm:w-auto bg-blue-600 hover:bg-blue-500 text-white font-bold px-6 py-3.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer transition shadow"
+            >
+              <FileDown className="w-4 h-4" />
+              Download Offline-Ready HTML Bill
+            </button>
+            <button
+              onClick={() => copyShareText(generatedInvoice)}
+              className="w-full sm:w-auto bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold px-6 py-3.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer transition border border-slate-200"
+            >
+              <Share2 className="w-4 h-4" />
+              Copy Social Share Draft
+            </button>
+          </div>
+        </div>
+      )}
+      {/* HISTORICAL INVOICES BROWSER - VISIBLE IF USER REVIEWS PREVIOUS INVOICE */}
+      {selectedInvoiceForView && (
+        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto">
+          <div className="bg-white rounded-2xl max-w-4xl w-full p-6 md:p-8 space-y-6 max-h-[90vh] overflow-y-auto relative shadow-2xl">
+            <button
+              onClick={() => setSelectedInvoiceForView(null)}
+              className="absolute top-4 right-4 bg-slate-100 hover:bg-slate-200 text-slate-600 hover:text-slate-900 font-bold px-3 py-1.5 rounded-lg text-xs cursor-pointer"
+            >
+              Close Ledger View
+            </button>
+            {/* Content Mirror of completed code */}
+            <div className="bg-white p-2">
+              {/* Header info */}
+              <div className="flex flex-col md:flex-row justify-between items-start border-b-2 border-slate-900 pb-6 gap-6">
+                <div>
+                  <span className="text-xs font-bold bg-slate-900 text-white px-2 py-1 rounded">
+                    Haider Brother Traders
+                  </span>
+                  <h3 className="text-xl font-bold uppercase mt-2 text-slate-950">Tire Shop &amp; Auto Vault</h3>
+                  <div className="text-[11px] text-slate-500 mt-1">
+                    <p>{settings.shopAddress}</p>
+                    <p>Phone: {settings.shopPhone}</p>
+                  </div>
+                </div>
+                <div className="text-left md:text-right text-xs font-mono">
+                  <h4 className="text-sm font-bold font-sans">DUPLICATE CUSTOMER RECEIPT</h4>
+                  <div><strong>Invoice No:</strong> {selectedInvoiceForView.invoiceNumber}</div>
+                  <div><strong>Date Filed:</strong> {selectedInvoiceForView.dateTime}</div>
+                  <div><strong>Compiled By:</strong> {selectedInvoiceForView.cashierName}</div>
+                </div>
+              </div>
+              {/* Specs */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 py-4 border-b border-slate-150 text-xs">
+                <div>
+                  <span className="text-[10px] text-slate-400 uppercase font-bold block">Account Client</span>
+                  <p className="font-bold text-slate-900">{selectedInvoiceForView.customerName}</p>
+                  <p className="text-slate-500">{selectedInvoiceForView.customerPhone || 'N/A'}</p>
+                </div>
+                <div>
+                  <span className="text-[10px] text-slate-400 uppercase font-bold block">Vehicle Details</span>
+                  <p className="font-bold text-slate-900">{selectedInvoiceForView.customerVehicle || 'N/A'}</p>
+                  <p className="text-slate-500">Service: Tires Replacement</p>
+                </div>
+                <div>
+                  <span className="text-[10px] text-slate-400 uppercase font-bold block">Receipt Token</span>
+                  <p className="font-bold text-slate-900 flex items-center gap-1">
+                    <span className="bg-emerald-100 text-emerald-800 text-[10px] px-1.5 py-0.5 rounded">PAID</span>
+                    <span className="font-mono text-xs">{selectedInvoiceForView.paymentMethod}</span>
+                  </p>
+                  {selectedInvoiceForView.gatewayInfo && (
+                    <p className="text-[10px] text-slate-500 font-mono">
+                      Ref: {selectedInvoiceForView.gatewayInfo.transactionId}
+                    </p>
+                  )}
+                </div>
+              </div>
+              {/* Items List */}
+              <div className="py-4">
+                <table className="w-full text-left text-xs font-sans">
+                  <thead>
+                    <tr className="border-b border-slate-200">
+                      <th className="py-2 text-slate-500 font-bold block">Tire Brand & Size Specs</th>
+                      <th className="py-2 text-slate-500 font-bold text-center">Qty</th>
+                      <th className="py-2 text-slate-500 font-bold text-right">Rate</th>
+                      <th className="py-2 text-slate-500 font-bold text-right">Amount</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {selectedInvoiceForView.items.map((item) => (
+                      <tr key={item.id}>
+                        <td className="py-3">
+                          <div className="font-semibold text-slate-900">{item.brand} {item.model}</div>
+                          <div className="text-[10px] text-slate-400 font-mono">{item.size}</div>
+                        </td>
+                        <td className="py-3 text-center font-bold font-mono">{item.quantity}</td>
+                        <td className="py-3 text-right font-mono">{selectedInvoiceForView.currencySymbol}{item.unitPrice.toLocaleString()}</td>
+                        <td className="py-3 text-right font-bold font-mono">{selectedInvoiceForView.currencySymbol}{item.totalPrice.toLocaleString()}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {/* Total calculations */}
+              <div className="flex flex-col sm:flex-row justify-between items-start border-t border-slate-200 pt-4 gap-4 text-xs font-sans">
+                <div className="max-w-xs text-slate-400 italic text-[10px]">
+                  Notes: {selectedInvoiceForView.notes || "All tires sold are certified under factory DOT guidelines. Alignment calibrated."}
+                </div>
+                <div className="w-full sm:w-64 space-y-1.5 text-right ml-auto">
+                  <div className="flex justify-between text-slate-500">
+                    <span>Subtotal:</span>
+                    <span>{selectedInvoiceForView.currencySymbol} {selectedInvoiceForView.subtotal.toLocaleString()}</span>
+                  </div>
+                  <div className="flex justify-between text-slate-500">
+                    <span>{settings.taxName} ({selectedInvoiceForView.taxRate}%):</span>
+                    <span>{selectedInvoiceForView.currencySymbol} {selectedInvoiceForView.taxAmount.toLocaleString()}</span>
+                  </div>
+                  <div className="flex justify-between text-slate-500">
+                    <span>Discount applied:</span>
+                    <span className="text-red-600">-{selectedInvoiceForView.currencySymbol} {selectedInvoiceForView.discount.toLocaleString()}</span>
+                  </div>
+                  <div className="flex justify-between items-center border-t border-slate-900 pt-1.5 font-bold text-slate-900">
+                    <span>Paid Total:</span>
+                    <span className="text-sm font-black font-mono">
+                      {selectedInvoiceForView.currencySymbol} {selectedInvoiceForView.total.toLocaleString()}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* Floating duplicate panel actions */}
+            <div className="flex gap-3 justify-center pt-2">
+              <button
+                onClick={handleManualPrint}
+                className="bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold px-4 py-2 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer"
+              >
+                <Printer className="w-3.5 h-3.5" />
+                Print Duplicate
+              </button>
+              <button
+                onClick={() => exportOfflineHTMLReceipt(selectedInvoiceForView)}
+                className="bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold px-4 py-2 rounded-xl flex items-center justify-center gap-1.5 cursor-pointer"
+              >
+                <Download className="w-3.5 h-3.5" />
+                Save File Block
+              </button>
+              <button
+                onClick={() => copyShareText(selectedInvoiceForView)}
+                className="bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold px-4 py-2 rounded-xl border border-slate-200"
+              >
+                Copy text share
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Settings.tsx ADDED Viewed

	@@ -0,0 +1,490 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { useState } from 'react';
+import { motion } from 'motion/react';
+import {
+  Settings,
+  Database,
+  Cloud,
+  Upload,
+  Download,
+  Check,
+  AlertCircle,
+  Lock,
+  Wifi,
+  WifiOff,
+  RefreshCw,
+  Coins,
+  Receipt,
+  RotateCcw
+} from 'lucide-react';
+import { SystemSettings } from '../types';
+import { encryptData, decryptData } from '../utils/backup';
+interface SettingsProps {
+  settings: SystemSettings;
+  isOnline: boolean;
+  onUpdateSettings: (settings: SystemSettings) => void;
+  onToggleOnlineMode: () => void;
+  onRestoreDatabase: (restoredData: {
+    settings: SystemSettings;
+    products: any[];
+    invoices: any[];
+    history: any[];
+    staff: any[];
+  }) => void;
+  onClearCacheToDefault: () => void;
+  // Passing actual values for backup compilation
+  activeProducts: any[];
+  activeInvoices: any[];
+  activeHistory: any[];
+  activeStaff: any[];
+}
+export default function SettingsComponent({
+  settings,
+  isOnline,
+  onUpdateSettings,
+  onToggleOnlineMode,
+  onRestoreDatabase,
+  onClearCacheToDefault,
+  activeProducts,
+  activeInvoices,
+  activeHistory,
+  activeStaff
+}: SettingsProps) {
+  // Input states
+  const [shopName, setShopName] = useState(settings.shopName);
+  const [shopAddress, setShopAddress] = useState(settings.shopAddress);
+  const [shopPhone, setShopPhone] = useState(settings.shopPhone);
+  const [taxName, setTaxName] = useState(settings.taxName);
+  const [taxRate, setTaxRate] = useState(settings.taxRate);
+  const [currencyCode, setCurrencyCode] = useState(settings.currencyCode);
+  const [currencySymbol, setCurrencySymbol] = useState(settings.currencySymbol);
+  // Backup vault password block
+  const [vaultPassword, setVaultPassword] = useState('haider_secret_2026');
+  const [uploadedCipherString, setUploadedCipherString] = useState('');
+  const [backupLogs, setBackupLogs] = useState<string[]>(["Secure Vault active. Ready for ledger encryption."]);
+  const [syncingCloud, setSyncingCloud] = useState(false);
+  const handleSaveSettingsSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!shopName.trim() || !shopAddress.trim()) {
+      alert("Corporate name and address parameters are required.");
+      return;
+    }
+    onUpdateSettings({
+      shopName: shopName.trim(),
+      shopAddress: shopAddress.trim(),
+      shopPhone: shopPhone.trim(),
+      taxName: taxName.trim(),
+      taxRate: Math.max(0, parseFloat(taxRate.toString()) || 0),
+      currencyCode: currencyCode.trim(),
+      currencySymbol: currencySymbol.trim()
+    });
+    alert("Corporate shop parameters synced across live terminal databases.");
+  };
+  // Compile full database and export as locally encrypted block file (.hbtback)
+  const compileAndDownloadBackup = () => {
+    try {
+      const fullPackage = {
+        meta: {
+          timestamp: new Date().toISOString(),
+          version: "HBT-VAULT-2.0.0",
+          author: "Haider Brother Traders"
+        },
+        settings,
+        products: activeProducts,
+        invoices: activeInvoices,
+        history: activeHistory,
+        staff: activeStaff
+      };
+      const plainText = JSON.stringify(fullPackage);
+      const encrypted = encryptData(plainText, vaultPassword);
+      // Create download elements
+      const blob = new Blob([encrypted], { type: 'text/plain;charset=utf-8' });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      const dateStr = new Date().toISOString().split('T')[0];
+      link.download = `HBT_Vault_Backup_${dateStr}.hbtback`;
+      link.click();
+      setBackupLogs(prev => [
+        `[${new Date().toLocaleTimeString()}] Secure Backup compiled: Encrypted ${activeInvoices.length} transactions and ${activeProducts.length} tire SKUs.`,
+        ...prev
+      ]);
+      alert("Ledger Vault encrypted file downloaded to client machine successfully!");
+    } catch (err: any) {
+      alert("Encryption failure: " + err.message);
+    }
+  };
+  // Read decrypted cipher files and trigger restore
+  const handleUploadAndRestore = (fileContent: string) => {
+    if (!fileContent.trim()) {
+      alert("File is empty. Select a valid .hbtback backup.");
+      return;
+    }
+    try {
+      const plainText = decryptData(fileContent, vaultPassword);
+      const decoded = JSON.parse(plainText);
+      // Simple schema structure audit
+      if (!decoded.settings || !decoded.products || !decoded.invoices || !decoded.history || !decoded.staff) {
+        throw new Error("Target file has correct password but missing necessary entity logs.");
+      }
+      onRestoreDatabase({
+        settings: decoded.settings,
+        products: decoded.products,
+        invoices: decoded.invoices,
+        history: decoded.history,
+        staff: decoded.staff
+      });
+      // Update local values instantly
+      setShopName(decoded.settings.shopName);
+      setShopAddress(decoded.settings.shopAddress);
+      setShopPhone(decoded.settings.shopPhone);
+      setTaxName(decoded.settings.taxName);
+      setTaxRate(decoded.settings.taxRate);
+      setCurrencyCode(decoded.settings.currencyCode);
+      setCurrencySymbol(decoded.settings.currencySymbol);
+      setBackupLogs(prev => [
+        `[${new Date().toLocaleTimeString()}] Restore complete: Imported ${decoded.invoices.length} invoices, ${decoded.products.length} tires and verified cashier registers.`,
+        ...prev
+      ]);
+      alert("Encrypted vault records imported and restored successfully!");
+    } catch (err: any) {
+      alert("Restoration Blocked! Error: " + err.message);
+    }
+  };
+  // Drag and drop file reader
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const txt = event.target?.result as string;
+      handleUploadAndRestore(txt);
+    };
+    reader.readAsText(file);
+  };
+  // Cloud Backups sync mock log
+  const handleCloudSyncTrigger = () => {
+    setSyncingCloud(true);
+    setBackupLogs(prev => [`[${new Date().toLocaleTimeString()}] Securing cloud payload connection to Google Cloud Run servers...`, ...prev]);
+    setTimeout(() => {
+      setSyncingCloud(false);
+      setBackupLogs(prev => [
+        `[${new Date().toLocaleTimeString()}] Cloud backup synced! Encrypted cache saved under vault block. Transaction status: EXCELLENT.`,
+        ...prev
+      ]);
+      alert("Cloud Backup Synced! All sensitive business records securely logged to secondary vault storage.");
+    }, 1500);
+  };
+  const handleResetConfirm = () => {
+    if (confirm("Are you absolutely sure you want to restore the entire tire shop back to default factory parameters? This deletes custom added items, current stock manual adjustments, and any newly compiled invoice draft data.")) {
+      onClearCacheToDefault();
+      window.location.reload();
+    }
+  };
+  // Quick Currency Preset selection
+  const selectCurrencyPreset = (code: string, symbol: string) => {
+    setCurrencyCode(code);
+    setCurrencySymbol(symbol);
+  };
+  return (
+    <div className="space-y-6" id="terminal-settings-layout">
+      {/* Splits layout settings versus encrypted backups */}
+      <div className="grid grid-cols-1 xl:grid-cols-12 gap-6">
+        {/* LEFT COLUMN: Corporate & System settings */}
+        <div className="xl:col-span-7 bg-white border border-slate-200 rounded-xl p-5 shadow-sm space-y-6">
+          <div className="flex items-center gap-2 border-b border-slate-100 pb-4 uppercase">
+            <Settings className="w-5 h-5 text-slate-700 animate-spin" style={{ animationDuration: '6s' }} />
+            <span className="text-xs font-bold text-slate-900">Corporate Terminal Configurations</span>
+          </div>
+          <form onSubmit={handleSaveSettingsSubmit} className="space-y-4 text-xs font-sans">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-1">
+                <label className="text-[10px] text-slate-500 font-bold uppercase">Corporate Shop Name</label>
+                <input
+                  type="text"
+                  value={shopName}
+                  onChange={(e)=>setShopName(e.target.value)}
+                  className="w-full border border-slate-200 bg-white outline-none focus:border-slate-800 rounded-lg p-2.5 font-semibold transition"
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-[10px] text-slate-500 font-bold uppercase">Shop Phone Helpline</label>
+                <input
+                  type="text"
+                  value={shopPhone}
+                  onChange={(e)=>setShopPhone(e.target.value)}
+                  className="w-full border border-slate-200 bg-white outline-none focus:border-slate-800 rounded-lg p-2.5 font-semibold transition"
+                />
+              </div>
+            </div>
+            <div className="space-y-1">
+              <label className="text-[10px] text-slate-500 font-bold uppercase">Physical Address Coordinates</label>
+              <input
+                type="text"
+                value={shopAddress}
+                onChange={(e)=>setShopAddress(e.target.value)}
+                className="w-full border border-slate-200 bg-white outline-none focus:border-slate-800 rounded-lg p-2.5 font-semibold transition"
+              />
+            </div>
+            {/* CURRENCY INTEGRATION CHANGER */}
+            <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-bold text-slate-850 flex items-center gap-1">
+                  <Coins className="w-4 h-4 text-slate-700" />
+                  Local Currency Integration
+                </span>
+                <span className="text-[10px] bg-slate-950 text-white font-mono font-medium px-2 py-0.5 rounded-md">
+                  Active Preset: {currencyCode} ({currencySymbol})
+                </span>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                <div className="space-y-1">
+                  <label className="text-[9px] text-slate-400 font-bold uppercase">Currency Symbol</label>
+                  <input
+                    type="text"
+                    value={currencySymbol}
+                    placeholder="e.g. ₨"
+                    onChange={(e)=>setCurrencySymbol(e.target.value)}
+                    className="w-full border border-slate-200 bg-white outline-none focus:border-slate-800 rounded-lg p-2 font-mono text-center font-bold"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <label className="text-[9px] text-slate-400 font-bold uppercase">Currency Code</label>
+                  <input
+                    type="text"
+                    value={currencyCode}
+                    placeholder="e.g. PKR"
+                    onChange={(e)=>setCurrencyCode(e.target.value)}
+                    className="w-full border border-slate-200 bg-white outline-none focus:border-slate-800 rounded-lg p-2 font-mono text-center font-bold"
+                  />
+                </div>
+                {/* Instant Presets */}
+                <div className="space-y-1 flex flex-col justify-end">
+                  <label className="text-[9px] text-slate-400 font-bold uppercase leading-none block mb-1">Fast Symbol Presets</label>
+                  <div className="flex gap-1 justify-between font-mono font-semibold">
+                    <button
+                      type="button"
+                      onClick={() => selectCurrencyPreset('PKR', '₨')}
+                      className="px-2 py-1.5 border border-slate-200 bg-white hover:bg-slate-50 text-[10px] rounded-md flex-1 cursor-pointer"
+                    >
+                      ₨ PKR
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => selectCurrencyPreset('USD', '$')}
+                      className="px-2 py-1.5 border border-slate-200 bg-white hover:bg-slate-50 text-[10px] rounded-md flex-1 cursor-pointer"
+                    >
+                      $ USD
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => selectCurrencyPreset('AED', 'د.إ')}
+                      className="px-2 py-1.5 border border-slate-200 bg-white hover:bg-slate-50 text-[10px] rounded-md flex-1 cursor-pointer"
+                    >
+                      د.إ AED
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* TAX COMPILATION STRUCTURE */}
+            <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg space-y-3">
+              <div className="flex items-center gap-1.5 text-xs font-bold text-slate-850">
+                <Receipt className="w-4 h-4 text-slate-700 font-medium" />
+                Automated Tax Calculation Engine
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <label className="text-[9px] text-slate-400 font-bold uppercase">Tax Designation Name</label>
+                  <input
+                    type="text"
+                    value={taxName}
+                    placeholder="e.g. Sales Tax (SRB)"
+                    onChange={(e)=>setTaxName(e.target.value)}
+                    className="w-full border border-slate-200 bg-white outline-none focus:border-slate-800 rounded-lg p-2"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <label className="text-[9px] text-slate-400 font-bold uppercase">Combined Tax Rate (%)</label>
+                  <input
+                    type="number"
+                    step="0.1"
+                    min="0"
+                    max="90"
+                    value={taxRate}
+                    onChange={(e)=>setTaxRate(Math.min(90, Math.max(0, parseFloat(e.target.value) || 0)))}
+                    className="w-full border border-slate-200 bg-white outline-none focus:border-slate-800 rounded-lg p-2 font-mono font-bold"
+                  />
+                </div>
+              </div>
+              <p className="text-[10px] text-slate-400 leading-normal italic">
+                * When set, invoice generator computes total by multiplying subtotal against rating index, subtracting items discounts instantly.
+              </p>
+            </div>
+            {/* OFFLINE MANAGE STATE */}
+            <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg flex items-center justify-between gap-4">
+              <div className="space-y-1">
+                <span className="text-xs font-bold text-slate-850 flex items-center gap-1">
+                  {isOnline ? <Wifi className="w-4 h-4 text-emerald-600 animate-pulse" /> : <WifiOff className="w-4 h-4 text-orange-655" />}
+                  Offline Mode Simulator
+                </span>
+                <p className="text-[10px] text-slate-400 leading-normal">
+                  Turn offline mode on/off to test local caching queue and receipt buffer logs.
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={onToggleOnlineMode}
+                className={`text-xs font-semibold px-3.5 py-2.5 rounded-lg border transition shadow-sm cursor-pointer ${
+                  isOnline
+                    ? 'bg-slate-900 border-transparent text-white hover:bg-slate-800'
+                    : 'bg-orange-600 border-transparent text-white hover:bg-orange-550'
+                }`}
+              >
+                {isOnline ? "Simulate Disconnection" : "Connect Online Mode"}
+              </button>
+            </div>
+            <div className="flex gap-4">
+              <button
+                type="button"
+                onClick={handleResetConfirm}
+                className="bg-slate-50 hover:bg-slate-100 text-red-650 hover:text-red-750 font-medium border border-slate-200 px-4 py-2.5 rounded-lg transition cursor-pointer flex items-center gap-1.5 shadow-sm"
+              >
+                <RotateCcw className="w-4 h-4" />
+                Wipe Local Database
+              </button>
+              <button
+                type="submit"
+                className="flex-1 bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs px-6 py-2.5 rounded-lg transition cursor-pointer shadow flex items-center justify-center gap-2"
+              >
+                <Check className="w-4 h-4" />
+                Commit Corporate Settings
+              </button>
+            </div>
+          </form>
+        </div>
+        {/* RIGHT COLUMN: Encrypted Cloud Backups */}
+        <div className="xl:col-span-5 bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex flex-col justify-between">
+          <div className="space-y-5">
+            <div className="flex items-center gap-2 border-b border-slate-100 pb-4 uppercase">
+              <Database className="w-4.5 h-4.5 text-slate-800 font-bold" />
+              <span className="text-xs font-bold text-slate-900">Encrypted Backups Vault</span>
+            </div>
+            {/* Explainer warning */}
+            <div className="bg-slate-50 border border-slate-200 p-4 rounded-lg space-y-1.5 text-xs text-slate-500">
+              <span className="font-extrabold text-slate-800 flex items-center gap-1 uppercase tracking-wider text-[10px]">
+                <Lock className="w-3.5 h-3.5 text-slate-705" />
+                End-To-End Security Enforced
+              </span>
+              <p className="leading-relaxed text-[11px] text-slate-400">
+                Under air-gapped terminal paradigms, Haider Brother Traders database is encrypted using rot-salt character ciphers with customized credentials keyframes. Passwords block third-party parsing.
+              </p>
+            </div>
+            <div className="space-y-3 font-sans text-xs">
+              <div className="space-y-1">
+                <label className="text-[10px] text-slate-500 font-bold uppercase block text-center">Master Encryption Key / Cipher password</label>
+                <input
+                  type="password"
+                  value={vaultPassword}
+                  onChange={(e) => setVaultPassword(e.target.value)}
+                  className="w-full border border-slate-200 bg-white p-2.5 font-mono text-slate-800 rounded-lg outline-none focus:border-slate-800 shadow-sm text-center tracking-widest text-sm"
+                />
+              </div>
+              {/* Action buttons */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <button
+                  type="button"
+                  onClick={compileAndDownloadBackup}
+                  className="bg-slate-900 hover:bg-slate-800 text-white text-xs font-medium py-2.5 px-3 rounded-lg flex items-center justify-center gap-1.5 shadow-sm transition cursor-pointer"
+                >
+                  <Download className="w-4 h-4" />
+                  Save Secure Backup File
+                </button>
+                {/* Simulated live cloud database upload sync */}
+                <button
+                  type="button"
+                  disabled={syncingCloud}
+                  onClick={handleCloudSyncTrigger}
+                  className="bg-white hover:bg-slate-100 text-slate-800 border border-slate-200 text-xs font-medium py-2.5 px-3 rounded-lg flex items-center justify-center gap-1.5 shadow-sm transition cursor-pointer"
+                >
+                  <Cloud className="w-4 h-4 text-slate-755" />
+                  {syncingCloud ? "Uploading cipher..." : "Syndicate Cloud Backup"}
+                </button>
+              </div>
+              {/* Restore drag files */}
+              <div className="space-y-1 pt-2">
+                <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Import &amp; Restore Encrypted hbtback file</label>
+                <div className="border border-dashed border-slate-200 rounded-lg p-4 text-center hover:bg-slate-50 bg-slate-50/50 transition relative flex flex-col items-center justify-center gap-2">
+                  <Upload className="w-5 h-5 text-slate-400 font-light" />
+                  <span className="text-[10px] text-slate-400">Drag or select a certified (.hbtback) document</span>
+                  <input
+                    type="file"
+                    accept=".hbtback,.txt"
+                    onChange={handleFileSelect}
+                    className="absolute inset-0 opacity-0 cursor-pointer"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* Secure cryptographic logs console view */}
+          <div className="space-y-2 mt-6">
+            <span className="text-[10px] text-slate-500 font-bold uppercase tracking-wider block">Cryptographic Secure Actions Telemetry</span>
+            <div className="bg-slate-900 text-emerald-400 font-mono text-[10px] p-4 rounded-lg max-h-40 overflow-y-auto pr-1 leading-relaxed border border-slate-850 shadow-inner">
+              {backupLogs.map((log, i) => (
+                <div key={i} className="pb-1 border-b border-white/5 last:border-0">{log}</div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/SocialPromoter.tsx ADDED Viewed

	@@ -0,0 +1,408 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { useState, useMemo } from 'react';
+import { motion } from 'motion/react';
+import {
+  Megaphone,
+  Share2,
+  Copy,
+  Check,
+  Download,
+  MessageSquare,
+  Sparkles,
+  ChevronRight,
+  FileImage,
+  Tag,
+  Percent,
+  Search
+} from 'lucide-react';
+import { TireProduct, SystemSettings } from '../types';
+interface SocialPromoterProps {
+  products: TireProduct[];
+  settings: SystemSettings;
+}
+export default function SocialPromoter({ products, settings }: SocialPromoterProps) {
+  const [selectedProdId, setSelectedProdId] = useState<string>(products[0]?.id || '');
+  const [marketingTopic, setMarketingTopic] = useState<'DISCOUNT' | 'SAFETY' | 'WINTER' | 'PERFORMANCE'>('DISCOUNT');
+  const [promoCode, setPromoCode] = useState('HAIDER_TREATS_26');
+  const [customDiscountPercent, setCustomDiscountPercent] = useState(10);
+  const [copied, setCopied] = useState(false);
+  const [promSearch, setPromSearch] = useState('');
+  const selectedProduct = useMemo(() => {
+    return products.find(p => p.id === selectedProdId) || products[0] || null;
+  }, [products, selectedProdId]);
+  // Dynamic search list
+  const filteredProducts = useMemo(() => {
+    return products.filter(p =>
+      p.brand.toLowerCase().includes(promSearch.toLowerCase()) ||
+      p.model.toLowerCase().includes(promSearch.toLowerCase()) ||
+      p.size.toLowerCase().includes(promSearch.toLowerCase())
+    );
+  }, [products, promSearch]);
+  // Math calculated prices
+  const promoPrice = useMemo(() => {
+    if (!selectedProduct) return 0;
+    const computed = selectedProduct.price * (1 - (customDiscountPercent / 100));
+    return Math.round(computed);
+  }, [selectedProduct, customDiscountPercent]);
+  // High conversion copy algorithms based on topic
+  const promoCopyText = useMemo(() => {
+    if (!selectedProduct) return '';
+    const brand = selectedProduct.brand.toUpperCase();
+    const model = selectedProduct.model;
+    const size = selectedProduct.size;
+    const oldPriceStr = `${settings.currencySymbol}${selectedProduct.price.toLocaleString()}`;
+    const newPriceStr = `${settings.currencySymbol}${promoPrice.toLocaleString()}`;
+    switch(marketingTopic) {
+      case 'DISCOUNT':
+        return `🔥 *MEGA TIRE DEAL AT HAIDER BROTHER TRADERS* 🔥\n\nUpgrade your ride with premium *${brand} ${model}* tires today! Under our limited-time warehouse clearance festival, enjoy unprecedented markdowns!\n\n🛞 *Profile Specs:* ${size}\n💰 *Regular MSRP:* ~${oldPriceStr}~\n📉 *Promotional rate:* *${newPriceStr}* (SAVE ${customDiscountPercent}%!)\n🎟️ *Use checkout token:* \`${promoCode}\` for free nitrogen fill!\n\n🏢 *Branch Address:* ${settings.shopAddress}\n📞 *Order Line Call/WhatsApp:* ${settings.shopPhone}\n\n_Drive safe, drive on certified treads! #HaiderBrotherTraders #PremiumTyreClearance #SafeJourneys_`;
+      case 'SAFETY':
+        return `🌧️ *MONSOON ROAD SAFETY INITIATIVE — HAIDER BROTHERS* 🌧️\n\nDid you inspect your tire tread lines recently? Worn tire grooves are highly dangerous under wet road conditions!\n\nEquip your vehicle with fresh high-traction *${brand} ${model}* SUV/Passenger radial tires today. Maximum hydroplaning resistance:\n\n🛞 *Specs Size:* ${size}\n⚡ *Active Grips Price:* *${newPriceStr}* per piece (includes balancing check!)\n🎖️ *Features:* Steel Belted, Deep wet-road grip grooves.\n\n🏢 *Stop By:* ${settings.shopAddress}\n✨ *Hotline:* ${settings.shopPhone}\n\n_Protect your family. Invest in solid road friction! #TyreSafetyCheck #HaiderTradersQuetta_`;
+      case 'WINTER':
+        return `❄️ *AGGRESSIVE TERRAIN GRIP SPECIALISTS* ❄️\n\nConquer unpredictable paths and mountain highways with rugged All-Terrain *${brand} ${model}* treads!\n\nEngineered to withstand extreme temperature ranges and gravel trails:\n\n🛞 *Tire profile size:* ${size}\n💰 *Promo cost:* *${newPriceStr}* (Original MSRP: ~${oldPriceStr}~)\n🚜 *Ideal for:* SUV Crossovers, Light Freight rigs, and heavy loading.\n\n🏢 *Stop by our Auto Vault:* ${settings.shopAddress}\n📞 *Call for booking advice:* ${settings.shopPhone}\n\n_No territory is too hard. Travel fearlessly! #TerrainMastery #SailunTerramax #BridgestonePak #HaiderBrothers_`;
+      case 'PERFORMANCE':
+        return `🏎️ *ELITE RACING COMPOUND HANDLINGS — HIGH PERFORMANCE* 🏎️\n\nUnleash extreme tarmac performance and responsive steering control with premium racing radial *${brand} ${model}*!\n\nEngineered by Yokohama/Bridgestone for high cornering friction matrices:\n\n🛞 *Dimension size:* ${size}\n🏁 *Precision Rate:* *${newPriceStr}* (Limited retail sets available!)\n🛠️ *Complimentary layout:* Balancing, high-durability valves and nitrogen check done on spot.\n\n📞 *Reserve yours now:* ${settings.shopPhone}\n🏢 *Haider Brother Traders* — Quetta's No. 1 premium hub.\n\n_Upgrade handling, transform high-speed braking thresholds! #AdvanComfort #YokohamaDB #PremiumRadials_`;
+    }
+  }, [selectedProduct, marketingTopic, promoPrice, customDiscountPercent, promoCode, settings]);
+  const handleCopyClipboard = () => {
+    navigator.clipboard.writeText(promoCopyText);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  const shareWhatsApp = () => {
+    const encoded = encodeURIComponent(promoCopyText);
+    window.open(`https://api.whatsapp.com/send?text=${encoded}`, '_blank');
+  };
+  const shareFacebook = () => {
+    const link = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent("https://haidertraders.com");
+    window.open(link, '_blank');
+  };
+  // Compile a highly polished self-contained single-flyer visual page HTML and download it!
+  const downloadFlyerHTML = () => {
+    if (!selectedProduct) return;
+    // Theme colors predicated on campaign topic
+    let gradient = "linear-gradient(135deg, #1e3a8a, #0f172a)"; // blue
+    if (marketingTopic === 'SAFETY') gradient = "linear-gradient(135deg, #0f766e, #0f172a)"; // teal
+    if (marketingTopic === 'WINTER') gradient = "linear-gradient(135deg, #4338ca, #111827)"; // dark indigo
+    if (marketingTopic === 'PERFORMANCE') gradient = "linear-gradient(135deg, #b91c1c, #0f172a)"; // red
+    const flyerHTML = `
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <title>Marketing Poster - ${selectedProduct.brand}</title>
+        <style>
+          body { margin: 0; padding: 0; background-color: #f1f5f9; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: system-ui, sans-serif; }
+          .poster { width: 500px; height: 600px; background: ${gradient}; color: #fff; border-radius: 20px; overflow: hidden; padding: 40px; display: flex; flex-col; justify-content: space-between; box-sizing: border-box; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
+          .badge { background: #e11d48; color: white; display: inline-block; padding: 6px 15px; border-radius: 99px; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
+          .title { font-size: 36px; font-weight: 900; line-height: 1.1; text-transform: uppercase; margin-top: 10px; }
+          .sub { font-size: 16px; opacity: 0.8; margin-top: 5px; }
+          .size { font-family: monospace; font-size: 24px; color: #60a5fa; font-weight: bold; border-left: 4px solid #60a5fa; padding-left: 10px; margin: 25px 0; }
+          .description { font-size: 13px; opacity: 0.7; max-width: 80%; line-height: 1.5; }
+          .pricing { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
+          .old-price { font-size: 14px; opacity: 0.5; text-decoration: line-through; }
+          .new-price { font-size: 32px; font-weight: 900; color: #4ade80; font-family:-apple-system, sans-serif; }
+          .footer { font-size: 11px; opacity: 0.6; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; display: flex; justify-content: space-between; }
+        </style>
+      </head>
+      <body>
+        <div class="poster">
+          <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
+            <div>
+              <span class="badge">${marketingTopic} SPECIAL</span>
+              <div class="title">${selectedProduct.brand}<br/><span style="color:#fcd34d">${selectedProduct.model}</span></div>
+              <div class="sub">Haider Brother Traders Premium Radial</div>
+              <div class="size">${selectedProduct.size}</div>
+              <p class="description">${selectedProduct.description || "Incomparably robust tread design built for extreme wear and wet grip."}</p>
+            </div>
+            <div style="margin-top:auto; display:flex; flex-direction:column; gap:20px;">
+              <div class="pricing">
+                <div>
+                  <div class="old-price">MSRP: ${settings.currencySymbol}${selectedProduct.price.toLocaleString()}</div>
+                  <div style="font-size:11px; opacity:0.8; font-weight:700;">PROMO DEAL</div>
+                </div>
+                <div class="new-price">${settings.currencySymbol}${promoPrice.toLocaleString()}</div>
+              </div>
+              <div class="footer">
+                <div>🏢 Showroom: Main Chaman Road, Quetta</div>
+                <div>📞 Call/WA: ${settings.shopPhone}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </body>
+      </html>
+    `;
+    const blob = new Blob([flyerHTML], { type: 'text/html' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = `Promo flyer_${selectedProduct.brand}_${selectedProduct.model}.html`;
+    link.click();
+  };
+  return (
+    <div className="space-y-6 animate-fade-in" id="social-integration-cockpit">
+      {/* Mega header explaining direct shares */}
+      <div className="bg-white border border-slate-200 rounded-xl p-5 md:p-6 text-slate-950 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 shadow-sm">
+        <div className="space-y-1.5 max-w-xl">
+          <div className="bg-slate-150 text-slate-700 text-[10px] font-bold px-2.5 py-0.5 rounded-md border border-slate-200/30 w-fit uppercase">
+            🚀 SOCIAL PROMOTION MULTIPLIER
+          </div>
+          <h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Social Marketing Campaign Wizard</h2>
+          <p className="text-slate-400 text-xs md:text-sm">
+            Generate high-converting ads and social outreach posts directly from live stock indices to WhatsApp, FB, and downloadable digital pamphlets.
+          </p>
+        </div>
+        <div className="p-3 bg-slate-50 border border-slate-250/60 rounded-xl text-slate-850 self-center">
+          <Megaphone className="w-6 h-6" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 xl:grid-cols-12 gap-6">
+        {/* LEFT COLUMN: Setup flyer parameters */}
+        <div className="xl:col-span-4 bg-white border border-slate-200 rounded-xl p-5 shadow-sm space-y-5">
+          <div className="flex items-center gap-1.5 pb-3 border-b border-slate-100 uppercase">
+            <Sparkles className="w-4 h-4 text-slate-700" />
+            <span className="text-xs font-bold text-slate-900">Campaign Parameters</span>
+          </div>
+          {/* Search match */}
+          <div className="space-y-1">
+            <label className="text-[10px] text-slate-500 font-bold uppercase">1. Search & Select Tire Product</label>
+            <div className="relative mb-2">
+              <span className="absolute left-2.5 top-2.5 text-slate-400">
+                <Search className="w-3.5 h-3.5" />
+              </span>
+              <input
+                type="text"
+                placeholder="Search warehouse tires..."
+                value={promSearch}
+                onChange={(e) => setPromSearch(e.target.value)}
+                className="w-full text-xs border border-slate-200 p-2 pl-8 rounded-lg outline-none focus:border-slate-800 bg-white transition"
+              />
+            </div>
+            <select
+              value={selectedProdId}
+              onChange={(e) => setSelectedProdId(e.target.value)}
+              className="w-full text-xs font-sans border border-slate-200 bg-white px-3 py-2 rounded-lg outline-none focus:border-slate-800 transition"
+            >
+              {filteredProducts.map(p => (
+                <option key={p.id} value={p.id}>
+                  {p.brand} {p.model} ({p.size}) — {settings.currencySymbol}{p.price.toLocaleString()}
+                </option>
+              ))}
+            </select>
+          </div>
+          {/* Marketing Theme Selection */}
+          <div className="space-y-1">
+            <label className="text-[10px] text-slate-500 font-bold uppercase">2. Select Campaign Vibe</label>
+            <div className="grid grid-cols-2 gap-2 text-xs font-sans">
+              <button
+                onClick={() => setMarketingTopic('DISCOUNT')}
+                className={`p-2 border rounded-lg transition text-left cursor-pointer font-bold ${marketingTopic === 'DISCOUNT' ? 'bg-slate-900 text-white shadow' : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border-slate-200'}`}
+              >
+                🔥 MEGA Clearance
+              </button>
+              <button
+                onClick={() => setMarketingTopic('SAFETY')}
+                className={`p-2 border rounded-lg transition text-left cursor-pointer font-bold ${marketingTopic === 'SAFETY' ? 'bg-slate-900 text-white shadow' : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border-slate-200'}`}
+              >
+                💧 Wet-Road Safety
+              </button>
+              <button
+                onClick={() => setMarketingTopic('WINTER')}
+                className={`p-2 border rounded-lg transition text-left cursor-pointer font-bold ${marketingTopic === 'WINTER' ? 'bg-slate-900 text-white shadow' : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border-slate-200'}`}
+              >
+                ❄️ All-Terrain Grip
+              </button>
+              <button
+                onClick={() => setMarketingTopic('PERFORMANCE')}
+                className={`p-2 border rounded-lg transition text-left cursor-pointer font-bold ${marketingTopic === 'PERFORMANCE' ? 'bg-slate-900 text-white shadow' : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border-slate-200'}`}
+              >
+                🏁 Cornering Sport
+              </button>
+            </div>
+          </div>
+          {/* Pricing configurations & promo codes */}
+          <div className="grid grid-cols-2 gap-3 pb-2">
+            <div className="space-y-1">
+              <label className="text-[10px] text-slate-550 font-bold uppercase">Coupon discount</label>
+              <div className="relative">
+                <span className="absolute right-3 top-2 text-slate-400">
+                  <Percent className="w-3.5 h-3.5" />
+                </span>
+                <input
+                  type="number"
+                  min="0"
+                  max="90"
+                  value={customDiscountPercent}
+                  onChange={(e) => setCustomDiscountPercent(Math.min(90, Math.max(0, parseInt(e.target.value) || 0)))}
+                  className="w-full text-xs font-mono border border-slate-200 bg-white px-3 py-2 rounded-lg outline-none focus:border-slate-800 transition"
+                />
+              </div>
+            </div>
+            <div className="space-y-1">
+              <label className="text-[10px] text-slate-550 font-bold uppercase">Promo code token</label>
+              <input
+                type="text"
+                value={promoCode}
+                onChange={(e) => setPromoCode(e.target.value.toUpperCase())}
+                className="w-full text-xs font-mono font-bold border border-slate-200 bg-white px-3 py-2 rounded-lg outline-none text-slate-900 focus:border-slate-800 transition"
+              />
+            </div>
+          </div>
+        </div>
+        {/* MIDDLE COLUMN: Text marketing output copy block */}
+        <div className="xl:col-span-5 bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex flex-col justify-between">
+          <div className="space-y-3">
+            <div className="flex justify-between items-center border-b border-slate-100 pb-3 h-8">
+              <span className="text-xs font-bold text-slate-900 uppercase flex items-center gap-1.5">
+                <Megaphone className="w-4 h-4 text-slate-700" />
+                Social Outgoing Copy (Refined)
+              </span>
+              <button
+                type="button"
+                onClick={handleCopyClipboard}
+                className="text-xs text-slate-800 bg-slate-100 hover:bg-slate-200/80 border border-slate-250/50 px-2.5 py-1 rounded-md flex items-center gap-1 cursor-pointer transition shadow-sm"
+              >
+                {copied ? (
+                  <>
+                    <Check className="w-3.5 h-3.5 text-emerald-600" />
+                    Copied!
+                  </>
+                ) : (
+                  <>
+                    <Copy className="w-3.5 h-3.5" />
+                    Copy Code
+                  </>
+                )}
+              </button>
+            </div>
+            <textarea
+              rows={14}
+              readOnly
+              value={promoCopyText}
+              className="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg p-3 font-mono leading-relaxed resize-none outline-none focus:border-slate-800 transition"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3 pt-4">
+            <button
+              onClick={shareWhatsApp}
+              className="py-2.5 bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs rounded-lg flex items-center justify-center gap-1.5 shadow-sm transition cursor-pointer"
+            >
+              <MessageSquare className="w-3.5 h-3.5" />
+              WhatsApp Blast
+            </button>
+            <button
+              onClick={shareFacebook}
+              className="py-2.5 bg-white hover:bg-slate-100 text-slate-800 font-semibold border border-slate-200 text-xs rounded-lg flex items-center justify-center gap-1.5 shadow-xs transition cursor-pointer"
+            >
+              <Share2 className="w-3.5 h-3.5" />
+              Facebook Feed
+            </button>
+          </div>
+        </div>
+        {/* RIGHT COLUMN: Real-time rendered poster image display container */}
+        <div className="xl:col-span-3 bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex flex-col justify-between">
+          <div className="space-y-4">
+            <span className="text-xs font-bold text-slate-900 uppercase tracking-tight block border-b border-slate-100 pb-3">Poster Preview (500x600 px)</span>
+            {/* Visual flyer preview board */}
+            {selectedProduct ? (
+              <div
+                className={`rounded-xl p-6 text-white h-96 flex flex-col justify-between relative overflow-hidden shadow-md font-sans ${
+                  marketingTopic === 'DISCOUNT' ? 'bg-gradient-to-b from-blue-900 to-slate-950 border border-blue-800' :
+                  marketingTopic === 'SAFETY' ? 'bg-gradient-to-b from-teal-800 to-slate-950 border border-teal-700' :
+                  marketingTopic === 'WINTER' ? 'bg-gradient-to-b from-indigo-900 to-slate-950 border border-indigo-800' :
+                  'bg-gradient-to-b from-red-800 to-slate-950 border border-red-700'
+                }`}
+              >
+                <div className="space-y-2">
+                  <span className="bg-red-600 text-white font-bold text-[9px] uppercase tracking-widest px-2 py-0.5 rounded-full">
+                    {marketingTopic} Campaign
+                  </span>
+                  <div>
+                    <h5 className="text-2xl font-black uppercase tracking-tight leading-none text-white">{selectedProduct.brand}</h5>
+                    <p className="text-xs font-medium text-amber-300 leading-tight">{selectedProduct.model}</p>
+                  </div>
+                  <p className="font-mono text-xs font-bold text-blue-300 border-l-2 border-blue-400 pl-2">
+                    {selectedProduct.size}
+                  </p>
+                </div>
+                <div className="space-y-3 relative z-10">
+                  <div className="bg-white/10 border border-white/10 rounded-xl p-3 flex justify-between items-center text-xs">
+                    <div className="space-y-0.5">
+                      <span className="text-[10px] text-white/50 text-decoration-line-through">MSRP: {selectedProduct.price.toLocaleString()}</span>
+                      <p className="font-black text-white text-[10px]">CLEARANCE VALUE</p>
+                    </div>
+                    <span className="text-xl font-black text-emerald-400 font-mono">
+                      {settings.currencySymbol}{promoPrice.toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="text-[9px] text-white/50 text-center leading-normal">
+                    {settings.shopName} • {settings.shopPhone}
+                  </div>
+                </div>
+                {/* Geometric tire tread watermarks on poster bg */}
+                <div className="absolute right-[-20px] bottom-10 opacity-5 pointer-events-none transform rotate-45 scale-125">
+                  <div className="w-40 h-40 border-[15px] border-white rounded-full border-dashed"></div>
+                </div>
+              </div>
+            ) : (
+              <div className="bg-slate-50 h-96 border rounded-2xl flex items-center justify-center text-slate-400 text-xs">
+                Select a warehouse product to preview flyer.
+              </div>
+            )}
+          </div>
+          <button
+            onClick={downloadFlyerHTML}
+            disabled={!selectedProduct}
+            className={`w-full py-2.5 mt-4 text-xs font-semibold rounded-lg flex items-center justify-center gap-1.5 cursor-pointer shadow-sm transition border ${
+              !selectedProduct
+                ? 'bg-slate-100 text-slate-400 border-slate-200 cursor-not-allowed shadow-none'
+                : 'bg-slate-900 border-slate-900 hover:bg-slate-800 text-white'
+            }`}
+          >
+            <Download className="w-4.5 h-4.5" />
+            Download Poster Template
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/StaffManager.tsx ADDED Viewed

	@@ -0,0 +1,347 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import {
+  Users,
+  UserCheck,
+  Lock,
+  Shield,
+  Trash2,
+  UserPlus,
+  Fingerprint,
+  CheckCircle2,
+  XCircle,
+  ToggleLeft,
+  KeyRound,
+  Sliders,
+  Settings
+} from 'lucide-react';
+import { StaffUser, StaffRole } from '../types';
+interface StaffManagerProps {
+  staffList: StaffUser[];
+  currentStaff: StaffUser;
+  onSetCurrentStaff: (staff: StaffUser) => void;
+  onAddStaffMember: (user: StaffUser) => void;
+  onToggleStaffStatus: (staffId: string) => void;
+  onUpdateStaffRole: (staffId: string, role: StaffRole) => void;
+}
+export default function StaffManager({
+  staffList,
+  currentStaff,
+  onSetCurrentStaff,
+  onAddStaffMember,
+  onToggleStaffStatus,
+  onUpdateStaffRole
+}: StaffManagerProps) {
+  const [showAddStaff, setShowAddStaff] = useState(false);
+  // Create staff states
+  const [newName, setNewName] = useState('');
+  const [newEmail, setNewEmail] = useState('');
+  const [newRole, setNewRole] = useState<StaffRole>('cashier');
+  const isOwner = currentStaff.role === 'owner';
+  const isManagerOrOwner = currentStaff.role === 'owner' || currentStaff.role === 'manager';
+  const handleCreateStaff = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newName.trim() || !newEmail.trim()) {
+      alert("Name and email references are mandatory.");
+      return;
+    }
+    if (staffList.some(s => s.email.toLowerCase() === newEmail.toLowerCase())) {
+      alert("An account is already configured under this email register.");
+      return;
+    }
+    const newUser: StaffUser = {
+      id: 'staff_' + Math.random().toString(36).substr(2, 9),
+      name: newName,
+      email: newEmail,
+      role: newRole,
+      active: true
+    };
+    onAddStaffMember(newUser);
+    setNewName('');
+    setNewEmail('');
+    setNewRole('cashier');
+    setShowAddStaff(false);
+  };
+  const handleSwitchOperator = (user: StaffUser) => {
+    if (!user.active) {
+      alert("Cannot switch to inactive staff profile. Owner must restore authorization status first.");
+      return;
+    }
+    onSetCurrentStaff(user);
+  };
+  // Role details mapping for easy visual display
+  const getRoleBadgeColor = (role: StaffRole) => {
+    switch(role) {
+      case 'owner': return 'bg-slate-900 text-white border-transparent';
+      case 'manager': return 'bg-slate-100 text-slate-800 border-slate-200';
+      case 'cashier': return 'bg-slate-50 text-slate-650 border-slate-200/60';
+    }
+  };
+  return (
+    <div className="space-y-6" id="role-vault-cockpit">
+      {/* Visual Identity Widget - Active privileges indicator */}
+      <div className="bg-white border border-slate-200 rounded-xl p-5 flex flex-col md:flex-row items-start md:items-center justify-between gap-6 shadow-sm">
+        <div className="flex items-center gap-4">
+          <div className="p-3.5 bg-slate-900 text-white rounded-lg shadow-sm">
+            <Fingerprint className="w-6 h-6 text-slate-100" />
+          </div>
+          <div className="space-y-1">
+            <span className="text-[10px] text-slate-400 uppercase tracking-widest font-bold block">Authorized Terminal Cashier</span>
+            <div className="flex items-center gap-2">
+              <h3 className="text-base font-bold text-slate-900 leading-none">{currentStaff.name}</h3>
+              <span className={`text-[9px] font-bold px-2 py-0.5 border rounded-md capitalize ${getRoleBadgeColor(currentStaff.role)}`}>
+                {currentStaff.role} MODE
+              </span>
+            </div>
+            <p className="text-xs text-slate-400">Security ledger email: {currentStaff.email}</p>
+          </div>
+        </div>
+        <div className="bg-slate-50 border border-slate-200/80 p-3.5 rounded-lg space-y-1 md:max-w-xs text-xs font-sans">
+          <span className="font-bold text-slate-800 flex items-center gap-1.5 uppercase tracking-wider text-[10px]">
+            <Shield className="w-3.5 h-3.5 text-slate-755" />
+            Enforced Role Clearances
+          </span>
+          <p className="text-slate-550 leading-relaxed text-[11px]">
+            {currentStaff.role === 'owner' ? "Owner clearance active. Unlimited access of warehouse multipliers, revenue parameters, and full backups." :
+             currentStaff.role === 'manager' ? "Manager clearance active. Full access to manual stock adjusters, inventory updates, and cashier rosters." :
+             "Cashier clearance active. Invoice generation, payments checkout, and outreach promotions. Stock manual modifications locked."}
+          </p>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+        {/* LEFT COLUMN: Switch Active Terminal Operator Block */}
+        <div className="lg:col-span-4 bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-4">
+          <div className="space-y-1 border-b border-slate-100 pb-3">
+            <h3 className="text-xs font-bold text-slate-950 uppercase flex items-center gap-1.5">
+              <KeyRound className="w-4 h-4 text-slate-705" />
+              Switch Terminal Operator
+            </h3>
+            <p className="text-xs text-slate-400">Review security flows by logging into alternative staff portfolios</p>
+          </div>
+          <div className="space-y-2.5">
+            {staffList.map((user) => {
+              const isActiveLocal = user.id === currentStaff.id;
+              return (
+                <div
+                  key={user.id}
+                  onClick={() => handleSwitchOperator(user)}
+                  className={`border p-3 rounded-lg flex items-center justify-between transition cursor-pointer ${
+                    !user.active ? 'bg-slate-50 border-slate-100 opacity-55 cursor-not-allowed' :
+                    isActiveLocal
+                      ? 'bg-slate-900 text-white border-transparent shadow-sm font-semibold'
+                      : 'bg-white hover:border-slate-350 hover:bg-slate-50 border-slate-200'
+                  }`}
+                >
+                  <div className="space-y-0.5">
+                    <p className={`text-xs ${isActiveLocal ? 'text-white' : 'text-slate-900'} font-bold`}>{user.name}</p>
+                    <span className={`text-[10px] capitalize block ${isActiveLocal ? 'text-slate-300 font-medium' : 'text-slate-400'}`}>
+                      {user.role} • <span>{user.active ? 'Authorized' : 'Suspended'}</span>
+                    </span>
+                  </div>
+                  {isActiveLocal ? (
+                    <div className="bg-white/10 p-1 rounded-md text-white">
+                      <UserCheck className="w-4 h-4" />
+                    </div>
+                  ) : (
+                    <span className="text-[10px] text-slate-800 font-semibold underline hover:no-underline">Log in</span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        {/* RIGHT COLUMN: Full Staff registers with Bounded Controls */}
+        <div className="lg:col-span-8 bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-4">
+          <div className="flex items-center justify-between border-b border-slate-100 pb-3">
+            <div className="space-y-1">
+              <h3 className="text-xs font-bold text-slate-950 uppercase flex items-center gap-1.5">
+                <Users className="w-4 h-4 text-slate-705" />
+                Staff Directory &amp; RBAC Registers
+              </h3>
+              <p className="text-xs text-slate-400">Edit employee details, adjust authorization levels, and configure status settings</p>
+            </div>
+            {isManagerOrOwner && (
+              <button
+                type="button"
+                onClick={() => setShowAddStaff(true)}
+                className="bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs px-3 py-2 rounded-lg transition shadow-sm flex items-center gap-1.5 cursor-pointer"
+              >
+                <UserPlus className="w-4 h-4" />
+                Register Staff
+              </button>
+            )}
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full text-left border-collapse text-xs font-sans">
+              <thead className="bg-slate-50 font-bold uppercase text-[9px] tracking-widest text-slate-500 leading-none">
+                <tr className="border-b border-slate-150">
+                  <th className="py-3 px-4">Employee Card</th>
+                  <th className="py-3 px-4">System Access Tier</th>
+                  <th className="py-3 px-4 text-center">Duty Status</th>
+                  <th className="py-3 px-4 text-right">Administrative overrides</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100 align-middle">
+                {staffList.map((user) => (
+                  <tr key={user.id} className={!user.active ? 'opacity-60 bg-slate-50/50' : ''}>
+                    <td className="py-3.5 px-4">
+                      <div className="space-y-0.5">
+                        <p className="font-bold text-slate-900">{user.name}</p>
+                        <p className="text-[10px] text-slate-500">{user.email}</p>
+                      </div>
+                    </td>
+                    <td className="py-3.5 px-4 font-sans font-bold">
+                      {isOwner && user.id !== currentStaff.id ? (
+                        <select
+                          value={user.role}
+                          onChange={(e) => onUpdateStaffRole(user.id, e.target.value as StaffRole)}
+                          className="border border-slate-200 bg-white p-1 rounded font-sans text-xs outline-none"
+                        >
+                          <option value="owner">Owner</option>
+                          <option value="manager">Manager</option>
+                          <option value="cashier">Cashier</option>
+                        </select>
+                      ) : (
+                        <span className={`text-[9px] font-bold px-2 py-0.5 border rounded-full capitalize ${getRoleBadgeColor(user.role)}`}>
+                          {user.role}
+                        </span>
+                      )}
+                    </td>
+                    <td className="py-3.5 px-4 text-center">
+                      <div className="flex items-center justify-center gap-1">
+                        {user.active ? (
+                          <span className="bg-emerald-50 text-emerald-800 border border-emerald-100 text-[10px] px-2 py-0.5 rounded-full font-semibold flex items-center gap-1">
+                            <CheckCircle2 className="w-3 h-3 text-emerald-600" />
+                            Active
+                          </span>
+                        ) : (
+                          <span className="bg-red-50 text-red-800 border border-red-100 text-[10px] px-2 py-0.5 rounded-full font-semibold flex items-center gap-1">
+                            <XCircle className="w-3 h-3 text-red-500 animate-pulse" />
+                            Suspended
+                          </span>
+                        )}
+                      </div>
+                    </td>
+                    <td className="py-3.5 px-4 text-right">
+                      {user.id === currentStaff.id ? (
+                        <span className="text-[10px] text-slate-400 italic">Operating account</span>
+                      ) : isManagerOrOwner ? (
+                        <button
+                          type="button"
+                          onClick={() => onToggleStaffStatus(user.id)}
+                          className={`text-xs font-semibold px-3 py-1 rounded-lg transition border cursor-pointer ${
+                            user.active
+                              ? 'text-red-600 bg-red-50 hover:bg-red-100 border-red-150'
+                              : 'text-emerald-700 bg-emerald-50 hover:bg-emerald-100 border-emerald-150'
+                          }`}
+                        >
+                          {user.active ? 'Deauthorize' : 'Authorize Duty'}
+                        </button>
+                      ) : (
+                        <span className="text-[10px] text-slate-400 italic flex items-center gap-1 justify-end">
+                          <Lock className="w-3.5 h-3.5" /> Locked
+                        </span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      {/* CORE MODAL: REGISTER STAFF MEMBER */}
+      {showAddStaff && (
+        <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-[2px] z-50 flex items-center justify-center p-4">
+          <div className="bg-white rounded-xl border border-slate-200 max-w-md w-full p-6 space-y-5 relative shadow-xl">
+            <button
+              onClick={() => setShowAddStaff(false)}
+              className="absolute top-4 right-4 bg-slate-50 hover:bg-slate-150 text-slate-400 hover:text-slate-800 font-bold px-2.5 py-1 rounded text-xs cursor-pointer"
+            >
+              ✕
+            </button>
+            <div className="pb-2 border-b border-slate-100">
+              <h3 className="text-sm font-bold text-slate-900 uppercase">Register New Terminal Account</h3>
+              <p className="text-xs text-slate-400">Provide credentials and role permission clearings</p>
+            </div>
+            <form onSubmit={handleCreateStaff} className="space-y-4 text-xs font-sans">
+              <div className="space-y-1">
+                <label className="text-[10px] text-slate-500 font-bold uppercase">Name / Identification</label>
+                <input
+                  type="text"
+                  required
+                  placeholder="e.g. Zain Brother"
+                  value={newName}
+                  onChange={(e) => setNewName(e.target.value)}
+                  className="w-full border border-slate-200 bg-white px-3 py-2 rounded-lg outline-none focus:border-slate-800 transition"
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-[10px] text-slate-500 font-bold uppercase">Secure Email register</label>
+                <input
+                  type="email"
+                  required
+                  placeholder="e.g. zain@traders.com"
+                  value={newEmail}
+                  onChange={(e) => setNewEmail(e.target.value)}
+                  className="w-full border border-slate-200 bg-white px-3 py-2 rounded-lg outline-none focus:border-slate-800 transition"
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-[10px] text-slate-500 font-bold uppercase">Assigned Security Role Clearance</label>
+                <select
+                  value={newRole}
+                  onChange={(e) => setNewRole(e.target.value as StaffRole)}
+                  className="w-full border border-slate-200 bg-white px-3 py-2 rounded-lg outline-none focus:border-slate-800 transition text-xs"
+                >
+                  <option value="cashier">Cashier clearance level (Draft bills &amp; Payments)</option>
+                  <option value="manager">Manager clearance level (Adjustments &amp; Inventory config)</option>
+                  <option value="owner">Owner credentials clearance (Total configuration overrides)</option>
+                </select>
+              </div>
+              <button
+                type="submit"
+                className="w-full bg-slate-900 hover:bg-slate-800 text-white font-medium py-2.5 rounded-lg shadow-sm transition cursor-pointer text-center"
+              >
+                Register Employee Account
+              </button>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/index.css ADDED Viewed

	@@ -0,0 +1 @@


1	+ @import "tailwindcss";

src/initialData.ts ADDED Viewed

	@@ -0,0 +1,387 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { TireProduct, StaffUser, Invoice, StockHistoryItem, SystemSettings } from './types';
+export const INITIAL_STAFF: StaffUser[] = [
+  { id: '1', name: 'Haider Ali', email: 'haider@traders.com', role: 'owner', active: true },
+  { id: '2', name: 'Zain Brother', email: 'zain@traders.com', role: 'manager', active: true },
+  { id: '3', name: 'Kamran Ali', email: 'kamran@traders.com', role: 'cashier', active: true },
+  { id: '4', name: 'Ahmad Shah', email: 'ahmad@traders.com', role: 'cashier', active: false },
+];
+export const INITIAL_SETTINGS: SystemSettings = {
+  shopName: 'Haider Brother Traders Tire Shop',
+  shopAddress: 'Plot 4, Main Chaman Road, Quetta, Pakistan',
+  shopPhone: '+92 300 1234567',
+  taxName: 'Sales Tax (SRB)',
+  taxRate: 15,
+  currencyCode: 'PKR',
+  currencySymbol: '₨',
+};
+export const INITIAL_PRODUCTS: TireProduct[] = [
+  {
+    id: 'p1',
+    sku: 'YOKO2055516',
+    brand: 'Yokohama',
+    model: 'Advan DB V552',
+    size: '205/55 R16',
+    category: 'Passenger',
+    stock: 42,
+    minStock: 10,
+    price: 32500,
+    purchasePrice: 26000,
+    description: 'Ultra quiet premium comfort radial tire. Excellent wet of dry grip.',
+  },
+  {
+    id: 'p2',
+    sku: 'BRIDGE1956515',
+    brand: 'Bridgestone',
+    model: 'Ecopia EP150',
+    size: '195/65 R15',
+    category: 'Passenger',
+    stock: 8, // Trigger active alert!
+    minStock: 15,
+    price: 24000,
+    purchasePrice: 19500,
+    description: 'Fuel-efficient eco tire with reliable braking and rolling resistance features.',
+  },
+  {
+    id: 'p3',
+    sku: 'DUN1856514',
+    brand: 'Dunlop',
+    model: 'SP Touring R1',
+    size: '185/65 R14',
+    category: 'Passenger',
+    stock: 65,
+    minStock: 20,
+    price: 18500,
+    purchasePrice: 14800,
+    description: 'Robust on-road performance, ideal for daily commutes on variable road surfaces.',
+  },
+  {
+    id: 'p4',
+    sku: 'GEN1757013',
+    brand: 'General Tire',
+    model: 'Euro Star',
+    size: '175/70 R13',
+    category: 'Passenger',
+    stock: 120,
+    minStock: 30,
+    price: 14500,
+    purchasePrice: 11200,
+    description: 'Extremely durable, steel belted local radial built for Pakistani road terrain.',
+  },
+  {
+    id: 'p5',
+    sku: 'MIC2256517',
+    brand: 'Michelin',
+    model: 'Primacy SUV',
+    size: '225/65 R17',
+    category: 'SUV',
+    stock: 18,
+    minStock: 8,
+    price: 49000,
+    purchasePrice: 41000,
+    description: 'Exceptional safety and handling for crossover SUVs. Extremely smooth ride.',
+  },
+  {
+    id: 'p6',
+    sku: 'SAIL2657016',
+    brand: 'Sailun',
+    model: 'Terramax A/T',
+    size: '265/70 R16',
+    category: 'SUV',
+    stock: 14,
+    minStock: 6,
+    price: 38000,
+    purchasePrice: 29800,
+    description: 'Rugged all-terrain tire with deep multi-step grooves for high dirt-road traction.',
+  },
+  {
+    id: 'p7',
+    sku: 'DB3158022',
+    brand: 'Double Star',
+    model: 'DS806 Radial',
+    size: '315/80 R22.5',
+    category: 'Truck/Bus',
+    stock: 3, // TRIGGER ACTIVE STOCK ALERT!
+    minStock: 5,
+    price: 88500,
+    purchasePrice: 74000,
+    description: 'Commercial steer & trailer tire with maximum ply rating and heavy load design.',
+  },
+];
+export const INITIAL_HISTORY: StockHistoryItem[] = [
+  {
+    id: 'h1',
+    productId: 'p2',
+    productLabel: 'Bridgestone Ecopia EP150 (195/65 R15)',
+    dateTime: '2026-05-15T09:30:00Z',
+    type: 'STOCK_IN',
+    quantity: 40,
+    resultingStock: 48,
+    adjustedBy: 'Zain Brother (Manager)',
+    reason: 'Import batch cargo clearance directly from Port Qasim.',
+  },
+  {
+    id: 'h2',
+    productId: 'p2',
+    productLabel: 'Bridgestone Ecopia EP150 (195/65 R15)',
+    dateTime: '2026-05-28T14:15:00Z',
+    type: 'STOCK_OUT',
+    quantity: 40,
+    resultingStock: 8,
+    adjustedBy: 'Kamran Ali (Cashier)',
+    reason: 'Bulk invoice sale to Al-Sadiq Rent-a-Car fleet.',
+  },
+  {
+    id: 'h3',
+    productId: 'p4',
+    productLabel: 'General Tire Euro Star (175/70 R13)',
+    dateTime: '2026-06-01T11:00:00Z',
+    type: 'MANUAL_ADJUSTMENT',
+    quantity: 50,
+    resultingStock: 120,
+    adjustedBy: 'Haider Ali (Owner)',
+    reason: 'Physical mid-year audit recount: matched warehouse count variance.',
+  },
+  {
+    id: 'h4',
+    productId: 'p7',
+    productLabel: 'Double Star DS806 Radial (315/80 R22.5)',
+    dateTime: '2026-06-02T16:45:00Z',
+    type: 'STOCK_OUT',
+    quantity: 2,
+    resultingStock: 3,
+    adjustedBy: 'Kamran Ali (Cashier)',
+    reason: 'Direct retail sale & installation on Hino Dump Truck.',
+  },
+];
+// Let's seed realistic monthly invoicing for 2026 trends, supporting clean charts
+export const INITIAL_INVOICES: Invoice[] = [
+  {
+    id: 'inv1',
+    invoiceNumber: 'HBT-2026-1001',
+    dateTime: '24-01-2026 10:15:00', // support readable and parsing
+    customerName: 'Mehmood Khan',
+    customerPhone: '0333-8889912',
+    customerVehicle: 'Toyota Corolla (AJK-552)',
+    items: [
+      {
+        id: 'li1',
+        productId: 'p2',
+        brand: 'Bridgestone',
+        model: 'Ecopia EP150',
+        size: '195/65 R15',
+        quantity: 4,
+        unitPrice: 23500,
+        totalPrice: 94000,
+      }
+    ],
+    subtotal: 94000,
+    taxRate: 15,
+    taxAmount: 14100,
+    discount: 5000,
+    total: 103100,
+    currencySymbol: '₨',
+    currencyCode: 'PKR',
+    paymentMethod: 'CASH',
+    paymentStatus: 'PAID',
+    cashierName: 'Kamran Ali',
+    notes: 'Free wheel balancing & tire valves supplied.',
+    dateTimeOriginalISO: '2026-01-24T10:15:00Z',
+  },
+  {
+    id: 'inv2',
+    invoiceNumber: 'HBT-2026-1002',
+    dateTime: '12-02-2026 14:45:00',
+    customerName: 'Sufyan Transport Ltd',
+    customerPhone: '0300-5557711',
+    customerVehicle: 'Fuso Falcon (ST-9002)',
+    items: [
+      {
+        id: 'li2',
+        productId: 'p7',
+        brand: 'Double Star',
+        model: 'DS806 Radial',
+        size: '315/80 R22.5',
+        quantity: 6,
+        unitPrice: 87000,
+        totalPrice: 522000,
+      }
+    ],
+    subtotal: 522000,
+    taxRate: 15,
+    taxAmount: 78300,
+    discount: 22000,
+    total: 578300,
+    currencySymbol: '₨',
+    currencyCode: 'PKR',
+    paymentMethod: 'BANK_TRANSFER',
+    paymentStatus: 'PAID',
+    gatewayInfo: {
+      gatewayName: 'Bank',
+      transactionId: 'IBFT-MBL-88192003',
+      authTime: '2026-02-12T15:00:00Z',
+    },
+    cashierName: 'Zain Brother',
+    notes: 'Institutional customer discount applied.',
+    dateTimeOriginalISO: '2026-02-12T14:45:00Z',
+  },
+  {
+    id: 'inv3',
+    invoiceNumber: 'HBT-2026-1003',
+    dateTime: '05-03-2026 11:20:00',
+    customerName: 'Dr. Tariq Jamil',
+    customerPhone: '0312-9988111',
+    customerVehicle: 'Honda Civic (ICT-LE-720)',
+    items: [
+      {
+        id: 'li3',
+        productId: 'p1',
+        brand: 'Yokohama',
+        model: 'Advan DB V552',
+        size: '205/55 R16',
+        quantity: 4,
+        unitPrice: 32000,
+        totalPrice: 128000,
+      }
+    ],
+    subtotal: 128000,
+    taxRate: 15,
+    taxAmount: 19200,
+    discount: 3000,
+    total: 144200,
+    currencySymbol: '₨',
+    currencyCode: 'PKR',
+    paymentMethod: 'CARD',
+    paymentStatus: 'PAID',
+    gatewayInfo: {
+      gatewayName: 'Stripe',
+      transactionId: 'ch_stripe_99a8b77c11',
+      authTime: '2026-03-05T11:22:15Z',
+    },
+    cashierName: 'Kamran Ali',
+    dateTimeOriginalISO: '2026-03-05T11:20:00Z',
+  },
+  {
+    id: 'inv4',
+    invoiceNumber: 'HBT-2026-1004',
+    dateTime: '18-04-2026 16:30:00',
+    customerName: 'Bilal Khan Achakzai',
+    customerPhone: '0336-7788199',
+    customerVehicle: 'Toyota Land Cruiser (V8-6600)',
+    items: [
+      {
+        id: 'li4',
+        productId: 'p6',
+        brand: 'Sailun',
+        model: 'Terramax A/T',
+        size: '265/70 R16',
+        quantity: 4,
+        unitPrice: 38000,
+        totalPrice: 152000,
+      }
+    ],
+    subtotal: 152000,
+    taxRate: 15,
+    taxAmount: 22800,
+    discount: 0,
+    total: 174800,
+    currencySymbol: '₨',
+    currencyCode: 'PKR',
+    paymentMethod: 'MOBILE_WALLET',
+    paymentStatus: 'PAID',
+    gatewayInfo: {
+      gatewayName: 'EasyPaisa',
+      transactionId: 'EP-92200192',
+      authTime: '2026-04-18T16:35:00Z',
+    },
+    cashierName: 'Kamran Ali',
+    dateTimeOriginalISO: '2026-04-18T16:30:00Z',
+  },
+  {
+    id: 'inv5',
+    invoiceNumber: 'HBT-2026-1005',
+    dateTime: '22-05-2026 13:00:00',
+    customerName: 'Sardar Yaqoob',
+    customerPhone: '0303-3399120',
+    customerVehicle: 'Suzuki Alto (QA-991)',
+    items: [
+      {
+        id: 'li5',
+        productId: 'p4',
+        brand: 'General Tire',
+        model: 'Euro Star',
+        size: '175/70 R13',
+        quantity: 2,
+        unitPrice: 14500,
+        totalPrice: 29000,
+      }
+    ],
+    subtotal: 29000,
+    taxRate: 15,
+    taxAmount: 4350,
+    discount: 1000,
+    total: 32350,
+    currencySymbol: '₨',
+    currencyCode: 'PKR',
+    paymentMethod: 'CASH',
+    paymentStatus: 'PAID',
+    cashierName: 'Ahmad Shah',
+    dateTimeOriginalISO: '2026-05-22T13:00:00Z',
+  },
+  {
+    id: 'inv6',
+    invoiceNumber: 'HBT-2026-1006',
+    dateTime: '02-06-2026 11:45:00', // Current month
+    customerName: 'Asadullah Quetta Club',
+    customerPhone: '0345-2211440',
+    customerVehicle: 'Toyota Prado (BE-777)',
+    items: [
+      {
+        id: 'li6',
+        productId: 'p5',
+        brand: 'Michelin',
+        model: 'Primacy SUV',
+        size: '225/65 R17',
+        quantity: 4,
+        unitPrice: 48500,
+        totalPrice: 194000,
+      },
+      {
+        id: 'li7',
+        productId: 'p1',
+        brand: 'Yokohama',
+        model: 'Advan DB V552',
+        size: '205/55 R16',
+        quantity: 2,
+        unitPrice: 32500,
+        totalPrice: 65000,
+      }
+    ],
+    subtotal: 259000,
+    taxRate: 15,
+    taxAmount: 38850,
+    discount: 7850,
+    total: 290000,
+    currencySymbol: '₨',
+    currencyCode: 'PKR',
+    paymentMethod: 'CARD',
+    paymentStatus: 'PAID',
+    gatewayInfo: {
+      gatewayName: 'Stripe',
+      transactionId: 'ch_stripe_11x90cc',
+      authTime: '2026-06-02T11:51:00Z',
+    },
+    cashierName: 'Kamran Ali',
+    notes: 'Premium nitrogen inflation filled for Prado tyres.',
+    dateTimeOriginalISO: '2026-06-02T11:45:00Z',
+  }
+] as (Invoice & { dateTimeOriginalISO: string })[];

src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

src/types.ts ADDED Viewed

	@@ -0,0 +1,91 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export type StaffRole = 'owner' | 'manager' | 'cashier';
+export interface StaffUser {
+  id: string;
+  name: string;
+  email: string;
+  role: StaffRole;
+  active: boolean;
+}
+export interface TireProduct {
+  id: string;
+  sku: string;
+  brand: string;
+  model: string;
+  size: string; // e.g., 195/65 R15
+  category: 'Passenger' | 'SUV' | 'Commercial' | 'Light Truck' | 'Truck/Bus';
+  stock: number;
+  minStock: number; // Alerts triggered when stock <= minStock
+  price: number; // Selling price
+  purchasePrice: number; // Cost price (for profit computation)
+  description?: string;
+}
+export interface StockHistoryItem {
+  id: string;
+  productId: string;
+  productLabel: string; // Saved snapshot for history search resilience
+  dateTime: string;
+  type: 'STOCK_IN' | 'STOCK_OUT' | 'MANUAL_ADJUSTMENT';
+  quantity: number; // Signed or unsigned change
+  resultingStock: number;
+  adjustedBy: string; // Staff user name/role
+  reason: string;
+}
+export interface InvoiceLineItem {
+  id: string;
+  productId: string;
+  brand: string;
+  model: string;
+  size: string;
+  quantity: number;
+  unitPrice: number;
+  totalPrice: number;
+}
+export interface Invoice {
+  id: string;
+  invoiceNumber: string; // e.g. HBT-2026-1001
+  dateTime: string;
+  customerName: string;
+  customerPhone: string;
+  customerVehicle?: string; // Car model / registration number (highly relevant for a tire shop!)
+  items: InvoiceLineItem[];
+  subtotal: number;
+  taxRate: number; // e.g., 17 for 17%
+  taxAmount: number;
+  discount: number;
+  total: number;
+  currencySymbol: string;
+  currencyCode: string;
+  paymentMethod: 'CASH' | 'CARD' | 'BANK_TRANSFER' | 'MOBILE_WALLET';
+  paymentStatus: 'PAID' | 'UNPAID' | 'PARTIAL';
+  amountPaid: number;
+  gatewayInfo?: {
+    gatewayName: 'Stripe' | 'PayPal' | 'EasyPaisa' | 'JazzCash' | 'Bank';
+    transactionId: string;
+    authTime: string;
+  };
+  cashierName: string;
+  notes?: string;
+  isOfflineCreated?: boolean; // Tracking for offline-first resilience
+}
+export interface SystemSettings {
+  shopName: string;
+  shopAddress: string;
+  shopPhone: string;
+  taxName: string; // e.g., "GST" or "VAT" or "Sales Tax"
+  taxRate: number; // Percentage
+  currencyCode: string; // PKR, USD, EUR etc.
+  currencySymbol: string; // ₨, $, € etc.
+  stripePublicKey?: string;
+  easyPaisaMerchantId?: string;
+}

src/utils/backup.ts ADDED Viewed

	@@ -0,0 +1,84 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Encrypts a plain text string utilizing a rotation and salt key
+ * to prevent exposure of sensitive transaction / invoice details.
+ */
+export function encryptData(plainText: string, secretKey: string): string {
+  const salt = "HBT-SECURE-VAULT-" + secretKey.length;
+  const combined = salt + "||" + plainText;
+  // Convert secretKey into a simple numeric pad
+  let pad = 0;
+  for (let i = 0; i < secretKey.length; i++) {
+    pad += secretKey.charCodeAt(i);
+  }
+  // Rotate characters for obfuscation
+  const chars: string[] = [];
+  for (let i = 0; i < combined.length; i++) {
+    let charCode = combined.charCodeAt(i);
+    // Apply rotational key padding
+    charCode = (charCode + pad + i) % 65535;
+    chars.push(String.fromCharCode(charCode));
+  }
+  const scrambled = chars.join('');
+  // Encode as Base64 safely under browser context
+  try {
+    return btoa(unescape(encodeURIComponent(scrambled)));
+  } catch (e) {
+    // Fallback if there are broad unicode failures
+    return btoa(scrambled);
+  }
+}
+/**
+ * Decrypts a scrambled cipher string back to original plain text
+ * using the validated passkey. Throws error on fail.
+ */
+export function decryptData(cipherText: string, secretKey: string): string {
+  let scrambled = '';
+  try {
+    scrambled = decodeURIComponent(escape(atob(cipherText)));
+  } catch (e) {
+    try {
+      scrambled = atob(cipherText);
+    } catch (err) {
+      throw new Error("Invalid file structure: Decryption failed.");
+    }
+  }
+  let pad = 0;
+  for (let i = 0; i < secretKey.length; i++) {
+    pad += secretKey.charCodeAt(i);
+  }
+  const chars: string[] = [];
+  for (let i = 0; i < scrambled.length; i++) {
+    let charCode = scrambled.charCodeAt(i);
+    // Reverse rotation
+    charCode = (charCode - pad - i) % 65535;
+    while (charCode < 0) charCode += 65535;
+    chars.push(String.fromCharCode(charCode));
+  }
+  const decrypted = chars.join('');
+  // Validate presence of our prefix
+  if (!decrypted.includes("||")) {
+    throw new Error("Invalid password: Secure decryption key mismatch.");
+  }
+  const parts = decrypted.split("||");
+  const salt = parts[0];
+  const payload = parts.slice(1).join("||");
+  if (!salt.startsWith("HBT-SECURE-VAULT-")) {
+    throw new Error("Corrupted backup data block.");
+  }
+  return payload;
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,22 @@

+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig} from 'vite';
+export default defineConfig(() => {
+  return {
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      // HMR is disabled in AI Studio via DISABLE_HMR env var.
+      // Do not modifyâfile watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+      // Disable file watching when DISABLE_HMR is true to save CPU during agent edits.
+      watch: process.env.DISABLE_HMR === 'true' ? null : {},
+    },
+  };
+});