Upload 36 files

.env.local

@@ -1 +1 @@
-GEMINI_API_KEY=PLACEHOLDER_API_KEY
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitattributes

@@ -1,37 +1,37 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
-public/icon-192.png filter=lfs diff=lfs merge=lfs -text
-public/icon-512.png filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+public/icon-192.png filter=lfs diff=lfs merge=lfs -text
+public/icon-512.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,24 +1,24 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -1,49 +1,49 @@
-import React, { useEffect } from 'react';
-import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
-import Layout from './components/Layout';
-import Dashboard from './pages/Dashboard';
-import JawaakBill from './pages/JawaakBill';
-import AwaakBill from './pages/AwaakBill';
-import StockReport from './pages/StockReport';
-import PartyLedger from './pages/PartyLedger';
-import Settings from './pages/Settings';
-import PWAInstallPrompt from './components/PWAInstallPrompt';
-import { PWAProvider } from './context/PWAContext';
-
-const App = () => {
-  // Register Service Worker for PWA
-  useEffect(() => {
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', () => {
-        navigator.serviceWorker.register('/service-worker.js')
-          .then(registration => {
-            console.log('✅ PWA Service Worker registered:', registration);
-          })
-          .catch(error => {
-            console.log('❌ SW registration failed:', error);
-          });
-      });
-    }
-  }, []);
-
-  return (
-    <PWAProvider>
-      <HashRouter>
-        <Layout>
-          <Routes>
-            <Route path="/" element={<Dashboard />} />
-            <Route path="/jawaak" element={<JawaakBill />} />
-            <Route path="/awaak" element={<AwaakBill />} />
-            <Route path="/stock" element={<StockReport />} />
-            <Route path="/ledger" element={<PartyLedger />} />
-            <Route path="/settings" element={<Settings />} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Routes>
-        </Layout>
-        <PWAInstallPrompt />
-      </HashRouter>
-    </PWAProvider>
-  );
-};
-
+import React, { useEffect } from 'react';
+import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
+import Layout from './components/Layout';
+import Dashboard from './pages/Dashboard';
+import JawaakBill from './pages/JawaakBill';
+import AwaakBill from './pages/AwaakBill';
+import StockReport from './pages/StockReport';
+import PartyLedger from './pages/PartyLedger';
+import Settings from './pages/Settings';
+import PWAInstallPrompt from './components/PWAInstallPrompt';
+import { PWAProvider } from './context/PWAContext';
+
+const App = () => {
+  // Register Service Worker for PWA
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/service-worker.js')
+          .then(registration => {
+            console.log('✅ PWA Service Worker registered:', registration);
+          })
+          .catch(error => {
+            console.log('❌ SW registration failed:', error);
+          });
+      });
+    }
+  }, []);
+
+  return (
+    <PWAProvider>
+      <HashRouter>
+        <Layout>
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/jawaak" element={<JawaakBill />} />
+            <Route path="/awaak" element={<AwaakBill />} />
+            <Route path="/stock" element={<StockReport />} />
+            <Route path="/ledger" element={<PartyLedger />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Layout>
+        <PWAInstallPrompt />
+      </HashRouter>
+    </PWAProvider>
+  );
+};
+
 export default App;

README.md

@@ -1,10 +1,10 @@
----
-title: Pratikpattanshetty
-emoji: 📊
-colorFrom: indigo
-colorTo: blue
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Pratikpattanshetty
+emoji: 📊
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

components/Layout.tsx

@@ -1,123 +1,123 @@
-import React, { useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import {
-    Home,
-    FileInput,
-    FileOutput,
-    Users,
-    Package,
-    Settings,
-    Menu,
-    X,
-    TrendingUp
-} from 'lucide-react';
-
-interface LayoutProps {
-    children: React.ReactNode;
-}
-
-const Layout: React.FC<LayoutProps> = ({ children }) => {
-    const [isSidebarOpen, setSidebarOpen] = useState(false);
-    const location = useLocation();
-
-    const navItems = [
-        { path: '/', label: 'डॅशबोर्ड (Home)', icon: Home },
-        { path: '/jawaak', label: 'जावक बिल (Sales)', icon: FileOutput },
-        { path: '/awaak', label: 'आवक बिल (Purchase)', icon: FileInput },
-        { path: '/ledger', label: 'पार्टी लेजर (Ledger)', icon: Users },
-        { path: '/stock', label: 'स्टॉक रिपोर्ट (Stock)', icon: Package },
-        { path: '/settings', label: 'सेटिंग्स (Settings)', icon: Settings },
-    ];
-
-    const isActive = (path: string) => location.pathname === path;
-
-    return (
-        <div className="flex h-screen bg-gray-50 overflow-hidden">
-            {/* Mobile Sidebar Overlay */}
-            {isSidebarOpen && (
-                <div
-                    className="fixed inset-0 bg-black bg-opacity-50 z-20 lg:hidden"
-                    onClick={() => setSidebarOpen(false)}
-                />
-            )}
-
-            {/* Sidebar */}
-            <aside
-                className={`fixed lg:static inset-y-0 left-0 w-64 bg-teal-800 text-white transform transition-transform duration-200 ease-in-out z-30 ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
-                    }`}
-            >
-                <div className="flex items-center justify-between p-4 border-b border-teal-700 h-16">
-                    <div className="flex items-center gap-2">
-                        <TrendingUp className="w-6 h-6 text-teal-300" />
-                        <span className="font-bold text-xl">Mirchi Vyapar</span>
-                    </div>
-                    <button
-                        className="lg:hidden p-1 hover:bg-teal-700 rounded"
-                        onClick={() => setSidebarOpen(false)}
-                    >
-                        <X size={24} />
-                    </button>
-                </div>
-
-                <nav className="p-4 space-y-1">
-                    {navItems.map((item) => (
-                        <Link
-                            key={item.path}
-                            to={item.path}
-                            onClick={() => setSidebarOpen(false)}
-                            className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive(item.path)
-                                ? 'bg-teal-900 text-teal-100 shadow-sm'
-                                : 'text-teal-100 hover:bg-teal-700'
-                                }`}
-                        >
-                            <item.icon size={20} />
-                            <span className="font-medium">{item.label}</span>
-                        </Link>
-                    ))}
-                </nav>
-
-                <div className="absolute bottom-0 w-full p-4 border-t border-teal-700 bg-teal-800">
-                    <div className="flex items-center gap-3">
-                        <div className="w-8 h-8 rounded-full bg-teal-600 flex items-center justify-center font-bold">
-                            A
-                        </div>
-                        <div>
-                            <p className="text-sm font-medium">Admin User</p>
-                            <p className="text-xs text-teal-300">Mirchi Mandi</p>
-                        </div>
-                    </div>
-                </div>
-            </aside>
-
-            {/* Main Content */}
-            <main className="flex-1 flex flex-col overflow-hidden">
-                {/* Top Header */}
-                <header className="h-16 bg-white border-b flex items-center justify-between px-4 lg:px-8">
-                    <button
-                        className="lg:hidden p-2 -ml-2 text-gray-600 hover:bg-gray-100 rounded-lg"
-                        onClick={() => setSidebarOpen(true)}
-                    >
-                        <Menu size={24} />
-                    </button>
-
-                    <h1 className="text-xl font-semibold text-gray-800 ml-2 lg:ml-0">
-                        {navItems.find(i => isActive(i.path))?.label.split(' (')[0] || 'Mirchi Vyapar'}
-                    </h1>
-
-                    <div className="flex items-center gap-4">
-                        <span className="text-sm text-gray-500 hidden md:block">
-                            {new Date().toLocaleDateString('mr-IN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
-                        </span>
-                    </div>
-                </header>
-
-                {/* Page Content */}
-                <div className="flex-1 overflow-auto p-4 lg:p-6 pb-20 lg:pb-6">
-                    {children}
-                </div>
-            </main>
-        </div>
-    );
-};
-
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import {
+    Home,
+    FileInput,
+    FileOutput,
+    Users,
+    Package,
+    Settings,
+    Menu,
+    X,
+    TrendingUp
+} from 'lucide-react';
+
+interface LayoutProps {
+    children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+    const [isSidebarOpen, setSidebarOpen] = useState(false);
+    const location = useLocation();
+
+    const navItems = [
+        { path: '/', label: 'डॅशबोर्ड (Home)', icon: Home },
+        { path: '/jawaak', label: 'जावक बिल (Sales)', icon: FileOutput },
+        { path: '/awaak', label: 'आवक बिल (Purchase)', icon: FileInput },
+        { path: '/ledger', label: 'पार्टी लेजर (Ledger)', icon: Users },
+        { path: '/stock', label: 'स्टॉक रिपोर्ट (Stock)', icon: Package },
+        { path: '/settings', label: 'सेटिंग्स (Settings)', icon: Settings },
+    ];
+
+    const isActive = (path: string) => location.pathname === path;
+
+    return (
+        <div className="flex h-screen bg-gray-50 overflow-hidden">
+            {/* Mobile Sidebar Overlay */}
+            {isSidebarOpen && (
+                <div
+                    className="fixed inset-0 bg-black bg-opacity-50 z-20 lg:hidden"
+                    onClick={() => setSidebarOpen(false)}
+                />
+            )}
+
+            {/* Sidebar */}
+            <aside
+                className={`fixed lg:static inset-y-0 left-0 w-64 bg-teal-800 text-white transform transition-transform duration-200 ease-in-out z-30 ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+                    }`}
+            >
+                <div className="flex items-center justify-between p-4 border-b border-teal-700 h-16">
+                    <div className="flex items-center gap-2">
+                        <TrendingUp className="w-6 h-6 text-teal-300" />
+                        <span className="font-bold text-xl">Mirchi Vyapar</span>
+                    </div>
+                    <button
+                        className="lg:hidden p-1 hover:bg-teal-700 rounded"
+                        onClick={() => setSidebarOpen(false)}
+                    >
+                        <X size={24} />
+                    </button>
+                </div>
+
+                <nav className="p-4 space-y-1">
+                    {navItems.map((item) => (
+                        <Link
+                            key={item.path}
+                            to={item.path}
+                            onClick={() => setSidebarOpen(false)}
+                            className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${isActive(item.path)
+                                ? 'bg-teal-900 text-teal-100 shadow-sm'
+                                : 'text-teal-100 hover:bg-teal-700'
+                                }`}
+                        >
+                            <item.icon size={20} />
+                            <span className="font-medium">{item.label}</span>
+                        </Link>
+                    ))}
+                </nav>
+
+                <div className="absolute bottom-0 w-full p-4 border-t border-teal-700 bg-teal-800">
+                    <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-full bg-teal-600 flex items-center justify-center font-bold">
+                            A
+                        </div>
+                        <div>
+                            <p className="text-sm font-medium">Admin User</p>
+                            <p className="text-xs text-teal-300">Mirchi Mandi</p>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+
+            {/* Main Content */}
+            <main className="flex-1 flex flex-col overflow-hidden">
+                {/* Top Header */}
+                <header className="h-16 bg-white border-b flex items-center justify-between px-4 lg:px-8">
+                    <button
+                        className="lg:hidden p-2 -ml-2 text-gray-600 hover:bg-gray-100 rounded-lg"
+                        onClick={() => setSidebarOpen(true)}
+                    >
+                        <Menu size={24} />
+                    </button>
+
+                    <h1 className="text-xl font-semibold text-gray-800 ml-2 lg:ml-0">
+                        {navItems.find(i => isActive(i.path))?.label.split(' (')[0] || 'Mirchi Vyapar'}
+                    </h1>
+
+                    <div className="flex items-center gap-4">
+                        <span className="text-sm text-gray-500 hidden md:block">
+                            {new Date().toLocaleDateString('mr-IN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                        </span>
+                    </div>
+                </header>
+
+                {/* Page Content */}
+                <div className="flex-1 overflow-auto p-4 lg:p-6 pb-20 lg:pb-6">
+                    {children}
+                </div>
+            </main>
+        </div>
+    );
+};
+
 export default Layout;

components/PrintInvoice.tsx

@@ -22,7 +22,10 @@ const PrintInvoice: React.FC<PrintInvoiceProps> = ({ transaction, className }) =
   const cess = transaction.expenses?.cess_amount || 0;
   const adat = transaction.expenses?.adat_amount || 0;
   const hamali = (transaction.expenses?.hamali_amount || 0) + (transaction.expenses?.packaging_hamali_amount || 0);
-  const grandTotal = transaction.total_amount || 0;
+  const gaadiBharni = transaction.expenses?.gaadi_bharni || 0;
+  const otherExpenses = transaction.expenses?.other_expenses || 0;
+  const grandTotal = transaction.total_amount || (subtotal + packing + cess + adat + hamali + gaadiBharni + otherExpenses);
+
   const paidAmount = transaction.paid_amount || 0;
   const balanceAmount = transaction.balance_amount || 0;
 
@@ -262,6 +265,14 @@ const PrintInvoice: React.FC<PrintInvoiceProps> = ({ transaction, className }) =
                             <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee', color: '#555' }}>Hamali</td>
                             <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee' }}>{formatINR(hamali)}</td>
                           </tr>
+                          <tr>
+                            <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee', color: '#555' }}>Gaadi Bharni</td>
+                            <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee' }}>{formatINR(gaadiBharni)}</td>
+                          </tr>
+                          <tr>
+                            <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee', color: '#555' }}>Other Expenses</td>
+                            <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee' }}>{formatINR(otherExpenses)}</td>
+                          </tr>
                           <tr style={{ backgroundColor: '#f3f4f6' }}>
                             <th style={{ padding: '8px 4px', textAlign: 'left', borderTop: '2px solid #000', fontSize: '14px' }}>Grand Total</th>
                             <th style={{ padding: '8px 4px', textAlign: 'right', borderTop: '2px solid #000', fontSize: '14px' }}>{formatINR(grandTotal)}</th>

index.html

@@ -1,95 +1,95 @@
-<!DOCTYPE html>
-<html lang="mr">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Pattanshetty Inventory</title>
-
-  <!-- PWA Manifest -->
-  <link rel="manifest" href="/manifest.json" />
-  <meta name="theme-color" content="#0d9488" />
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-  <meta name="apple-mobile-web-app-title" content="Pattanshetty" />
-  <link rel="apple-touch-icon" href="/icon-192.png" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-  <style>
-    body {
-      font-family: 'Inter', sans-serif;
-    }
-
-    /* Hide scrollbar for Chrome, Safari and Opera */
-    .no-scrollbar::-webkit-scrollbar {
-      display: none;
-    }
-
-    /* Hide scrollbar for IE, Edge and Firefox */
-    .no-scrollbar {
-      -ms-overflow-style: none;
-      /* IE and Edge */
-      scrollbar-width: none;
-      /* Firefox */
-    }
-
-    /* Chrome, Safari, Edge, Opera - Hide number input arrows */
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    /* Firefox - Hide number input arrows */
-    input[type=number] {
-      -moz-appearance: textfield;
-    }
-  </style>
-  <script type="importmap">
-{
-  "imports": {
-    "react-router-dom": "https://aistudiocdn.com/react-router-dom@^7.9.6",
-    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
-    "react/": "https://aistudiocdn.com/react@^19.2.0/",
-    "react": "https://aistudiocdn.com/react@^19.2.0",
-    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0",
-    "recharts": "https://aistudiocdn.com/recharts@^3.4.1"
-  }
-}
-</script>
-  <link rel="stylesheet" href="/index.css">
-</head>
-
-<body class="bg-gray-50 text-gray-900">
-  <div id="root"></div>
-  <script type="module" src="/index.tsx"></script>
-
-  <!-- Service Worker Registration -->
-  <script>
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', () => {
-        navigator.serviceWorker.register('/service-worker.js')
-          .then((registration) => {
-            console.log('[SW] Registered successfully:', registration.scope);
-
-            // Check for updates
-            registration.addEventListener('updatefound', () => {
-              const newWorker = registration.installing;
-              newWorker.addEventListener('statechange', () => {
-                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
-                  console.log('[SW] New version available! Refresh to update.');
-                }
-              });
-            });
-          })
-          .catch((error) => {
-            console.error('[SW] Registration failed:', error);
-          });
-      });
-    }
-  </script>
-</body>
-
+<!DOCTYPE html>
+<html lang="mr">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pattanshetty Inventory</title>
+
+  <!-- PWA Manifest -->
+  <link rel="manifest" href="/manifest.json" />
+  <meta name="theme-color" content="#0d9488" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-title" content="Pattanshetty" />
+  <link rel="apple-touch-icon" href="/icon-192.png" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body {
+      font-family: 'Inter', sans-serif;
+    }
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .no-scrollbar {
+      -ms-overflow-style: none;
+      /* IE and Edge */
+      scrollbar-width: none;
+      /* Firefox */
+    }
+
+    /* Chrome, Safari, Edge, Opera - Hide number input arrows */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* Firefox - Hide number input arrows */
+    input[type=number] {
+      -moz-appearance: textfield;
+    }
+  </style>
+  <script type="importmap">
+{
+  "imports": {
+    "react-router-dom": "https://aistudiocdn.com/react-router-dom@^7.9.6",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0",
+    "recharts": "https://aistudiocdn.com/recharts@^3.4.1"
+  }
+}
+</script>
+  <link rel="stylesheet" href="/index.css">
+</head>
+
+<body class="bg-gray-50 text-gray-900">
+  <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+
+  <!-- Service Worker Registration -->
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/service-worker.js')
+          .then((registration) => {
+            console.log('[SW] Registered successfully:', registration.scope);
+
+            // Check for updates
+            registration.addEventListener('updatefound', () => {
+              const newWorker = registration.installing;
+              newWorker.addEventListener('statechange', () => {
+                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                  console.log('[SW] New version available! Refresh to update.');
+                }
+              });
+            });
+          })
+          .catch((error) => {
+            console.error('[SW] Registration failed:', error);
+          });
+      });
+    }
+  </script>
+</body>
+
 </html>

index.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-const rootElement = document.getElementById('root');
-if (!rootElement) {
-  throw new Error("Could not find root element to mount to");
-}
-
-const root = ReactDOM.createRoot(rootElement);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );

metadata.json

@@ -1,5 +1,5 @@
-{
-  "name": "Mirchi Vyapar Manager",
-  "description": "A comprehensive Chili Trading Management System for managing Purchases (Jawaak), Sales (Awaak), Inventory (Stock), and Financial Ledgers with Marathi interface support.",
-  "requestFramePermissions": []
+{
+  "name": "Mirchi Vyapar Manager",
+  "description": "A comprehensive Chili Trading Management System for managing Purchases (Jawaak), Sales (Awaak), Inventory (Stock), and Financial Ledgers with Marathi interface support.",
+  "requestFramePermissions": []
 }

package.json

@@ -1,28 +1,28 @@
-{
-  "name": "mirchi-vyapar-manager",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "html2canvas": "^1.4.1",
-    "jspdf": "^3.0.4",
-    "jspdf-autotable": "^5.0.2",
-    "lucide-react": "^0.554.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router-dom": "^7.9.6",
-    "recharts": "^3.4.1",
-    "xlsx": "^0.18.5"
-  },
-  "devDependencies": {
-    "@types/node": "^22.14.0",
-    "@vitejs/plugin-react": "^5.0.0",
-    "typescript": "~5.8.2",
-    "vite": "^6.2.0"
-  }
-}
+{
+  "name": "mirchi-vyapar-manager",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.4",
+    "jspdf-autotable": "^5.0.2",
+    "lucide-react": "^0.554.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.6",
+    "recharts": "^3.4.1",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

pages/AwaakBill.tsx

@@ -1,859 +1,866 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-    getParties, getMirchiTypes, generateBillNumber, saveTransaction,
-    checkLotUnique, getAvailableLotsByMirchi
-} from '../services/db';
-import {
-    Party, MirchiType, Lot, Transaction, TransactionItem, BillType, PaymentMode, PartyType
-} from '../types';
-import { Save, Trash2, Plus, RotateCcw, Printer, Download, ChevronUp, ChevronDown } from 'lucide-react';
-import PrintInvoice from '../components/PrintInvoice.tsx';
-import PdfInvoice from '../components/PdfInvoice.tsx';
-
-// Defined outside to prevent re-render focus loss
-const SummaryInput = ({ label, value, onChange }: { label: string, value: number, onChange: (val: number) => void }) => (
-    <div className="flex justify-between items-center mb-1 bg-gray-50 p-1.5 rounded">
-        <span className="text-gray-600 text-xs">{label}</span>
-        <input
-            type="number"
-            step="0.01"
-            min="0"
-            className="w-24 border rounded text-right p-1 text-sm bg-white focus:ring-1 focus:ring-teal-500 outline-none appearance-none"
-            value={value === 0 ? '' : value}
-            onChange={e => {
-                const parsed = parseFloat(e.target.value);
-                onChange(isNaN(parsed) ? 0 : Math.max(0, parsed));
-            }}
-            placeholder="0"
-        />
-    </div>
-);
-
-const AwaakBill = () => {
-    const navigate = useNavigate();
-
-    // Master Data
-    const [parties, setParties] = useState<Party[]>([]);
-    const [mirchiTypes, setMirchiTypes] = useState<MirchiType[]>([]);
-
-    // Form State
-    const [isReturnMode, setIsReturnMode] = useState(false);
-    const [billDate, setBillDate] = useState(new Date().toISOString().split('T')[0]);
-    const [billNumber, setBillNumber] = useState('');
-    const [selectedParty, setSelectedParty] = useState('');
-
-    // Mobile UI State
-    const [showMobileSummary, setShowMobileSummary] = useState(false);
-
-    const [items, setItems] = useState<Partial<TransactionItem>[]>([{
-        id: Date.now().toString(),
-        poti_weights: [],
-        gross_weight: 0,
-        poti_count: 0,
-        total_potya: 0,
-        net_weight: 0,
-        rate_per_kg: 0,
-        item_total: 0
-    }]);
-
-    // Temp inputs for items row
-    const [potiInputs, setPotiInputs] = useState<{ [key: string]: string }>({});
-
-    // LOT number state
-    const [lotInputs, setLotInputs] = useState<{ [key: string]: string }>({});
-    const [availableLots, setAvailableLots] = useState<{ [key: string]: Lot[] }>({});
-
-    const [expenses, setExpenses] = useState({
-        cess_percent: 1.0,
-        cess_amount: 0,
-        adat_percent: 3.0,
-        adat_amount: 0,
-        poti_rate: 0,
-        poti_amount: 0,
-        hamali_per_poti: 6,
-        hamali_amount: 0,
-        gaadi_bharni: 0,
-    });
-
-    // Payment State
-    const [paymentMode, setPaymentMode] = useState<'cash' | 'online' | 'hybrid' | 'due'>('cash');
-    const [paidAmount, setPaidAmount] = useState(0); // Not used directly in new logic, derived
-    const [cashAmount, setCashAmount] = useState(0); // For hybrid
-    const [onlineAmount, setOnlineAmount] = useState(0); // For hybrid & due
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [savedTransaction, setSavedTransaction] = useState<Transaction | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    // Initial Load & Bill Number Generation
-    useEffect(() => {
-        const loadData = async () => {
-            try {
-                setIsLoading(true);
-                setError(null);
-                const [partiesData, mirchiData] = await Promise.all([
-                    getParties(),
-                    getMirchiTypes()
-                ]);
-
-                if (!partiesData || partiesData.length === 0) {
-                    setError('No parties found. Please add parties in Settings first.');
-                }
-                if (!mirchiData || mirchiData.length === 0) {
-                    setError('No mirchi types found. Please add mirchi types in Settings first.');
-                }
-
-                // Filter parties for Awaak bills
-                const filteredParties = partiesData.filter(p =>
-                    p.party_type === PartyType.AWAAK || p.party_type === PartyType.BOTH
-                );
-
-                setParties(filteredParties || []);
-                setMirchiTypes(mirchiData || []);
-                setBillNumber(generateBillNumber(BillType.AWAAK, isReturnMode));
-            } catch (err: any) {
-                console.error('Error loading data:', err);
-                setError('Failed to load data. Please check your connection and try again.');
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        loadData();
-    }, [isReturnMode]);
-
-    // Calculation Logic
-    const calculateRow = (item: Partial<TransactionItem>, potiString: string) => {
-        const weights = potiString.split(/[\s,+]+/).map(n => parseFloat(n)).filter(n => !isNaN(n) && n > 0);
-
-        const gross = weights.reduce((a, b) => a + b, 0);
-        const count = weights.length;
-        const potya = count * 1; // 1kg deduction per bag
-        const net = Math.max(0, gross - potya);
-        const total = net * (item.rate_per_kg || 0);
-
-        return {
-            ...item,
-            poti_weights: weights,
-            gross_weight: gross,
-            poti_count: count,
-            total_potya: potya,
-            net_weight: net,
-            item_total: total
-        };
-    };
-
-    const handleItemChange = (id: string, field: string, value: any) => {
-        setItems(prev => prev.map(item => {
-            if (item.id !== id) return item;
-
-            let updatedItem = { ...item, [field]: value };
-
-            if (field === 'rate_per_kg') {
-                updatedItem.item_total = (updatedItem.net_weight || 0) * Math.max(0, parseFloat(value || 0));
-            }
-
-            if (field === 'net_weight') {
-                updatedItem.item_total = Math.max(0, parseFloat(value || 0)) * (updatedItem.rate_per_kg || 0);
-            }
-
-            return updatedItem;
-        }));
-    };
-
-    const handlePotiInputChange = (id: string, value: string) => {
-        setPotiInputs(prev => ({ ...prev, [id]: value }));
-        setItems(prev => prev.map(item => {
-            if (item.id !== id) return item;
-            return calculateRow(item, value);
-        }));
-    };
-
-    // Handle mirchi type change - load available lots
-    const handleMirchiChange = async (id: string, mirchiTypeId: string) => {
-        handleItemChange(id, 'mirchi_type_id', mirchiTypeId);
-
-        // Load available lots for this mirchi type
-        if (mirchiTypeId) {
-            const lots = await getAvailableLotsByMirchi(mirchiTypeId);
-            setAvailableLots(prev => ({ ...prev, [id]: lots }));
-
-            // Generate suggested lot number
-            const mirchi = mirchiTypes.find(m => m.id === mirchiTypeId);
-            if (mirchi) {
-                const today = new Date().toISOString().split('T')[0].replace(/-/g, '');
-                const mirchiCode = mirchi.name.substring(0, 4).toUpperCase();
-                const suggestedLot = `LOT-${mirchiCode}-${today}-`;
-                setLotInputs(prev => ({ ...prev, [id]: suggestedLot }));
-            }
-        }
-    };
-
-    // Handle LOT number input change
-    const handleLotNumberChange = (id: string, value: string) => {
-        setLotInputs(prev => ({ ...prev, [id]: value }));
-        handleItemChange(id, 'lot_number', value);
-    };
-
-    // Handle selecting existing lot
-    const handleLotSelection = (id: string, lotNumber: string) => {
-        if (lotNumber) {
-            setLotInputs(prev => ({ ...prev, [id]: lotNumber }));
-            handleItemChange(id, 'lot_number', lotNumber);
-            handleItemChange(id, 'is_existing_lot', true);
-        } else {
-            handleItemChange(id, 'is_existing_lot', false);
-        }
-    };
-
-    const addItem = () => {
-        setItems(prev => [...prev, {
-            id: Date.now().toString(),
-            poti_weights: [],
-            gross_weight: 0,
-            poti_count: 0,
-            total_potya: 0,
-            net_weight: 0,
-            rate_per_kg: 0,
-            item_total: 0
-        }]);
-    };
-
-    const removeItem = (id: string) => {
-        if (items.length > 1) {
-            setItems(prev => prev.filter(i => i.id !== id));
-            const newInputs = { ...potiInputs };
-            delete newInputs[id];
-            setPotiInputs(newInputs);
-        }
-    };
-
-    // Totals Calculation
-    const subtotal = items.reduce((acc, item) => acc + (item.item_total || 0), 0);
-    const totalPoti = items.reduce((acc, item) => acc + (item.poti_count || 0), 0);
-
-    // Derived Expenses - New sequence
-    const potiAmt = totalPoti * expenses.poti_rate;
-    const baseForCess = subtotal + potiAmt; // Cess calculated on subtotal + poti
-    const cessAmt = (baseForCess * expenses.cess_percent) / 100;
-    const adatAmt = (subtotal * expenses.adat_percent) / 100;
-    const hamaliAmt = totalPoti * expenses.hamali_per_poti;
-    const totalExp = potiAmt + cessAmt + adatAmt + hamaliAmt + (expenses.gaadi_bharni || 0);
-    const grandTotal = subtotal + totalExp;
-
-    // Calculate Payment Details based on Mode
-    let finalCash = 0;
-    let finalOnline = 0;
-    let currentPaid = 0;
-
-    if (paymentMode === 'cash') {
-        finalCash = grandTotal;
-        finalOnline = 0;
-        currentPaid = grandTotal;
-    } else if (paymentMode === 'online') {
-        finalCash = 0;
-        finalOnline = grandTotal;
-        currentPaid = grandTotal;
-    } else if (paymentMode === 'hybrid') {
-        finalCash = cashAmount;
-        finalOnline = Math.max(0, grandTotal - cashAmount);
-        currentPaid = grandTotal; // Hybrid assumes full payment
-    } else if (paymentMode === 'due') {
-        finalCash = 0;
-        finalOnline = onlineAmount; // User defined
-        currentPaid = onlineAmount;
-    }
-
-    const balance = grandTotal - currentPaid;
-
-    // Validation Error
-    // Hybrid: Cash cannot exceed Total
-    // Due: Online cannot exceed Total
-    const isOverpaid = (paymentMode === 'hybrid' && cashAmount > grandTotal) ||
-        (paymentMode === 'due' && onlineAmount > grandTotal);
-
-    const validateForm = () => {
-        if (!selectedParty) {
-            alert('Please select a Party (पार्टी निवडा)');
-            return false;
-        }
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i];
-            if (!item.mirchi_type_id) {
-                alert(`Row ${i + 1}: Please select Mirchi Type`);
-                return false;
-            }
-            // LOT validation - different for return vs normal mode
-            if (isReturnMode) {
-                // Return mode: must select existing lot
-                if (!item.lot_id || !item.lot_number) {
-                    alert(`Row ${i + 1}: Please select a LOT to return`);
-                    return false;
-                }
-            } else {
-                // Normal mode: must enter new lot number
-                if (!item.lot_number || item.lot_number.trim() === '') {
-                    alert(`Row ${i + 1}: Please enter LOT number`);
-                    return false;
-                }
-                // Validate LOT number format only in normal mode
-                const lotPattern = /^LOT-[A-Z]{3,4}-\d{8}-.+$/;
-                if (!lotPattern.test(item.lot_number)) {
-                    alert(`Row ${i + 1}: Invalid LOT format. Use: LOT-XXXX-YYYYMMDD-XXX`);
-                    return false;
-                }
-            }
-            if (!item.poti_weights || item.poti_weights.length === 0) {
-                alert(`Row ${i + 1}: Please enter weights (e.g. 10, 20)`);
-                return false;
-            }
-            if (!item.rate_per_kg || item.rate_per_kg <= 0) {
-                alert(`Row ${i + 1}: Rate must be greater than 0`);
-                return false;
-            }
-        }
-        if (isOverpaid) {
-            alert('Paid amount cannot be greater than Total Amount');
-            return false;
-        }
-        return true;
-    };
-
-    const handleSubmit = async () => {
-        if (isSubmitting) return;
-        if (!validateForm()) return;
-
-        setIsSubmitting(true);
-
-        // Populate mirchi_name for each item from mirchiTypes
-        const itemsWithNames = items.map(item => ({
-            ...item,
-            mirchi_name: mirchiTypes.find(m => m.id === item.mirchi_type_id)?.name || 'Unknown'
-        }));
-
-        const transaction: Transaction = {
-            id: Date.now().toString(),
-            bill_number: billNumber,
-            bill_date: billDate,
-            bill_type: BillType.AWAAK,
-            is_return: isReturnMode,
-            party_id: selectedParty,
-            party_name: parties.find(p => p.id === selectedParty)?.name,
-            items: itemsWithNames as TransactionItem[],
-            expenses: {
-                ...expenses,
-                cess_amount: cessAmt,
-                adat_amount: adatAmt,
-                poti_amount: potiAmt,
-                hamali_amount: hamaliAmt
-            },
-            payments: [
-                ...(finalCash > 0 ? [{ mode: PaymentMode.CASH, amount: finalCash }] : []),
-                ...(finalOnline > 0 ? [{ mode: PaymentMode.ONLINE, amount: finalOnline }] : []),
-                ...(balance > 0 ? [{ mode: PaymentMode.DUE, amount: balance }] : []) // Optional: Track due as a payment entry or just balance? Usually balance is enough. Keeping logic simple.
-            ],
-            gross_weight_total: items.reduce((a, i) => a + (i.gross_weight || 0), 0),
-            net_weight_total: items.reduce((a, i) => a + (i.net_weight || 0), 0),
-            subtotal: subtotal,
-            total_expenses: totalExp,
-            total_amount: grandTotal,
-            paid_amount: currentPaid,
-            balance_amount: balance
-        };
-
-        const result = await saveTransaction(transaction);
-        if (result.success) {
-            // Use the complete transaction object we created, not just the API response
-            // This ensures all items are included for printing
-            const completeTransaction = result.data ? {
-                ...transaction,
-                ...result.data,
-                items: transaction.items // Ensure items are preserved
-            } : transaction;
-            setSavedTransaction(completeTransaction);
-            alert('Bill Saved Successfully! You can now print the invoice.');
-        } else {
-            alert(`Error: ${result.message}`);
-        }
-        setIsSubmitting(false);
-    };
-
-    const handleHybridCashChange = (val: number) => {
-        setCashAmount(val);
-        // Online amount is derived in render, no state update needed for it in hybrid
-    };
-
-    const SummaryContent = () => (
-        <div className="space-y-3 text-sm">
-            <div className="flex justify-between">
-                <span className="text-gray-600">एकुण रक्कम (Subtotal)</span>
-                <span className="font-semibold">₹{subtotal.toFixed(2)}</span>
-            </div>
-
-            <div className="pt-2 border-t border-dashed space-y-2">
-                {/* 1. Poti (Bags) Rate */}
-                <SummaryInput
-                    label={`पोती (Bags ${totalPoti}) Rate`}
-                    value={expenses.poti_rate}
-                    onChange={val => setExpenses({ ...expenses, poti_rate: val })}
-                />
-                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
-                    <span>Amount:</span>
-                    <span>₹{potiAmt.toFixed(2)}</span>
-                </div>
-
-                {/* 2. Cess Tax (calculated on subtotal + poti) */}
-                <SummaryInput
-                    label={`सेस (Cess ${expenses.cess_percent}%) on ₹${baseForCess.toFixed(2)}`}
-                    value={expenses.cess_percent}
-                    onChange={val => setExpenses({ ...expenses, cess_percent: val })}
-                />
-                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
-                    <span>Amount:</span>
-                    <span>₹{cessAmt.toFixed(2)}</span>
-                </div>
-
-                {/* 3. Adat / Market Yard Tax */}
-                <SummaryInput
-                    label={`अडत (Adat ${expenses.adat_percent}%)`}
-                    value={expenses.adat_percent}
-                    onChange={val => setExpenses({ ...expenses, adat_percent: val })}
-                />
-                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
-                    <span>Amount:</span>
-                    <span>₹{adatAmt.toFixed(2)}</span>
-                </div>
-
-                {/* 4. Hamali */}
-                <SummaryInput
-                    label={`हमाली (Hamali per poti)`}
-                    value={expenses.hamali_per_poti}
-                    onChange={val => setExpenses({ ...expenses, hamali_per_poti: val })}
-                />
-                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
-                    <span>Amount ({expenses.hamali_per_poti} * {totalPoti}):</span>
-                    <span>₹{hamaliAmt.toFixed(2)}</span>
-                </div>
-
-                {/* 5. Gaadi Bharni */}
-                <SummaryInput
-                    label="गाडी भरणी"
-                    value={expenses.gaadi_bharni}
-                    onChange={val => setExpenses({ ...expenses, gaadi_bharni: val })}
-                />
-            </div>
-
-            {/* 6. Total Price */}
-            <div className="pt-2 border-t border-gray-200 flex justify-between items-center">
-                <span className="text-base font-bold text-gray-800">एकुण बिल (Total)</span>
-                <span className="text-xl font-bold text-red-600">₹{grandTotal.toFixed(2)}</span>
-            </div>
-
-            {/* Payment Section */}
-            <div className="bg-teal-50 p-3 rounded-lg mt-2 border border-teal-100">
-                <label className="block text-xs font-medium text-teal-800 mb-2">Payment Mode</label>
-                <div className="flex gap-2 mb-3">
-                    {['cash', 'online', 'hybrid', 'due'].map(mode => (
-                        <button
-                            key={mode}
-                            onClick={() => {
-                                setPaymentMode(mode as any);
-                                setCashAmount(0);
-                                setOnlineAmount(0);
-                            }}
-                            className={`flex-1 py-1 text-xs font-medium rounded border ${paymentMode === mode
-                                ? 'bg-teal-600 text-white border-teal-600'
-                                : 'bg-white text-gray-600 border-gray-200'
-                                } capitalize`}
-                        >
-                            {mode}
-                        </button>
-                    ))}
-                </div>
-
-                {paymentMode === 'cash' && (
-                    <div className="text-center py-2 text-sm text-gray-600">
-                        Full Payment in Cash: <span className="font-bold text-gray-800">₹{grandTotal.toFixed(2)}</span>
-                    </div>
-                )}
-
-                {paymentMode === 'online' && (
-                    <div className="text-center py-2 text-sm text-gray-600">
-                        Full Payment Online: <span className="font-bold text-gray-800">₹{grandTotal.toFixed(2)}</span>
-                    </div>
-                )}
-
-                {paymentMode === 'hybrid' && (
-                    <div className="space-y-2">
-                        <div>
-                            <label className="text-xs text-gray-600">Cash Amount</label>
-                            <input
-                                type="number"
-                                min="0"
-                                max={grandTotal}
-                                step="0.01"
-                                className="w-full border border-teal-200 rounded p-2 text-right font-medium focus:ring-1 focus:ring-teal-500 outline-none"
-                                value={cashAmount === 0 ? '' : cashAmount}
-                                onChange={e => {
-                                    const val = parseFloat(e.target.value) || 0;
-                                    if (val >= 0 && val <= grandTotal) {
-                                        handleHybridCashChange(val);
-                                    }
-                                }}
-                                onKeyDown={e => {
-                                    // Prevent special characters: -, +, e, E
-                                    if (['-', '+', 'e', 'E'].includes(e.key)) {
-                                        e.preventDefault();
-                                    }
-                                }}
-                                placeholder="Cash"
-                            />
-                        </div>
-                        <div>
-                            <label className="text-xs text-gray-600">Online Amount (Auto)</label>
-                            <input
-                                type="text"
-                                readOnly
-                                className="w-full bg-gray-100 border border-gray-200 rounded p-2 text-right font-medium text-gray-600"
-                                value={(grandTotal - cashAmount).toFixed(2)}
-                            />
-                        </div>
-                    </div>
-                )}
-
-                {paymentMode === 'due' && (
-                    <div className="space-y-2">
-                        <div>
-                            <label className="text-xs text-gray-600">Online Amount (Partial Payment)</label>
-                            <input
-                                type="number"
-                                min="0"
-                                max={grandTotal}
-                                step="0.01"
-                                className="w-full border border-teal-200 rounded p-2 text-right font-medium focus:ring-1 focus:ring-teal-500 outline-none"
-                                value={onlineAmount === 0 ? '' : onlineAmount}
-                                onChange={e => {
-                                    const val = parseFloat(e.target.value) || 0;
-                                    if (val >= 0 && val <= grandTotal) {
-                                        setOnlineAmount(val);
-                                    }
-                                }}
-                                onKeyDown={e => {
-                                    // Prevent special characters: -, +, e, E
-                                    if (['-', '+', 'e', 'E'].includes(e.key)) {
-                                        e.preventDefault();
-                                    }
-                                }}
-                                placeholder="Enter amount paid online (0 for full due)"
-                            />
-                        </div>
-                        <div>
-                            <label className="text-xs text-gray-600">Due Amount (Auto)</label>
-                            <input
-                                type="text"
-                                readOnly
-                                className="w-full bg-red-50 border border-red-200 rounded p-2 text-right font-bold text-red-600"
-                                value={(grandTotal - onlineAmount).toFixed(2)}
-                            />
-                        </div>
-                    </div>
-                )}
-
-                {isOverpaid && (
-                    <div className="text-red-500 text-xs mt-2 font-medium text-center">
-                        Error: Amount exceeds Total!
-                    </div>
-                )}
-            </div>
-
-            <div className="flex justify-between items-center pt-2">
-                <span className="text-gray-600 font-medium">बाकी (Balance)</span>
-                <span className={`font-bold ${balance > 0 ? 'text-red-500' : 'text-green-600'}`}>₹{balance.toFixed(2)}</span>
-            </div>
-        </div>
-    );
-
-    return (
-        <div className="flex flex-col lg:flex-row gap-4 h-full p-4 bg-gray-50">
-            {/* Loading State */}
-            {isLoading && (
-                <div className="flex-1 flex items-center justify-center bg-white rounded-xl shadow-sm border border-gray-100">
-                    <div className="text-center">
-                        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600 mb-4"></div>
-                        <p className="text-gray-600">Loading data...</p>
-                    </div>
-                </div>
-            )}
-
-            {/* Error State */}
-            {error && !isLoading && (
-                <div className="flex-1 flex items-center justify-center bg-white rounded-xl shadow-sm border border-red-200">
-                    <div className="text-center p-8">
-                        <div className="text-red-500 text-5xl mb-4">⚠️</div>
-                        <h3 className="text-lg font-semibold text-gray-800 mb-2">Error Loading Data</h3>
-                        <p className="text-gray-600 mb-4">{error}</p>
-                        <button
-                            onClick={() => window.location.reload()}
-                            className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700"
-                        >
-                            Retry
-                        </button>
-                    </div>
-                </div>
-            )}
-
-            {/* Main Content - Only show when not loading and no error */}
-            {!isLoading && !error && (
-                <>
-                    {/* Left: Form */}
-                    <div className={`flex-1 bg-white rounded-xl shadow-sm border p-4 lg:p-6 lg:overflow-y-auto lg:h-full no-scrollbar pb-40 lg:pb-6 ${isReturnMode ? 'border-red-200' : 'border-gray-100'}`}>
-                        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
-                            <h2 className={`text-lg font-bold flex items-center gap-2 ${isReturnMode ? 'text-red-600' : 'text-gray-800'}`}>
-                                {isReturnMode ? <RotateCcw className="text-red-500" /> : <div className="text-teal-600 font-bold">IN</div>}
-                                {isReturnMode ? 'आवक परतावा (Purchase Return)' : 'आवक बिल (Purchase)'}
-                            </h2>
-
-                            <div className="flex items-center gap-3">
-                                <div className="flex bg-gray-100 rounded-lg p-1">
-                                    <button
-                                        onClick={() => setIsReturnMode(false)}
-                                        className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${!isReturnMode ? 'bg-white text-teal-700 shadow-sm' : 'text-gray-500'}`}
-                                    >
-                                        Regular
-                                    </button>
-                                    <button
-                                        onClick={() => setIsReturnMode(true)}
-                                        className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${isReturnMode ? 'bg-red-500 text-white shadow-sm' : 'text-gray-500'}`}
-                                    >
-                                        Return
-                                    </button>
-                                </div>
-
-                                <input
-                                    type="date"
-                                    className="bg-gray-100 px-3 py-1 rounded text-sm font-mono text-gray-600 border border-gray-200 hover:border-teal-400 focus:border-teal-500 focus:ring-1 focus:ring-teal-500 outline-none cursor-pointer transition-colors"
-                                    value={billDate}
-                                    onChange={(e) => setBillDate(e.target.value)}
-                                    max={new Date().toISOString().split('T')[0]}
-                                />
-                            </div>
-                        </div>
-
-                        {/* Header Fields */}
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">पार्टी नाव (Party)</label>
-                                <select
-                                    className="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-teal-500 outline-none"
-                                    value={selectedParty}
-                                    onChange={e => setSelectedParty(e.target.value)}
-                                >
-                                    <option value="">Select Party</option>
-                                    {parties.map(p => (
-                                        <option key={p.id} value={p.id}>{p.name} - {p.city}</option>
-                                    ))}
-                                </select>
-                            </div>
-                        </div>
-
-                        {/* Items Table */}
-                        <div className="mb-6">
-                            <div className="flex justify-between items-center mb-2">
-                                <h3 className="font-semibold text-gray-700">माल तपशील (Items)</h3>
-                            </div>
-
-                            <div className="space-y-4">
-                                {items.map((item, index) => (
-                                    <div key={item.id} className="p-4 border rounded-lg bg-gray-50 relative shadow-sm">
-                                        <button
-                                            onClick={() => removeItem(item.id!)}
-                                            className="absolute top-2 right-2 text-red-400 hover:text-red-600 p-1"
-                                        >
-                                            <Trash2 size={18} />
-                                        </button>
-
-                                        <div className="grid grid-cols-2 md:grid-cols-6 gap-3">
-                                            <div className="col-span-2">
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">मिरची जात (Type)</label>
-                                                <select
-                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white"
-                                                    value={item.mirchi_type_id || ''}
-                                                    onChange={e => handleMirchiChange(item.id!, e.target.value)}
-                                                >
-                                                    <option value="">Select Type</option>
-                                                    {mirchiTypes.map(m => (
-                                                        <option key={m.id} value={m.id}>{m.name}</option>
-                                                    ))}
-                                                </select>
-                                            </div>
-
-                                            {/* LOT Number Section - Dynamic based on mode */}
-                                            {item.mirchi_type_id && (
-                                                <div className="col-span-2">
-                                                    <label className="block text-xs font-medium text-gray-500 mb-1">
-                                                        LOT Number {isReturnMode && <span className="text-red-500">(Select to Return)</span>}
-                                                    </label>
-                                                    {isReturnMode ? (
-                                                        // RETURN MODE: Select existing lot
-                                                        <select
-                                                            className="w-full border border-gray-300 rounded p-2 text-sm font-mono bg-white"
-                                                            value={item.lot_id || ''}
-                                                            onChange={e => {
-                                                                const selectedLot = availableLots[item.id!]?.find(l => l.id === e.target.value);
-                                                                if (selectedLot) {
-                                                                    handleItemChange(item.id!, 'lot_id', selectedLot.id);
-                                                                    handleItemChange(item.id!, 'lot_number', selectedLot.lot_number);
-                                                                }
-                                                            }}
-                                                        >
-                                                            <option value="">Select LOT to return</option>
-                                                            {(availableLots[item.id!] || []).map(lot => (
-                                                                <option key={lot.id} value={lot.id}>
-                                                                    {lot.lot_number} ({lot.remaining_quantity}kg available)
-                                                                </option>
-                                                            ))}
-                                                        </select>
-                                                    ) : (
-                                                        // NORMAL MODE: New lot input
-                                                        <input
-                                                            type="text"
-                                                            className="w-full border border-gray-300 rounded p-2 text-sm font-mono"
-                                                            placeholder="Enter new LOT number"
-                                                            value={lotInputs[item.id!] || ''}
-                                                            onChange={e => {
-                                                                setLotInputs({ ...lotInputs, [item.id!]: e.target.value });
-                                                                handleItemChange(item.id!, 'lot_number', e.target.value);
-                                                                handleItemChange(item.id!, 'is_existing_lot', false);
-                                                            }}
-                                                        />
-                                                    )}
-                                                </div>
-                                            )}
-                                            <div className="col-span-2 md:col-span-4">
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">पोटी वजन (Eg: 10,20,30)</label>
-                                                <input
-                                                    type="text"
-                                                    placeholder="10, 20, 30"
-                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white"
-                                                    value={potiInputs[item.id!] || ''}
-                                                    onChange={e => handlePotiInputChange(item.id!, e.target.value)}
-                                                />
-                                            </div>
-
-                                            <div>
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">Gross</label>
-                                                <input type="number" readOnly className="w-full bg-gray-100 border border-gray-300 rounded p-2 text-sm" value={item.gross_weight} />
-                                            </div>
-                                            <div>
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">Poti (count)</label>
-                                                <input type="number" readOnly className="w-full bg-gray-100 border border-gray-300 rounded p-2 text-sm text-red-500" value={item.total_potya} />
-                                            </div>
-                                            <div>
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">Net (Editable)</label>
-                                                <input
-                                                    type="number"
-                                                    min="0"
-                                                    className="w-full bg-blue-50 border border-blue-200 rounded p-2 text-sm font-bold text-blue-800 appearance-none"
-                                                    value={item.net_weight === 0 ? '' : item.net_weight}
-                                                    onChange={e => handleItemChange(item.id!, 'net_weight', Math.max(0, parseFloat(e.target.value) || 0))}
-                                                    placeholder="Auto-calculated"
-                                                />
-                                            </div>
-
-                                            <div>
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">Rate (₹)</label>
-                                                <input
-                                                    type="number"
-                                                    min="0"
-                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white appearance-none"
-                                                    onWheel={e => e.currentTarget.blur()}
-                                                    value={item.rate_per_kg === 0 ? '' : item.rate_per_kg}
-                                                    onChange={e => handleItemChange(item.id!, 'rate_per_kg', Math.max(0, parseFloat(e.target.value) || 0))}
-                                                    placeholder="0"
-                                                />
-                                            </div>
-                                            <div className="col-span-2 md:col-span-2">
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">Total (₹)</label>
-                                                <input type="number" readOnly className="w-full bg-green-50 border border-green-200 rounded p-2 text-sm font-bold text-right text-green-800" value={item.item_total?.toFixed(2)} />
-                                            </div>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                            <button
-                                onClick={addItem}
-                                className="w-full mt-4 flex justify-center items-center gap-2 text-teal-600 font-medium bg-teal-50 hover:bg-teal-100 py-3 rounded-lg border border-teal-100 transition"
-                            >
-                                <Plus size={18} /> Add New Item (नवीन माल)
-                            </button>
-                        </div>
-                    </div>
-
-                    {/* Desktop: Right Summary Sidebar */}
-                    <div className="hidden lg:flex w-80 flex-col gap-4">
-                        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-0">
-                            <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">बिल सारांश (Summary)</h3>
-                            {SummaryContent()}
-                            <div className="flex gap-2 mt-6">
-                                {savedTransaction && (
-                                    <>
-                                        <PrintInvoice transaction={savedTransaction} />
-                                        <PdfInvoice transaction={savedTransaction} />
-                                    </>
-                                )}
-                                <button
-                                    onClick={handleSubmit}
-                                    disabled={isSubmitting || items.length === 0}
-                                    className={`flex-1 bg-teal-600 text-white py-3 rounded-lg font-bold shadow-lg hover:bg-teal-700 transition-all flex items-center justify-center gap-2 ${isSubmitting || items.length === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
-                                >
-                                    <Save size={20} />
-                                    {isSubmitting ? 'Saving...' : 'Save Bill'}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Mobile: Sticky Bottom Action Bar */}
-                    <div className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-[0_-4px_10px_rgba(0,0,0,0.1)] z-20">
-                        <div className="flex items-center justify-between p-4 bg-white z-20 relative">
-                            <div
-                                onClick={() => setShowMobileSummary(!showMobileSummary)}
-                                className="flex flex-col cursor-pointer"
-                            >
-                                <div className="flex items-center gap-1 text-gray-500 text-xs font-medium uppercase tracking-wide">
-                                    Summary {showMobileSummary ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
-                                </div>
-                                <div className="text-xl font-bold text-red-600">
-                                    ₹{grandTotal.toFixed(2)}
-                                </div>
-                            </div>
-                            <button
-                                onClick={handleSubmit}
-                                disabled={isSubmitting}
-                                className="bg-teal-600 text-white px-6 py-2.5 rounded-lg font-semibold flex items-center gap-2 shadow-sm active:bg-teal-700 disabled:opacity-50"
-                            >
-                                <Save size={18} /> {isSubmitting ? '...' : 'Save'}
-                            </button>
-                        </div>
-
-                        {showMobileSummary && (
-                            <div className="px-6 pb-6 pt-0 bg-white border-t border-dashed border-gray-200 max-h-[60vh] overflow-y-auto animate-in slide-in-from-bottom-2">
-                                <div className="mt-4">
-                                    {SummaryContent()}
-                                </div>
-                                {savedTransaction && (
-                                    <div className="mt-4 flex justify-center">
-                                        <PrintInvoice transaction={savedTransaction} />
-                                    </div>
-                                )}
-                            </div>
-                        )}
-                    </div>
-                </>
-            )}
-        </div>
-    );
-};
-
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+    getParties, getMirchiTypes, generateBillNumber, saveTransaction,
+    checkLotUnique, getAvailableLotsByMirchi
+} from '../services/db';
+import {
+    Party, MirchiType, Lot, Transaction, TransactionItem, BillType, PaymentMode, PartyType
+} from '../types';
+import { Save, Trash2, Plus, RotateCcw, Printer, Download, ChevronUp, ChevronDown } from 'lucide-react';
+import PrintInvoice from '../components/PrintInvoice.tsx';
+import PdfInvoice from '../components/PdfInvoice.tsx';
+
+// Defined outside to prevent re-render focus loss
+const SummaryInput = ({ label, value, onChange }: { label: string, value: number, onChange: (val: number) => void }) => (
+    <div className="flex justify-between items-center mb-1 bg-gray-50 p-1.5 rounded">
+        <span className="text-gray-600 text-xs">{label}</span>
+        <input
+            type="number"
+            step="0.01"
+            min="0"
+            className="w-24 border rounded text-right p-1 text-sm bg-white focus:ring-1 focus:ring-teal-500 outline-none appearance-none"
+            value={value === 0 ? '' : value}
+            onChange={e => {
+                const parsed = parseFloat(e.target.value);
+                onChange(isNaN(parsed) ? 0 : Math.max(0, parsed));
+            }}
+            placeholder="0"
+        />
+    </div>
+);
+
+const AwaakBill = () => {
+    const navigate = useNavigate();
+
+    // Master Data
+    const [parties, setParties] = useState<Party[]>([]);
+    const [mirchiTypes, setMirchiTypes] = useState<MirchiType[]>([]);
+
+    // Form State
+    const [isReturnMode, setIsReturnMode] = useState(false);
+    const [billDate, setBillDate] = useState(new Date().toISOString().split('T')[0]);
+    const [billNumber, setBillNumber] = useState('');
+    const [selectedParty, setSelectedParty] = useState('');
+
+    // Mobile UI State
+    const [showMobileSummary, setShowMobileSummary] = useState(false);
+
+    const [items, setItems] = useState<Partial<TransactionItem>[]>([{
+        id: Date.now().toString(),
+        poti_weights: [],
+        gross_weight: 0,
+        poti_count: 0,
+        total_potya: 0,
+        net_weight: 0,
+        rate_per_kg: 0,
+        item_total: 0
+    }]);
+
+    // Temp inputs for items row
+    const [potiInputs, setPotiInputs] = useState<{ [key: string]: string }>({});
+
+    // LOT number state
+    const [lotInputs, setLotInputs] = useState<{ [key: string]: string }>({});
+    const [availableLots, setAvailableLots] = useState<{ [key: string]: Lot[] }>({});
+
+    const [expenses, setExpenses] = useState({
+        cess_percent: 1.0,
+        cess_amount: 0,
+        adat_percent: 3.0,
+        adat_amount: 0,
+        poti_rate: 0,
+        poti_amount: 0,
+        hamali_per_poti: 6,
+        hamali_amount: 0,
+        gaadi_bharni: 0,
+        other_expenses: 0,
+    });
+
+    // Payment State
+    const [paymentMode, setPaymentMode] = useState<'cash' | 'online' | 'hybrid' | 'due'>('cash');
+    const [paidAmount, setPaidAmount] = useState(0); // Not used directly in new logic, derived
+    const [cashAmount, setCashAmount] = useState(0); // For hybrid
+    const [onlineAmount, setOnlineAmount] = useState(0); // For hybrid & due
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [savedTransaction, setSavedTransaction] = useState<Transaction | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // Initial Load & Bill Number Generation
+    useEffect(() => {
+        const loadData = async () => {
+            try {
+                setIsLoading(true);
+                setError(null);
+                const [partiesData, mirchiData] = await Promise.all([
+                    getParties(),
+                    getMirchiTypes()
+                ]);
+
+                if (!partiesData || partiesData.length === 0) {
+                    setError('No parties found. Please add parties in Settings first.');
+                }
+                if (!mirchiData || mirchiData.length === 0) {
+                    setError('No mirchi types found. Please add mirchi types in Settings first.');
+                }
+
+                // Filter parties for Awaak bills
+                const filteredParties = partiesData.filter(p =>
+                    p.party_type === PartyType.AWAAK || p.party_type === PartyType.BOTH
+                );
+
+                setParties(filteredParties || []);
+                setMirchiTypes(mirchiData || []);
+                setBillNumber(generateBillNumber(BillType.AWAAK, isReturnMode));
+            } catch (err: any) {
+                console.error('Error loading data:', err);
+                setError('Failed to load data. Please check your connection and try again.');
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        loadData();
+    }, [isReturnMode]);
+
+    // Calculation Logic
+    const calculateRow = (item: Partial<TransactionItem>, potiString: string) => {
+        const weights = potiString.split(/[\s,+]+/).map(n => parseFloat(n)).filter(n => !isNaN(n) && n > 0);
+
+        const gross = weights.reduce((a, b) => a + b, 0);
+        const count = weights.length;
+        const potya = count * 1; // 1kg deduction per bag
+        const net = Math.max(0, gross - potya);
+        const total = net * (item.rate_per_kg || 0);
+
+        return {
+            ...item,
+            poti_weights: weights,
+            gross_weight: gross,
+            poti_count: count,
+            total_potya: potya,
+            net_weight: net,
+            item_total: total
+        };
+    };
+
+    const handleItemChange = (id: string, field: string, value: any) => {
+        setItems(prev => prev.map(item => {
+            if (item.id !== id) return item;
+
+            let updatedItem = { ...item, [field]: value };
+
+            if (field === 'rate_per_kg') {
+                updatedItem.item_total = (updatedItem.net_weight || 0) * Math.max(0, parseFloat(value || 0));
+            }
+
+            if (field === 'net_weight') {
+                updatedItem.item_total = Math.max(0, parseFloat(value || 0)) * (updatedItem.rate_per_kg || 0);
+            }
+
+            return updatedItem;
+        }));
+    };
+
+    const handlePotiInputChange = (id: string, value: string) => {
+        setPotiInputs(prev => ({ ...prev, [id]: value }));
+        setItems(prev => prev.map(item => {
+            if (item.id !== id) return item;
+            return calculateRow(item, value);
+        }));
+    };
+
+    // Handle mirchi type change - load available lots
+    const handleMirchiChange = async (id: string, mirchiTypeId: string) => {
+        handleItemChange(id, 'mirchi_type_id', mirchiTypeId);
+
+        // Load available lots for this mirchi type
+        if (mirchiTypeId) {
+            const lots = await getAvailableLotsByMirchi(mirchiTypeId);
+            setAvailableLots(prev => ({ ...prev, [id]: lots }));
+
+            // Generate suggested lot number
+            const mirchi = mirchiTypes.find(m => m.id === mirchiTypeId);
+            if (mirchi) {
+                const today = new Date().toISOString().split('T')[0].replace(/-/g, '');
+                const mirchiCode = mirchi.name.substring(0, 4).toUpperCase();
+                const suggestedLot = `LOT-${mirchiCode}-${today}-`;
+                setLotInputs(prev => ({ ...prev, [id]: suggestedLot }));
+            }
+        }
+    };
+
+    // Handle LOT number input change
+    const handleLotNumberChange = (id: string, value: string) => {
+        setLotInputs(prev => ({ ...prev, [id]: value }));
+        handleItemChange(id, 'lot_number', value);
+    };
+
+    // Handle selecting existing lot
+    const handleLotSelection = (id: string, lotNumber: string) => {
+        if (lotNumber) {
+            setLotInputs(prev => ({ ...prev, [id]: lotNumber }));
+            handleItemChange(id, 'lot_number', lotNumber);
+            handleItemChange(id, 'is_existing_lot', true);
+        } else {
+            handleItemChange(id, 'is_existing_lot', false);
+        }
+    };
+
+    const addItem = () => {
+        setItems(prev => [...prev, {
+            id: Date.now().toString(),
+            poti_weights: [],
+            gross_weight: 0,
+            poti_count: 0,
+            total_potya: 0,
+            net_weight: 0,
+            rate_per_kg: 0,
+            item_total: 0
+        }]);
+    };
+
+    const removeItem = (id: string) => {
+        if (items.length > 1) {
+            setItems(prev => prev.filter(i => i.id !== id));
+            const newInputs = { ...potiInputs };
+            delete newInputs[id];
+            setPotiInputs(newInputs);
+        }
+    };
+
+    // Totals Calculation
+    const subtotal = items.reduce((acc, item) => acc + (item.item_total || 0), 0);
+    const totalPoti = items.reduce((acc, item) => acc + (item.poti_count || 0), 0);
+
+    // Derived Expenses - New sequence
+    const potiAmt = totalPoti * expenses.poti_rate;
+    const baseForCess = subtotal + potiAmt; // Cess calculated on subtotal + poti
+    const cessAmt = (baseForCess * expenses.cess_percent) / 100;
+    const adatAmt = (subtotal * expenses.adat_percent) / 100;
+    const hamaliAmt = totalPoti * expenses.hamali_per_poti;
+    const totalExp = potiAmt + cessAmt + adatAmt + hamaliAmt + (expenses.gaadi_bharni || 0) + (expenses.other_expenses || 0);
+    const grandTotal = subtotal + totalExp;
+
+    // Calculate Payment Details based on Mode
+    let finalCash = 0;
+    let finalOnline = 0;
+    let currentPaid = 0;
+
+    if (paymentMode === 'cash') {
+        finalCash = grandTotal;
+        finalOnline = 0;
+        currentPaid = grandTotal;
+    } else if (paymentMode === 'online') {
+        finalCash = 0;
+        finalOnline = grandTotal;
+        currentPaid = grandTotal;
+    } else if (paymentMode === 'hybrid') {
+        finalCash = cashAmount;
+        finalOnline = Math.max(0, grandTotal - cashAmount);
+        currentPaid = grandTotal; // Hybrid assumes full payment
+    } else if (paymentMode === 'due') {
+        finalCash = 0;
+        finalOnline = onlineAmount; // User defined
+        currentPaid = onlineAmount;
+    }
+
+    const balance = grandTotal - currentPaid;
+
+    // Validation Error
+    // Hybrid: Cash cannot exceed Total
+    // Due: Online cannot exceed Total
+    const isOverpaid = (paymentMode === 'hybrid' && cashAmount > grandTotal) ||
+        (paymentMode === 'due' && onlineAmount > grandTotal);
+
+    const validateForm = () => {
+        if (!selectedParty) {
+            alert('Please select a Party (पार्टी निवडा)');
+
+            return false;
+        }
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (!item.mirchi_type_id) {
+                alert(`Row ${i + 1}: Please select Mirchi Type`);
+                return false;
+            }
+            // LOT validation - different for return vs normal mode
+            if (isReturnMode) {
+                // Return mode: must select existing lot
+                if (!item.lot_id || !item.lot_number) {
+                    alert(`Row ${i + 1}: Please select a LOT to return`);
+                    return false;
+                }
+            } else {
+                // Normal mode: must enter new lot number
+                if (!item.lot_number || item.lot_number.trim() === '') {
+                    alert(`Row ${i + 1}: Please enter LOT number`);
+                    return false;
+                }
+            }
+            if (!item.poti_weights || item.poti_weights.length === 0) {
+                alert(`Row ${i + 1}: Please enter weights (e.g. 10, 20)`);
+                return false;
+            }
+            if (!item.rate_per_kg || item.rate_per_kg <= 0) {
+                alert(`Row ${i + 1}: Rate must be greater than 0`);
+                return false;
+            }
+        }
+        if (isOverpaid) {
+            alert('Paid amount cannot be greater than Total Amount');
+            return false;
+        }
+        return true;
+    };
+
+    const handleSubmit = async () => {
+        if (isSubmitting) return;
+        if (!validateForm()) return;
+
+        setIsSubmitting(true);
+
+        // Populate mirchi_name for each item from mirchiTypes
+        const itemsWithNames = items.map(item => ({
+            ...item,
+            mirchi_name: mirchiTypes.find(m => m.id === item.mirchi_type_id)?.name || 'Unknown'
+        }));
+
+        const transaction: Transaction = {
+            id: Date.now().toString(),
+            bill_number: billNumber,
+            bill_date: billDate,
+            bill_type: BillType.AWAAK,
+            is_return: isReturnMode,
+            party_id: selectedParty,
+            party_name: parties.find(p => p.id === selectedParty)?.name,
+            items: itemsWithNames as TransactionItem[],
+            expenses: {
+                ...expenses,
+                cess_amount: cessAmt,
+                adat_amount: adatAmt,
+                poti_amount: potiAmt,
+                hamali_amount: hamaliAmt
+            },
+            payments: [
+                ...(finalCash > 0 ? [{ mode: PaymentMode.CASH, amount: finalCash }] : []),
+                ...(finalOnline > 0 ? [{ mode: PaymentMode.ONLINE, amount: finalOnline }] : []),
+                ...(balance > 0 ? [{ mode: PaymentMode.DUE, amount: balance }] : []) // Optional: Track due as a payment entry or just balance? Usually balance is enough. Keeping logic simple.
+            ],
+            gross_weight_total: items.reduce((a, i) => a + (i.gross_weight || 0), 0),
+            net_weight_total: items.reduce((a, i) => a + (i.net_weight || 0), 0),
+            subtotal: subtotal,
+            total_expenses: totalExp,
+            total_amount: grandTotal,
+            paid_amount: currentPaid,
+            balance_amount: balance
+        };
+
+        const result = await saveTransaction(transaction);
+        if (result.success) {
+            // Use the complete transaction object we created, not just the API response
+            // This ensures all items are included for printing
+            const completeTransaction = result.data ? {
+                ...transaction,
+                ...result.data,
+                items: transaction.items, // Ensure items are preserved
+                expenses: {
+                    ...result.data.expenses,
+                    other_expenses: transaction.expenses.other_expenses,
+                },
+            } : transaction;
+            setSavedTransaction(completeTransaction);
+            alert('Bill Saved Successfully! You can now print the invoice.');
+        } else {
+            alert(`Error: ${result.message}`);
+        }
+        setIsSubmitting(false);
+    };
+
+    const handleHybridCashChange = (val: number) => {
+        setCashAmount(val);
+        // Online amount is derived in render, no state update needed for it in hybrid
+    };
+
+    const SummaryContent = () => (
+        <div className="space-y-3 text-sm">
+            <div className="flex justify-between">
+                <span className="text-gray-600">एकुण रक्कम (Subtotal)</span>
+                <span className="font-semibold">₹{subtotal.toFixed(2)}</span>
+            </div>
+
+            <div className="pt-2 border-t border-dashed space-y-2">
+                {/* 1. Poti (Bags) Rate */}
+                <SummaryInput
+                    label={`पोती (Bags ${totalPoti}) Rate`}
+                    value={expenses.poti_rate}
+                    onChange={val => setExpenses({ ...expenses, poti_rate: val })}
+                />
+                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
+                    <span>Amount:</span>
+                    <span>₹{potiAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 2. Cess Tax (calculated on subtotal + poti) */}
+                <SummaryInput
+                    label={`सेस (Cess ${expenses.cess_percent}%) on ₹${baseForCess.toFixed(2)}`}
+                    value={expenses.cess_percent}
+                    onChange={val => setExpenses({ ...expenses, cess_percent: val })}
+                />
+                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
+                    <span>Amount:</span>
+                    <span>₹{cessAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 3. Adat / Market Yard Tax */}
+                <SummaryInput
+                    label={`अडत (Adat ${expenses.adat_percent}%)`}
+                    value={expenses.adat_percent}
+                    onChange={val => setExpenses({ ...expenses, adat_percent: val })}
+                />
+                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
+                    <span>Amount:</span>
+                    <span>₹{adatAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 4. Hamali */}
+                <SummaryInput
+                    label={`हमाली (Hamali per poti)`}
+                    value={expenses.hamali_per_poti}
+                    onChange={val => setExpenses({ ...expenses, hamali_per_poti: val })}
+                />
+                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
+                    <span>Amount ({expenses.hamali_per_poti} * {totalPoti}):</span>
+                    <span>₹{hamaliAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 5. Gaadi Bharni */}
+                <SummaryInput
+                    label="गाडी भरणी"
+                    value={expenses.gaadi_bharni}
+                    onChange={val => setExpenses({ ...expenses, gaadi_bharni: val })}
+                />
+
+                {/* 6. Other Expenses */}
+                <SummaryInput
+                    label="Other Expenses"
+                    value={expenses.other_expenses}
+                    onChange={val => setExpenses({ ...expenses, other_expenses: val })}
+                />
+            </div>
+
+            {/* 7. Total Price */}
+            <div className="pt-2 border-t border-gray-200 flex justify-between items-center">
+                <span className="text-base font-bold text-gray-800">एकुण बिल (Total)</span>
+                <span className="text-xl font-bold text-red-600">₹{grandTotal.toFixed(2)}</span>
+            </div>
+
+            {/* Payment Section */}
+            <div className="bg-teal-50 p-3 rounded-lg mt-2 border border-teal-100">
+                <label className="block text-xs font-medium text-teal-800 mb-2">Payment Mode</label>
+                <div className="flex gap-2 mb-3">
+                    {['cash', 'online', 'hybrid', 'due'].map(mode => (
+                        <button
+                            key={mode}
+                            onClick={() => {
+                                setPaymentMode(mode as any);
+                                setCashAmount(0);
+                                setOnlineAmount(0);
+                            }}
+                            className={`flex-1 py-1 text-xs font-medium rounded border ${paymentMode === mode
+                                ? 'bg-teal-600 text-white border-teal-600'
+                                : 'bg-white text-gray-600 border-gray-200'
+                                } capitalize`}
+                        >
+                            {mode}
+                        </button>
+                    ))}
+                </div>
+
+                {paymentMode === 'cash' && (
+                    <div className="text-center py-2 text-sm text-gray-600">
+                        Full Payment in Cash: <span className="font-bold text-gray-800">₹{grandTotal.toFixed(2)}</span>
+                    </div>
+                )}
+
+                {paymentMode === 'online' && (
+                    <div className="text-center py-2 text-sm text-gray-600">
+                        Full Payment Online: <span className="font-bold text-gray-800">₹{grandTotal.toFixed(2)}</span>
+                    </div>
+                )}
+
+                {paymentMode === 'hybrid' && (
+                    <div className="space-y-2">
+                        <div>
+                            <label className="text-xs text-gray-600">Cash Amount</label>
+                            <input
+                                type="number"
+                                min="0"
+                                max={grandTotal}
+                                step="0.01"
+                                className="w-full border border-teal-200 rounded p-2 text-right font-medium focus:ring-1 focus:ring-teal-500 outline-none"
+                                value={cashAmount === 0 ? '' : cashAmount}
+                                onChange={e => {
+                                    const val = parseFloat(e.target.value) || 0;
+                                    if (val >= 0 && val <= grandTotal) {
+                                        handleHybridCashChange(val);
+                                    }
+                                }}
+                                onKeyDown={e => {
+                                    // Prevent special characters: -, +, e, E
+                                    if (['-', '+', 'e', 'E'].includes(e.key)) {
+                                        e.preventDefault();
+                                    }
+                                }}
+                                placeholder="Cash"
+                            />
+                        </div>
+                        <div>
+                            <label className="text-xs text-gray-600">Online Amount (Auto)</label>
+                            <input
+                                type="text"
+                                readOnly
+                                className="w-full bg-gray-100 border border-gray-200 rounded p-2 text-right font-medium text-gray-600"
+                                value={(grandTotal - cashAmount).toFixed(2)}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {paymentMode === 'due' && (
+                    <div className="space-y-2">
+                        <div>
+                            <label className="text-xs text-gray-600">Online Amount (Partial Payment)</label>
+                            <input
+                                type="number"
+                                min="0"
+                                max={grandTotal}
+                                step="0.01"
+                                className="w-full border border-teal-200 rounded p-2 text-right font-medium focus:ring-1 focus:ring-teal-500 outline-none"
+                                value={onlineAmount === 0 ? '' : onlineAmount}
+                                onChange={e => {
+                                    const val = parseFloat(e.target.value) || 0;
+                                    if (val >= 0 && val <= grandTotal) {
+                                        setOnlineAmount(val);
+                                    }
+                                }}
+                                onKeyDown={e => {
+                                    // Prevent special characters: -, +, e, E
+                                    if (['-', '+', 'e', 'E'].includes(e.key)) {
+                                        e.preventDefault();
+                                    }
+                                }}
+                                placeholder="Enter amount paid online (0 for full due)"
+                            />
+                        </div>
+                        <div>
+                            <label className="text-xs text-gray-600">Due Amount (Auto)</label>
+                            <input
+                                type="text"
+                                readOnly
+                                className="w-full bg-red-50 border border-red-200 rounded p-2 text-right font-bold text-red-600"
+                                value={(grandTotal - onlineAmount).toFixed(2)}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {isOverpaid && (
+                    <div className="text-red-500 text-xs mt-2 font-medium text-center">
+                        Error: Amount exceeds Total!
+                    </div>
+                )}
+            </div>
+
+            <div className="flex justify-between items-center pt-2">
+                <span className="text-gray-600 font-medium">बाकी (Balance)</span>
+                <span className={`font-bold ${balance > 0 ? 'text-red-500' : 'text-green-600'}`}>₹{balance.toFixed(2)}</span>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="flex flex-col lg:flex-row gap-4 h-full p-4 bg-gray-50">
+            {/* Loading State */}
+            {isLoading && (
+                <div className="flex-1 flex items-center justify-center bg-white rounded-xl shadow-sm border border-gray-100">
+                    <div className="text-center">
+                        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600 mb-4"></div>
+                        <p className="text-gray-600">Loading data...</p>
+                    </div>
+                </div>
+            )}
+
+            {/* Error State */}
+            {error && !isLoading && (
+                <div className="flex-1 flex items-center justify-center bg-white rounded-xl shadow-sm border border-red-200">
+                    <div className="text-center p-8">
+                        <div className="text-red-500 text-5xl mb-4">⚠️</div>
+                        <h3 className="text-lg font-semibold text-gray-800 mb-2">Error Loading Data</h3>
+                        <p className="text-gray-600 mb-4">{error}</p>
+                        <button
+                            onClick={() => window.location.reload()}
+                            className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700"
+                        >
+                            Retry
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {/* Main Content - Only show when not loading and no error */}
+            {!isLoading && !error && (
+                <>
+                    {/* Left: Form */}
+                    <div className={`flex-1 bg-white rounded-xl shadow-sm border p-4 lg:p-6 lg:overflow-y-auto lg:h-full no-scrollbar pb-40 lg:pb-6 ${isReturnMode ? 'border-red-200' : 'border-gray-100'}`}>
+                        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
+                            <h2 className={`text-lg font-bold flex items-center gap-2 ${isReturnMode ? 'text-red-600' : 'text-gray-800'}`}>
+                                {isReturnMode ? <RotateCcw className="text-red-500" /> : <div className="text-teal-600 font-bold">IN</div>}
+                                {isReturnMode ? 'आवक परतावा (Purchase Return)' : 'आवक बिल (Purchase)'}
+                            </h2>
+
+                            <div className="flex items-center gap-3">
+                                <div className="flex bg-gray-100 rounded-lg p-1">
+                                    <button
+                                        onClick={() => setIsReturnMode(false)}
+                                        className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${!isReturnMode ? 'bg-white text-teal-700 shadow-sm' : 'text-gray-500'}`}
+                                    >
+                                        Regular
+                                    </button>
+                                    <button
+                                        onClick={() => setIsReturnMode(true)}
+                                        className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${isReturnMode ? 'bg-red-500 text-white shadow-sm' : 'text-gray-500'}`}
+                                    >
+                                        Return
+                                    </button>
+                                </div>
+
+                                <input
+                                    type="date"
+                                    className="bg-gray-100 px-3 py-1 rounded text-sm font-mono text-gray-600 border border-gray-200 hover:border-teal-400 focus:border-teal-500 focus:ring-1 focus:ring-teal-500 outline-none cursor-pointer transition-colors"
+                                    value={billDate}
+                                    onChange={(e) => setBillDate(e.target.value)}
+                                    max={new Date().toISOString().split('T')[0]}
+                                />
+                            </div>
+                        </div>
+
+                        {/* Header Fields */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">पार्टी नाव (Party)</label>
+                                <select
+                                    className="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-teal-500 outline-none"
+                                    value={selectedParty}
+                                    onChange={e => setSelectedParty(e.target.value)}
+                                >
+                                    <option value="">Select Party</option>
+                                    {parties.map(p => (
+                                        <option key={p.id} value={p.id}>{p.name} - {p.city}</option>
+                                    ))}
+                                </select>
+                            </div>
+                        </div>
+
+                        {/* Items Table */}
+                        <div className="mb-6">
+                            <div className="flex justify-between items-center mb-2">
+                                <h3 className="font-semibold text-gray-700">माल तपशील (Items)</h3>
+                            </div>
+
+                            <div className="space-y-4">
+                                {items.map((item, index) => (
+                                    <div key={item.id} className="p-4 border rounded-lg bg-gray-50 relative shadow-sm">
+                                        <button
+                                            onClick={() => removeItem(item.id!)}
+                                            className="absolute top-2 right-2 text-red-400 hover:text-red-600 p-1"
+                                        >
+                                            <Trash2 size={18} />
+                                        </button>
+
+                                        <div className="grid grid-cols-2 md:grid-cols-6 gap-3">
+                                            <div className="col-span-2">
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">मिरची जात (Type)</label>
+                                                <select
+                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white"
+                                                    value={item.mirchi_type_id || ''}
+                                                    onChange={e => handleMirchiChange(item.id!, e.target.value)}
+                                                >
+                                                    <option value="">Select Type</option>
+                                                    {mirchiTypes.map(m => (
+                                                        <option key={m.id} value={m.id}>{m.name}</option>
+                                                    ))}
+                                                </select>
+                                            </div>
+
+                                            {/* LOT Number Section - Dynamic based on mode */}
+                                            {item.mirchi_type_id && (
+                                                <div className="col-span-2">
+                                                    <label className="block text-xs font-medium text-gray-500 mb-1">
+                                                        LOT Number {isReturnMode && <span className="text-red-500">(Select to Return)</span>}
+                                                    </label>
+                                                    {isReturnMode ? (
+                                                        // RETURN MODE: Select existing lot
+                                                        <select
+                                                            className="w-full border border-gray-300 rounded p-2 text-sm font-mono bg-white"
+                                                            value={item.lot_id || ''}
+                                                            onChange={e => {
+                                                                const selectedLot = availableLots[item.id!]?.find(l => l.id === e.target.value);
+                                                                if (selectedLot) {
+                                                                    handleItemChange(item.id!, 'lot_id', selectedLot.id);
+                                                                    handleItemChange(item.id!, 'lot_number', selectedLot.lot_number);
+                                                                }
+                                                            }}
+                                                        >
+                                                            <option value="">Select LOT to return</option>
+                                                            {(availableLots[item.id!] || []).map(lot => (
+                                                                <option key={lot.id} value={lot.id}>
+                                                                    {lot.lot_number} ({lot.remaining_quantity}kg available)
+                                                                </option>
+                                                            ))}
+                                                        </select>
+                                                    ) : (
+                                                        // NORMAL MODE: New lot input
+                                                        <input
+                                                            type="text"
+                                                            className="w-full border border-gray-300 rounded p-2 text-sm font-mono"
+                                                            placeholder="Enter new LOT number"
+                                                            value={lotInputs[item.id!] || ''}
+                                                            onChange={e => {
+                                                                setLotInputs({ ...lotInputs, [item.id!]: e.target.value });
+                                                                handleItemChange(item.id!, 'lot_number', e.target.value);
+                                                                handleItemChange(item.id!, 'is_existing_lot', false);
+                                                            }}
+                                                        />
+                                                    )}
+                                                </div>
+                                            )}
+                                            <div className="col-span-2 md:col-span-4">
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">पोटी वजन (Eg: 10,20,30)</label>
+                                                <input
+                                                    type="text"
+                                                    placeholder="10, 20, 30"
+                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white"
+                                                    value={potiInputs[item.id!] || ''}
+                                                    onChange={e => handlePotiInputChange(item.id!, e.target.value)}
+                                                />
+                                            </div>
+
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Gross</label>
+                                                <input type="number" readOnly className="w-full bg-gray-100 border border-gray-300 rounded p-2 text-sm" value={item.gross_weight} />
+                                            </div>
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Poti (count)</label>
+                                                <input type="number" readOnly className="w-full bg-gray-100 border border-gray-300 rounded p-2 text-sm text-red-500" value={item.total_potya} />
+                                            </div>
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Net (Editable)</label>
+                                                <input
+                                                    type="number"
+                                                    min="0"
+                                                    className="w-full bg-blue-50 border border-blue-200 rounded p-2 text-sm font-bold text-blue-800 appearance-none"
+                                                    value={item.net_weight === 0 ? '' : item.net_weight}
+                                                    onChange={e => handleItemChange(item.id!, 'net_weight', Math.max(0, parseFloat(e.target.value) || 0))}
+                                                    placeholder="Auto-calculated"
+                                                />
+                                            </div>
+
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Rate (₹)</label>
+                                                <input
+                                                    type="number"
+                                                    min="0"
+                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white appearance-none"
+                                                    onWheel={e => e.currentTarget.blur()}
+                                                    value={item.rate_per_kg === 0 ? '' : item.rate_per_kg}
+                                                    onChange={e => handleItemChange(item.id!, 'rate_per_kg', Math.max(0, parseFloat(e.target.value) || 0))}
+                                                    placeholder="0"
+                                                />
+                                            </div>
+                                            <div className="col-span-2 md:col-span-2">
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Total (₹)</label>
+                                                <input type="number" readOnly className="w-full bg-green-50 border border-green-200 rounded p-2 text-sm font-bold text-right text-green-800" value={item.item_total?.toFixed(2)} />
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                            <button
+                                onClick={addItem}
+                                className="w-full mt-4 flex justify-center items-center gap-2 text-teal-600 font-medium bg-teal-50 hover:bg-teal-100 py-3 rounded-lg border border-teal-100 transition"
+                            >
+                                <Plus size={18} /> Add New Item (नवीन माल)
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Desktop: Right Summary Sidebar */}
+                    <div className="hidden lg:flex w-80 flex-col gap-4">
+                        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-0">
+                            <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">बिल सारांश (Summary)</h3>
+                            {SummaryContent()}
+                            <div className="flex gap-2 mt-6">
+                                {savedTransaction && (
+                                    <>
+                                        <PrintInvoice transaction={savedTransaction} />
+                                        <PdfInvoice transaction={savedTransaction} />
+                                    </>
+                                )}
+                                <button
+                                    onClick={handleSubmit}
+                                    disabled={isSubmitting || items.length === 0}
+                                    className={`flex-1 bg-teal-600 text-white py-3 rounded-lg font-bold shadow-lg hover:bg-teal-700 transition-all flex items-center justify-center gap-2 ${isSubmitting || items.length === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                >
+                                    <Save size={20} />
+                                    {isSubmitting ? 'Saving...' : 'Save Bill'}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Mobile: Sticky Bottom Action Bar */}
+                    <div className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-[0_-4px_10px_rgba(0,0,0,0.1)] z-20">
+                        <div className="flex items-center justify-between p-4 bg-white z-20 relative">
+                            <div
+                                onClick={() => setShowMobileSummary(!showMobileSummary)}
+                                className="flex flex-col cursor-pointer"
+                            >
+                                <div className="flex items-center gap-1 text-gray-500 text-xs font-medium uppercase tracking-wide">
+                                    Summary {showMobileSummary ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
+                                </div>
+                                <div className="text-xl font-bold text-red-600">
+                                    ₹{grandTotal.toFixed(2)}
+                                </div>
+                            </div>
+                            <button
+                                onClick={handleSubmit}
+                                disabled={isSubmitting}
+                                className="bg-teal-600 text-white px-6 py-2.5 rounded-lg font-semibold flex items-center gap-2 shadow-sm active:bg-teal-700 disabled:opacity-50"
+                            >
+                                <Save size={18} /> {isSubmitting ? '...' : 'Save'}
+                            </button>
+                        </div>
+
+                        {showMobileSummary && (
+                            <div className="px-6 pb-6 pt-0 bg-white border-t border-dashed border-gray-200 max-h-[60vh] overflow-y-auto animate-in slide-in-from-bottom-2">
+                                <div className="mt-4">
+                                    {SummaryContent()}
+                                </div>
+                                {savedTransaction && (
+                                    <div className="mt-4 flex justify-center">
+                                        <PrintInvoice transaction={savedTransaction} />
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </>
+            )}
+        </div>
+    );
+};
+
 export default AwaakBill;

pages/Dashboard.tsx

@@ -1,400 +1,400 @@
-import React, { useEffect, useState } from 'react';
-import { getTransactions, getActiveLots, getParties } from '../services/db';
-import { Transaction, Lot, Party } from '../types';
-import { 
-    TrendingUp, 
-    Package, 
-    AlertCircle,
-    Bell,
-    IndianRupee,
-    ArrowUpRight,
-    ArrowDownLeft
-} from 'lucide-react';
-import { 
-    BarChart, 
-    Bar, 
-    XAxis, 
-    Tooltip, 
-    ResponsiveContainer 
-} from 'recharts';
-import { Link } from 'react-router-dom';
-
-const Dashboard = () => {
-    const [recentTx, setRecentTx] = useState<Transaction[]>([]);
-    const [totalStock, setTotalStock] = useState(0);
-    const [stockValue, setStockValue] = useState(0);
-    const [activeLots, setActiveLots] = useState<Lot[]>([]);
-    const [dueParties, setDueParties] = useState<Party[]>([]);
-    const [notifications, setNotifications] = useState<string[]>([]);
-    const [showNotif, setShowNotif] = useState(false);
-
-    useEffect(() => {
-        const loadData = async () => {
-            const txs = await getTransactions();
-            const lots = await getActiveLots();
-            const parties = await getParties();
-            
-            setRecentTx(txs.slice(0, 5));
-            setActiveLots(lots);
-            
-            const stockQty = lots.reduce((acc, lot) => acc + lot.remaining_quantity, 0);
-            const stockVal = lots.reduce((acc, lot) => acc + (lot.remaining_quantity * lot.avg_rate), 0);
-            
-            setTotalStock(stockQty);
-            setStockValue(stockVal);
-
-            const dues = parties.filter(p => p.current_balance !== 0);
-            setDueParties(dues);
-
-            const alerts = [];
-            const lowStock = lots.filter(l => l.remaining_quantity < 50).length;
-            if (lowStock > 0) alerts.push(`${lowStock} lots are running low on stock.`);
-            const paymentPending = dues.length;
-            if (paymentPending > 0) alerts.push(`${paymentPending} parties have pending payments.`);
-            if (txs.length === 0) alerts.push("Welcome! Create your first bill to get started.");
-            
-            setNotifications(alerts);
-        };
-        loadData();
-    }, []);
-
-    const chartData = activeLots.map(lot => ({
-        name: lot.mirchi_name,
-        qty: lot.remaining_quantity
-    }));
-
-    const aggregatedChartData = Object.values(chartData.reduce((acc: any, curr) => {
-        if (!acc[curr.name]) acc[curr.name] = { name: curr.name, qty: 0 };
-        acc[curr.name].qty += curr.qty;
-        return acc;
-    }, {}));
-
-    return (
-        <div className="space-y-4 md:space-y-8 pb-6 md:pb-10">
-            {/* Header Section with Separated Notification Bell */}
-            <div className="flex flex-col md:flex-row justify-between items-stretch gap-3 md:gap-6">
-                {/* Welcome Card */}
-                <div className="flex-1 bg-gradient-to-r from-teal-800 to-teal-700 rounded-xl p-4 md:p-6 text-white shadow-md relative overflow-hidden min-h-[110px] md:min-h-[120px] flex flex-col justify-center">
-                    <div className="z-10 relative">
-                        <h1 className="text-xl md:text-2xl font-bold">नमस्कार, Admin! 👋</h1>
-                        <p className="text-teal-100 mt-2 opacity-90 max-w-lg text-sm md:text-base">
-                            तुमच्या व्यवसायाचा आजचा आढावा येथे आहे. (Here is your business overview for today.)
-                        </p>
-                    </div>
-                    {/* Decorative Background Elements */}
-                    <div className="absolute right-0 top-0 h-full w-1/3 bg-white/10 skew-x-12 z-0 pointer-events-none"></div>
-                    <div className="absolute -bottom-8 -right-8 w-32 h-32 bg-teal-500/20 rounded-full blur-2xl z-0 pointer-events-none"></div>
-                </div>
-
-                {/* Actions / Notifications */}
-                <div className="flex items-center justify-between md:justify-center gap-2 md:gap-4 bg-white px-3 py-2 md:p-4 rounded-xl shadow-sm border border-gray-100 h-auto self-stretch">
-                   <div className="flex flex-col text-left text-xs md:text-sm">
-                        <span className="text-xs text-gray-500 font-medium uppercase">Current Date</span>
-                        <span className="font-bold text-gray-800">{new Date().toLocaleDateString('en-IN', { day: 'numeric', month: 'short' })}</span>
-                   </div>
-                   <div className="hidden md:block h-10 w-px" />
-                   <div className="relative flex-shrink-0 ml-auto">
-                        <button 
-                            onClick={() => setShowNotif(!showNotif)}
-                            className="p-3 bg-gray-50 hover:bg-teal-50 text-gray-600 hover:text-teal-700 rounded-full transition-colors relative border border-gray-200"
-                            aria-label="Notifications"
-                        >
-                            <Bell size={24} />
-                            {notifications.length > 0 && (
-                                <span className="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full border-2 border-white animate-pulse"></span>
-                            )}
-                        </button>
-                        
-                        {/* Notification Dropdown - aligned to bell */}
-                        {showNotif && (
-                            <div
-                                className="absolute top-full mt-2 w-72 sm:w-80 bg-white rounded-xl shadow-2xl border border-gray-100 text-gray-800 z-50 animate-in slide-in-from-top-2 origin-top right-0"
-                            >
-                                <div className="p-4 border-b bg-gray-50 rounded-t-xl font-semibold flex justify-between items-center">
-                                    <span>सूचना (Notifications)</span>
-                                    <span className="text-xs bg-teal-100 text-teal-800 px-2 py-1 rounded-full font-bold">{notifications.length}</span>
-                                </div>
-                                <div className="max-h-72 overflow-y-auto custom-scrollbar">
-                                    {notifications.length === 0 ? (
-                                        <div className="p-6 text-center text-gray-400 text-sm">No new notifications</div>
-                                    ) : (
-                                        <div className="divide-y divide-gray-100">
-                                            {notifications.map((note, i) => (
-                                                <div key={i} className="p-4 hover:bg-gray-50 text-sm flex items-start gap-3 transition-colors">
-                                                    <div className="w-2 h-2 mt-1.5 rounded-full bg-orange-500 shrink-0"></div>
-                                                    <p className="text-gray-600 leading-relaxed">{note}</p>
-                                                </div>
-                                            ))}
-                                        </div>
-                                    )}
-                                </div>
-                                <div className="p-2 border-t text-center">
-                                    <button onClick={() => setShowNotif(false)} className="text-xs text-teal-600 font-medium hover:underline">Close</button>
-                                </div>
-                            </div>
-                        )}
-                   </div>
-                </div>
-            </div>
-
-            {/* KPI Cards - mobile swipeable row, desktop grid */}
-            {/* Mobile: horizontal scroll */}
-            <div className="md:hidden -mx-4 px-4 mt-1">
-                <div className="flex gap-3 overflow-x-auto pb-1 no-scrollbar snap-x snap-mandatory">
-                    <div className="min-w-[75%] snap-start bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Total Stock</p>
-                                <h3 className="text-xl font-bold text-gray-800 mt-1 group-hover:text-teal-600 transition-colors">{totalStock.toLocaleString()} <span className="text-xs font-normal text-gray-400">kg</span></h3>
-                            </div>
-                            <div className="p-3 bg-blue-50 text-blue-600 rounded-2xl group-hover:bg-blue-100 transition-colors">
-                                <Package size={20} />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="min-w-[75%] snap-start bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Est. Value</p>
-                                <h3 className="text-xl font-bold text-gray-800 mt-1 group-hover:text-green-600 transition-colors">₹ {(stockValue / 100000).toFixed(2)} L</h3>
-                            </div>
-                            <div className="p-3 bg-green-50 text-green-600 rounded-2xl group-hover:bg-green-100 transition-colors">
-                                <IndianRupee size={20} />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="min-w-[75%] snap-start bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Receivables (येणे)</p>
-                                <h3 className="text-xl font-bold text-teal-600 mt-1">
-                                    ₹ {dueParties.filter(p => p.current_balance > 0).reduce((a,b) => a + b.current_balance, 0).toLocaleString()}
-                                </h3>
-                            </div>
-                            <div className="p-3 bg-teal-50 text-teal-600 rounded-2xl group-hover:bg-teal-100 transition-colors">
-                                <ArrowDownLeft size={20} />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="min-w-[75%] snap-start bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Payables (देणे)</p>
-                                <h3 className="text-xl font-bold text-red-500 mt-1">
-                                    ₹ {Math.abs(dueParties.filter(p => p.current_balance < 0).reduce((a,b) => a + b.current_balance, 0)).toLocaleString()}
-                                </h3>
-                            </div>
-                            <div className="p-3 bg-red-50 text-red-600 rounded-2xl group-hover:bg-red-100 transition-colors">
-                                <ArrowUpRight size={20} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            {/* Desktop / tablet: original grid */}
-            <div className="hidden md:grid grid-cols-2 lg:grid-cols-4 gap-6">
-                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
-                    <div className="flex items-center justify-between">
-                        <div>
-                            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Total Stock</p>
-                            <h3 className="text-2xl font-bold text-gray-800 mt-2 group-hover:text-teal-600 transition-colors">{totalStock.toLocaleString()} <span className="text-sm font-normal text-gray-400">kg</span></h3>
-                        </div>
-                        <div className="p-4 bg-blue-50 text-blue-600 rounded-2xl group-hover:bg-blue-100 transition-colors">
-                            <Package size={24} />
-                        </div>
-                    </div>
-                </div>
-
-                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
-                    <div className="flex items-center justify-between">
-                        <div>
-                            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Est. Value</p>
-                            <h3 className="text-2xl font-bold text-gray-800 mt-2 group-hover:text-green-600 transition-colors">₹ {(stockValue / 100000).toFixed(2)} L</h3>
-                        </div>
-                        <div className="p-4 bg-green-50 text-green-600 rounded-2xl group-hover:bg-green-100 transition-colors">
-                            <IndianRupee size={24} />
-                        </div>
-                    </div>
-                </div>
-
-                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
-                    <div className="flex items-center justify-between">
-                        <div>
-                            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Receivables (येणे)</p>
-                            <h3 className="text-2xl font-bold text-teal-600 mt-2">
-                                ₹ {dueParties.filter(p => p.current_balance > 0).reduce((a,b) => a + b.current_balance, 0).toLocaleString()}
-                            </h3>
-                        </div>
-                        <div className="p-4 bg-teal-50 text-teal-600 rounded-2xl group-hover:bg-teal-100 transition-colors">
-                            <ArrowDownLeft size={24} />
-                        </div>
-                    </div>
-                </div>
-
-                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
-                    <div className="flex items-center justify-between">
-                        <div>
-                            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Payables (देणे)</p>
-                            <h3 className="text-2xl font-bold text-red-500 mt-2">
-                                ₹ {Math.abs(dueParties.filter(p => p.current_balance < 0).reduce((a,b) => a + b.current_balance, 0)).toLocaleString()}
-                            </h3>
-                        </div>
-                        <div className="p-4 bg-red-50 text-red-600 rounded-2xl group-hover:bg-red-100 transition-colors">
-                            <ArrowUpRight size={24} />
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
-                {/* Recent Transactions */}
-                <div className="lg:col-span-2 flex flex-col gap-6">
-                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col h-full">
-                        <div className="p-3 md:p-4 border-b border-gray-100 flex items-center justify-between">
-                            <h3 className="font-bold text-gray-800 flex items-center gap-2">
-                                <TrendingUp size={20} className="text-gray-400" />
-                                अलीकडील व्यवहार (Recent)
-                            </h3>
-                            <Link to="/ledger" className="text-xs md:text-sm text-teal-600 font-bold hover:bg-teal-50 px-3 py-1.5 rounded-lg transition">View All</Link>
-                        </div>
-                        {/* Desktop table */}
-                        <div className="hidden md:block overflow-x-auto flex-1">
-                            <table className="w-full text-sm text-left">
-                                <thead className="bg-gray-50 text-gray-500 uppercase text-xs tracking-wider">
-                                    <tr>
-                                        <th className="px-6 py-4">Bill No</th>
-                                        <th className="px-6 py-4">Party</th>
-                                        <th className="px-6 py-4">Type</th>
-                                        <th className="px-6 py-4 text-right">Amount</th>
-                                    </tr>
-                                </thead>
-                                <tbody className="divide-y divide-gray-100">
-                                    {recentTx.length === 0 ? (
-                                        <tr><td colSpan={4} className="text-center py-12 text-gray-400">No transactions recorded yet.</td></tr>
-                                    ) : (
-                                        recentTx.map(tx => (
-                                            <tr key={tx.id} className="hover:bg-gray-50 transition-colors">
-                                                <td className="px-6 py-4">
-                                                    <div className="font-bold text-gray-700">{tx.bill_number}</div>
-                                                    <div className="text-xs text-gray-400 mt-0.5">{tx.bill_date}</div>
-                                                </td>
-                                                <td className="px-6 py-4 font-medium text-gray-900">{tx.party_name}</td>
-                                                <td className="px-6 py-4">
-                                                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold capitalize ${
-                                                        tx.is_return 
-                                                            ? 'bg-orange-100 text-orange-800' 
-                                                            : tx.bill_type === 'jawaak' 
-                                                                ? 'bg-blue-100 text-blue-800' 
-                                                                : 'bg-green-100 text-green-800'
-                                                    }`}>
-                                                        {tx.is_return ? 'Return' : (tx.bill_type === 'jawaak' ? 'Purchase' : 'Sale')}
-                                                    </span>
-                                                </td>
-                                                <td className="px-6 py-4 text-right font-bold text-gray-700">₹{tx.total_amount.toLocaleString()}</td>
-                                            </tr>
-                                        ))
-                                    )}
-                                </tbody>
-                            </table>
-                        </div>
-
-                        {/* Mobile cards */}
-                        <div className="md:hidden flex-1 p-3 space-y-2.5">
-                            {recentTx.length === 0 ? (
-                                <div className="text-center py-8 text-gray-400 text-sm">No transactions recorded yet.</div>
-                            ) : (
-                                recentTx.map(tx => (
-                                    <div
-                                        key={tx.id}
-                                        className="border border-gray-100 rounded-lg p-3 hover:bg-gray-50 transition-colors flex flex-col gap-2"
-                                    >
-                                        <div className="flex justify-between items-start gap-2">
-                                            <div>
-                                                <div className="text-sm font-semibold text-gray-800">{tx.bill_number}</div>
-                                                <div className="text-[11px] text-gray-400 mt-0.5">{tx.bill_date}</div>
-                                            </div>
-                                            <span
-                                                className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold capitalize ${
-                                                    tx.is_return
-                                                        ? 'bg-orange-100 text-orange-800'
-                                                        : tx.bill_type === 'jawaak'
-                                                        ? 'bg-blue-100 text-blue-800'
-                                                        : 'bg-green-100 text-green-800'
-                                                }`}
-                                            >
-                                                {tx.is_return ? 'Return' : tx.bill_type === 'jawaak' ? 'Purchase' : 'Sale'}
-                                            </span>
-                                        </div>
-                                        <div className="flex justify-between items-center text-xs mt-1">
-                                            <div className="text-gray-600 font-medium truncate max-w-[60%]">
-                                                {tx.party_name || 'Unknown Party'}
-                                            </div>
-                                            <div className="text-gray-900 font-bold text-sm">
-                                                ₹{tx.total_amount.toLocaleString()}
-                                            </div>
-                                        </div>
-                                    </div>
-                                ))
-                            )}
-                        </div>
-                    </div>
-                </div>
-
-                {/* Right Column */}
-                <div className="flex flex-col gap-6">
-                    {/* Pending Payments List */}
-                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col max-h-[360px] md:max-h-[400px]">
-                        <div className="p-3 md:p-4 border-b border-gray-100">
-                            <h3 className="font-bold text-gray-800 flex items-center gap-2">
-                                <AlertCircle size={20} className="text-orange-500" />
-                                पेमेंट बाकी (Pending)
-                            </h3>
-                        </div>
-                        <div className="overflow-y-auto custom-scrollbar p-2 space-y-2">
-                            {dueParties.length === 0 ? (
-                                <div className="text-center py-6 md:py-8 text-gray-400 text-sm">
-                                    <p>All payments settled! 🎉</p>
-                                </div>
-                            ) : (
-                                dueParties.map(p => (
-                                    <div key={p.id} className="flex justify-between items-center p-4 hover:bg-gray-50 rounded-lg border border-transparent hover:border-gray-100 transition-all">
-                                        <div>
-                                            <p className="font-bold text-sm text-gray-800">{p.name}</p>
-                                            <p className="text-xs text-gray-500 mt-0.5">{p.city}</p>
-                                        </div>
-                                        <div className={`text-sm font-bold ${p.current_balance > 0 ? 'text-teal-600' : 'text-red-500'}`}>
-                                            {p.current_balance > 0 ? '+' : ''}{p.current_balance.toLocaleString()}
-                                        </div>
-                                    </div>
-                                ))
-                            )}
-                        </div>
-                    </div>
-
-                    {/* Stock Chart */}
-                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-5">
-                        <h3 className="font-bold text-gray-800 mb-4 md:mb-5 text-sm md:text-base">स्टॉक (Quantity)</h3>
-                        <div className="h-40 md:h-48 w-full">
-                            <ResponsiveContainer width="100%" height="100%">
-                                <BarChart data={aggregatedChartData}>
-                                    <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{fontSize: 12, fill: '#6b7280'}} />
-                                    <Tooltip 
-                                        contentStyle={{borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'}}
-                                        cursor={{fill: '#f3f4f6'}} 
-                                    />
-                                    <Bar dataKey="qty" fill="#0d9488" radius={[4, 4, 0, 0]} barSize={40} />
-                                </BarChart>
-                            </ResponsiveContainer>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
+import React, { useEffect, useState } from 'react';
+import { getTransactions, getActiveLots, getParties } from '../services/db';
+import { Transaction, Lot, Party } from '../types';
+import { 
+    TrendingUp, 
+    Package, 
+    AlertCircle,
+    Bell,
+    IndianRupee,
+    ArrowUpRight,
+    ArrowDownLeft
+} from 'lucide-react';
+import { 
+    BarChart, 
+    Bar, 
+    XAxis, 
+    Tooltip, 
+    ResponsiveContainer 
+} from 'recharts';
+import { Link } from 'react-router-dom';
+
+const Dashboard = () => {
+    const [recentTx, setRecentTx] = useState<Transaction[]>([]);
+    const [totalStock, setTotalStock] = useState(0);
+    const [stockValue, setStockValue] = useState(0);
+    const [activeLots, setActiveLots] = useState<Lot[]>([]);
+    const [dueParties, setDueParties] = useState<Party[]>([]);
+    const [notifications, setNotifications] = useState<string[]>([]);
+    const [showNotif, setShowNotif] = useState(false);
+
+    useEffect(() => {
+        const loadData = async () => {
+            const txs = await getTransactions();
+            const lots = await getActiveLots();
+            const parties = await getParties();
+            
+            setRecentTx(txs.slice(0, 5));
+            setActiveLots(lots);
+            
+            const stockQty = lots.reduce((acc, lot) => acc + lot.remaining_quantity, 0);
+            const stockVal = lots.reduce((acc, lot) => acc + (lot.remaining_quantity * lot.avg_rate), 0);
+            
+            setTotalStock(stockQty);
+            setStockValue(stockVal);
+
+            const dues = parties.filter(p => p.current_balance !== 0);
+            setDueParties(dues);
+
+            const alerts = [];
+            const lowStock = lots.filter(l => l.remaining_quantity < 50).length;
+            if (lowStock > 0) alerts.push(`${lowStock} lots are running low on stock.`);
+            const paymentPending = dues.length;
+            if (paymentPending > 0) alerts.push(`${paymentPending} parties have pending payments.`);
+            if (txs.length === 0) alerts.push("Welcome! Create your first bill to get started.");
+            
+            setNotifications(alerts);
+        };
+        loadData();
+    }, []);
+
+    const chartData = activeLots.map(lot => ({
+        name: lot.mirchi_name,
+        qty: lot.remaining_quantity
+    }));
+
+    const aggregatedChartData = Object.values(chartData.reduce((acc: any, curr) => {
+        if (!acc[curr.name]) acc[curr.name] = { name: curr.name, qty: 0 };
+        acc[curr.name].qty += curr.qty;
+        return acc;
+    }, {}));
+
+    return (
+        <div className="space-y-4 md:space-y-8 pb-6 md:pb-10">
+            {/* Header Section with Separated Notification Bell */}
+            <div className="flex flex-col md:flex-row justify-between items-stretch gap-3 md:gap-6">
+                {/* Welcome Card */}
+                <div className="flex-1 bg-gradient-to-r from-teal-800 to-teal-700 rounded-xl p-4 md:p-6 text-white shadow-md relative overflow-hidden min-h-[110px] md:min-h-[120px] flex flex-col justify-center">
+                    <div className="z-10 relative">
+                        <h1 className="text-xl md:text-2xl font-bold">नमस्कार, Admin! 👋</h1>
+                        <p className="text-teal-100 mt-2 opacity-90 max-w-lg text-sm md:text-base">
+                            तुमच्या व्यवसायाचा आजचा आढावा येथे आहे. (Here is your business overview for today.)
+                        </p>
+                    </div>
+                    {/* Decorative Background Elements */}
+                    <div className="absolute right-0 top-0 h-full w-1/3 bg-white/10 skew-x-12 z-0 pointer-events-none"></div>
+                    <div className="absolute -bottom-8 -right-8 w-32 h-32 bg-teal-500/20 rounded-full blur-2xl z-0 pointer-events-none"></div>
+                </div>
+
+                {/* Actions / Notifications */}
+                <div className="flex items-center justify-between md:justify-center gap-2 md:gap-4 bg-white px-3 py-2 md:p-4 rounded-xl shadow-sm border border-gray-100 h-auto self-stretch">
+                   <div className="flex flex-col text-left text-xs md:text-sm">
+                        <span className="text-xs text-gray-500 font-medium uppercase">Current Date</span>
+                        <span className="font-bold text-gray-800">{new Date().toLocaleDateString('en-IN', { day: 'numeric', month: 'short' })}</span>
+                   </div>
+                   <div className="hidden md:block h-10 w-px" />
+                   <div className="relative flex-shrink-0 ml-auto">
+                        <button 
+                            onClick={() => setShowNotif(!showNotif)}
+                            className="p-3 bg-gray-50 hover:bg-teal-50 text-gray-600 hover:text-teal-700 rounded-full transition-colors relative border border-gray-200"
+                            aria-label="Notifications"
+                        >
+                            <Bell size={24} />
+                            {notifications.length > 0 && (
+                                <span className="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full border-2 border-white animate-pulse"></span>
+                            )}
+                        </button>
+                        
+                        {/* Notification Dropdown - aligned to bell */}
+                        {showNotif && (
+                            <div
+                                className="absolute top-full mt-2 w-72 sm:w-80 bg-white rounded-xl shadow-2xl border border-gray-100 text-gray-800 z-50 animate-in slide-in-from-top-2 origin-top right-0"
+                            >
+                                <div className="p-4 border-b bg-gray-50 rounded-t-xl font-semibold flex justify-between items-center">
+                                    <span>सूचना (Notifications)</span>
+                                    <span className="text-xs bg-teal-100 text-teal-800 px-2 py-1 rounded-full font-bold">{notifications.length}</span>
+                                </div>
+                                <div className="max-h-72 overflow-y-auto custom-scrollbar">
+                                    {notifications.length === 0 ? (
+                                        <div className="p-6 text-center text-gray-400 text-sm">No new notifications</div>
+                                    ) : (
+                                        <div className="divide-y divide-gray-100">
+                                            {notifications.map((note, i) => (
+                                                <div key={i} className="p-4 hover:bg-gray-50 text-sm flex items-start gap-3 transition-colors">
+                                                    <div className="w-2 h-2 mt-1.5 rounded-full bg-orange-500 shrink-0"></div>
+                                                    <p className="text-gray-600 leading-relaxed">{note}</p>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    )}
+                                </div>
+                                <div className="p-2 border-t text-center">
+                                    <button onClick={() => setShowNotif(false)} className="text-xs text-teal-600 font-medium hover:underline">Close</button>
+                                </div>
+                            </div>
+                        )}
+                   </div>
+                </div>
+            </div>
+
+            {/* KPI Cards - mobile swipeable row, desktop grid */}
+            {/* Mobile: horizontal scroll */}
+            <div className="md:hidden -mx-4 px-4 mt-1">
+                <div className="flex gap-3 overflow-x-auto pb-1 no-scrollbar snap-x snap-mandatory">
+                    <div className="min-w-[75%] snap-start bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Total Stock</p>
+                                <h3 className="text-xl font-bold text-gray-800 mt-1 group-hover:text-teal-600 transition-colors">{totalStock.toLocaleString()} <span className="text-xs font-normal text-gray-400">kg</span></h3>
+                            </div>
+                            <div className="p-3 bg-blue-50 text-blue-600 rounded-2xl group-hover:bg-blue-100 transition-colors">
+                                <Package size={20} />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="min-w-[75%] snap-start bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Est. Value</p>
+                                <h3 className="text-xl font-bold text-gray-800 mt-1 group-hover:text-green-600 transition-colors">₹ {(stockValue / 100000).toFixed(2)} L</h3>
+                            </div>
+                            <div className="p-3 bg-green-50 text-green-600 rounded-2xl group-hover:bg-green-100 transition-colors">
+                                <IndianRupee size={20} />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="min-w-[75%] snap-start bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Receivables (येणे)</p>
+                                <h3 className="text-xl font-bold text-teal-600 mt-1">
+                                    ₹ {dueParties.filter(p => p.current_balance > 0).reduce((a,b) => a + b.current_balance, 0).toLocaleString()}
+                                </h3>
+                            </div>
+                            <div className="p-3 bg-teal-50 text-teal-600 rounded-2xl group-hover:bg-teal-100 transition-colors">
+                                <ArrowDownLeft size={20} />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="min-w-[75%] snap-start bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Payables (देणे)</p>
+                                <h3 className="text-xl font-bold text-red-500 mt-1">
+                                    ₹ {Math.abs(dueParties.filter(p => p.current_balance < 0).reduce((a,b) => a + b.current_balance, 0)).toLocaleString()}
+                                </h3>
+                            </div>
+                            <div className="p-3 bg-red-50 text-red-600 rounded-2xl group-hover:bg-red-100 transition-colors">
+                                <ArrowUpRight size={20} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Desktop / tablet: original grid */}
+            <div className="hidden md:grid grid-cols-2 lg:grid-cols-4 gap-6">
+                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Total Stock</p>
+                            <h3 className="text-2xl font-bold text-gray-800 mt-2 group-hover:text-teal-600 transition-colors">{totalStock.toLocaleString()} <span className="text-sm font-normal text-gray-400">kg</span></h3>
+                        </div>
+                        <div className="p-4 bg-blue-50 text-blue-600 rounded-2xl group-hover:bg-blue-100 transition-colors">
+                            <Package size={24} />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Est. Value</p>
+                            <h3 className="text-2xl font-bold text-gray-800 mt-2 group-hover:text-green-600 transition-colors">₹ {(stockValue / 100000).toFixed(2)} L</h3>
+                        </div>
+                        <div className="p-4 bg-green-50 text-green-600 rounded-2xl group-hover:bg-green-100 transition-colors">
+                            <IndianRupee size={24} />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Receivables (येणे)</p>
+                            <h3 className="text-2xl font-bold text-teal-600 mt-2">
+                                ₹ {dueParties.filter(p => p.current_balance > 0).reduce((a,b) => a + b.current_balance, 0).toLocaleString()}
+                            </h3>
+                        </div>
+                        <div className="p-4 bg-teal-50 text-teal-600 rounded-2xl group-hover:bg-teal-100 transition-colors">
+                            <ArrowDownLeft size={24} />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Payables (देणे)</p>
+                            <h3 className="text-2xl font-bold text-red-500 mt-2">
+                                ₹ {Math.abs(dueParties.filter(p => p.current_balance < 0).reduce((a,b) => a + b.current_balance, 0)).toLocaleString()}
+                            </h3>
+                        </div>
+                        <div className="p-4 bg-red-50 text-red-600 rounded-2xl group-hover:bg-red-100 transition-colors">
+                            <ArrowUpRight size={24} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
+                {/* Recent Transactions */}
+                <div className="lg:col-span-2 flex flex-col gap-6">
+                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col h-full">
+                        <div className="p-3 md:p-4 border-b border-gray-100 flex items-center justify-between">
+                            <h3 className="font-bold text-gray-800 flex items-center gap-2">
+                                <TrendingUp size={20} className="text-gray-400" />
+                                अलीकडील व्यवहार (Recent)
+                            </h3>
+                            <Link to="/ledger" className="text-xs md:text-sm text-teal-600 font-bold hover:bg-teal-50 px-3 py-1.5 rounded-lg transition">View All</Link>
+                        </div>
+                        {/* Desktop table */}
+                        <div className="hidden md:block overflow-x-auto flex-1">
+                            <table className="w-full text-sm text-left">
+                                <thead className="bg-gray-50 text-gray-500 uppercase text-xs tracking-wider">
+                                    <tr>
+                                        <th className="px-6 py-4">Bill No</th>
+                                        <th className="px-6 py-4">Party</th>
+                                        <th className="px-6 py-4">Type</th>
+                                        <th className="px-6 py-4 text-right">Amount</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {recentTx.length === 0 ? (
+                                        <tr><td colSpan={4} className="text-center py-12 text-gray-400">No transactions recorded yet.</td></tr>
+                                    ) : (
+                                        recentTx.map(tx => (
+                                            <tr key={tx.id} className="hover:bg-gray-50 transition-colors">
+                                                <td className="px-6 py-4">
+                                                    <div className="font-bold text-gray-700">{tx.bill_number}</div>
+                                                    <div className="text-xs text-gray-400 mt-0.5">{tx.bill_date}</div>
+                                                </td>
+                                                <td className="px-6 py-4 font-medium text-gray-900">{tx.party_name}</td>
+                                                <td className="px-6 py-4">
+                                                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold capitalize ${
+                                                        tx.is_return 
+                                                            ? 'bg-orange-100 text-orange-800' 
+                                                            : tx.bill_type === 'jawaak' 
+                                                                ? 'bg-blue-100 text-blue-800' 
+                                                                : 'bg-green-100 text-green-800'
+                                                    }`}>
+                                                        {tx.is_return ? 'Return' : (tx.bill_type === 'jawaak' ? 'Purchase' : 'Sale')}
+                                                    </span>
+                                                </td>
+                                                <td className="px-6 py-4 text-right font-bold text-gray-700">₹{tx.total_amount.toLocaleString()}</td>
+                                            </tr>
+                                        ))
+                                    )}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        {/* Mobile cards */}
+                        <div className="md:hidden flex-1 p-3 space-y-2.5">
+                            {recentTx.length === 0 ? (
+                                <div className="text-center py-8 text-gray-400 text-sm">No transactions recorded yet.</div>
+                            ) : (
+                                recentTx.map(tx => (
+                                    <div
+                                        key={tx.id}
+                                        className="border border-gray-100 rounded-lg p-3 hover:bg-gray-50 transition-colors flex flex-col gap-2"
+                                    >
+                                        <div className="flex justify-between items-start gap-2">
+                                            <div>
+                                                <div className="text-sm font-semibold text-gray-800">{tx.bill_number}</div>
+                                                <div className="text-[11px] text-gray-400 mt-0.5">{tx.bill_date}</div>
+                                            </div>
+                                            <span
+                                                className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold capitalize ${
+                                                    tx.is_return
+                                                        ? 'bg-orange-100 text-orange-800'
+                                                        : tx.bill_type === 'jawaak'
+                                                        ? 'bg-blue-100 text-blue-800'
+                                                        : 'bg-green-100 text-green-800'
+                                                }`}
+                                            >
+                                                {tx.is_return ? 'Return' : tx.bill_type === 'jawaak' ? 'Purchase' : 'Sale'}
+                                            </span>
+                                        </div>
+                                        <div className="flex justify-between items-center text-xs mt-1">
+                                            <div className="text-gray-600 font-medium truncate max-w-[60%]">
+                                                {tx.party_name || 'Unknown Party'}
+                                            </div>
+                                            <div className="text-gray-900 font-bold text-sm">
+                                                ₹{tx.total_amount.toLocaleString()}
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Right Column */}
+                <div className="flex flex-col gap-6">
+                    {/* Pending Payments List */}
+                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col max-h-[360px] md:max-h-[400px]">
+                        <div className="p-3 md:p-4 border-b border-gray-100">
+                            <h3 className="font-bold text-gray-800 flex items-center gap-2">
+                                <AlertCircle size={20} className="text-orange-500" />
+                                पेमेंट बाकी (Pending)
+                            </h3>
+                        </div>
+                        <div className="overflow-y-auto custom-scrollbar p-2 space-y-2">
+                            {dueParties.length === 0 ? (
+                                <div className="text-center py-6 md:py-8 text-gray-400 text-sm">
+                                    <p>All payments settled! 🎉</p>
+                                </div>
+                            ) : (
+                                dueParties.map(p => (
+                                    <div key={p.id} className="flex justify-between items-center p-4 hover:bg-gray-50 rounded-lg border border-transparent hover:border-gray-100 transition-all">
+                                        <div>
+                                            <p className="font-bold text-sm text-gray-800">{p.name}</p>
+                                            <p className="text-xs text-gray-500 mt-0.5">{p.city}</p>
+                                        </div>
+                                        <div className={`text-sm font-bold ${p.current_balance > 0 ? 'text-teal-600' : 'text-red-500'}`}>
+                                            {p.current_balance > 0 ? '+' : ''}{p.current_balance.toLocaleString()}
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Stock Chart */}
+                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-5">
+                        <h3 className="font-bold text-gray-800 mb-4 md:mb-5 text-sm md:text-base">स्टॉक (Quantity)</h3>
+                        <div className="h-40 md:h-48 w-full">
+                            <ResponsiveContainer width="100%" height="100%">
+                                <BarChart data={aggregatedChartData}>
+                                    <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{fontSize: 12, fill: '#6b7280'}} />
+                                    <Tooltip 
+                                        contentStyle={{borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'}}
+                                        cursor={{fill: '#f3f4f6'}} 
+                                    />
+                                    <Bar dataKey="qty" fill="#0d9488" radius={[4, 4, 0, 0]} barSize={40} />
+                                </BarChart>
+                            </ResponsiveContainer>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
 export default Dashboard;

pages/JawaakBill.tsx

@@ -1,795 +1,807 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-    getParties, getMirchiTypes, generateBillNumber, saveTransaction,
-    getAvailableLotsByMirchi
-} from '../services/db';
-import {
-    Party, MirchiType, Lot, Transaction, TransactionItem, BillType, PaymentMode, PartyType
-} from '../types';
-import { Save, Trash2, Plus, RotateCcw, Printer, Download, ChevronUp, ChevronDown } from 'lucide-react';
-import PrintInvoice from '../components/PrintInvoice';
-import PdfInvoice from '../components/PdfInvoice';
-
-const SummaryInput = ({ label, value, onChange }: { label: string, value: number, onChange: (val: number) => void }) => (
-    <div className="flex justify-between items-center mb-1 bg-gray-50 p-1.5 rounded">
-        <span className="text-gray-600 text-xs">{label}</span>
-        <input
-            type="number"
-            step="0.01"
-            min="0"
-            className="w-24 border rounded text-right p-1 text-sm bg-white focus:ring-1 focus:ring-teal-500 outline-none appearance-none"
-            value={value === 0 ? '' : value}
-            onChange={e => {
-                const parsed = parseFloat(e.target.value);
-                onChange(isNaN(parsed) ? 0 : Math.max(0, parsed));
-            }}
-            placeholder="0"
-        />
-    </div>
-);
-
-const JawaakBill = () => {
-    const navigate = useNavigate();
-
-    // Master Data
-    const [parties, setParties] = useState<Party[]>([]);
-    const [mirchiTypes, setMirchiTypes] = useState<MirchiType[]>([]);
-
-    // Form State
-    const [isReturnMode, setIsReturnMode] = useState(false);
-    const [billDate, setBillDate] = useState(new Date().toISOString().split('T')[0]);
-    const [billNumber, setBillNumber] = useState('');
-    const [selectedParty, setSelectedParty] = useState('');
-
-    // Mobile UI State
-    const [showMobileSummary, setShowMobileSummary] = useState(false);
-
-    const [items, setItems] = useState<Partial<TransactionItem>[]>([{
-        id: Date.now().toString(),
-        poti_weights: [],
-        gross_weight: 0,
-        poti_count: 0,
-        total_potya: 0,
-        net_weight: 0,
-        rate_per_kg: 0,
-        item_total: 0
-    }]);
-
-    // Temp inputs for items row
-    const [potiInputs, setPotiInputs] = useState<{ [key: string]: string }>({});
-
-    // LOT selection state
-    const [availableLots, setAvailableLots] = useState<{ [key: string]: Lot[] }>({});
-
-    const [expenses, setExpenses] = useState({
-        cess_percent: 1.0,
-        cess_amount: 0,
-        adat_percent: 3.0,
-        adat_amount: 0,
-        poti_rate: 18, // Default rate
-        poti_amount: 0,
-        hamali_per_poti: 6,
-        hamali_amount: 0,
-        packaging_hamali_per_poti: 0,
-        packaging_hamali_amount: 0,
-        gaadi_bharni: 0,
-    });
-
-    // Payment State
-    const [paymentMode, setPaymentMode] = useState<'cash' | 'online' | 'hybrid' | 'due'>('cash');
-    const [paidAmount, setPaidAmount] = useState(0); // Not used directly in new logic, derived
-    const [cashAmount, setCashAmount] = useState(0); // For hybrid
-    const [onlineAmount, setOnlineAmount] = useState(0); // For hybrid & due
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [savedTransaction, setSavedTransaction] = useState<Transaction | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    // Initial Load & Bill Number Generation
-    useEffect(() => {
-        const loadData = async () => {
-            try {
-                setIsLoading(true);
-                setError(null);
-                const [partiesData, mirchiData] = await Promise.all([
-                    getParties(),
-                    getMirchiTypes()
-                ]);
-
-                if (!partiesData || partiesData.length === 0) {
-                    setError('No parties found. Please add parties in Settings first.');
-                }
-                if (!mirchiData || mirchiData.length === 0) {
-                    setError('No mirchi types found. Please add mirchi types in Settings first.');
-                }
-
-                // Filter parties for Jawaak bills
-                const filteredParties = partiesData.filter(p =>
-                    p.party_type === PartyType.JAWAAK || p.party_type === PartyType.BOTH
-                );
-
-                setParties(filteredParties || []);
-                setMirchiTypes(mirchiData || []);
-                setBillNumber(generateBillNumber(BillType.JAWAAK, isReturnMode));
-            } catch (err: any) {
-                console.error('Error loading data:', err);
-                setError('Failed to load data. Please check your connection and try again.');
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        loadData();
-    }, [isReturnMode]);
-
-    // Calculation Logic
-    const calculateRow = (item: Partial<TransactionItem>, potiString: string) => {
-        const weights = potiString.split(/[\s,+]+/).map(n => parseFloat(n)).filter(n => !isNaN(n) && n > 0);
-
-        const gross = weights.reduce((a, b) => a + b, 0);
-        const count = weights.length;
-        const potya = count * 1;
-        const net = Math.max(0, gross - potya);
-        const total = net * (item.rate_per_kg || 0);
-
-        return {
-            ...item,
-            poti_weights: weights,
-            gross_weight: gross,
-            poti_count: count,
-            total_potya: potya,
-            net_weight: net,
-            item_total: total
-        };
-    };
-
-    const handleItemChange = (id: string, field: string, value: any) => {
-        setItems(prev => prev.map(item => {
-            if (item.id !== id) return item;
-
-            let updatedItem = { ...item, [field]: value };
-
-            if (field === 'rate_per_kg') {
-                updatedItem.item_total = (updatedItem.net_weight || 0) * Math.max(0, parseFloat(value || 0));
-            }
-
-            return updatedItem;
-        }));
-    };
-
-    const handlePotiInputChange = (id: string, value: string) => {
-        setPotiInputs(prev => ({ ...prev, [id]: value }));
-        setItems(prev => prev.map(item => {
-            if (item.id !== id) return item;
-            return calculateRow(item, value);
-        }));
-    };
-
-    // Handle mirchi type change - load available lots
-    const handleMirchiChange = async (id: string, mirchiTypeId: string) => {
-        handleItemChange(id, 'mirchi_type_id', mirchiTypeId);
-
-        // Load available lots for this mirchi type
-        if (mirchiTypeId) {
-            const lots = await getAvailableLotsByMirchi(mirchiTypeId);
-            setAvailableLots(prev => ({ ...prev, [id]: lots }));
-        }
-    };
-
-    // Handle LOT selection
-    const handleLotSelection = (id: string, lotId: string) => {
-        handleItemChange(id, 'lot_id', lotId);
-
-        // Find the selected lot to get its details
-        const lots = availableLots[id] || [];
-        const selectedLot = lots.find(lot => lot.id === lotId);
-        if (selectedLot) {
-            handleItemChange(id, 'lot_number', selectedLot.lot_number);
-        }
-    };
-
-    const addItem = () => {
-        setItems(prev => [...prev, {
-            id: Date.now().toString(),
-            poti_weights: [],
-            gross_weight: 0,
-            poti_count: 0,
-            total_potya: 0,
-            net_weight: 0,
-            rate_per_kg: 0,
-            item_total: 0
-        }]);
-    };
-
-    const removeItem = (id: string) => {
-        if (items.length > 1) {
-            setItems(prev => prev.filter(i => i.id !== id));
-            const newInputs = { ...potiInputs };
-            delete newInputs[id];
-            setPotiInputs(newInputs);
-        }
-    };
-
-    // Totals Calculation
-    const subtotal = items.reduce((acc, item) => acc + (item.item_total || 0), 0);
-    const totalPoti = items.reduce((acc, item) => acc + (item.poti_count || 0), 0);
-
-    // Derived Expenses - New sequence
-    const potiAmt = totalPoti * expenses.poti_rate;
-    const baseForCess = subtotal + potiAmt; // Cess calculated on subtotal + poti
-    const cessAmt = (baseForCess * expenses.cess_percent) / 100;
-    const adatAmt = (subtotal * expenses.adat_percent) / 100;
-    const hamaliAmt = totalPoti * expenses.hamali_per_poti;
-    const packagingHamaliAmt = totalPoti * expenses.packaging_hamali_per_poti;
-    const totalExp = potiAmt + cessAmt + adatAmt + hamaliAmt + packagingHamaliAmt + (expenses.gaadi_bharni || 0);
-    const grandTotal = subtotal + totalExp;
-
-    // Calculate Payment Details based on Mode
-    let finalCash = 0;
-    let finalOnline = 0;
-    let currentPaid = 0;
-
-    if (paymentMode === 'cash') {
-        finalCash = grandTotal;
-        finalOnline = 0;
-        currentPaid = grandTotal;
-    } else if (paymentMode === 'online') {
-        finalCash = 0;
-        finalOnline = grandTotal;
-        currentPaid = grandTotal;
-    } else if (paymentMode === 'hybrid') {
-        finalCash = cashAmount;
-        finalOnline = Math.max(0, grandTotal - cashAmount);
-        currentPaid = grandTotal; // Hybrid assumes full payment
-    } else if (paymentMode === 'due') {
-        finalCash = 0;
-        finalOnline = onlineAmount; // User defined
-        currentPaid = onlineAmount;
-    }
-
-    const balance = grandTotal - currentPaid;
-
-    // Validation Error
-    // Hybrid: Cash cannot exceed Total
-    // Due: Online cannot exceed Total
-    const isOverpaid = (paymentMode === 'hybrid' && cashAmount > grandTotal) ||
-        (paymentMode === 'due' && onlineAmount > grandTotal);
-
-    const validateForm = () => {
-        if (!selectedParty) {
-            alert('Please select a Party (पार्टी निवडा)');
-            return false;
-        }
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i];
-            if (!item.mirchi_type_id) {
-                alert(`Row ${i + 1}: Please select Mirchi Type`);
-                return false;
-            }
-            if (!item.poti_weights || item.poti_weights.length === 0) {
-                alert(`Row ${i + 1}: Please enter weights (e.g. 10, 20)`);
-                return false;
-            }
-            if (!item.rate_per_kg || item.rate_per_kg <= 0) {
-                alert(`Row ${i + 1}: Rate must be greater than 0`);
-                return false;
-            }
-        }
-        if (isOverpaid) {
-            alert('Paid amount cannot be greater than Total Amount');
-            return false;
-        }
-        return true;
-    };
-
-    const handleSubmit = async () => {
-        if (isSubmitting) return;
-        if (!validateForm()) return;
-
-        setIsSubmitting(true);
-
-        // Populate mirchi_name for each item from mirchiTypes
-        const itemsWithNames = items.map(item => ({
-            ...item,
-            mirchi_name: mirchiTypes.find(m => m.id === item.mirchi_type_id)?.name || 'Unknown'
-        }));
-
-        const transaction: Transaction = {
-            id: Date.now().toString(),
-            bill_number: billNumber,
-            bill_date: billDate,
-            bill_type: BillType.JAWAAK,
-            is_return: isReturnMode,
-            party_id: selectedParty,
-            party_name: parties.find(p => p.id === selectedParty)?.name,
-            items: itemsWithNames as TransactionItem[],
-            expenses: {
-                ...expenses,
-                cess_amount: cessAmt,
-                adat_amount: adatAmt,
-                poti_amount: potiAmt,
-                hamali_amount: hamaliAmt,
-                packaging_hamali_amount: packagingHamaliAmt
-            },
-            payments: [
-                ...(finalCash > 0 ? [{ mode: PaymentMode.CASH, amount: finalCash }] : []),
-                ...(finalOnline > 0 ? [{ mode: PaymentMode.ONLINE, amount: finalOnline }] : []),
-                ...(balance > 0 ? [{ mode: PaymentMode.DUE, amount: balance }] : []) // Optional: Track due as a payment entry or just balance? Usually balance is enough. Keeping logic simple.
-            ],
-            gross_weight_total: items.reduce((a, i) => a + (i.gross_weight || 0), 0),
-            net_weight_total: items.reduce((a, i) => a + (i.net_weight || 0), 0),
-            subtotal: subtotal,
-            total_expenses: totalExp,
-            total_amount: grandTotal,
-            paid_amount: currentPaid,
-            balance_amount: balance
-        };
-
-        const result = await saveTransaction(transaction);
-        if (result.success) {
-            // Use the complete transaction object we created, not just the API response
-            // This ensures all items are included for printing
-            const completeTransaction = result.data ? {
-                ...transaction,
-                ...result.data,
-                items: transaction.items // Ensure items are preserved
-            } : transaction;
-            setSavedTransaction(completeTransaction);
-            alert('Bill Saved Successfully! You can now print the invoice.');
-        } else {
-            alert(`Error: ${result.message}`);
-        }
-        setIsSubmitting(false);
-    };
-
-    const handleHybridCashChange = (val: number) => {
-        setCashAmount(val);
-        // Online amount is derived in render, no state update needed for it in hybrid
-    };
-
-    const SummaryContent = () => (
-        <div className="space-y-3 text-sm">
-            <div className="flex justify-between">
-                <span className="text-gray-600">एकुण रक्कम (Subtotal)</span>
-                <span className="font-semibold">₹{subtotal.toFixed(2)}</span>
-            </div>
-
-            <div className="pt-2 border-t border-dashed space-y-2">
-                {/* 1. Poti (Bags) Rate */}
-                <SummaryInput
-                    label={`पोती (Bags ${totalPoti}) Rate`}
-                    value={expenses.poti_rate}
-                    onChange={val => setExpenses({ ...expenses, poti_rate: val })}
-                />
-                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
-                    <span>Amount:</span>
-                    <span>₹{potiAmt.toFixed(2)}</span>
-                </div>
-
-                {/* 2. Cess Tax (calculated on subtotal + poti) */}
-                <SummaryInput
-                    label={`सेस (Cess ${expenses.cess_percent}%) on ₹${baseForCess.toFixed(2)}`}
-                    value={expenses.cess_percent}
-                    onChange={val => setExpenses({ ...expenses, cess_percent: val })}
-                />
-                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
-                    <span>Amount:</span>
-                    <span>₹{cessAmt.toFixed(2)}</span>
-                </div>
-
-                {/* 3. Adat / Market Yard Tax */}
-                <SummaryInput
-                    label={`अडत (Adat ${expenses.adat_percent}%)`}
-                    value={expenses.adat_percent}
-                    onChange={val => setExpenses({ ...expenses, adat_percent: val })}
-                />
-                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
-                    <span>Amount:</span>
-                    <span>₹{adatAmt.toFixed(2)}</span>
-                </div>
-
-                {/* 4. Hamali */}
-                <SummaryInput
-                    label={`हमाली (Hamali per poti)`}
-                    value={expenses.hamali_per_poti}
-                    onChange={val => setExpenses({ ...expenses, hamali_per_poti: val })}
-                />
-                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
-                    <span>Amount ({expenses.hamali_per_poti} * {totalPoti}):</span>
-                    <span>₹{hamaliAmt.toFixed(2)}</span>
-                </div>
-
-                {/* 5. Packaging Hamali */}
-                <SummaryInput
-                    label="पॅकेजिंग हमाली (Rate)"
-                    value={expenses.packaging_hamali_per_poti}
-                    onChange={val => setExpenses({ ...expenses, packaging_hamali_per_poti: val })}
-                />
-                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
-                    <span>Amount ({totalPoti} * {expenses.packaging_hamali_per_poti}):</span>
-                    <span>₹{packagingHamaliAmt.toFixed(2)}</span>
-                </div>
-
-                {/* 6. Gaadi Bharni */}
-                <SummaryInput
-                    label="गाडी भरणी"
-                    value={expenses.gaadi_bharni}
-                    onChange={val => setExpenses({ ...expenses, gaadi_bharni: val })}
-                />
-            </div>
-
-            {/* 6. Total Price */}
-            <div className="pt-2 border-t border-gray-200 flex justify-between items-center">
-                <span className="text-base font-bold text-gray-800">एकुण बिल (Total)</span>
-                <span className="text-xl font-bold text-red-600">₹{grandTotal.toFixed(2)}</span>
-            </div>
-
-            {/* Payment Section */}
-            <div className="bg-teal-50 p-3 rounded-lg mt-2 border border-teal-100">
-                <label className="block text-xs font-medium text-teal-800 mb-2">Payment Mode</label>
-                <div className="flex gap-2 mb-3">
-                    {['cash', 'online', 'hybrid', 'due'].map(mode => (
-                        <button
-                            key={mode}
-                            onClick={() => {
-                                setPaymentMode(mode as any);
-                                setCashAmount(0);
-                                setOnlineAmount(0);
-                            }}
-                            className={`flex-1 py-1 text-xs font-medium rounded border ${paymentMode === mode
-                                ? 'bg-teal-600 text-white border-teal-600'
-                                : 'bg-white text-gray-600 border-gray-200'
-                                } capitalize`}
-                        >
-                            {mode}
-                        </button>
-                    ))}
-                </div>
-
-                {paymentMode === 'cash' && (
-                    <div className="text-center py-2 text-sm text-gray-600">
-                        Full Payment in Cash: <span className="font-bold text-gray-800">₹{grandTotal.toFixed(2)}</span>
-                    </div>
-                )}
-
-                {paymentMode === 'online' && (
-                    <div className="text-center py-2 text-sm text-gray-600">
-                        Full Payment Online: <span className="font-bold text-gray-800">₹{grandTotal.toFixed(2)}</span>
-                    </div>
-                )}
-
-                {paymentMode === 'hybrid' && (
-                    <div className="space-y-2">
-                        <div>
-                            <label className="text-xs text-gray-600">Cash Amount</label>
-                            <input
-                                type="number"
-                                min="0"
-                                max={grandTotal}
-                                step="0.01"
-                                className="w-full border border-teal-200 rounded p-2 text-right font-medium focus:ring-1 focus:ring-teal-500 outline-none"
-                                value={cashAmount === 0 ? '' : cashAmount}
-                                onChange={e => {
-                                    const val = parseFloat(e.target.value) || 0;
-                                    if (val >= 0 && val <= grandTotal) {
-                                        handleHybridCashChange(val);
-                                    }
-                                }}
-                                onKeyDown={e => {
-                                    // Prevent special characters: -, +, e, E
-                                    if (['-', '+', 'e', 'E'].includes(e.key)) {
-                                        e.preventDefault();
-                                    }
-                                }}
-                                placeholder="Cash"
-                            />
-                        </div>
-                        <div>
-                            <label className="text-xs text-gray-600">Online Amount (Auto)</label>
-                            <input
-                                type="text"
-                                readOnly
-                                className="w-full bg-gray-100 border border-gray-200 rounded p-2 text-right font-medium text-gray-600"
-                                value={(grandTotal - cashAmount).toFixed(2)}
-                            />
-                        </div>
-                    </div>
-                )}
-
-                {paymentMode === 'due' && (
-                    <div className="space-y-2">
-                        <div>
-                            <label className="text-xs text-gray-600">Online Amount (Partial Payment)</label>
-                            <input
-                                type="number"
-                                min="0"
-                                max={grandTotal}
-                                step="0.01"
-                                className="w-full border border-teal-200 rounded p-2 text-right font-medium focus:ring-1 focus:ring-teal-500 outline-none"
-                                value={onlineAmount === 0 ? '' : onlineAmount}
-                                onChange={e => {
-                                    const val = parseFloat(e.target.value) || 0;
-                                    if (val >= 0 && val <= grandTotal) {
-                                        setOnlineAmount(val);
-                                    }
-                                }}
-                                onKeyDown={e => {
-                                    // Prevent special characters: -, +, e, E
-                                    if (['-', '+', 'e', 'E'].includes(e.key)) {
-                                        e.preventDefault();
-                                    }
-                                }}
-                                placeholder="Enter amount paid online (0 for full due)"
-                            />
-                        </div>
-                        <div>
-                            <label className="text-xs text-gray-600">Due Amount (Auto)</label>
-                            <input
-                                type="text"
-                                readOnly
-                                className="w-full bg-red-50 border border-red-200 rounded p-2 text-right font-bold text-red-600"
-                                value={(grandTotal - onlineAmount).toFixed(2)}
-                            />
-                        </div>
-                    </div>
-                )}
-
-                {isOverpaid && (
-                    <div className="text-red-500 text-xs mt-2 font-medium text-center">
-                        Error: Amount exceeds Total!
-                    </div>
-                )}
-            </div>
-
-            <div className="flex justify-between items-center pt-2">
-                <span className="text-gray-600 font-medium">बाकी (Balance)</span>
-                <span className={`font-bold ${balance > 0 ? 'text-red-500' : 'text-green-600'}`}>₹{balance.toFixed(2)}</span>
-            </div>
-        </div>
-    );
-
-    return (
-        <div className="flex flex-col lg:flex-row gap-4 h-full p-4 bg-gray-50">
-            {isLoading && (
-                <div className="flex-1 flex items-center justify-center bg-white rounded-xl shadow-sm border border-gray-100">
-                    <div className="text-center">
-                        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600 mb-4"></div>
-                        <p className="text-gray-600">Loading data...</p>
-                    </div>
-                </div>
-            )}
-            {error && !isLoading && (
-                <div className="flex-1 flex items-center justify-center bg-white rounded-xl shadow-sm border border-red-200">
-                    <div className="text-center p-8">
-                        <div className="text-red-500 text-5xl mb-4">⚠️</div>
-                        <h3 className="text-lg font-semibold text-gray-800 mb-2">Error Loading Data</h3>
-                        <p className="text-gray-600 mb-4">{error}</p>
-                        <button onClick={() => window.location.reload()} className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700">
-                            Retry
-                        </button>
-                    </div>
-                </div>
-            )}
-            {!isLoading && !error && (
-                <>
-                    {/* Left: Form */}
-                    <div className={`flex-1 bg-white rounded-xl shadow-sm border p-4 lg:p-6 lg:overflow-y-auto lg:h-full no-scrollbar pb-40 lg:pb-6 ${isReturnMode ? 'border-red-200' : 'border-gray-100'}`}>
-                        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
-                            <h2 className={`text-lg font-bold flex items-center gap-2 ${isReturnMode ? 'text-red-600' : 'text-gray-800'}`}>
-                                {isReturnMode ? <RotateCcw className="text-red-500" /> : <div className="text-teal-600 font-bold">OUT</div>}
-                                {isReturnMode ? 'जावक परतावा (Sales Return)' : 'जावक बिल (Sales)'}
-                            </h2>
-
-                            <div className="flex items-center gap-3">
-                                <div className="flex bg-gray-100 rounded-lg p-1">
-                                    <button
-                                        onClick={() => setIsReturnMode(false)}
-                                        className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${!isReturnMode ? 'bg-white text-teal-700 shadow-sm' : 'text-gray-500'}`}
-                                    >
-                                        Regular
-                                    </button>
-                                    <button
-                                        onClick={() => setIsReturnMode(true)}
-                                        className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${isReturnMode ? 'bg-red-500 text-white shadow-sm' : 'text-gray-500'}`}
-                                    >
-                                        Return
-                                    </button>
-                                </div>
-
-                                <input
-                                    type="date"
-                                    className="bg-gray-100 px-3 py-1 rounded text-sm font-mono text-gray-600 border border-gray-200 hover:border-blue-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none cursor-pointer transition-colors"
-                                    value={billDate}
-                                    onChange={(e) => setBillDate(e.target.value)}
-                                    max={new Date().toISOString().split('T')[0]}
-                                />
-                            </div>
-                        </div>
-
-                        {/* Header Fields */}
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">पार्टी नाव (Party)</label>
-                                <select
-                                    className="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-teal-500 outline-none"
-                                    value={selectedParty}
-                                    onChange={e => setSelectedParty(e.target.value)}
-                                >
-                                    <option value="">Select Party</option>
-                                    {parties.map(p => (
-                                        <option key={p.id} value={p.id}>{p.name} - {p.city}</option>
-                                    ))}
-                                </select>
-                            </div>
-                        </div>
-
-                        {/* Items Table */}
-                        <div className="mb-6">
-                            <div className="flex justify-between items-center mb-2">
-                                <h3 className="font-semibold text-gray-700">माल तपशील (Items)</h3>
-                            </div>
-
-                            <div className="space-y-4">
-                                {items.map((item, index) => (
-                                    <div key={item.id} className="p-4 border rounded-lg bg-gray-50 relative shadow-sm">
-                                        <button
-                                            onClick={() => removeItem(item.id!)}
-                                            className="absolute top-2 right-2 text-red-400 hover:text-red-600 p-1"
-                                        >
-                                            <Trash2 size={18} />
-                                        </button>
-
-                                        <div className="grid grid-cols-2 md:grid-cols-6 gap-3">
-                                            <div className="col-span-2">
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">मिरची जात (Type)</label>
-                                                <select
-                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white"
-                                                    value={item.mirchi_type_id || ''}
-                                                    onChange={e => handleMirchiChange(item.id!, e.target.value)}
-                                                >
-                                                    <option value="">Select Type</option>
-                                                    {mirchiTypes.map(m => (
-                                                        <option key={m.id} value={m.id}>{m.name}</option>
-                                                    ))}
-                                                </select>
-                                            </div>
-
-                                            {/* LOT Selection */}
-                                            {item.mirchi_type_id && (
-                                                <div className="col-span-2">
-                                                    <label className="block text-xs font-medium text-gray-500 mb-1">LOT Number</label>
-                                                    <select
-                                                        className="w-full border border-gray-300 rounded p-2 text-sm bg-white font-mono"
-                                                        value={item.lot_id || ''}
-                                                        onChange={e => handleLotSelection(item.id!, e.target.value)}
-                                                    >
-                                                        <option value="">Select LOT</option>
-                                                        {(availableLots[item.id!] || []).map(lot => (
-                                                            <option key={lot.id} value={lot.id}>
-                                                                {lot.lot_number} ({lot.remaining_quantity}kg available)
-                                                            </option>
-                                                        ))}
-                                                    </select>
-                                                </div>
-                                            )}
-
-                                            <div className={item.mirchi_type_id ? "col-span-2" : "col-span-2 md:col-span-4"}>
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">पोटी वजन (Eg: 10,20,30)</label>
-                                                <input
-                                                    type="text"
-                                                    placeholder="10, 20, 30"
-                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white"
-                                                    value={potiInputs[item.id!] || ''}
-                                                    onChange={e => handlePotiInputChange(item.id!, e.target.value)}
-                                                />
-                                            </div>
-
-                                            <div>
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">Gross</label>
-                                                <input type="number" readOnly className="w-full bg-gray-100 border border-gray-300 rounded p-2 text-sm" value={item.gross_weight} />
-                                            </div>
-                                            <div>
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">Poti (count)</label>
-                                                <input type="number" readOnly className="w-full bg-gray-100 border border-gray-300 rounded p-2 text-sm text-red-500" value={item.total_potya} />
-                                            </div>
-                                            <div>
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">Net</label>
-                                                <input type="number" readOnly className="w-full bg-blue-50 border border-blue-200 rounded p-2 text-sm font-bold text-blue-800" value={item.net_weight} />
-                                            </div>
-                                            <div>
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">Rate (₹)</label>
-                                                <input
-                                                    type="number"
-                                                    min="0"
-                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white appearance-none"
-                                                    onWheel={e => e.currentTarget.blur()}
-                                                    value={item.rate_per_kg === 0 ? '' : item.rate_per_kg}
-                                                    onChange={e => handleItemChange(item.id!, 'rate_per_kg', Math.max(0, parseFloat(e.target.value) || 0))}
-                                                    placeholder="0"
-                                                />
-                                            </div>
-                                            <div className="col-span-2 md:col-span-2">
-                                                <label className="block text-xs font-medium text-gray-500 mb-1">Total (₹)</label>
-                                                <input type="number" readOnly className="w-full bg-green-50 border border-green-200 rounded p-2 text-sm font-bold text-right text-green-800" value={item.item_total?.toFixed(2)} />
-                                            </div>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                            <button
-                                onClick={addItem}
-                                className="w-full mt-4 flex justify-center items-center gap-2 text-teal-600 font-medium bg-teal-50 hover:bg-teal-100 py-3 rounded-lg border border-teal-100 transition"
-                            >
-                                <Plus size={18} /> Add New Item (नवीन माल)
-                            </button>
-                        </div>
-                    </div>
-
-                    {/* Desktop: Right Summary Sidebar */}
-                    <div className="hidden lg:flex w-80 flex-col gap-4">
-                        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-0">
-                            <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">बिल सारांश (Summary)</h3>
-                            {SummaryContent()}
-                            <div className="flex gap-2 mt-6">
-                                {savedTransaction && (
-                                    <>
-                                        <PrintInvoice transaction={savedTransaction} />
-                                        <PdfInvoice transaction={savedTransaction} />
-                                    </>
-                                )}
-                                <button
-                                    onClick={handleSubmit}
-                                    disabled={isSubmitting || items.length === 0}
-                                    className={`flex-1 bg-teal-600 text-white py-3 rounded-lg font-bold shadow-lg hover:bg-teal-700 transition-all flex items-center justify-center gap-2 ${isSubmitting || items.length === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
-                                >
-                                    <Save size={20} />
-                                    {isSubmitting ? 'Saving...' : 'Save Bill'}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Mobile: Sticky Bottom Action Bar */}
-                    <div className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-[0_-4px_10px_rgba(0,0,0,0.1)] z-20">
-                        <div className="flex items-center justify-between p-4 bg-white z-20 relative">
-                            <div
-                                onClick={() => setShowMobileSummary(!showMobileSummary)}
-                                className="flex flex-col cursor-pointer"
-                            >
-                                <div className="flex items-center gap-1 text-gray-500 text-xs font-medium uppercase tracking-wide">
-                                    Summary {showMobileSummary ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
-                                </div>
-                                <div className="text-xl font-bold text-red-600">
-                                    ₹{grandTotal.toFixed(2)}
-                                </div>
-                            </div>
-                            <button
-                                onClick={handleSubmit}
-                                disabled={isSubmitting}
-                                className="bg-teal-600 text-white px-6 py-2.5 rounded-lg font-semibold flex items-center gap-2 shadow-sm active:bg-teal-700 disabled:opacity-50"
-                            >
-                                <Save size={18} /> {isSubmitting ? '...' : 'Save'}
-                            </button>
-                        </div>
-
-                        {showMobileSummary && (
-                            <div className="px-6 pb-6 pt-0 bg-white border-t border-dashed border-gray-200 max-h-[60vh] overflow-y-auto animate-in slide-in-from-bottom-2">
-                                <div className="mt-4">
-                                    {SummaryContent()}
-                                </div>
-                                {savedTransaction && (
-                                    <div className="mt-4 flex justify-center">
-                                        <PrintInvoice transaction={savedTransaction} />
-                                    </div>
-                                )}
-                            </div>
-                        )}
-                    </div>
-                </>
-            )}
-        </div>
-    );
-};
-
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+    getParties, getMirchiTypes, generateBillNumber, saveTransaction,
+    getAvailableLotsByMirchi
+} from '../services/db';
+import {
+    Party, MirchiType, Lot, Transaction, TransactionItem, BillType, PaymentMode, PartyType
+} from '../types';
+import { Save, Trash2, Plus, RotateCcw, Printer, Download, ChevronUp, ChevronDown } from 'lucide-react';
+import PrintInvoice from '../components/PrintInvoice';
+import PdfInvoice from '../components/PdfInvoice';
+
+const SummaryInput = ({ label, value, onChange }: { label: string, value: number, onChange: (val: number) => void }) => (
+    <div className="flex justify-between items-center mb-1 bg-gray-50 p-1.5 rounded">
+        <span className="text-gray-600 text-xs">{label}</span>
+        <input
+            type="number"
+            step="0.01"
+            min="0"
+            className="w-24 border rounded text-right p-1 text-sm bg-white focus:ring-1 focus:ring-teal-500 outline-none appearance-none"
+            value={value === 0 ? '' : value}
+            onChange={e => {
+                const parsed = parseFloat(e.target.value);
+                onChange(isNaN(parsed) ? 0 : Math.max(0, parsed));
+            }}
+            placeholder="0"
+        />
+    </div>
+);
+
+const JawaakBill = () => {
+    const navigate = useNavigate();
+
+    // Master Data
+    const [parties, setParties] = useState<Party[]>([]);
+    const [mirchiTypes, setMirchiTypes] = useState<MirchiType[]>([]);
+
+    // Form State
+    const [isReturnMode, setIsReturnMode] = useState(false);
+    const [billDate, setBillDate] = useState(new Date().toISOString().split('T')[0]);
+    const [billNumber, setBillNumber] = useState('');
+    const [selectedParty, setSelectedParty] = useState('');
+
+    // Mobile UI State
+    const [showMobileSummary, setShowMobileSummary] = useState(false);
+
+    const [items, setItems] = useState<Partial<TransactionItem>[]>([{
+        id: Date.now().toString(),
+        poti_weights: [],
+        gross_weight: 0,
+        poti_count: 0,
+        total_potya: 0,
+        net_weight: 0,
+        rate_per_kg: 0,
+        item_total: 0
+    }]);
+
+    // Temp inputs for items row
+    const [potiInputs, setPotiInputs] = useState<{ [key: string]: string }>({});
+
+    // LOT selection state
+    const [availableLots, setAvailableLots] = useState<{ [key: string]: Lot[] }>({});
+
+    const [expenses, setExpenses] = useState({
+        cess_percent: 1.0,
+        cess_amount: 0,
+        adat_percent: 3.0,
+        adat_amount: 0,
+        poti_rate: 18, // Default rate
+        poti_amount: 0,
+        hamali_per_poti: 6,
+        hamali_amount: 0,
+        packaging_hamali_per_poti: 0,
+        packaging_hamali_amount: 0,
+        gaadi_bharni: 0,
+        other_expenses: 0,
+    });
+
+    // Payment State
+    const [paymentMode, setPaymentMode] = useState<'cash' | 'online' | 'hybrid' | 'due'>('cash');
+    const [paidAmount, setPaidAmount] = useState(0); // Not used directly in new logic, derived
+    const [cashAmount, setCashAmount] = useState(0); // For hybrid
+    const [onlineAmount, setOnlineAmount] = useState(0); // For hybrid & due
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [savedTransaction, setSavedTransaction] = useState<Transaction | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // Initial Load & Bill Number Generation
+    useEffect(() => {
+        const loadData = async () => {
+            try {
+                setIsLoading(true);
+                setError(null);
+                const [partiesData, mirchiData] = await Promise.all([
+                    getParties(),
+                    getMirchiTypes()
+                ]);
+
+                if (!partiesData || partiesData.length === 0) {
+                    setError('No parties found. Please add parties in Settings first.');
+                }
+                if (!mirchiData || mirchiData.length === 0) {
+                    setError('No mirchi types found. Please add mirchi types in Settings first.');
+                }
+
+                // Filter parties for Jawaak bills
+                const filteredParties = partiesData.filter(p =>
+                    p.party_type === PartyType.JAWAAK || p.party_type === PartyType.BOTH
+                );
+
+                setParties(filteredParties || []);
+                setMirchiTypes(mirchiData || []);
+                setBillNumber(generateBillNumber(BillType.JAWAAK, isReturnMode));
+            } catch (err: any) {
+                console.error('Error loading data:', err);
+                setError('Failed to load data. Please check your connection and try again.');
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        loadData();
+    }, [isReturnMode]);
+
+    // Calculation Logic
+    const calculateRow = (item: Partial<TransactionItem>, potiString: string) => {
+        const weights = potiString.split(/[\s,+]+/).map(n => parseFloat(n)).filter(n => !isNaN(n) && n > 0);
+
+        const gross = weights.reduce((a, b) => a + b, 0);
+        const count = weights.length;
+        const potya = count * 1;
+        const net = Math.max(0, gross - potya);
+        const total = net * (item.rate_per_kg || 0);
+
+        return {
+            ...item,
+            poti_weights: weights,
+            gross_weight: gross,
+            poti_count: count,
+            total_potya: potya,
+            net_weight: net,
+            item_total: total
+        };
+    };
+
+    const handleItemChange = (id: string, field: string, value: any) => {
+        setItems(prev => prev.map(item => {
+            if (item.id !== id) return item;
+
+            let updatedItem = { ...item, [field]: value };
+
+            if (field === 'rate_per_kg') {
+                updatedItem.item_total = (updatedItem.net_weight || 0) * Math.max(0, parseFloat(value || 0));
+            }
+
+            return updatedItem;
+        }));
+    };
+
+    const handlePotiInputChange = (id: string, value: string) => {
+        setPotiInputs(prev => ({ ...prev, [id]: value }));
+        setItems(prev => prev.map(item => {
+            if (item.id !== id) return item;
+            return calculateRow(item, value);
+        }));
+    };
+
+    // Handle mirchi type change - load available lots
+    const handleMirchiChange = async (id: string, mirchiTypeId: string) => {
+        handleItemChange(id, 'mirchi_type_id', mirchiTypeId);
+
+        // Load available lots for this mirchi type
+        if (mirchiTypeId) {
+            const lots = await getAvailableLotsByMirchi(mirchiTypeId);
+            setAvailableLots(prev => ({ ...prev, [id]: lots }));
+        }
+    };
+
+    // Handle LOT selection
+    const handleLotSelection = (id: string, lotId: string) => {
+        handleItemChange(id, 'lot_id', lotId);
+
+        // Find the selected lot to get its details
+        const lots = availableLots[id] || [];
+        const selectedLot = lots.find(lot => lot.id === lotId);
+        if (selectedLot) {
+            handleItemChange(id, 'lot_number', selectedLot.lot_number);
+        }
+    };
+
+    const addItem = () => {
+        setItems(prev => [...prev, {
+            id: Date.now().toString(),
+            poti_weights: [],
+            gross_weight: 0,
+            poti_count: 0,
+            total_potya: 0,
+            net_weight: 0,
+            rate_per_kg: 0,
+            item_total: 0
+        }]);
+    };
+
+    const removeItem = (id: string) => {
+        if (items.length > 1) {
+            setItems(prev => prev.filter(i => i.id !== id));
+            const newInputs = { ...potiInputs };
+            delete newInputs[id];
+            setPotiInputs(newInputs);
+        }
+    };
+
+    // Totals Calculation
+    const subtotal = items.reduce((acc, item) => acc + (item.item_total || 0), 0);
+    const totalPoti = items.reduce((acc, item) => acc + (item.poti_count || 0), 0);
+
+    // Derived Expenses - New sequence
+    const potiAmt = totalPoti * expenses.poti_rate;
+    const baseForCess = subtotal + potiAmt; // Cess calculated on subtotal + poti
+    const cessAmt = (baseForCess * expenses.cess_percent) / 100;
+    const adatAmt = (subtotal * expenses.adat_percent) / 100;
+    const hamaliAmt = totalPoti * expenses.hamali_per_poti;
+    const packagingHamaliAmt = totalPoti * expenses.packaging_hamali_per_poti;
+    const totalExp = potiAmt + cessAmt + adatAmt + hamaliAmt + packagingHamaliAmt + (expenses.gaadi_bharni || 0) + (expenses.other_expenses || 0);
+    const grandTotal = subtotal + totalExp;
+
+    // Calculate Payment Details based on Mode
+    let finalCash = 0;
+    let finalOnline = 0;
+    let currentPaid = 0;
+
+    if (paymentMode === 'cash') {
+        finalCash = grandTotal;
+        finalOnline = 0;
+        currentPaid = grandTotal;
+    } else if (paymentMode === 'online') {
+        finalCash = 0;
+        finalOnline = grandTotal;
+        currentPaid = grandTotal;
+    } else if (paymentMode === 'hybrid') {
+        finalCash = cashAmount;
+        finalOnline = Math.max(0, grandTotal - cashAmount);
+        currentPaid = grandTotal; // Hybrid assumes full payment
+    } else if (paymentMode === 'due') {
+        finalCash = 0;
+        finalOnline = onlineAmount; // User defined
+        currentPaid = onlineAmount;
+    }
+
+    const balance = grandTotal - currentPaid;
+
+    // Validation Error
+    // Hybrid: Cash cannot exceed Total
+    // Due: Online cannot exceed Total
+    const isOverpaid = (paymentMode === 'hybrid' && cashAmount > grandTotal) ||
+        (paymentMode === 'due' && onlineAmount > grandTotal);
+
+    const validateForm = () => {
+        if (!selectedParty) {
+            alert('Please select a Party (पार्टी निवडा)');
+            return false;
+        }
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (!item.mirchi_type_id) {
+                alert(`Row ${i + 1}: Please select Mirchi Type`);
+                return false;
+            }
+            if (!item.poti_weights || item.poti_weights.length === 0) {
+                alert(`Row ${i + 1}: Please enter weights (e.g. 10, 20)`);
+                return false;
+            }
+            if (!item.rate_per_kg || item.rate_per_kg <= 0) {
+                alert(`Row ${i + 1}: Rate must be greater than 0`);
+                return false;
+            }
+        }
+        if (isOverpaid) {
+            alert('Paid amount cannot be greater than Total Amount');
+            return false;
+        }
+        return true;
+    };
+
+    const handleSubmit = async () => {
+        if (isSubmitting) return;
+        if (!validateForm()) return;
+
+        setIsSubmitting(true);
+
+        // Populate mirchi_name for each item from mirchiTypes
+        const itemsWithNames = items.map(item => ({
+            ...item,
+            mirchi_name: mirchiTypes.find(m => m.id === item.mirchi_type_id)?.name || 'Unknown'
+        }));
+
+        const transaction: Transaction = {
+            id: Date.now().toString(),
+            bill_number: billNumber,
+            bill_date: billDate,
+            bill_type: BillType.JAWAAK,
+            is_return: isReturnMode,
+            party_id: selectedParty,
+            party_name: parties.find(p => p.id === selectedParty)?.name,
+            items: itemsWithNames as TransactionItem[],
+            expenses: {
+                ...expenses,
+                cess_amount: cessAmt,
+                adat_amount: adatAmt,
+                poti_amount: potiAmt,
+                hamali_amount: hamaliAmt,
+                packaging_hamali_amount: packagingHamaliAmt
+            },
+            payments: [
+                ...(finalCash > 0 ? [{ mode: PaymentMode.CASH, amount: finalCash }] : []),
+                ...(finalOnline > 0 ? [{ mode: PaymentMode.ONLINE, amount: finalOnline }] : []),
+                ...(balance > 0 ? [{ mode: PaymentMode.DUE, amount: balance }] : []) // Optional: Track due as a payment entry or just balance? Usually balance is enough. Keeping logic simple.
+            ],
+            gross_weight_total: items.reduce((a, i) => a + (i.gross_weight || 0), 0),
+            net_weight_total: items.reduce((a, i) => a + (i.net_weight || 0), 0),
+            subtotal: subtotal,
+            total_expenses: totalExp,
+            total_amount: grandTotal,
+            paid_amount: currentPaid,
+            balance_amount: balance
+        };
+
+        const result = await saveTransaction(transaction);
+        if (result.success) {
+            // Use the complete transaction object we created, not just the API response
+            // This ensures all items are included for printing
+            const completeTransaction = result.data ? {
+                ...transaction,
+                ...result.data,
+                items: transaction.items, // Ensure items are preserved
+                expenses: {
+                    ...result.data.expenses,
+                    other_expenses: transaction.expenses.other_expenses,
+                },
+            } : transaction;
+            setSavedTransaction(completeTransaction);
+            alert('Bill Saved Successfully! You can now print the invoice.');
+        } else {
+            alert(`Error: ${result.message}`);
+        }
+        setIsSubmitting(false);
+    };
+
+    const handleHybridCashChange = (val: number) => {
+        setCashAmount(val);
+        // Online amount is derived in render, no state update needed for it in hybrid
+    };
+
+    const SummaryContent = () => (
+        <div className="space-y-3 text-sm">
+            <div className="flex justify-between">
+                <span className="text-gray-600">एकुण रक्कम (Subtotal)</span>
+                <span className="font-semibold">₹{subtotal.toFixed(2)}</span>
+            </div>
+
+            <div className="pt-2 border-t border-dashed space-y-2">
+                {/* 1. Poti (Bags) Rate */}
+                <SummaryInput
+                    label={`पोती (Bags ${totalPoti}) Rate`}
+                    value={expenses.poti_rate}
+                    onChange={val => setExpenses({ ...expenses, poti_rate: val })}
+                />
+                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
+                    <span>Amount:</span>
+                    <span>₹{potiAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 2. Cess Tax (calculated on subtotal + poti) */}
+                <SummaryInput
+                    label={`सेस (Cess ${expenses.cess_percent}%) on ₹${baseForCess.toFixed(2)}`}
+                    value={expenses.cess_percent}
+                    onChange={val => setExpenses({ ...expenses, cess_percent: val })}
+                />
+                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
+                    <span>Amount:</span>
+                    <span>₹{cessAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 3. Adat / Market Yard Tax */}
+                <SummaryInput
+                    label={`अडत (Adat ${expenses.adat_percent}%)`}
+                    value={expenses.adat_percent}
+                    onChange={val => setExpenses({ ...expenses, adat_percent: val })}
+                />
+                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
+                    <span>Amount:</span>
+                    <span>₹{adatAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 4. Hamali */}
+                <SummaryInput
+                    label={`हमाली (Hamali per poti)`}
+                    value={expenses.hamali_per_poti}
+                    onChange={val => setExpenses({ ...expenses, hamali_per_poti: val })}
+                />
+                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
+                    <span>Amount ({expenses.hamali_per_poti} * {totalPoti}):</span>
+                    <span>₹{hamaliAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 5. Packaging Hamali */}
+                <SummaryInput
+                    label="पॅकेजिंग हमाली (Rate)"
+                    value={expenses.packaging_hamali_per_poti}
+                    onChange={val => setExpenses({ ...expenses, packaging_hamali_per_poti: val })}
+                />
+                <div className="flex justify-between items-center text-xs text-gray-500 -mt-1 mb-2">
+                    <span>Amount ({totalPoti} * {expenses.packaging_hamali_per_poti}):</span>
+                    <span>₹{packagingHamaliAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 6. Gaadi Bharni */}
+                <SummaryInput
+                    label="गाडी भरणी"
+                    value={expenses.gaadi_bharni}
+                    onChange={val => setExpenses({ ...expenses, gaadi_bharni: val })}
+                />
+
+                {/* 7. Other Expenses */}
+                <SummaryInput
+                    label="Other Expenses"
+                    value={expenses.other_expenses}
+                    onChange={val => setExpenses({ ...expenses, other_expenses: val })}
+                />
+            </div>
+
+            {/* 8. Total Price */}
+            <div className="pt-2 border-t border-gray-200 flex justify-between items-center">
+                <span className="text-base font-bold text-gray-800">एकुण बिल (Total)</span>
+                <span className="text-xl font-bold text-red-600">₹{grandTotal.toFixed(2)}</span>
+            </div>
+
+            {/* Payment Section */}
+            <div className="bg-teal-50 p-3 rounded-lg mt-2 border border-teal-100">
+                <label className="block text-xs font-medium text-teal-800 mb-2">Payment Mode</label>
+                <div className="flex gap-2 mb-3">
+                    {['cash', 'online', 'hybrid', 'due'].map(mode => (
+                        <button
+                            key={mode}
+                            onClick={() => {
+                                setPaymentMode(mode as any);
+                                setCashAmount(0);
+                                setOnlineAmount(0);
+                            }}
+                            className={`flex-1 py-1 text-xs font-medium rounded border ${paymentMode === mode
+                                ? 'bg-teal-600 text-white border-teal-600'
+                                : 'bg-white text-gray-600 border-gray-200'
+                                } capitalize`}
+                        >
+                            {mode}
+                        </button>
+                    ))}
+                </div>
+
+                {paymentMode === 'cash' && (
+                    <div className="text-center py-2 text-sm text-gray-600">
+                        Full Payment in Cash: <span className="font-bold text-gray-800">₹{grandTotal.toFixed(2)}</span>
+                    </div>
+                )}
+
+                {paymentMode === 'online' && (
+                    <div className="text-center py-2 text-sm text-gray-600">
+                        Full Payment Online: <span className="font-bold text-gray-800">₹{grandTotal.toFixed(2)}</span>
+                    </div>
+                )}
+
+                {paymentMode === 'hybrid' && (
+                    <div className="space-y-2">
+                        <div>
+                            <label className="text-xs text-gray-600">Cash Amount</label>
+                            <input
+                                type="number"
+                                min="0"
+                                max={grandTotal}
+                                step="0.01"
+                                className="w-full border border-teal-200 rounded p-2 text-right font-medium focus:ring-1 focus:ring-teal-500 outline-none"
+                                value={cashAmount === 0 ? '' : cashAmount}
+                                onChange={e => {
+                                    const val = parseFloat(e.target.value) || 0;
+                                    if (val >= 0 && val <= grandTotal) {
+                                        handleHybridCashChange(val);
+                                    }
+                                }}
+                                onKeyDown={e => {
+                                    // Prevent special characters: -, +, e, E
+                                    if (['-', '+', 'e', 'E'].includes(e.key)) {
+                                        e.preventDefault();
+                                    }
+                                }}
+                                placeholder="Cash"
+                            />
+                        </div>
+                        <div>
+                            <label className="text-xs text-gray-600">Online Amount (Auto)</label>
+                            <input
+                                type="text"
+                                readOnly
+                                className="w-full bg-gray-100 border border-gray-200 rounded p-2 text-right font-medium text-gray-600"
+                                value={(grandTotal - cashAmount).toFixed(2)}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {paymentMode === 'due' && (
+                    <div className="space-y-2">
+                        <div>
+                            <label className="text-xs text-gray-600">Online Amount (Partial Payment)</label>
+                            <input
+                                type="number"
+                                min="0"
+                                max={grandTotal}
+                                step="0.01"
+                                className="w-full border border-teal-200 rounded p-2 text-right font-medium focus:ring-1 focus:ring-teal-500 outline-none"
+                                value={onlineAmount === 0 ? '' : onlineAmount}
+                                onChange={e => {
+                                    const val = parseFloat(e.target.value) || 0;
+                                    if (val >= 0 && val <= grandTotal) {
+                                        setOnlineAmount(val);
+                                    }
+                                }}
+                                onKeyDown={e => {
+                                    // Prevent special characters: -, +, e, E
+                                    if (['-', '+', 'e', 'E'].includes(e.key)) {
+                                        e.preventDefault();
+                                    }
+                                }}
+                                placeholder="Enter amount paid online (0 for full due)"
+                            />
+                        </div>
+                        <div>
+                            <label className="text-xs text-gray-600">Due Amount (Auto)</label>
+                            <input
+                                type="text"
+                                readOnly
+                                className="w-full bg-red-50 border border-red-200 rounded p-2 text-right font-bold text-red-600"
+                                value={(grandTotal - onlineAmount).toFixed(2)}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {isOverpaid && (
+                    <div className="text-red-500 text-xs mt-2 font-medium text-center">
+                        Error: Amount exceeds Total!
+                    </div>
+                )}
+            </div>
+
+            <div className="flex justify-between items-center pt-2">
+                <span className="text-gray-600 font-medium">बाकी (Balance)</span>
+                <span className={`font-bold ${balance > 0 ? 'text-red-500' : 'text-green-600'}`}>₹{balance.toFixed(2)}</span>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="flex flex-col lg:flex-row gap-4 h-full p-4 bg-gray-50">
+            {isLoading && (
+                <div className="flex-1 flex items-center justify-center bg-white rounded-xl shadow-sm border border-gray-100">
+                    <div className="text-center">
+                        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600 mb-4"></div>
+                        <p className="text-gray-600">Loading data...</p>
+                    </div>
+                </div>
+            )}
+            {error && !isLoading && (
+                <div className="flex-1 flex items-center justify-center bg-white rounded-xl shadow-sm border border-red-200">
+                    <div className="text-center p-8">
+                        <div className="text-red-500 text-5xl mb-4">⚠️</div>
+                        <h3 className="text-lg font-semibold text-gray-800 mb-2">Error Loading Data</h3>
+                        <p className="text-gray-600 mb-4">{error}</p>
+                        <button onClick={() => window.location.reload()} className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700">
+                            Retry
+                        </button>
+                    </div>
+                </div>
+            )}
+            {!isLoading && !error && (
+                <>
+                    {/* Left: Form */}
+                    <div className={`flex-1 bg-white rounded-xl shadow-sm border p-4 lg:p-6 lg:overflow-y-auto lg:h-full no-scrollbar pb-40 lg:pb-6 ${isReturnMode ? 'border-red-200' : 'border-gray-100'}`}>
+                        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
+                            <h2 className={`text-lg font-bold flex items-center gap-2 ${isReturnMode ? 'text-red-600' : 'text-gray-800'}`}>
+                                {isReturnMode ? <RotateCcw className="text-red-500" /> : <div className="text-teal-600 font-bold">OUT</div>}
+                                {isReturnMode ? 'जावक परतावा (Sales Return)' : 'जावक बिल (Sales)'}
+                            </h2>
+
+                            <div className="flex items-center gap-3">
+                                <div className="flex bg-gray-100 rounded-lg p-1">
+                                    <button
+                                        onClick={() => setIsReturnMode(false)}
+                                        className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${!isReturnMode ? 'bg-white text-teal-700 shadow-sm' : 'text-gray-500'}`}
+                                    >
+                                        Regular
+                                    </button>
+                                    <button
+                                        onClick={() => setIsReturnMode(true)}
+                                        className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${isReturnMode ? 'bg-red-500 text-white shadow-sm' : 'text-gray-500'}`}
+                                    >
+                                        Return
+                                    </button>
+                                </div>
+
+                                <input
+                                    type="date"
+                                    className="bg-gray-100 px-3 py-1 rounded text-sm font-mono text-gray-600 border border-gray-200 hover:border-blue-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none cursor-pointer transition-colors"
+                                    value={billDate}
+                                    onChange={(e) => setBillDate(e.target.value)}
+                                    max={new Date().toISOString().split('T')[0]}
+                                />
+                            </div>
+                        </div>
+
+                        {/* Header Fields */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">पार्टी नाव (Party)</label>
+                                <select
+                                    className="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-teal-500 outline-none"
+                                    value={selectedParty}
+                                    onChange={e => setSelectedParty(e.target.value)}
+                                >
+                                    <option value="">Select Party</option>
+                                    {parties.map(p => (
+                                        <option key={p.id} value={p.id}>{p.name} - {p.city}</option>
+                                    ))}
+                                </select>
+                            </div>
+                        </div>
+
+                        {/* Items Table */}
+                        <div className="mb-6">
+                            <div className="flex justify-between items-center mb-2">
+                                <h3 className="font-semibold text-gray-700">माल तपशील (Items)</h3>
+                            </div>
+
+                            <div className="space-y-4">
+                                {items.map((item, index) => (
+                                    <div key={item.id} className="p-4 border rounded-lg bg-gray-50 relative shadow-sm">
+                                        <button
+                                            onClick={() => removeItem(item.id!)}
+                                            className="absolute top-2 right-2 text-red-400 hover:text-red-600 p-1"
+                                        >
+                                            <Trash2 size={18} />
+                                        </button>
+
+                                        <div className="grid grid-cols-2 md:grid-cols-6 gap-3">
+                                            <div className="col-span-2">
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">मिरची जात (Type)</label>
+                                                <select
+                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white"
+                                                    value={item.mirchi_type_id || ''}
+                                                    onChange={e => handleMirchiChange(item.id!, e.target.value)}
+                                                >
+                                                    <option value="">Select Type</option>
+                                                    {mirchiTypes.map(m => (
+                                                        <option key={m.id} value={m.id}>{m.name}</option>
+                                                    ))}
+                                                </select>
+                                            </div>
+
+                                            {/* LOT Selection */}
+                                            {item.mirchi_type_id && (
+                                                <div className="col-span-2">
+                                                    <label className="block text-xs font-medium text-gray-500 mb-1">LOT Number</label>
+                                                    <select
+                                                        className="w-full border border-gray-300 rounded p-2 text-sm bg-white font-mono"
+                                                        value={item.lot_id || ''}
+                                                        onChange={e => handleLotSelection(item.id!, e.target.value)}
+                                                    >
+                                                        <option value="">Select LOT</option>
+                                                        {(availableLots[item.id!] || []).map(lot => (
+                                                            <option key={lot.id} value={lot.id}>
+                                                                {lot.lot_number} ({lot.remaining_quantity}kg available)
+                                                            </option>
+                                                        ))}
+                                                    </select>
+                                                </div>
+                                            )}
+
+                                            <div className={item.mirchi_type_id ? "col-span-2" : "col-span-2 md:col-span-4"}>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">पोटी वजन (Eg: 10,20,30)</label>
+                                                <input
+                                                    type="text"
+                                                    placeholder="10, 20, 30"
+                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white"
+                                                    value={potiInputs[item.id!] || ''}
+                                                    onChange={e => handlePotiInputChange(item.id!, e.target.value)}
+                                                />
+                                            </div>
+
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Gross</label>
+                                                <input type="number" readOnly className="w-full bg-gray-100 border border-gray-300 rounded p-2 text-sm" value={item.gross_weight} />
+                                            </div>
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Poti (count)</label>
+                                                <input type="number" readOnly className="w-full bg-gray-100 border border-gray-300 rounded p-2 text-sm text-red-500" value={item.total_potya} />
+                                            </div>
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Net</label>
+                                                <input type="number" readOnly className="w-full bg-blue-50 border border-blue-200 rounded p-2 text-sm font-bold text-blue-800" value={item.net_weight} />
+                                            </div>
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Rate (₹)</label>
+                                                <input
+                                                    type="number"
+                                                    min="0"
+                                                    className="w-full border border-gray-300 rounded p-2 text-sm bg-white appearance-none"
+                                                    onWheel={e => e.currentTarget.blur()}
+                                                    value={item.rate_per_kg === 0 ? '' : item.rate_per_kg}
+                                                    onChange={e => handleItemChange(item.id!, 'rate_per_kg', Math.max(0, parseFloat(e.target.value) || 0))}
+                                                    placeholder="0"
+                                                />
+                                            </div>
+                                            <div className="col-span-2 md:col-span-2">
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Total (₹)</label>
+                                                <input type="number" readOnly className="w-full bg-green-50 border border-green-200 rounded p-2 text-sm font-bold text-right text-green-800" value={item.item_total?.toFixed(2)} />
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                            <button
+                                onClick={addItem}
+                                className="w-full mt-4 flex justify-center items-center gap-2 text-teal-600 font-medium bg-teal-50 hover:bg-teal-100 py-3 rounded-lg border border-teal-100 transition"
+                            >
+                                <Plus size={18} /> Add New Item (नवीन माल)
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Desktop: Right Summary Sidebar */}
+                    <div className="hidden lg:flex w-80 flex-col gap-4">
+                        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-0">
+                            <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">बिल सारांश (Summary)</h3>
+                            {SummaryContent()}
+                            <div className="flex gap-2 mt-6">
+                                {savedTransaction && (
+                                    <>
+                                        <PrintInvoice transaction={savedTransaction} />
+                                        <PdfInvoice transaction={savedTransaction} />
+                                    </>
+                                )}
+                                <button
+                                    onClick={handleSubmit}
+                                    disabled={isSubmitting || items.length === 0}
+                                    className={`flex-1 bg-teal-600 text-white py-3 rounded-lg font-bold shadow-lg hover:bg-teal-700 transition-all flex items-center justify-center gap-2 ${isSubmitting || items.length === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                >
+                                    <Save size={20} />
+                                    {isSubmitting ? 'Saving...' : 'Save Bill'}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Mobile: Sticky Bottom Action Bar */}
+                    <div className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-[0_-4px_10px_rgba(0,0,0,0.1)] z-20">
+                        <div className="flex items-center justify-between p-4 bg-white z-20 relative">
+                            <div
+                                onClick={() => setShowMobileSummary(!showMobileSummary)}
+                                className="flex flex-col cursor-pointer"
+                            >
+                                <div className="flex items-center gap-1 text-gray-500 text-xs font-medium uppercase tracking-wide">
+                                    Summary {showMobileSummary ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
+                                </div>
+                                <div className="text-xl font-bold text-red-600">
+                                    ₹{grandTotal.toFixed(2)}
+                                </div>
+                            </div>
+                            <button
+                                onClick={handleSubmit}
+                                disabled={isSubmitting}
+                                className="bg-teal-600 text-white px-6 py-2.5 rounded-lg font-semibold flex items-center gap-2 shadow-sm active:bg-teal-700 disabled:opacity-50"
+                            >
+                                <Save size={18} /> {isSubmitting ? '...' : 'Save'}
+                            </button>
+                        </div>
+
+                        {showMobileSummary && (
+                            <div className="px-6 pb-6 pt-0 bg-white border-t border-dashed border-gray-200 max-h-[60vh] overflow-y-auto animate-in slide-in-from-bottom-2">
+                                <div className="mt-4">
+                                    {SummaryContent()}
+                                </div>
+                                {savedTransaction && (
+                                    <div className="mt-4 flex justify-center">
+                                        <PrintInvoice transaction={savedTransaction} />
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </>
+            )}
+        </div>
+    );
+};
+
 export default JawaakBill;

pages/PartyLedger.tsx

@@ -1,651 +1,651 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { getParties, getTransactions, updateTransactionPayment } from '../services/db';
-import { Party, Transaction, PartyType, BillType } from '../types';
-import { Users, Filter, Search, ArrowLeft, Eye, Edit, Save, X, Printer, Download } from 'lucide-react';
-import PrintInvoice from '../components/PrintInvoice.tsx';
-import PdfInvoice from '../components/PdfInvoice.tsx';
-import { exportPartyLedger } from '../utils/exportToExcel';
-
-const PartyLedger = () => {
-    const [parties, setParties] = useState<Party[]>([]);
-    const [transactions, setTransactions] = useState<Transaction[]>([]);
-    const [activeTab, setActiveTab] = useState<'awaak' | 'jawaak'>('awaak');
-    const [viewMode, setViewMode] = useState<'list' | 'detail'>('list');
-    const [selectedParty, setSelectedParty] = useState<Party | null>(null);
-    const [searchQuery, setSearchQuery] = useState('');
-
-    // Update Payment State
-    const [editingTxId, setEditingTxId] = useState<string | null>(null);
-    const [paymentAmount, setPaymentAmount] = useState<string>('');
-
-    // Multi-select for combined invoice
-    const [selectedTransactions, setSelectedTransactions] = useState<string[]>([]);
-
-    const loadData = async () => {
-        setParties(await getParties());
-        setTransactions(await getTransactions());
-    };
-
-    useEffect(() => {
-        loadData();
-    }, []);
-
-    // Filter Parties based on Tab and Search
-    const filteredParties = parties.filter(p => {
-        const matchesTab = activeTab === 'awaak'
-            ? (p.party_type === PartyType.AWAAK || p.party_type === PartyType.BOTH)
-            : (p.party_type === PartyType.JAWAAK || p.party_type === PartyType.BOTH);
-
-        const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-            p.phone.includes(searchQuery) ||
-            p.city.toLowerCase().includes(searchQuery.toLowerCase());
-
-        return matchesTab && matchesSearch;
-    });
-
-    // Get Transactions for Selected Party
-    const partyTransactions = selectedParty
-        ? transactions.filter(t => t.party_id === selectedParty.id).sort((a, b) => new Date(b.bill_date).getTime() - new Date(a.bill_date).getTime())
-        : [];
-
-    // Memoize combined transaction for PDF generation
-    const combinedTransaction = useMemo(() => {
-        if (!selectedParty || selectedTransactions.length === 0) return null;
-
-        const selected = partyTransactions.filter(t => selectedTransactions.includes(t.id));
-        if (selected.length === 0) return null;
-
-        return {
-            ...selected[0], // Use first transaction as base
-            id: `combined-${selectedParty.id}-${Date.now()}`, // Unique ID for combined
-            bill_number: `COMBINED-${selected.length}-BILLS`,
-            items: selected.flatMap(t => t.items),
-            subtotal: selected.reduce((sum, t) => sum + (t.subtotal || 0), 0),
-            total_expenses: selected.reduce((sum, t) => sum + (t.total_expenses || 0), 0),
-            total_amount: selected.reduce((sum, t) => sum + t.total_amount, 0),
-            paid_amount: selected.reduce((sum, t) => sum + t.paid_amount, 0),
-            balance_amount: selected.reduce((sum, t) => sum + t.balance_amount, 0),
-            gross_weight_total: selected.reduce((sum, t) => sum + (t.gross_weight_total || 0), 0),
-            net_weight_total: selected.reduce((sum, t) => sum + (t.net_weight_total || 0), 0),
-        };
-    }, [selectedTransactions, partyTransactions, selectedParty]);
-
-    // Calculate Totals for List View
-    const getPartyStats = (partyId: string) => {
-        const txs = transactions.filter(t => t.party_id === partyId);
-
-        // Calculate totals - returns should subtract from totals
-        const totalBill = txs.reduce((sum, t) => {
-            if (t.is_return) {
-                return sum - t.total_amount; // Subtract returns
-            }
-            return sum + t.total_amount; // Add normal transactions
-        }, 0);
-
-        const totalPaid = txs.reduce((sum, t) => {
-            if (t.is_return) {
-                return sum - t.paid_amount; // Subtract returns
-            }
-            return sum + t.paid_amount; // Add normal transactions
-        }, 0);
-
-        // Balance is directly from party object for accuracy
-        const party = parties.find(p => p.id === partyId);
-        return {
-            totalBill,
-            totalPaid,
-            balance: party?.current_balance || 0
-        };
-    };
-
-    const handleUpdatePayment = async (tx: Transaction) => {
-        const amount = parseFloat(paymentAmount);
-        if (isNaN(amount) || amount <= 0) {
-            alert('Please enter a valid amount');
-            return;
-        }
-        if (amount > tx.balance_amount) {
-            alert('Amount cannot exceed due balance');
-            return;
-        }
-
-        const res = await updateTransactionPayment(tx.id, amount);
-        if (res.success) {
-            // Update local state for demo/sample data
-            setTransactions((prev) =>
-                prev.map((t) =>
-                    t.id === tx.id
-                        ? {
-                            ...t,
-                            paid_amount: t.paid_amount + amount,
-                            balance_amount: t.balance_amount - amount,
-                        }
-                        : t,
-                ),
-            );
-            setEditingTxId(null);
-            setPaymentAmount('');
-            // Reload data to refresh party balances
-            loadData();
-        } else {
-            alert(res.message);
-        }
-    };
-
-
-    return (
-        <div className="space-y-6">
-            {/* Header & Controls */}
-            <div className="flex flex-col md:flex-row justify-between items-center bg-white p-4 rounded-xl border border-gray-100 shadow-sm gap-4">
-                {viewMode === 'detail' && selectedParty ? (
-                    <>
-                        {/* Header with Party Info */}
-                        <div className="flex items-center justify-between w-full">
-                            <div className="flex items-center gap-4">
-                                <button
-                                    onClick={() => { setViewMode('list'); setSelectedParty(null); setSelectedTransactions([]); }}
-                                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                                >
-                                    <ArrowLeft size={20} className="text-gray-600" />
-                                </button>
-                                <div>
-                                    <h2 className="text-2xl font-bold text-gray-800">{selectedParty.name}</h2>
-                                    <p className="text-sm text-gray-500">{selectedParty.city} • {selectedParty.phone}</p>
-                                </div>
-                            </div>
-                            {selectedTransactions.length > 0 && combinedTransaction && (
-                                <PrintInvoice
-                                    transaction={combinedTransaction}
-                                    className="px-2 sm:px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors flex items-center gap-1 sm:gap-2"
-                                >
-                                    <Printer size={18} className="shrink-0" />
-                                    <span className="hidden sm:inline">Print {selectedTransactions.length} Selected</span>
-                                </PrintInvoice>
-                            )}
-                            {combinedTransaction && (
-                                <PdfInvoice
-                                    transaction={combinedTransaction}
-                                    className="px-2 sm:px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-1 sm:gap-2"
-                                >
-                                    <Download size={18} className="shrink-0" />
-                                    <span className="hidden sm:inline">PDF {selectedTransactions.length} Selected</span>
-                                </PdfInvoice>
-                            )}
-                            <button
-                                onClick={() => exportPartyLedger(selectedParty, partyTransactions)}
-                                className="px-2 sm:px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center gap-1 sm:gap-2"
-                                title="Export to Excel"
-                            >
-                                <Download size={18} className="shrink-0" />
-                                <span className="hidden sm:inline">Export to Excel</span>
-                            </button>
-                        </div>
-                    </>
-                ) : (
-                    <div className="flex items-center gap-2">
-                        <Users className="text-teal-600" />
-                        <h2 className="text-lg font-bold">
-                            पार्टी लेजर (Party Ledger)
-                        </h2>
-                    </div>
-                )}
-
-                {viewMode === 'list' && (
-                    <div className="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto">
-                        {/* Tabs */}
-                        <div className="flex bg-gray-100 p-1 rounded-lg">
-                            <button
-                                onClick={() => setActiveTab('awaak')}
-                                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${activeTab === 'awaak' ? 'bg-white text-teal-700 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
-                            >
-                                Awaak (Purchase)
-                            </button>
-                            <button
-                                onClick={() => setActiveTab('jawaak')}
-                                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${activeTab === 'jawaak' ? 'bg-white text-blue-700 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
-                            >
-                                Jawaak (Sales)
-                            </button>
-                        </div>
-
-                        {/* Search */}
-                        <div className="relative w-full md:w-auto mt-2 md:mt-0">
-                            <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
-                            <input
-                                type="text"
-                                placeholder="Search Party..."
-                                className="pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 outline-none w-full md:w-64"
-                                value={searchQuery}
-                                onChange={e => setSearchQuery(e.target.value)}
-                            />
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {/* Content Area */}
-            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
-                {viewMode === 'list' ? (
-                    <>
-                        {/* Desktop Table View */}
-                        <div className="hidden md:block overflow-x-auto">
-                            <table className="w-full text-sm text-left">
-                                <thead className="bg-gray-50 text-gray-500 border-b border-gray-100">
-                                    <tr>
-                                        <th className="px-6 py-4 font-medium">Party Name</th>
-                                        <th className="px-6 py-4 font-medium text-right">Total Bill Amount</th>
-                                        <th className="px-6 py-4 font-medium text-right">Jama (Paid)</th>
-                                        <th className="px-6 py-4 font-medium text-right">Baki (Balance)</th>
-                                        <th className="px-6 py-4 font-medium text-center">Action</th>
-                                    </tr>
-                                </thead>
-                                <tbody className="divide-y divide-gray-100">
-                                    {filteredParties.length > 0 ? (
-                                        filteredParties.map(party => {
-                                            const stats = getPartyStats(party.id);
-                                            return (
-                                                <tr key={party.id} className="hover:bg-gray-50 transition-colors">
-                                                    <td className="px-6 py-4 font-medium text-gray-900">{party.name}</td>
-                                                    <td className="px-6 py-4 text-right font-medium">₹{stats.totalBill.toLocaleString()}</td>
-                                                    <td className="px-6 py-4 text-right text-green-600 font-medium">₹{stats.totalPaid.toLocaleString()}</td>
-                                                    <td className={`px-6 py-4 text-right font-bold ${stats.balance !== 0 ? 'text-red-500' : 'text-gray-400'}`}>
-                                                        ₹{Math.abs(stats.balance).toLocaleString()} {stats.balance > 0 ? '(Dr)' : stats.balance < 0 ? '(Cr)' : ''}
-                                                    </td>
-                                                    <td className="px-6 py-4 text-center">
-                                                        <button
-                                                            onClick={() => {
-                                                                setSelectedParty(party);
-                                                                setViewMode('detail');
-                                                                // If this party has no transactions, add some sample data for demo
-                                                                const hasTx = transactions.some(t => t.party_id === party.id);
-                                                                if (!hasTx) {
-                                                                    const sampleTxs = [
-                                                                        {
-                                                                            id: `${party.id}-tx1`,
-                                                                            party_id: party.id,
-                                                                            bill_date: new Date().toISOString().split('T')[0],
-                                                                            bill_number: 'SAMPLE001',
-                                                                            items: [{ mirchi_name: 'Red Chili' }],
-                                                                            is_return: false,
-                                                                            total_amount: 5000,
-                                                                            paid_amount: 2000,
-                                                                            balance_amount: 3000,
-                                                                            bill_type: PartyType.AWAAK,
-                                                                        },
-                                                                        {
-                                                                            id: `${party.id}-tx2`,
-                                                                            party_id: party.id,
-                                                                            bill_date: new Date().toISOString().split('T')[0],
-                                                                            bill_number: 'SAMPLE002',
-                                                                            items: [{ mirchi_name: 'Green Chili' }],
-                                                                            is_return: false,
-                                                                            total_amount: 3000,
-                                                                            paid_amount: 3000,
-                                                                            balance_amount: 0,
-                                                                            bill_type: PartyType.AWAAK,
-                                                                        },
-                                                                    ];
-                                                                    setTransactions(prev => [...prev, ...sampleTxs]);
-                                                                }
-                                                            }}
-                                                            className="p-2 hover:bg-teal-50 text-teal-600 rounded-full transition-colors"
-                                                            title="View Ledger"
-                                                        >
-                                                            <Eye size={18} />
-                                                        </button>
-                                                    </td>
-                                                </tr>
-                                            );
-                                        })
-                                    ) : (
-                                        <tr>
-                                            <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
-                                                No parties found.
-                                            </td>
-                                        </tr>
-                                    )}
-                                </tbody>
-                            </table>
-                        </div>
-
-                        {/* Mobile Card View */}
-                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
-                            {filteredParties.length > 0 ? (
-                                filteredParties.map(party => {
-                                    const stats = getPartyStats(party.id);
-                                    return (
-                                        <div key={party.id} className="p-4 space-y-3">
-                                            <div className="flex justify-between items-start">
-                                                <div>
-                                                    <h3 className="font-bold text-gray-900">{party.name}</h3>
-                                                </div>
-                                                <button
-                                                    onClick={() => {
-                                                        setSelectedParty(party);
-                                                        setViewMode('detail');
-                                                        // If this party has no transactions, add sample data for demo
-                                                        const hasTx = transactions.some(t => t.party_id === party.id);
-                                                        if (!hasTx) {
-                                                            const sampleTxs = [
-                                                                {
-                                                                    id: `${party.id}-tx1`,
-                                                                    party_id: party.id,
-                                                                    bill_date: new Date().toISOString().split('T')[0],
-                                                                    bill_number: 'SAMPLE001',
-                                                                    items: [{ mirchi_name: 'Red Chili' }],
-                                                                    is_return: false,
-                                                                    total_amount: 5000,
-                                                                    paid_amount: 2000,
-                                                                    balance_amount: 3000,
-                                                                    bill_type: PartyType.AWAAK,
-                                                                },
-                                                                {
-                                                                    id: `${party.id}-tx2`,
-                                                                    party_id: party.id,
-                                                                    bill_date: new Date().toISOString().split('T')[0],
-                                                                    bill_number: 'SAMPLE002',
-                                                                    items: [{ mirchi_name: 'Green Chili' }],
-                                                                    is_return: false,
-                                                                    total_amount: 3000,
-                                                                    paid_amount: 3000,
-                                                                    balance_amount: 0,
-                                                                    bill_type: PartyType.AWAAK,
-                                                                },
-                                                            ];
-                                                            setTransactions(prev => [...prev, ...sampleTxs]);
-                                                        }
-                                                    }}
-                                                    className="p-2 bg-teal-50 text-teal-600 rounded-lg"
-                                                >
-                                                    <Eye size={18} />
-                                                </button>
-                                            </div>
-                                            <div className="grid grid-cols-3 gap-2 text-xs">
-                                                <div className="bg-gray-50 p-2 rounded">
-                                                    <div className="text-gray-500 mb-1">Total Bill</div>
-                                                    <div className="font-medium">₹{stats.totalBill.toLocaleString()}</div>
-                                                </div>
-                                                <div className="bg-green-50 p-2 rounded">
-                                                    <div className="text-green-600 mb-1">Paid</div>
-                                                    <div className="font-medium text-green-700">₹{stats.totalPaid.toLocaleString()}</div>
-                                                </div>
-                                                <div className="bg-red-50 p-2 rounded">
-                                                    <div className="text-red-500 mb-1">Balance</div>
-                                                    <div className="font-bold text-red-600">
-                                                        ₹{Math.abs(stats.balance).toLocaleString()} {stats.balance > 0 ? 'Dr' : stats.balance < 0 ? 'Cr' : ''}
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    );
-                                })
-                            ) : (
-                                <div className="p-8 text-center text-gray-500">
-                                    No parties found.
-                                </div>
-                            )}
-                        </div>
-                    </>
-                ) : (
-                    // Detail View
-                    <>
-                        {/* Desktop Table View */}
-                        <div className="hidden md:block overflow-x-auto">
-                            <table className="w-full text-sm text-left">
-                                <thead className="bg-gray-50 text-gray-500 border-b border-gray-100">
-                                    <tr>
-                                        <th className="px-6 py-4 font-medium text-center">
-                                            <input
-                                                type="checkbox"
-                                                checked={selectedTransactions.length === partyTransactions.length && partyTransactions.length > 0}
-                                                onChange={(e) => {
-                                                    if (e.target.checked) {
-                                                        setSelectedTransactions(partyTransactions.map(t => t.id));
-                                                    } else {
-                                                        setSelectedTransactions([]);
-                                                    }
-                                                }}
-                                                className="w-4 h-4 text-teal-600 rounded focus:ring-teal-500"
-                                            />
-                                        </th>
-                                        <th className="px-6 py-4 font-medium">Date</th>
-                                        <th className="px-6 py-4 font-medium">Bill No</th>
-                                        <th className="px-6 py-4 font-medium">Mirchi Type</th>
-                                        <th className="px-6 py-4 font-medium">Remark</th>
-                                        <th className="px-6 py-4 font-medium text-right">Bill Amount</th>
-                                        <th className="px-6 py-4 font-medium text-right">Paid</th>
-                                        <th className="px-6 py-4 font-medium text-right">Due Balance</th>
-                                        <th className="px-6 py-4 font-medium text-center">Action</th>
-                                        <th className="px-6 py-4 font-medium text-center">Print</th>
-                                    </tr>
-                                </thead>
-                                <tbody className="divide-y divide-gray-100">
-                                    {partyTransactions.length > 0 ? (
-                                        partyTransactions.map(tx => (
-                                            <tr key={tx.id} className="hover:bg-gray-50">
-                                                <td className="px-6 py-4 text-center">
-                                                    <input
-                                                        type="checkbox"
-                                                        checked={selectedTransactions.includes(tx.id)}
-                                                        onChange={(e) => {
-                                                            if (e.target.checked) {
-                                                                setSelectedTransactions([...selectedTransactions, tx.id]);
-                                                            } else {
-                                                                setSelectedTransactions(selectedTransactions.filter(id => id !== tx.id));
-                                                            }
-                                                        }}
-                                                        className="w-4 h-4 text-teal-600 rounded focus:ring-teal-500"
-                                                    />
-                                                </td>
-                                                <td className="px-6 py-4 text-gray-600">{tx.bill_date?.split('T')[0] || tx.bill_date}</td>
-                                                <td className="px-6 py-4 font-mono text-gray-500">{tx.bill_number}</td>
-                                                <td className="px-6 py-4">
-                                                    {tx.items.map((i, idx) => (
-                                                        <div key={idx} className="text-sm">
-                                                            {i.mirchi_name}
-                                                            {i.lot_number && (
-                                                                <span className="ml-2 text-xs font-mono text-gray-500">({i.lot_number})</span>
-                                                            )}
-                                                        </div>
-                                                    ))}
-                                                </td>
-                                                <td className="px-6 py-4">
-                                                    {tx.is_return ? (
-                                                        <span className="px-2 py-1 bg-orange-100 text-orange-700 rounded text-xs font-semibold">Returned</span>
-                                                    ) : (
-                                                        <span className="text-gray-400">-</span>
-                                                    )}
-                                                </td>
-                                                <td className="px-6 py-4 text-right font-medium">₹{tx.total_amount.toLocaleString()}</td>
-                                                <td className="px-6 py-4 text-right text-green-600">₹{tx.paid_amount.toLocaleString()}</td>
-                                                <td className="px-6 py-4 text-right font-bold text-red-500">₹{tx.balance_amount.toLocaleString()}</td>
-                                                <td className="px-6 py-4 text-center">
-                                                    {tx.balance_amount > 0 ? (
-                                                        editingTxId === tx.id ? (
-                                                            <div className="flex items-center gap-2 justify-end">
-                                                                <input
-                                                                    type="number"
-                                                                    className="w-24 border border-teal-300 rounded px-2 py-1 text-xs outline-none focus:ring-1 focus:ring-teal-500"
-                                                                    placeholder="Amount"
-                                                                    value={paymentAmount}
-                                                                    onChange={e => setPaymentAmount(e.target.value)}
-                                                                    autoFocus
-                                                                />
-                                                                <button
-                                                                    onClick={() => handleUpdatePayment(tx)}
-                                                                    className="p-2 bg-teal-600 text-white rounded hover:bg-teal-700 disabled:opacity-50"
-                                                                    title="Save"
-                                                                    disabled={Number(paymentAmount) > tx.balance_amount || Number(paymentAmount) <= 0}
-                                                                >
-                                                                    <Save size={16} />
-                                                                </button>
-                                                                <button
-                                                                    onClick={() => { setEditingTxId(null); setPaymentAmount(''); }}
-                                                                    className="p-1 bg-gray-200 text-gray-600 rounded hover:bg-gray-300"
-                                                                    title="Cancel"
-                                                                >
-                                                                    <X size={14} />
-                                                                </button>
-                                                            </div>
-                                                        ) : (
-                                                            <button
-                                                                onClick={() => { setEditingTxId(tx.id); setPaymentAmount(''); }}
-                                                                className="px-3 py-1 border border-teal-600 text-teal-600 rounded-md text-xs font-medium hover:bg-teal-50 transition-colors"
-                                                            >
-                                                                Update Due
-                                                            </button>
-                                                        )
-                                                    ) : (
-                                                        <span className="text-green-600 text-xs font-bold flex items-center justify-center gap-1">
-                                                            Paid
-                                                        </span>
-                                                    )}
-                                                </td>
-                                                <td className="px-6 py-4 text-center">
-                                                    <div className="flex gap-2 justify-center items-center">
-                                                        <PrintInvoice
-                                                            transaction={tx}
-                                                            className="p-2 bg-white text-teal-600 border border-teal-600 rounded-md hover:bg-teal-50 transition-colors flex items-center justify-center shadow-sm"
-                                                        />
-                                                        <PdfInvoice
-                                                            transaction={tx}
-                                                            className="p-2 bg-white text-red-600 border border-red-600 rounded-md hover:bg-red-50 transition-colors flex items-center justify-center shadow-sm"
-                                                        >
-                                                            <Download size={16} />
-                                                        </PdfInvoice>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                        ))
-                                    ) : (
-                                        <tr>
-                                            <td colSpan={8} className="px-6 py-8 text-center text-gray-500">
-                                                No transactions found for this party.
-                                            </td>
-                                        </tr>
-                                    )}
-                                </tbody>
-                            </table>
-                        </div>
-
-                        {/* Mobile Card View for Detail */}
-                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
-                            {partyTransactions.length > 0 ? (
-                                partyTransactions.map(tx => (
-                                    <div key={tx.id} className="p-4 space-y-3">
-                                        <div className="flex justify-between items-start">
-                                            <div className="flex items-start gap-3">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={selectedTransactions.includes(tx.id)}
-                                                    onChange={(e) => {
-                                                        if (e.target.checked) {
-                                                            setSelectedTransactions([...selectedTransactions, tx.id]);
-                                                        } else {
-                                                            setSelectedTransactions(selectedTransactions.filter(id => id !== tx.id));
-                                                        }
-                                                    }}
-                                                    className="w-4 h-4 text-teal-600 rounded focus:ring-teal-500 mt-1"
-                                                />
-                                                <div>
-                                                    <div className="text-xs text-gray-500">{tx.bill_date?.split('T')[0] || tx.bill_date}</div>
-                                                    <div className="font-mono text-sm font-medium text-gray-800">{tx.bill_number}</div>
-                                                </div>
-                                            </div>
-                                            {tx.is_return && (
-                                                <span className="px-2 py-1 bg-orange-100 text-orange-700 rounded text-xs font-semibold">Returned</span>
-                                            )}
-                                        </div>
-
-                                        <div className="text-sm text-gray-600">
-                                            <span className="font-medium text-gray-500 text-xs block mb-1">Items:</span>
-                                            {tx.items.map((i, idx) => (
-                                                <div key={idx}>
-                                                    {i.mirchi_name}
-                                                    {i.lot_number && (
-                                                        <span className="ml-2 text-xs font-mono text-gray-500">({i.lot_number})</span>
-                                                    )}
-                                                </div>
-                                            ))}
-                                        </div>
-
-                                        <div className="grid grid-cols-3 gap-2 text-xs pt-2 border-t border-gray-50">
-                                            <div>
-                                                <div className="text-gray-500">Bill Amount</div>
-                                                <div className="font-medium">₹{tx.total_amount.toLocaleString()}</div>
-                                            </div>
-                                            <div>
-                                                <div className="text-gray-500">Paid</div>
-                                                <div className="font-medium text-green-600">₹{tx.paid_amount.toLocaleString()}</div>
-                                            </div>
-                                            <div>
-                                                <div className="text-gray-500">Due</div>
-                                                <div className="font-bold text-red-500">₹{tx.balance_amount.toLocaleString()}</div>
-                                            </div>
-                                        </div>
-
-                                        {tx.balance_amount > 0 && (
-                                            <div className="pt-2">
-                                                {editingTxId === tx.id ? (
-                                                    <div className="flex items-center gap-2">
-                                                        <input
-                                                            type="number"
-                                                            className="flex-1 border border-teal-300 rounded px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-teal-500"
-                                                            placeholder="Enter Amount"
-                                                            value={paymentAmount}
-                                                            onChange={e => setPaymentAmount(e.target.value)}
-                                                            autoFocus
-                                                        />
-                                                        <button
-                                                            onClick={() => handleUpdatePayment(tx)}
-                                                            className="p-2 bg-teal-600 text-white rounded hover:bg-teal-700"
-                                                        >
-                                                            <Save size={16} />
-                                                        </button>
-                                                        <button
-                                                            onClick={() => { setEditingTxId(null); setPaymentAmount(''); }}
-                                                            className="p-2 bg-gray-200 text-gray-600 rounded hover:bg-gray-300"
-                                                        >
-                                                            <X size={16} />
-                                                        </button>
-                                                    </div>
-                                                ) : (
-                                                    <button
-                                                        onClick={() => { setEditingTxId(tx.id); setPaymentAmount(''); }}
-                                                        className="w-full py-2 border border-teal-600 text-teal-600 rounded-lg text-sm font-medium hover:bg-teal-50 transition-colors"
-                                                    >
-                                                        Update Due
-                                                    </button>
-                                                )}
-                                            </div>
-                                        )}
-
-                                        {/* Print Button for Mobile */}
-                                        <div className="pt-2 border-t border-gray-100 mt-2 flex gap-3 items-center">
-                                            <PrintInvoice
-                                                transaction={tx}
-                                                className="p-2 bg-white text-teal-600 border border-teal-600 rounded-md hover:bg-teal-50 transition-colors flex items-center justify-center shadow-sm"
-                                            />
-                                            <PdfInvoice
-                                                transaction={tx}
-                                                className="p-2 bg-white text-red-600 border border-red-600 rounded-md hover:bg-red-50 transition-colors flex items-center justify-center shadow-sm"
-                                            >
-                                                <Download size={16} />
-                                            </PdfInvoice>
-                                        </div>
-                                    </div>
-                                ))
-                            ) : (
-                                <div className="p-8 text-center text-gray-500">
-                                    No transactions found.
-                                </div>
-                            )}
-                        </div>
-                    </>
-                )}
-            </div>
-        </div >
-    );
-};
-
+import React, { useEffect, useState, useMemo } from 'react';
+import { getParties, getTransactions, updateTransactionPayment } from '../services/db';
+import { Party, Transaction, PartyType, BillType } from '../types';
+import { Users, Filter, Search, ArrowLeft, Eye, Edit, Save, X, Printer, Download } from 'lucide-react';
+import PrintInvoice from '../components/PrintInvoice.tsx';
+import PdfInvoice from '../components/PdfInvoice.tsx';
+import { exportPartyLedger } from '../utils/exportToExcel';
+
+const PartyLedger = () => {
+    const [parties, setParties] = useState<Party[]>([]);
+    const [transactions, setTransactions] = useState<Transaction[]>([]);
+    const [activeTab, setActiveTab] = useState<'awaak' | 'jawaak'>('awaak');
+    const [viewMode, setViewMode] = useState<'list' | 'detail'>('list');
+    const [selectedParty, setSelectedParty] = useState<Party | null>(null);
+    const [searchQuery, setSearchQuery] = useState('');
+
+    // Update Payment State
+    const [editingTxId, setEditingTxId] = useState<string | null>(null);
+    const [paymentAmount, setPaymentAmount] = useState<string>('');
+
+    // Multi-select for combined invoice
+    const [selectedTransactions, setSelectedTransactions] = useState<string[]>([]);
+
+    const loadData = async () => {
+        setParties(await getParties());
+        setTransactions(await getTransactions());
+    };
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    // Filter Parties based on Tab and Search
+    const filteredParties = parties.filter(p => {
+        const matchesTab = activeTab === 'awaak'
+            ? (p.party_type === PartyType.AWAAK || p.party_type === PartyType.BOTH)
+            : (p.party_type === PartyType.JAWAAK || p.party_type === PartyType.BOTH);
+
+        const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            p.phone.includes(searchQuery) ||
+            p.city.toLowerCase().includes(searchQuery.toLowerCase());
+
+        return matchesTab && matchesSearch;
+    });
+
+    // Get Transactions for Selected Party
+    const partyTransactions = selectedParty
+        ? transactions.filter(t => t.party_id === selectedParty.id).sort((a, b) => new Date(b.bill_date).getTime() - new Date(a.bill_date).getTime())
+        : [];
+
+    // Memoize combined transaction for PDF generation
+    const combinedTransaction = useMemo(() => {
+        if (!selectedParty || selectedTransactions.length === 0) return null;
+
+        const selected = partyTransactions.filter(t => selectedTransactions.includes(t.id));
+        if (selected.length === 0) return null;
+
+        return {
+            ...selected[0], // Use first transaction as base
+            id: `combined-${selectedParty.id}-${Date.now()}`, // Unique ID for combined
+            bill_number: `COMBINED-${selected.length}-BILLS`,
+            items: selected.flatMap(t => t.items),
+            subtotal: selected.reduce((sum, t) => sum + (t.subtotal || 0), 0),
+            total_expenses: selected.reduce((sum, t) => sum + (t.total_expenses || 0), 0),
+            total_amount: selected.reduce((sum, t) => sum + t.total_amount, 0),
+            paid_amount: selected.reduce((sum, t) => sum + t.paid_amount, 0),
+            balance_amount: selected.reduce((sum, t) => sum + t.balance_amount, 0),
+            gross_weight_total: selected.reduce((sum, t) => sum + (t.gross_weight_total || 0), 0),
+            net_weight_total: selected.reduce((sum, t) => sum + (t.net_weight_total || 0), 0),
+        };
+    }, [selectedTransactions, partyTransactions, selectedParty]);
+
+    // Calculate Totals for List View
+    const getPartyStats = (partyId: string) => {
+        const txs = transactions.filter(t => t.party_id === partyId);
+
+        // Calculate totals - returns should subtract from totals
+        const totalBill = txs.reduce((sum, t) => {
+            if (t.is_return) {
+                return sum - t.total_amount; // Subtract returns
+            }
+            return sum + t.total_amount; // Add normal transactions
+        }, 0);
+
+        const totalPaid = txs.reduce((sum, t) => {
+            if (t.is_return) {
+                return sum - t.paid_amount; // Subtract returns
+            }
+            return sum + t.paid_amount; // Add normal transactions
+        }, 0);
+
+        // Balance is directly from party object for accuracy
+        const party = parties.find(p => p.id === partyId);
+        return {
+            totalBill,
+            totalPaid,
+            balance: party?.current_balance || 0
+        };
+    };
+
+    const handleUpdatePayment = async (tx: Transaction) => {
+        const amount = parseFloat(paymentAmount);
+        if (isNaN(amount) || amount <= 0) {
+            alert('Please enter a valid amount');
+            return;
+        }
+        if (amount > tx.balance_amount) {
+            alert('Amount cannot exceed due balance');
+            return;
+        }
+
+        const res = await updateTransactionPayment(tx.id, amount);
+        if (res.success) {
+            // Update local state for demo/sample data
+            setTransactions((prev) =>
+                prev.map((t) =>
+                    t.id === tx.id
+                        ? {
+                            ...t,
+                            paid_amount: t.paid_amount + amount,
+                            balance_amount: t.balance_amount - amount,
+                        }
+                        : t,
+                ),
+            );
+            setEditingTxId(null);
+            setPaymentAmount('');
+            // Reload data to refresh party balances
+            loadData();
+        } else {
+            alert(res.message);
+        }
+    };
+
+
+    return (
+        <div className="space-y-6">
+            {/* Header & Controls */}
+            <div className="flex flex-col md:flex-row justify-between items-center bg-white p-4 rounded-xl border border-gray-100 shadow-sm gap-4">
+                {viewMode === 'detail' && selectedParty ? (
+                    <>
+                        {/* Header with Party Info */}
+                        <div className="flex items-center justify-between w-full">
+                            <div className="flex items-center gap-4">
+                                <button
+                                    onClick={() => { setViewMode('list'); setSelectedParty(null); setSelectedTransactions([]); }}
+                                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                                >
+                                    <ArrowLeft size={20} className="text-gray-600" />
+                                </button>
+                                <div>
+                                    <h2 className="text-2xl font-bold text-gray-800">{selectedParty.name}</h2>
+                                    <p className="text-sm text-gray-500">{selectedParty.city} • {selectedParty.phone}</p>
+                                </div>
+                            </div>
+                            {selectedTransactions.length > 0 && combinedTransaction && (
+                                <PrintInvoice
+                                    transaction={combinedTransaction}
+                                    className="px-2 sm:px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors flex items-center gap-1 sm:gap-2"
+                                >
+                                    <Printer size={18} className="shrink-0" />
+                                    <span className="hidden sm:inline">Print {selectedTransactions.length} Selected</span>
+                                </PrintInvoice>
+                            )}
+                            {combinedTransaction && (
+                                <PdfInvoice
+                                    transaction={combinedTransaction}
+                                    className="px-2 sm:px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-1 sm:gap-2"
+                                >
+                                    <Download size={18} className="shrink-0" />
+                                    <span className="hidden sm:inline">PDF {selectedTransactions.length} Selected</span>
+                                </PdfInvoice>
+                            )}
+                            <button
+                                onClick={() => exportPartyLedger(selectedParty, partyTransactions)}
+                                className="px-2 sm:px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center gap-1 sm:gap-2"
+                                title="Export to Excel"
+                            >
+                                <Download size={18} className="shrink-0" />
+                                <span className="hidden sm:inline">Export to Excel</span>
+                            </button>
+                        </div>
+                    </>
+                ) : (
+                    <div className="flex items-center gap-2">
+                        <Users className="text-teal-600" />
+                        <h2 className="text-lg font-bold">
+                            पार्टी लेजर (Party Ledger)
+                        </h2>
+                    </div>
+                )}
+
+                {viewMode === 'list' && (
+                    <div className="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto">
+                        {/* Tabs */}
+                        <div className="flex bg-gray-100 p-1 rounded-lg">
+                            <button
+                                onClick={() => setActiveTab('awaak')}
+                                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${activeTab === 'awaak' ? 'bg-white text-teal-700 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
+                            >
+                                Awaak (Purchase)
+                            </button>
+                            <button
+                                onClick={() => setActiveTab('jawaak')}
+                                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${activeTab === 'jawaak' ? 'bg-white text-blue-700 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
+                            >
+                                Jawaak (Sales)
+                            </button>
+                        </div>
+
+                        {/* Search */}
+                        <div className="relative w-full md:w-auto mt-2 md:mt-0">
+                            <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                            <input
+                                type="text"
+                                placeholder="Search Party..."
+                                className="pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 outline-none w-full md:w-64"
+                                value={searchQuery}
+                                onChange={e => setSearchQuery(e.target.value)}
+                            />
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* Content Area */}
+            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+                {viewMode === 'list' ? (
+                    <>
+                        {/* Desktop Table View */}
+                        <div className="hidden md:block overflow-x-auto">
+                            <table className="w-full text-sm text-left">
+                                <thead className="bg-gray-50 text-gray-500 border-b border-gray-100">
+                                    <tr>
+                                        <th className="px-6 py-4 font-medium">Party Name</th>
+                                        <th className="px-6 py-4 font-medium text-right">Total Bill Amount</th>
+                                        <th className="px-6 py-4 font-medium text-right">Jama (Paid)</th>
+                                        <th className="px-6 py-4 font-medium text-right">Baki (Balance)</th>
+                                        <th className="px-6 py-4 font-medium text-center">Action</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {filteredParties.length > 0 ? (
+                                        filteredParties.map(party => {
+                                            const stats = getPartyStats(party.id);
+                                            return (
+                                                <tr key={party.id} className="hover:bg-gray-50 transition-colors">
+                                                    <td className="px-6 py-4 font-medium text-gray-900">{party.name}</td>
+                                                    <td className="px-6 py-4 text-right font-medium">₹{stats.totalBill.toLocaleString()}</td>
+                                                    <td className="px-6 py-4 text-right text-green-600 font-medium">₹{stats.totalPaid.toLocaleString()}</td>
+                                                    <td className={`px-6 py-4 text-right font-bold ${stats.balance !== 0 ? 'text-red-500' : 'text-gray-400'}`}>
+                                                        ₹{Math.abs(stats.balance).toLocaleString()} {stats.balance > 0 ? '(Dr)' : stats.balance < 0 ? '(Cr)' : ''}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <button
+                                                            onClick={() => {
+                                                                setSelectedParty(party);
+                                                                setViewMode('detail');
+                                                                // If this party has no transactions, add some sample data for demo
+                                                                const hasTx = transactions.some(t => t.party_id === party.id);
+                                                                if (!hasTx) {
+                                                                    const sampleTxs = [
+                                                                        {
+                                                                            id: `${party.id}-tx1`,
+                                                                            party_id: party.id,
+                                                                            bill_date: new Date().toISOString().split('T')[0],
+                                                                            bill_number: 'SAMPLE001',
+                                                                            items: [{ mirchi_name: 'Red Chili' }],
+                                                                            is_return: false,
+                                                                            total_amount: 5000,
+                                                                            paid_amount: 2000,
+                                                                            balance_amount: 3000,
+                                                                            bill_type: PartyType.AWAAK,
+                                                                        },
+                                                                        {
+                                                                            id: `${party.id}-tx2`,
+                                                                            party_id: party.id,
+                                                                            bill_date: new Date().toISOString().split('T')[0],
+                                                                            bill_number: 'SAMPLE002',
+                                                                            items: [{ mirchi_name: 'Green Chili' }],
+                                                                            is_return: false,
+                                                                            total_amount: 3000,
+                                                                            paid_amount: 3000,
+                                                                            balance_amount: 0,
+                                                                            bill_type: PartyType.AWAAK,
+                                                                        },
+                                                                    ];
+                                                                    setTransactions(prev => [...prev, ...sampleTxs]);
+                                                                }
+                                                            }}
+                                                            className="p-2 hover:bg-teal-50 text-teal-600 rounded-full transition-colors"
+                                                            title="View Ledger"
+                                                        >
+                                                            <Eye size={18} />
+                                                        </button>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })
+                                    ) : (
+                                        <tr>
+                                            <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
+                                                No parties found.
+                                            </td>
+                                        </tr>
+                                    )}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        {/* Mobile Card View */}
+                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
+                            {filteredParties.length > 0 ? (
+                                filteredParties.map(party => {
+                                    const stats = getPartyStats(party.id);
+                                    return (
+                                        <div key={party.id} className="p-4 space-y-3">
+                                            <div className="flex justify-between items-start">
+                                                <div>
+                                                    <h3 className="font-bold text-gray-900">{party.name}</h3>
+                                                </div>
+                                                <button
+                                                    onClick={() => {
+                                                        setSelectedParty(party);
+                                                        setViewMode('detail');
+                                                        // If this party has no transactions, add sample data for demo
+                                                        const hasTx = transactions.some(t => t.party_id === party.id);
+                                                        if (!hasTx) {
+                                                            const sampleTxs = [
+                                                                {
+                                                                    id: `${party.id}-tx1`,
+                                                                    party_id: party.id,
+                                                                    bill_date: new Date().toISOString().split('T')[0],
+                                                                    bill_number: 'SAMPLE001',
+                                                                    items: [{ mirchi_name: 'Red Chili' }],
+                                                                    is_return: false,
+                                                                    total_amount: 5000,
+                                                                    paid_amount: 2000,
+                                                                    balance_amount: 3000,
+                                                                    bill_type: PartyType.AWAAK,
+                                                                },
+                                                                {
+                                                                    id: `${party.id}-tx2`,
+                                                                    party_id: party.id,
+                                                                    bill_date: new Date().toISOString().split('T')[0],
+                                                                    bill_number: 'SAMPLE002',
+                                                                    items: [{ mirchi_name: 'Green Chili' }],
+                                                                    is_return: false,
+                                                                    total_amount: 3000,
+                                                                    paid_amount: 3000,
+                                                                    balance_amount: 0,
+                                                                    bill_type: PartyType.AWAAK,
+                                                                },
+                                                            ];
+                                                            setTransactions(prev => [...prev, ...sampleTxs]);
+                                                        }
+                                                    }}
+                                                    className="p-2 bg-teal-50 text-teal-600 rounded-lg"
+                                                >
+                                                    <Eye size={18} />
+                                                </button>
+                                            </div>
+                                            <div className="grid grid-cols-3 gap-2 text-xs">
+                                                <div className="bg-gray-50 p-2 rounded">
+                                                    <div className="text-gray-500 mb-1">Total Bill</div>
+                                                    <div className="font-medium">₹{stats.totalBill.toLocaleString()}</div>
+                                                </div>
+                                                <div className="bg-green-50 p-2 rounded">
+                                                    <div className="text-green-600 mb-1">Paid</div>
+                                                    <div className="font-medium text-green-700">₹{stats.totalPaid.toLocaleString()}</div>
+                                                </div>
+                                                <div className="bg-red-50 p-2 rounded">
+                                                    <div className="text-red-500 mb-1">Balance</div>
+                                                    <div className="font-bold text-red-600">
+                                                        ₹{Math.abs(stats.balance).toLocaleString()} {stats.balance > 0 ? 'Dr' : stats.balance < 0 ? 'Cr' : ''}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    );
+                                })
+                            ) : (
+                                <div className="p-8 text-center text-gray-500">
+                                    No parties found.
+                                </div>
+                            )}
+                        </div>
+                    </>
+                ) : (
+                    // Detail View
+                    <>
+                        {/* Desktop Table View */}
+                        <div className="hidden md:block overflow-x-auto">
+                            <table className="w-full text-sm text-left">
+                                <thead className="bg-gray-50 text-gray-500 border-b border-gray-100">
+                                    <tr>
+                                        <th className="px-6 py-4 font-medium text-center">
+                                            <input
+                                                type="checkbox"
+                                                checked={selectedTransactions.length === partyTransactions.length && partyTransactions.length > 0}
+                                                onChange={(e) => {
+                                                    if (e.target.checked) {
+                                                        setSelectedTransactions(partyTransactions.map(t => t.id));
+                                                    } else {
+                                                        setSelectedTransactions([]);
+                                                    }
+                                                }}
+                                                className="w-4 h-4 text-teal-600 rounded focus:ring-teal-500"
+                                            />
+                                        </th>
+                                        <th className="px-6 py-4 font-medium">Date</th>
+                                        <th className="px-6 py-4 font-medium">Bill No</th>
+                                        <th className="px-6 py-4 font-medium">Mirchi Type</th>
+                                        <th className="px-6 py-4 font-medium">Remark</th>
+                                        <th className="px-6 py-4 font-medium text-right">Bill Amount</th>
+                                        <th className="px-6 py-4 font-medium text-right">Paid</th>
+                                        <th className="px-6 py-4 font-medium text-right">Due Balance</th>
+                                        <th className="px-6 py-4 font-medium text-center">Action</th>
+                                        <th className="px-6 py-4 font-medium text-center">Print</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {partyTransactions.length > 0 ? (
+                                        partyTransactions.map(tx => (
+                                            <tr key={tx.id} className="hover:bg-gray-50">
+                                                <td className="px-6 py-4 text-center">
+                                                    <input
+                                                        type="checkbox"
+                                                        checked={selectedTransactions.includes(tx.id)}
+                                                        onChange={(e) => {
+                                                            if (e.target.checked) {
+                                                                setSelectedTransactions([...selectedTransactions, tx.id]);
+                                                            } else {
+                                                                setSelectedTransactions(selectedTransactions.filter(id => id !== tx.id));
+                                                            }
+                                                        }}
+                                                        className="w-4 h-4 text-teal-600 rounded focus:ring-teal-500"
+                                                    />
+                                                </td>
+                                                <td className="px-6 py-4 text-gray-600">{tx.bill_date?.split('T')[0] || tx.bill_date}</td>
+                                                <td className="px-6 py-4 font-mono text-gray-500">{tx.bill_number}</td>
+                                                <td className="px-6 py-4">
+                                                    {tx.items.map((i, idx) => (
+                                                        <div key={idx} className="text-sm">
+                                                            {i.mirchi_name}
+                                                            {i.lot_number && (
+                                                                <span className="ml-2 text-xs font-mono text-gray-500">({i.lot_number})</span>
+                                                            )}
+                                                        </div>
+                                                    ))}
+                                                </td>
+                                                <td className="px-6 py-4">
+                                                    {tx.is_return ? (
+                                                        <span className="px-2 py-1 bg-orange-100 text-orange-700 rounded text-xs font-semibold">Returned</span>
+                                                    ) : (
+                                                        <span className="text-gray-400">-</span>
+                                                    )}
+                                                </td>
+                                                <td className="px-6 py-4 text-right font-medium">₹{tx.total_amount.toLocaleString()}</td>
+                                                <td className="px-6 py-4 text-right text-green-600">₹{tx.paid_amount.toLocaleString()}</td>
+                                                <td className="px-6 py-4 text-right font-bold text-red-500">₹{tx.balance_amount.toLocaleString()}</td>
+                                                <td className="px-6 py-4 text-center">
+                                                    {tx.balance_amount > 0 ? (
+                                                        editingTxId === tx.id ? (
+                                                            <div className="flex items-center gap-2 justify-end">
+                                                                <input
+                                                                    type="number"
+                                                                    className="w-24 border border-teal-300 rounded px-2 py-1 text-xs outline-none focus:ring-1 focus:ring-teal-500"
+                                                                    placeholder="Amount"
+                                                                    value={paymentAmount}
+                                                                    onChange={e => setPaymentAmount(e.target.value)}
+                                                                    autoFocus
+                                                                />
+                                                                <button
+                                                                    onClick={() => handleUpdatePayment(tx)}
+                                                                    className="p-2 bg-teal-600 text-white rounded hover:bg-teal-700 disabled:opacity-50"
+                                                                    title="Save"
+                                                                    disabled={Number(paymentAmount) > tx.balance_amount || Number(paymentAmount) <= 0}
+                                                                >
+                                                                    <Save size={16} />
+                                                                </button>
+                                                                <button
+                                                                    onClick={() => { setEditingTxId(null); setPaymentAmount(''); }}
+                                                                    className="p-1 bg-gray-200 text-gray-600 rounded hover:bg-gray-300"
+                                                                    title="Cancel"
+                                                                >
+                                                                    <X size={14} />
+                                                                </button>
+                                                            </div>
+                                                        ) : (
+                                                            <button
+                                                                onClick={() => { setEditingTxId(tx.id); setPaymentAmount(''); }}
+                                                                className="px-3 py-1 border border-teal-600 text-teal-600 rounded-md text-xs font-medium hover:bg-teal-50 transition-colors"
+                                                            >
+                                                                Update Due
+                                                            </button>
+                                                        )
+                                                    ) : (
+                                                        <span className="text-green-600 text-xs font-bold flex items-center justify-center gap-1">
+                                                            Paid
+                                                        </span>
+                                                    )}
+                                                </td>
+                                                <td className="px-6 py-4 text-center">
+                                                    <div className="flex gap-2 justify-center items-center">
+                                                        <PrintInvoice
+                                                            transaction={tx}
+                                                            className="p-2 bg-white text-teal-600 border border-teal-600 rounded-md hover:bg-teal-50 transition-colors flex items-center justify-center shadow-sm"
+                                                        />
+                                                        <PdfInvoice
+                                                            transaction={tx}
+                                                            className="p-2 bg-white text-red-600 border border-red-600 rounded-md hover:bg-red-50 transition-colors flex items-center justify-center shadow-sm"
+                                                        >
+                                                            <Download size={16} />
+                                                        </PdfInvoice>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        ))
+                                    ) : (
+                                        <tr>
+                                            <td colSpan={8} className="px-6 py-8 text-center text-gray-500">
+                                                No transactions found for this party.
+                                            </td>
+                                        </tr>
+                                    )}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        {/* Mobile Card View for Detail */}
+                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
+                            {partyTransactions.length > 0 ? (
+                                partyTransactions.map(tx => (
+                                    <div key={tx.id} className="p-4 space-y-3">
+                                        <div className="flex justify-between items-start">
+                                            <div className="flex items-start gap-3">
+                                                <input
+                                                    type="checkbox"
+                                                    checked={selectedTransactions.includes(tx.id)}
+                                                    onChange={(e) => {
+                                                        if (e.target.checked) {
+                                                            setSelectedTransactions([...selectedTransactions, tx.id]);
+                                                        } else {
+                                                            setSelectedTransactions(selectedTransactions.filter(id => id !== tx.id));
+                                                        }
+                                                    }}
+                                                    className="w-4 h-4 text-teal-600 rounded focus:ring-teal-500 mt-1"
+                                                />
+                                                <div>
+                                                    <div className="text-xs text-gray-500">{tx.bill_date?.split('T')[0] || tx.bill_date}</div>
+                                                    <div className="font-mono text-sm font-medium text-gray-800">{tx.bill_number}</div>
+                                                </div>
+                                            </div>
+                                            {tx.is_return && (
+                                                <span className="px-2 py-1 bg-orange-100 text-orange-700 rounded text-xs font-semibold">Returned</span>
+                                            )}
+                                        </div>
+
+                                        <div className="text-sm text-gray-600">
+                                            <span className="font-medium text-gray-500 text-xs block mb-1">Items:</span>
+                                            {tx.items.map((i, idx) => (
+                                                <div key={idx}>
+                                                    {i.mirchi_name}
+                                                    {i.lot_number && (
+                                                        <span className="ml-2 text-xs font-mono text-gray-500">({i.lot_number})</span>
+                                                    )}
+                                                </div>
+                                            ))}
+                                        </div>
+
+                                        <div className="grid grid-cols-3 gap-2 text-xs pt-2 border-t border-gray-50">
+                                            <div>
+                                                <div className="text-gray-500">Bill Amount</div>
+                                                <div className="font-medium">₹{tx.total_amount.toLocaleString()}</div>
+                                            </div>
+                                            <div>
+                                                <div className="text-gray-500">Paid</div>
+                                                <div className="font-medium text-green-600">₹{tx.paid_amount.toLocaleString()}</div>
+                                            </div>
+                                            <div>
+                                                <div className="text-gray-500">Due</div>
+                                                <div className="font-bold text-red-500">₹{tx.balance_amount.toLocaleString()}</div>
+                                            </div>
+                                        </div>
+
+                                        {tx.balance_amount > 0 && (
+                                            <div className="pt-2">
+                                                {editingTxId === tx.id ? (
+                                                    <div className="flex items-center gap-2">
+                                                        <input
+                                                            type="number"
+                                                            className="flex-1 border border-teal-300 rounded px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-teal-500"
+                                                            placeholder="Enter Amount"
+                                                            value={paymentAmount}
+                                                            onChange={e => setPaymentAmount(e.target.value)}
+                                                            autoFocus
+                                                        />
+                                                        <button
+                                                            onClick={() => handleUpdatePayment(tx)}
+                                                            className="p-2 bg-teal-600 text-white rounded hover:bg-teal-700"
+                                                        >
+                                                            <Save size={16} />
+                                                        </button>
+                                                        <button
+                                                            onClick={() => { setEditingTxId(null); setPaymentAmount(''); }}
+                                                            className="p-2 bg-gray-200 text-gray-600 rounded hover:bg-gray-300"
+                                                        >
+                                                            <X size={16} />
+                                                        </button>
+                                                    </div>
+                                                ) : (
+                                                    <button
+                                                        onClick={() => { setEditingTxId(tx.id); setPaymentAmount(''); }}
+                                                        className="w-full py-2 border border-teal-600 text-teal-600 rounded-lg text-sm font-medium hover:bg-teal-50 transition-colors"
+                                                    >
+                                                        Update Due
+                                                    </button>
+                                                )}
+                                            </div>
+                                        )}
+
+                                        {/* Print Button for Mobile */}
+                                        <div className="pt-2 border-t border-gray-100 mt-2 flex gap-3 items-center">
+                                            <PrintInvoice
+                                                transaction={tx}
+                                                className="p-2 bg-white text-teal-600 border border-teal-600 rounded-md hover:bg-teal-50 transition-colors flex items-center justify-center shadow-sm"
+                                            />
+                                            <PdfInvoice
+                                                transaction={tx}
+                                                className="p-2 bg-white text-red-600 border border-red-600 rounded-md hover:bg-red-50 transition-colors flex items-center justify-center shadow-sm"
+                                            >
+                                                <Download size={16} />
+                                            </PdfInvoice>
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="p-8 text-center text-gray-500">
+                                    No transactions found.
+                                </div>
+                            )}
+                        </div>
+                    </>
+                )}
+            </div>
+        </div >
+    );
+};
+
 export default PartyLedger;

pages/Settings.tsx

@@ -1,317 +1,317 @@
-import React, { useState, useEffect } from 'react';
-import {
-    getParties,
-    saveParty,
-    apiGetMirchiTypes,
-    apiSaveMirchiType,
-} from '../services/db';
-import { Party, MirchiType, PartyType } from '../types';
-import { Save, Plus, Settings as SettingsIcon, Users, Sprout, Bell, Download } from 'lucide-react';
-import { usePWA } from '../context/PWAContext';
-
-const Settings = () => {
-    const [activeTab, setActiveTab] = useState<'parties' | 'mirchi' | 'general'>('parties');
-    const [parties, setParties] = useState<Party[]>([]);
-    const [mirchiTypes, setMirchiTypes] = useState<MirchiType[]>([]);
-
-    // PWA Install
-    const { isInstallable, installApp } = usePWA();
-
-    // Form States
-    const [newParty, setNewParty] = useState<Partial<Party>>({
-        name: '', city: '', phone: '', party_type: PartyType.BOTH, current_balance: 0
-    });
-    const [newMirchi, setNewMirchi] = useState<Partial<MirchiType>>({
-        name: ''
-    });
-
-    // Inline feedback
-    const [partyMessage, setPartyMessage] = useState<{ type: 'error' | 'success'; text: string } | null>(null);
-    const [mirchiMessage, setMirchiMessage] = useState<{ type: 'error' | 'success'; text: string } | null>(null);
-
-    // Alert Config (Mock)
-    const [config, setConfig] = useState({
-        lowStockThreshold: 50,
-        enableNotifications: true
-    });
-
-    useEffect(() => {
-        const loadData = async () => {
-            setParties(await getParties());
-            setMirchiTypes(await apiGetMirchiTypes());
-        };
-        loadData();
-    }, []);
-
-    const handleSaveParty = async () => {
-        if (!newParty.name) {
-            setPartyMessage({ type: 'error', text: 'Party Name is required.' });
-            return;
-        }
-
-        const party: Party = {
-            id: newParty.id || `p-${Date.now()}`,
-            name: newParty.name,
-            city: newParty.city || '',
-            phone: newParty.phone || '',
-            party_type: newParty.party_type as PartyType,
-            current_balance: parseFloat(String(newParty.current_balance || 0))
-        };
-
-        await saveParty(party);
-        setNewParty({ name: '', city: '', phone: '', party_type: PartyType.BOTH, current_balance: 0 });
-        loadData();
-        setPartyMessage({ type: 'success', text: 'Party saved successfully.' });
-    };
-
-    const handleSaveMirchi = async () => {
-        if (!newMirchi.name) {
-            setMirchiMessage({ type: 'error', text: 'Mirchi type name is required.' });
-            return;
-        }
-
-        const type: MirchiType = {
-            id: newMirchi.id || `m-${Date.now()}`,
-            name: newMirchi.name,
-            current_rate: 0
-        };
-
-        const result = await apiSaveMirchiType(type);
-        if (!result.success) {
-            setMirchiMessage({ type: 'error', text: result.message || 'Error saving mirchi type.' });
-            return;
-        }
-        setNewMirchi({ name: '' });
-        loadData();
-        setMirchiMessage({ type: 'success', text: 'Mirchi type saved successfully.' });
-    };
-
-    const loadData = async () => {
-        setParties(await getParties());
-        setMirchiTypes(await apiGetMirchiTypes());
-    };
-
-    const handleInstallClick = async () => {
-        await installApp();
-    };
-
-    return (
-        <div className="flex flex-col md:flex-row h-full gap-6">
-            {/* Sidebar / Tabs */}
-            <div className="w-full md:w-64 bg-white rounded-xl shadow-sm border border-gray-100 p-4 h-fit">
-                <h2 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
-                    <SettingsIcon className="text-teal-600" size={20} /> सेटिंग्स
-                </h2>
-                <div className="space-y-2">
-                    <button
-                        onClick={() => setActiveTab('parties')}
-                        className={`w-full text-left px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-3 transition ${activeTab === 'parties' ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50'}`}
-                    >
-                        <Users size={18} /> पार्टी व्यवस्थापन
-                    </button>
-                    <button
-                        onClick={() => setActiveTab('mirchi')}
-                        className={`w-full text-left px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-3 transition ${activeTab === 'mirchi' ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50'}`}
-                    >
-                        <Sprout size={18} /> मिरची दर & प्रकार
-                    </button>
-                    <button
-                        onClick={() => setActiveTab('general')}
-                        className={`w-full text-left px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-3 transition ${activeTab === 'general' ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50'}`}
-                    >
-                        <Bell size={18} /> Alerts & Rules
-                    </button>
-                </div>
-            </div>
-
-            {/* Content Area */}
-            <div className="flex-1 bg-white rounded-xl shadow-sm border border-gray-100 p-6 overflow-y-auto no-scrollbar">
-
-                {/* PARTIES TAB */}
-                {activeTab === 'parties' && (
-                    <div className="space-y-6">
-                        <div className="border-b pb-4">
-                            <h3 className="text-lg font-bold text-gray-800">Party व्यवस्थापन (Party Management)</h3>
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-                                <input
-                                    placeholder="Party Name"
-                                    className="border rounded p-2"
-                                    value={newParty.name}
-                                    onChange={e => setNewParty({ ...newParty, name: e.target.value })}
-                                />
-                                <input
-                                    placeholder="Phone"
-                                    className="border rounded p-2"
-                                    value={newParty.phone}
-                                    onChange={e => setNewParty({ ...newParty, phone: e.target.value })}
-                                />
-                                <select
-                                    className="border rounded p-2"
-                                    value={newParty.party_type}
-                                    onChange={e => setNewParty({ ...newParty, party_type: e.target.value as PartyType })}
-                                >
-                                    <option value={PartyType.BOTH}>Both (Purchase & Sales)</option>
-                                    <option value={PartyType.AWAAK}>Only Awaak (Purchase)</option>
-                                    <option value={PartyType.JAWAAK}>Only Jawaak (Sales)</option>
-                                </select>
-                                <button
-                                    onClick={handleSaveParty}
-                                    className="bg-teal-600 text-white rounded p-2 flex items-center justify-center gap-2 font-medium hover:bg-teal-700"
-                                >
-                                    <Plus size={18} /> Save Party
-                                </button>
-                            </div>
-                            {partyMessage && (
-                                <div
-                                    className={`mt-3 text-sm rounded px-3 py-2 ${partyMessage.type === 'error'
-                                        ? 'bg-red-50 text-red-700 border border-red-100'
-                                        : 'bg-green-50 text-green-700 border border-green-100'
-                                        }`}
-                                >
-                                    {partyMessage.text}
-                                </div>
-                            )}
-                        </div>
-
-                        <div>
-                            <h3 className="font-semibold text-gray-700 mb-3">All Parties</h3>
-                            <div className="overflow-x-auto">
-                                <table className="w-full text-sm text-left">
-                                    <thead className="bg-gray-50 text-gray-500">
-                                        <tr>
-                                            <th className="p-2">Name</th>
-                                            <th className="p-2">Phone</th>
-                                            <th className="p-2">Type</th>
-                                            <th className="p-2 text-center">Action</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody className="divide-y">
-                                        {parties.map(p => (
-                                            <tr key={p.id}>
-                                                <td className="p-2">{p.name}</td>
-                                                <td className="p-2">{p.phone}</td>
-                                                <td className="p-2">{p.party_type}</td>
-                                                <td className="p-2 text-center">
-                                                    <button
-                                                        onClick={() => setNewParty(p)}
-                                                        className="text-blue-600 hover:underline text-xs"
-                                                    >
-                                                        Edit
-                                                    </button>
-                                                </td>
-                                            </tr>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                    </div>
-                )}
-
-                {/* MIRCHI TAB */}
-                {activeTab === 'mirchi' && (
-                    <div className="space-y-6">
-                        <div className="border-b pb-4">
-                            <h3 className="text-lg font-bold text-gray-800">मिरची प्रकार (Mirchi Types)</h3>
-                            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
-                                <input
-                                    placeholder="Variety Name (e.g. Teja)"
-                                    className="border rounded p-2"
-                                    value={newMirchi.name}
-                                    onChange={e => setNewMirchi({ ...newMirchi, name: e.target.value })}
-                                />
-                                <button
-                                    onClick={handleSaveMirchi}
-                                    className="bg-teal-600 text-white rounded p-2 flex items-center justify-center gap-2 font-medium hover:bg-teal-700"
-                                >
-                                    <Plus size={18} /> Save Type
-                                </button>
-                            </div>
-                            {mirchiMessage && (
-                                <div
-                                    className={`mt-3 text-sm rounded px-3 py-2 ${mirchiMessage.type === 'error'
-                                        ? 'bg-red-50 text-red-700 border border-red-100'
-                                        : 'bg-green-50 text-green-700 border border-green-100'
-                                        }`}
-                                >
-                                    {mirchiMessage.text}
-                                </div>
-                            )}
-                        </div>
-
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                            {mirchiTypes.map(m => (
-                                <div key={m.id} className="p-4 border rounded-lg hover:shadow-md transition bg-gray-50">
-                                    <div className="flex justify-between items-start mb-2">
-                                        <h4 className="font-bold text-gray-800">{m.name}</h4>
-                                        <button
-                                            onClick={() => setNewMirchi(m)}
-                                            className="text-teal-600 text-xs font-medium"
-                                        >
-                                            Edit
-                                        </button>
-                                    </div>
-                                    <div className="text-xs text-gray-500 mt-1">Mirchi Type</div>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                )}
-
-                {/* General / Alerts Tab */}
-                {activeTab === 'general' && (
-                    <div className="space-y-6">
-                        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
-                            <h3 className="text-lg font-semibold text-gray-800 mb-4">Install as App</h3>
-                            <p className="text-sm text-gray-600 mb-4">
-                                Install this application on your device for quick access and offline support.
-                            </p>
-                            {isInstallable ? (
-                                <button
-                                    onClick={handleInstallClick}
-                                    className="px-6 py-3 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors flex items-center gap-2 font-medium"
-                                >
-                                    <Download size={20} />
-                                    Install App
-                                </button>
-                            ) : (
-                                <div className="text-sm text-gray-500 bg-gray-50 p-4 rounded-lg border border-gray-200">
-                                    ✅ App is already installed or not available for installation on this device.
-                                </div>
-                            )}
-                        </div>
-
-                        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
-                            <h3 className="text-lg font-semibold text-gray-800 mb-4">Alert Configuration</h3>
-                            <div className="space-y-4">
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-2">Low Stock Threshold (kg)</label>
-                                    <input
-                                        type="number"
-                                        value={config.lowStockThreshold}
-                                        onChange={(e) => setConfig({ ...config, lowStockThreshold: parseFloat(e.target.value) })}
-                                        className="w-full border border-gray-300 rounded-lg p-2"
-                                    />
-                                </div>
-                                <div className="flex items-center gap-3">
-                                    <input
-                                        type="checkbox"
-                                        checked={config.enableNotifications}
-                                        onChange={(e) => setConfig({ ...config, enableNotifications: e.target.checked })}
-                                        className="w-4 h-4 text-teal-600 rounded"
-                                    />
-                                    <label className="text-sm text-gray-700">Enable Notifications</label>
-                                </div>
-                                <button className="bg-gray-800 text-white px-4 py-2 rounded text-sm hover:bg-gray-900">
-                                    Save Config
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
-
+import React, { useState, useEffect } from 'react';
+import {
+    getParties,
+    saveParty,
+    apiGetMirchiTypes,
+    apiSaveMirchiType,
+} from '../services/db';
+import { Party, MirchiType, PartyType } from '../types';
+import { Save, Plus, Settings as SettingsIcon, Users, Sprout, Bell, Download } from 'lucide-react';
+import { usePWA } from '../context/PWAContext';
+
+const Settings = () => {
+    const [activeTab, setActiveTab] = useState<'parties' | 'mirchi' | 'general'>('parties');
+    const [parties, setParties] = useState<Party[]>([]);
+    const [mirchiTypes, setMirchiTypes] = useState<MirchiType[]>([]);
+
+    // PWA Install
+    const { isInstallable, installApp } = usePWA();
+
+    // Form States
+    const [newParty, setNewParty] = useState<Partial<Party>>({
+        name: '', city: '', phone: '', party_type: PartyType.BOTH, current_balance: 0
+    });
+    const [newMirchi, setNewMirchi] = useState<Partial<MirchiType>>({
+        name: ''
+    });
+
+    // Inline feedback
+    const [partyMessage, setPartyMessage] = useState<{ type: 'error' | 'success'; text: string } | null>(null);
+    const [mirchiMessage, setMirchiMessage] = useState<{ type: 'error' | 'success'; text: string } | null>(null);
+
+    // Alert Config (Mock)
+    const [config, setConfig] = useState({
+        lowStockThreshold: 50,
+        enableNotifications: true
+    });
+
+    useEffect(() => {
+        const loadData = async () => {
+            setParties(await getParties());
+            setMirchiTypes(await apiGetMirchiTypes());
+        };
+        loadData();
+    }, []);
+
+    const handleSaveParty = async () => {
+        if (!newParty.name) {
+            setPartyMessage({ type: 'error', text: 'Party Name is required.' });
+            return;
+        }
+
+        const party: Party = {
+            id: newParty.id || `p-${Date.now()}`,
+            name: newParty.name,
+            city: newParty.city || '',
+            phone: newParty.phone || '',
+            party_type: newParty.party_type as PartyType,
+            current_balance: parseFloat(String(newParty.current_balance || 0))
+        };
+
+        await saveParty(party);
+        setNewParty({ name: '', city: '', phone: '', party_type: PartyType.BOTH, current_balance: 0 });
+        loadData();
+        setPartyMessage({ type: 'success', text: 'Party saved successfully.' });
+    };
+
+    const handleSaveMirchi = async () => {
+        if (!newMirchi.name) {
+            setMirchiMessage({ type: 'error', text: 'Mirchi type name is required.' });
+            return;
+        }
+
+        const type: MirchiType = {
+            id: newMirchi.id || `m-${Date.now()}`,
+            name: newMirchi.name,
+            current_rate: 0
+        };
+
+        const result = await apiSaveMirchiType(type);
+        if (!result.success) {
+            setMirchiMessage({ type: 'error', text: result.message || 'Error saving mirchi type.' });
+            return;
+        }
+        setNewMirchi({ name: '' });
+        loadData();
+        setMirchiMessage({ type: 'success', text: 'Mirchi type saved successfully.' });
+    };
+
+    const loadData = async () => {
+        setParties(await getParties());
+        setMirchiTypes(await apiGetMirchiTypes());
+    };
+
+    const handleInstallClick = async () => {
+        await installApp();
+    };
+
+    return (
+        <div className="flex flex-col md:flex-row h-full gap-6">
+            {/* Sidebar / Tabs */}
+            <div className="w-full md:w-64 bg-white rounded-xl shadow-sm border border-gray-100 p-4 h-fit">
+                <h2 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
+                    <SettingsIcon className="text-teal-600" size={20} /> सेटिंग्स
+                </h2>
+                <div className="space-y-2">
+                    <button
+                        onClick={() => setActiveTab('parties')}
+                        className={`w-full text-left px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-3 transition ${activeTab === 'parties' ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50'}`}
+                    >
+                        <Users size={18} /> पार्टी व्यवस्थापन
+                    </button>
+                    <button
+                        onClick={() => setActiveTab('mirchi')}
+                        className={`w-full text-left px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-3 transition ${activeTab === 'mirchi' ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50'}`}
+                    >
+                        <Sprout size={18} /> मिरची दर & प्रकार
+                    </button>
+                    <button
+                        onClick={() => setActiveTab('general')}
+                        className={`w-full text-left px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-3 transition ${activeTab === 'general' ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50'}`}
+                    >
+                        <Bell size={18} /> Alerts & Rules
+                    </button>
+                </div>
+            </div>
+
+            {/* Content Area */}
+            <div className="flex-1 bg-white rounded-xl shadow-sm border border-gray-100 p-6 overflow-y-auto no-scrollbar">
+
+                {/* PARTIES TAB */}
+                {activeTab === 'parties' && (
+                    <div className="space-y-6">
+                        <div className="border-b pb-4">
+                            <h3 className="text-lg font-bold text-gray-800">Party व्यवस्थापन (Party Management)</h3>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                                <input
+                                    placeholder="Party Name"
+                                    className="border rounded p-2"
+                                    value={newParty.name}
+                                    onChange={e => setNewParty({ ...newParty, name: e.target.value })}
+                                />
+                                <input
+                                    placeholder="Phone"
+                                    className="border rounded p-2"
+                                    value={newParty.phone}
+                                    onChange={e => setNewParty({ ...newParty, phone: e.target.value })}
+                                />
+                                <select
+                                    className="border rounded p-2"
+                                    value={newParty.party_type}
+                                    onChange={e => setNewParty({ ...newParty, party_type: e.target.value as PartyType })}
+                                >
+                                    <option value={PartyType.BOTH}>Both (Purchase & Sales)</option>
+                                    <option value={PartyType.AWAAK}>Only Awaak (Purchase)</option>
+                                    <option value={PartyType.JAWAAK}>Only Jawaak (Sales)</option>
+                                </select>
+                                <button
+                                    onClick={handleSaveParty}
+                                    className="bg-teal-600 text-white rounded p-2 flex items-center justify-center gap-2 font-medium hover:bg-teal-700"
+                                >
+                                    <Plus size={18} /> Save Party
+                                </button>
+                            </div>
+                            {partyMessage && (
+                                <div
+                                    className={`mt-3 text-sm rounded px-3 py-2 ${partyMessage.type === 'error'
+                                        ? 'bg-red-50 text-red-700 border border-red-100'
+                                        : 'bg-green-50 text-green-700 border border-green-100'
+                                        }`}
+                                >
+                                    {partyMessage.text}
+                                </div>
+                            )}
+                        </div>
+
+                        <div>
+                            <h3 className="font-semibold text-gray-700 mb-3">All Parties</h3>
+                            <div className="overflow-x-auto">
+                                <table className="w-full text-sm text-left">
+                                    <thead className="bg-gray-50 text-gray-500">
+                                        <tr>
+                                            <th className="p-2">Name</th>
+                                            <th className="p-2">Phone</th>
+                                            <th className="p-2">Type</th>
+                                            <th className="p-2 text-center">Action</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody className="divide-y">
+                                        {parties.map(p => (
+                                            <tr key={p.id}>
+                                                <td className="p-2">{p.name}</td>
+                                                <td className="p-2">{p.phone}</td>
+                                                <td className="p-2">{p.party_type}</td>
+                                                <td className="p-2 text-center">
+                                                    <button
+                                                        onClick={() => setNewParty(p)}
+                                                        className="text-blue-600 hover:underline text-xs"
+                                                    >
+                                                        Edit
+                                                    </button>
+                                                </td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* MIRCHI TAB */}
+                {activeTab === 'mirchi' && (
+                    <div className="space-y-6">
+                        <div className="border-b pb-4">
+                            <h3 className="text-lg font-bold text-gray-800">मिरची प्रकार (Mirchi Types)</h3>
+                            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+                                <input
+                                    placeholder="Variety Name (e.g. Teja)"
+                                    className="border rounded p-2"
+                                    value={newMirchi.name}
+                                    onChange={e => setNewMirchi({ ...newMirchi, name: e.target.value })}
+                                />
+                                <button
+                                    onClick={handleSaveMirchi}
+                                    className="bg-teal-600 text-white rounded p-2 flex items-center justify-center gap-2 font-medium hover:bg-teal-700"
+                                >
+                                    <Plus size={18} /> Save Type
+                                </button>
+                            </div>
+                            {mirchiMessage && (
+                                <div
+                                    className={`mt-3 text-sm rounded px-3 py-2 ${mirchiMessage.type === 'error'
+                                        ? 'bg-red-50 text-red-700 border border-red-100'
+                                        : 'bg-green-50 text-green-700 border border-green-100'
+                                        }`}
+                                >
+                                    {mirchiMessage.text}
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            {mirchiTypes.map(m => (
+                                <div key={m.id} className="p-4 border rounded-lg hover:shadow-md transition bg-gray-50">
+                                    <div className="flex justify-between items-start mb-2">
+                                        <h4 className="font-bold text-gray-800">{m.name}</h4>
+                                        <button
+                                            onClick={() => setNewMirchi(m)}
+                                            className="text-teal-600 text-xs font-medium"
+                                        >
+                                            Edit
+                                        </button>
+                                    </div>
+                                    <div className="text-xs text-gray-500 mt-1">Mirchi Type</div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {/* General / Alerts Tab */}
+                {activeTab === 'general' && (
+                    <div className="space-y-6">
+                        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+                            <h3 className="text-lg font-semibold text-gray-800 mb-4">Install as App</h3>
+                            <p className="text-sm text-gray-600 mb-4">
+                                Install this application on your device for quick access and offline support.
+                            </p>
+                            {isInstallable ? (
+                                <button
+                                    onClick={handleInstallClick}
+                                    className="px-6 py-3 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors flex items-center gap-2 font-medium"
+                                >
+                                    <Download size={20} />
+                                    Install App
+                                </button>
+                            ) : (
+                                <div className="text-sm text-gray-500 bg-gray-50 p-4 rounded-lg border border-gray-200">
+                                    ✅ App is already installed or not available for installation on this device.
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+                            <h3 className="text-lg font-semibold text-gray-800 mb-4">Alert Configuration</h3>
+                            <div className="space-y-4">
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">Low Stock Threshold (kg)</label>
+                                    <input
+                                        type="number"
+                                        value={config.lowStockThreshold}
+                                        onChange={(e) => setConfig({ ...config, lowStockThreshold: parseFloat(e.target.value) })}
+                                        className="w-full border border-gray-300 rounded-lg p-2"
+                                    />
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <input
+                                        type="checkbox"
+                                        checked={config.enableNotifications}
+                                        onChange={(e) => setConfig({ ...config, enableNotifications: e.target.checked })}
+                                        className="w-4 h-4 text-teal-600 rounded"
+                                    />
+                                    <label className="text-sm text-gray-700">Enable Notifications</label>
+                                </div>
+                                <button className="bg-gray-800 text-white px-4 py-2 rounded text-sm hover:bg-gray-900">
+                                    Save Config
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
 export default Settings;

pages/StockReport.tsx

@@ -1,451 +1,454 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { getActiveLots, getParties, getTransactions } from '../services/db';
-import { BillType, Lot, Party, Transaction } from '../types';
-import { Package, Search, ArrowLeft } from 'lucide-react';
-
-const LOW_STOCK_THRESHOLD = 50; // kg
-
-const StockReport = () => {
-    const [lots, setLots] = useState<Lot[]>([]);
-    const [parties, setParties] = useState<Party[]>([]);
-    const [transactions, setTransactions] = useState<Transaction[]>([]);
-    const [searchTerm, setSearchTerm] = useState('');
-    const [viewMode, setViewMode] = useState<'list' | 'detail'>('list');
-    const [selectedMirchiId, setSelectedMirchiId] = useState<string | null>(null);
-    const [selectedMirchiName, setSelectedMirchiName] = useState<string | null>(null);
-
-    useEffect(() => {
-        const fetch = async () => {
-            setLots(await getActiveLots());
-            setParties(await getParties());
-            setTransactions(await getTransactions());
-        };
-        fetch();
-    }, []);
-
-    const filteredLots = useMemo(
-        () =>
-            lots.filter((l) =>
-                l.mirchi_name.toLowerCase().includes(searchTerm.toLowerCase())
-            ),
-        [lots, searchTerm]
-    );
-
-    const aggregatedByLot = useMemo(() => {
-        // Calculate bag count for each lot from transactions
-        return filteredLots.map(lot => {
-            let totalBags = 0;
-
-            // Calculate bags from all transactions for this lot
-            transactions.forEach(tx => {
-                tx.items.forEach(item => {
-                    if (item.lot_id === lot.id) {
-                        if (tx.bill_type === BillType.AWAAK) {
-                            // Purchase: Add bags
-                            totalBags += tx.is_return ? -item.poti_count : item.poti_count;
-                        } else {
-                            // Sale: Subtract bags
-                            totalBags += tx.is_return ? item.poti_count : -item.poti_count;
-                        }
-                    }
-                });
-            });
-
-            return {
-                lotId: lot.id,
-                lotNumber: lot.lot_number,
-                mirchiName: lot.mirchi_name,
-                totalQuantity: lot.total_quantity,
-                remainingQty: lot.remaining_quantity,
-                totalBags: Math.max(0, totalBags),
-                status: lot.status,
-                purchaseDate: lot.purchase_date,
-                avgRate: lot.avg_rate
-            };
-        });
-    }, [filteredLots, transactions]);
-
-    const detailMovements = useMemo(() => {
-        if (!selectedMirchiId) return [];
-
-        const rows: {
-            id: string;
-            date: string;
-            billNo: string;
-            partyName: string;
-            inQty: number;
-            outQty: number;
-            inBags: number;
-            outBags: number;
-            typeLabel: string;
-            isReturn: boolean;
-        }[] = [];
-
-        transactions.forEach((tx) => {
-            tx.items
-                .filter((item) => item.lot_id === selectedMirchiId) // Filter by lot_id instead of mirchi_type_id
-                .forEach((item) => {
-                    const party = parties.find((p) => p.id === tx.party_id);
-                    let inQty = 0;
-                    let outQty = 0;
-                    let inBags = 0;
-                    let outBags = 0;
-                    let typeLabel = '';
-
-                    if (tx.bill_type === BillType.AWAAK) {
-                        // Awaak = Purchase / Stock IN
-                        if (tx.is_return) {
-                            // Purchase Return: Stock OUT
-                            outQty = item.net_weight;
-                            outBags = item.poti_count;
-                            typeLabel = 'Purchase Return';
-                        } else {
-                            inQty = item.net_weight;
-                            inBags = item.poti_count;
-                            typeLabel = 'Purchase';
-                        }
-                    } else {
-                        // Jawaak = Sales / Stock OUT
-                        if (tx.is_return) {
-                            // Sales Return: Stock IN
-                            inQty = item.net_weight;
-                            inBags = item.poti_count;
-                            typeLabel = 'Sales Return';
-                        } else {
-                            outQty = item.net_weight;
-                            outBags = item.poti_count;
-                            typeLabel = 'Sale';
-                        }
-                    }
-
-                    rows.push({
-                        id: `${tx.id}-${item.id}`,
-                        date: tx.bill_date,
-                        billNo: tx.bill_number,
-                        partyName: party?.name || tx.party_name || 'Unknown Party',
-                        inQty,
-                        outQty,
-                        inBags,
-                        outBags,
-                        typeLabel,
-                        isReturn: tx.is_return,
-                    });
-                });
-        });
-
-        // Sort latest first
-        rows.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-        return rows;
-    }, [selectedMirchiId, transactions, parties]);
-
-    return (
-        <div className="space-y-4">
-            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
-                <div className="p-4 md:p-6 border-b flex flex-col md:flex-row md:items-center justify-between gap-4">
-                    <div className="flex items-center gap-2">
-                        {viewMode === 'detail' && (
-                            <button
-                                onClick={() => {
-                                    setViewMode('list');
-                                    setSelectedMirchiId(null);
-                                    setSelectedMirchiName(null);
-                                }}
-                                className="mr-1 p-1 hover:bg-gray-100 rounded-full"
-                            >
-                                <ArrowLeft size={20} className="text-gray-600" />
-                            </button>
-                        )}
-                        <Package className="text-teal-600" />
-                        <h2 className="text-lg md:text-xl font-bold text-gray-800">
-                            {viewMode === 'list'
-                                ? 'स्टॉक रिपोर्ट (Stock Inventory)'
-                                : `${selectedMirchiName ?? ''} - Stock Detail`}
-                        </h2>
-                    </div>
-
-                    {viewMode === 'list' && (
-                        <div className="relative w-full md:w-auto">
-                            <Search
-                                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                                size={18}
-                            />
-                            <input
-                                type="text"
-                                placeholder="Search Mirchi Jaat / Type..."
-                                className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none w-full md:w-64 text-sm"
-                                value={searchTerm}
-                                onChange={(e) => setSearchTerm(e.target.value)}
-                            />
-                        </div>
-                    )}
-                </div>
-
-                {viewMode === 'list' ? (
-                    <>
-                        {/* Desktop table */}
-                        <div className="hidden md:block overflow-x-auto">
-                            <table className="w-full text-sm text-left">
-                                <thead className="bg-gray-50 text-gray-500 font-medium">
-                                    <tr>
-                                        <th className="px-6 py-4">LOT Number</th>
-                                        <th className="px-6 py-4">मिरची जात (Mirchi Type)</th>
-                                        <th className="px-6 py-4 text-right">बॅग/पोती (Bags)</th>
-                                        <th className="px-6 py-4 text-right">शिल्लक वजन (Remaining Qty)</th>
-                                        <th className="px-6 py-4 text-center">स्थिती (Status)</th>
-                                    </tr>
-                                </thead>
-                                <tbody className="divide-y divide-gray-100">
-                                    {aggregatedByLot.length === 0 ? (
-                                        <tr>
-                                            <td
-                                                colSpan={5}
-                                                className="text-center py-8 text-gray-500"
-                                            >
-                                                No active stock found
-                                            </td>
-                                        </tr>
-                                    ) : (
-                                        aggregatedByLot.map((row) => {
-                                            const isLow = row.remainingQty < LOW_STOCK_THRESHOLD;
-                                            const statusLabel =
-                                                row.remainingQty === 0
-                                                    ? 'Out of Stock'
-                                                    : isLow
-                                                        ? 'Low Stock'
-                                                        : 'Available';
-                                            const statusClasses =
-                                                row.remainingQty === 0
-                                                    ? 'bg-red-100 text-red-700'
-                                                    : isLow
-                                                        ? 'bg-orange-100 text-orange-700'
-                                                        : 'bg-green-100 text-green-700';
-
-                                            return (
-                                                <tr
-                                                    key={row.lotId}
-                                                    className="hover:bg-gray-50 transition-colors cursor-pointer"
-                                                    onClick={() => {
-                                                        setSelectedMirchiId(row.lotId);
-                                                        setSelectedMirchiName(row.lotNumber);
-                                                        setViewMode('detail');
-                                                    }}
-                                                >
-                                                    <td className="px-6 py-4 font-mono text-sm font-medium text-teal-700">
-                                                        {row.lotNumber}
-                                                    </td>
-                                                    <td className="px-6 py-4">
-                                                        {row.mirchiName}
-                                                    </td>
-                                                    <td className="px-6 py-4 text-right">
-                                                        <span className="font-medium text-gray-700">
-                                                            {row.totalBags} bags
-                                                        </span>
-                                                    </td>
-                                                    <td className="px-6 py-4 text-right">
-                                                        <span
-                                                            className={`font-bold ${isLow ? 'text-red-500' : 'text-gray-800'
-                                                                }`}
-                                                        >
-                                                            {row.remainingQty} kg
-                                                        </span>
-                                                    </td>
-                                                    <td className="px-6 py-4 text-center">
-                                                        <span
-                                                            className={`inline-block px-2 py-1 rounded-full text-xs font-semibold ${statusClasses}`}
-                                                        >
-                                                            {statusLabel}
-                                                        </span>
-                                                    </td>
-                                                </tr>
-                                            );
-                                        })
-                                    )}
-                                </tbody>
-                            </table>
-                        </div>
-
-                        {/* Mobile cards */}
-                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
-                            {aggregatedByLot.length === 0 ? (
-                                <div className="p-6 text-center text-gray-500 text-sm">
-                                    No active stock found
-                                </div>
-                            ) : (
-                                aggregatedByLot.map((row) => {
-                                    const isLow = row.remainingQty < LOW_STOCK_THRESHOLD;
-                                    const statusLabel =
-                                        row.remainingQty === 0
-                                            ? 'Out of Stock'
-                                            : isLow
-                                                ? 'Low Stock'
-                                                : 'Available';
-                                    const statusClasses =
-                                        row.remainingQty === 0
-                                            ? 'bg-red-100 text-red-700'
-                                            : isLow
-                                                ? 'bg-orange-100 text-orange-700'
-                                                : 'bg-green-100 text-green-700';
-
-                                    return (
-                                        <button
-                                            key={row.lotId}
-                                            className="text-left p-4 space-y-2 hover:bg-gray-50 transition-colors"
-                                            onClick={() => {
-                                                setSelectedMirchiId(row.lotId);
-                                                setSelectedMirchiName(row.lotNumber);
-                                                setViewMode('detail');
-                                            }}
-                                        >
-                                            <div className="flex items-center justify-between gap-2">
-                                                <div>
-                                                    <div className="text-sm font-mono font-semibold text-teal-700">
-                                                        {row.lotNumber}
-                                                    </div>
-                                                    <div className="text-xs text-gray-500">
-                                                        {row.mirchiName}
-                                                    </div>
-                                                </div>
-                                                <span
-                                                    className={`px-2 py-1 rounded-full text-[10px] font-semibold ${statusClasses}`}
-                                                >
-                                                    {statusLabel}
-                                                </span>
-                                            </div>
-                                            <div className="grid grid-cols-2 gap-2 text-xs">
-                                                <div className="bg-gray-50 p-2 rounded">
-                                                    <div className="text-gray-500">Bags</div>
-                                                    <div className="font-medium">{row.totalBags} bags</div>
-                                                </div>
-                                                <div className="bg-gray-50 p-2 rounded">
-                                                    <div className="text-gray-500">Remaining Qty</div>
-                                                    <div
-                                                        className={`font-bold ${isLow ? 'text-red-500' : 'text-gray-800'
-                                                            }`}
-                                                    >
-                                                        {row.remainingQty} kg
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </button>
-                                    );
-                                })
-                            )}
-                        </div>
-                    </>
-                ) : (
-                    <>
-                        {/* Desktop detail table */}
-                        <div className="hidden md:block overflow-x-auto">
-                            <table className="w-full text-sm text-left">
-                                <thead className="bg-gray-50 text-gray-500 font-medium">
-                                    <tr>
-                                        <th className="px-6 py-4">तारीख (Date)</th>
-                                        <th className="px-6 py-4">बिल नंबर (Bill No)</th>
-                                        <th className="px-6 py-4">पार्टी (Party)</th>
-                                        <th className="px-6 py-4 text-right">बॅग इन (In Bags)</th>
-                                        <th className="px-6 py-4 text-right">बॅग आउट (Out Bags)</th>
-                                        <th className="px-6 py-4 text-right">माल इन (In Qty)</th>
-                                        <th className="px-6 py-4 text-right">माल आउट (Out Qty)</th>
-                                        <th className="px-6 py-4 text-center">टाइप (Type)</th>
-                                    </tr>
-                                </thead>
-                                <tbody className="divide-y divide-gray-100">
-                                    {detailMovements.length === 0 ? (
-                                        <tr>
-                                            <td colSpan={8} className="px-6 py-8 text-center text-gray-500">
-                                                No movements found for this Mirchi type.
-                                            </td>
-                                        </tr>
-                                    ) : (
-                                        detailMovements.map((row) => (
-                                            <tr key={row.id} className="hover:bg-gray-50">
-                                                <td className="px-6 py-4 text-gray-600">{row.date}</td>
-                                                <td className="px-6 py-4 font-mono text-gray-500">{row.billNo}</td>
-                                                <td className="px-6 py-4 text-gray-700">{row.partyName}</td>
-                                                <td className="px-6 py-4 text-right text-green-600 font-medium">
-                                                    {row.inBags > 0 ? `${row.inBags} bags` : '-'}
-                                                </td>
-                                                <td className="px-6 py-4 text-right text-red-600 font-medium">
-                                                    {row.outBags > 0 ? `${row.outBags} bags` : '-'}
-                                                </td>
-                                                <td className="px-6 py-4 text-right text-green-600 font-medium">
-                                                    {row.inQty > 0 ? `${row.inQty} kg` : '-'}
-                                                </td>
-                                                <td className="px-6 py-4 text-right text-red-600 font-medium">
-                                                    {row.outQty > 0 ? `${row.outQty} kg` : '-'}
-                                                </td>
-                                                <td className="px-6 py-4 text-center">
-                                                    <span
-                                                        className={`inline-block px-2 py-1 rounded-full text-xs font-semibold ${row.typeLabel.includes('Return')
-                                                            ? 'bg-orange-100 text-orange-700'
-                                                            : row.typeLabel === 'Purchase'
-                                                                ? 'bg-teal-100 text-teal-700'
-                                                                : 'bg-blue-100 text-blue-700'
-                                                            }`}
-                                                    >
-                                                        {row.typeLabel}
-                                                    </span>
-                                                </td>
-                                            </tr>
-                                        ))
-                                    )}
-                                </tbody>
-                            </table>
-                        </div>
-
-                        {/* Mobile detail cards */}
-                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
-                            {detailMovements.length === 0 ? (
-                                <div className="p-6 text-center text-gray-500 text-sm">
-                                    No movements found for this Mirchi type.
-                                </div>
-                            ) : (
-                                detailMovements.map((row) => (
-                                    <div key={row.id} className="p-4 space-y-2">
-                                        <div className="flex justify-between items-start gap-2">
-                                            <div>
-                                                <div className="text-xs text-gray-500">{row.date}</div>
-                                                <div className="font-mono text-sm font-medium text-gray-800">
-                                                    {row.billNo}
-                                                </div>
-                                                <div className="text-xs text-gray-600 mt-1">
-                                                    {row.partyName}
-                                                </div>
-                                            </div>
-                                            <span
-                                                className={`px-2 py-1 rounded-full text-[10px] font-semibold ${row.typeLabel.includes('Return')
-                                                    ? 'bg-orange-100 text-orange-700'
-                                                    : row.typeLabel === 'Purchase'
-                                                        ? 'bg-teal-100 text-teal-700'
-                                                        : 'bg-blue-100 text-blue-700'
-                                                    }`}
-                                            >
-                                                {row.typeLabel}
-                                            </span>
-                                        </div>
-                                        <div className="grid grid-cols-2 gap-2 text-xs pt-2 border-t border-gray-50">
-                                            <div className="bg-gray-50 p-2 rounded">
-                                                <div className="text-gray-500">माल इन (In)</div>
-                                                <div className="font-medium text-green-700">
-                                                    {row.inQty > 0 ? `${row.inQty} kg` : '-'}
-                                                </div>
-                                            </div>
-                                            <div className="bg-gray-50 p-2 rounded">
-                                                <div className="text-gray-500">माल आउट (Out)</div>
-                                                <div className="font-medium text-red-600">
-                                                    {row.outQty > 0 ? `${row.outQty} kg` : '-'}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                ))
-                            )}
-                        </div>
-                    </>
-                )}
-            </div>
-        </div>
-    );
-};
-
+import React, { useEffect, useMemo, useState } from 'react';
+import { getActiveLots, getParties, getTransactions } from '../services/db';
+import { BillType, Lot, Party, Transaction } from '../types';
+import { Package, Search, ArrowLeft } from 'lucide-react';
+
+const LOW_STOCK_THRESHOLD = 50; // kg
+
+const StockReport = () => {
+    const [lots, setLots] = useState<Lot[]>([]);
+    const [parties, setParties] = useState<Party[]>([]);
+    const [transactions, setTransactions] = useState<Transaction[]>([]);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [viewMode, setViewMode] = useState<'list' | 'detail'>('list');
+    const [selectedMirchiId, setSelectedMirchiId] = useState<string | null>(null);
+    const [selectedMirchiName, setSelectedMirchiName] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetch = async () => {
+            setLots(await getActiveLots());
+            setParties(await getParties());
+            setTransactions(await getTransactions());
+        };
+        fetch();
+    }, []);
+
+    const filteredLots = useMemo(
+        () =>
+            lots.filter((l) =>
+                l.mirchi_name.toLowerCase().includes(searchTerm.toLowerCase())
+            ),
+        [lots, searchTerm]
+    );
+
+    const aggregatedByLot = useMemo(() => {
+        // Calculate bag count for each lot from transactions
+        return filteredLots.map(lot => {
+            let totalBags = 0;
+
+            // Calculate bags from all transactions for this lot
+            transactions.forEach(tx => {
+                tx.items.forEach(item => {
+                    if (item.lot_id === lot.id) {
+                        if (tx.bill_type === BillType.AWAAK) {
+                            // Purchase: Add bags
+                            totalBags += tx.is_return ? -item.poti_count : item.poti_count;
+                        } else {
+                            // Sale: Subtract bags
+                            totalBags += tx.is_return ? item.poti_count : -item.poti_count;
+                        }
+                    }
+                });
+            });
+
+            return {
+                lotId: lot.id,
+                lotNumber: lot.lot_number,
+                mirchiName: lot.mirchi_name,
+                totalQuantity: lot.total_quantity,
+                remainingQty: lot.remaining_quantity,
+                totalBags: Math.max(0, totalBags),
+                status: lot.status,
+                purchaseDate: lot.purchase_date,
+                avgRate: lot.avg_rate
+            };
+        });
+    }, [filteredLots, transactions]);
+
+    const detailMovements = useMemo(() => {
+        if (!selectedMirchiId) return [];
+
+        const rows: {
+            id: string;
+            date: string;
+            billNo: string;
+            partyName: string;
+            inQty: number;
+            outQty: number;
+            inBags: number;
+            outBags: number;
+            typeLabel: string;
+            isReturn: boolean;
+        }[] = [];
+
+        transactions.forEach((tx) => {
+            tx.items
+                .filter((item) => item.lot_id === selectedMirchiId) // Filter by lot_id instead of mirchi_type_id
+                .forEach((item) => {
+                    const party = parties.find((p) => p.id === tx.party_id);
+
+                    let inQty = 0;
+                    let outQty = 0;
+                    let inBags = 0;
+                    let outBags = 0;
+                    let typeLabel = '';
+
+                    if (tx.bill_type === BillType.AWAAK) {
+                        // Awaak = Purchase / Stock IN
+                        if (tx.is_return) {
+                            // Purchase Return: Stock OUT
+                            outQty = item.net_weight;
+                            outBags = item.poti_count;
+                            typeLabel = 'Purchase Return';
+                        } else {
+                            inQty = item.net_weight;
+                            inBags = item.poti_count;
+                            typeLabel = 'Purchase';
+                        }
+                    } else {
+                        // Jawaak = Sales / Stock OUT
+                        if (tx.is_return) {
+                            // Sales Return: Stock IN
+                            inQty = item.net_weight;
+                            inBags = item.poti_count;
+                            typeLabel = 'Sales Return';
+                        } else {
+                            outQty = item.net_weight;
+                            outBags = item.poti_count;
+                            typeLabel = 'Sale';
+                        }
+                    }
+
+                    const displayDate = tx.bill_date ? tx.bill_date.split('T')[0] : tx.bill_date;
+
+                    rows.push({
+                        id: `${tx.id}-${item.id}`,
+                        date: displayDate,
+                        billNo: tx.bill_number,
+                        partyName: party?.name || tx.party_name || 'Unknown Party',
+                        inQty,
+                        outQty,
+                        inBags,
+                        outBags,
+                        typeLabel,
+                        isReturn: tx.is_return,
+                    });
+                });
+        });
+
+        // Sort latest first
+        rows.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+        return rows;
+    }, [selectedMirchiId, transactions, parties]);
+
+    return (
+        <div className="space-y-4">
+            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+                <div className="p-4 md:p-6 border-b flex flex-col md:flex-row md:items-center justify-between gap-4">
+                    <div className="flex items-center gap-2">
+                        {viewMode === 'detail' && (
+                            <button
+                                onClick={() => {
+                                    setViewMode('list');
+                                    setSelectedMirchiId(null);
+                                    setSelectedMirchiName(null);
+                                }}
+                                className="mr-1 p-1 hover:bg-gray-100 rounded-full"
+                            >
+                                <ArrowLeft size={20} className="text-gray-600" />
+                            </button>
+                        )}
+                        <Package className="text-teal-600" />
+                        <h2 className="text-lg md:text-xl font-bold text-gray-800">
+                            {viewMode === 'list'
+                                ? 'स्टॉक रिपोर्ट (Stock Inventory)'
+                                : `${selectedMirchiName ?? ''} - Stock Detail`}
+                        </h2>
+                    </div>
+
+                    {viewMode === 'list' && (
+                        <div className="relative w-full md:w-auto">
+                            <Search
+                                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                                size={18}
+                            />
+                            <input
+                                type="text"
+                                placeholder="Search Mirchi Jaat / Type..."
+                                className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none w-full md:w-64 text-sm"
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                            />
+                        </div>
+                    )}
+                </div>
+
+                {viewMode === 'list' ? (
+                    <>
+                        {/* Desktop table */}
+                        <div className="hidden md:block overflow-x-auto">
+                            <table className="w-full text-sm text-left">
+                                <thead className="bg-gray-50 text-gray-500 font-medium">
+                                    <tr>
+                                        <th className="px-6 py-4">LOT Number</th>
+                                        <th className="px-6 py-4">मिरची जात (Mirchi Type)</th>
+                                        <th className="px-6 py-4 text-right">बॅग/पोती (Bags)</th>
+                                        <th className="px-6 py-4 text-right">शिल्लक वजन (Remaining Qty)</th>
+                                        <th className="px-6 py-4 text-center">स्थिती (Status)</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {aggregatedByLot.length === 0 ? (
+                                        <tr>
+                                            <td
+                                                colSpan={5}
+                                                className="text-center py-8 text-gray-500"
+                                            >
+                                                No active stock found
+                                            </td>
+                                        </tr>
+                                    ) : (
+                                        aggregatedByLot.map((row) => {
+                                            const isLow = row.remainingQty < LOW_STOCK_THRESHOLD;
+                                            const statusLabel =
+                                                row.remainingQty === 0
+                                                    ? 'Out of Stock'
+                                                    : isLow
+                                                        ? 'Low Stock'
+                                                        : 'Available';
+                                            const statusClasses =
+                                                row.remainingQty === 0
+                                                    ? 'bg-red-100 text-red-700'
+                                                    : isLow
+                                                        ? 'bg-orange-100 text-orange-700'
+                                                        : 'bg-green-100 text-green-700';
+
+                                            return (
+                                                <tr
+                                                    key={row.lotId}
+                                                    className="hover:bg-gray-50 transition-colors cursor-pointer"
+                                                    onClick={() => {
+                                                        setSelectedMirchiId(row.lotId);
+                                                        setSelectedMirchiName(row.lotNumber);
+                                                        setViewMode('detail');
+                                                    }}
+                                                >
+                                                    <td className="px-6 py-4 font-mono text-sm font-medium text-teal-700">
+                                                        {row.lotNumber}
+                                                    </td>
+                                                    <td className="px-6 py-4">
+                                                        {row.mirchiName}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        <span className="font-medium text-gray-700">
+                                                            {row.totalBags} bags
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        <span
+                                                            className={`font-bold ${isLow ? 'text-red-500' : 'text-gray-800'
+                                                                }`}
+                                                        >
+                                                            {row.remainingQty} kg
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <span
+                                                            className={`inline-block px-2 py-1 rounded-full text-xs font-semibold ${statusClasses}`}
+                                                        >
+                                                            {statusLabel}
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })
+                                    )}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        {/* Mobile cards */}
+                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
+                            {aggregatedByLot.length === 0 ? (
+                                <div className="p-6 text-center text-gray-500 text-sm">
+                                    No active stock found
+                                </div>
+                            ) : (
+                                aggregatedByLot.map((row) => {
+                                    const isLow = row.remainingQty < LOW_STOCK_THRESHOLD;
+                                    const statusLabel =
+                                        row.remainingQty === 0
+                                            ? 'Out of Stock'
+                                            : isLow
+                                                ? 'Low Stock'
+                                                : 'Available';
+                                    const statusClasses =
+                                        row.remainingQty === 0
+                                            ? 'bg-red-100 text-red-700'
+                                            : isLow
+                                                ? 'bg-orange-100 text-orange-700'
+                                                : 'bg-green-100 text-green-700';
+
+                                    return (
+                                        <button
+                                            key={row.lotId}
+                                            className="text-left p-4 space-y-2 hover:bg-gray-50 transition-colors"
+                                            onClick={() => {
+                                                setSelectedMirchiId(row.lotId);
+                                                setSelectedMirchiName(row.lotNumber);
+                                                setViewMode('detail');
+                                            }}
+                                        >
+                                            <div className="flex items-center justify-between gap-2">
+                                                <div>
+                                                    <div className="text-sm font-mono font-semibold text-teal-700">
+                                                        {row.lotNumber}
+                                                    </div>
+                                                    <div className="text-xs text-gray-500">
+                                                        {row.mirchiName}
+                                                    </div>
+                                                </div>
+                                                <span
+                                                    className={`px-2 py-1 rounded-full text-[10px] font-semibold ${statusClasses}`}
+                                                >
+                                                    {statusLabel}
+                                                </span>
+                                            </div>
+                                            <div className="grid grid-cols-2 gap-2 text-xs">
+                                                <div className="bg-gray-50 p-2 rounded">
+                                                    <div className="text-gray-500">Bags</div>
+                                                    <div className="font-medium">{row.totalBags} bags</div>
+                                                </div>
+                                                <div className="bg-gray-50 p-2 rounded">
+                                                    <div className="text-gray-500">Remaining Qty</div>
+                                                    <div
+                                                        className={`font-bold ${isLow ? 'text-red-500' : 'text-gray-800'
+                                                            }`}
+                                                    >
+                                                        {row.remainingQty} kg
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </button>
+                                    );
+                                })
+                            )}
+                        </div>
+                    </>
+                ) : (
+                    <>
+                        {/* Desktop detail table */}
+                        <div className="hidden md:block overflow-x-auto">
+                            <table className="w-full text-sm text-left">
+                                <thead className="bg-gray-50 text-gray-500 font-medium">
+                                    <tr>
+                                        <th className="px-6 py-4">तारीख (Date)</th>
+                                        <th className="px-6 py-4">बिल नंबर (Bill No)</th>
+                                        <th className="px-6 py-4">पार्टी (Party)</th>
+                                        <th className="px-6 py-4 text-right">बॅग इन (In Bags)</th>
+                                        <th className="px-6 py-4 text-right">बॅग आउट (Out Bags)</th>
+                                        <th className="px-6 py-4 text-right">माल इन (In Qty)</th>
+                                        <th className="px-6 py-4 text-right">माल ���उट (Out Qty)</th>
+                                        <th className="px-6 py-4 text-center">टाइप (Type)</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {detailMovements.length === 0 ? (
+                                        <tr>
+                                            <td colSpan={8} className="px-6 py-8 text-center text-gray-500">
+                                                No movements found for this Mirchi type.
+                                            </td>
+                                        </tr>
+                                    ) : (
+                                        detailMovements.map((row) => (
+                                            <tr key={row.id} className="hover:bg-gray-50">
+                                                <td className="px-6 py-4 text-gray-600">{row.date}</td>
+                                                <td className="px-6 py-4 font-mono text-gray-500">{row.billNo}</td>
+                                                <td className="px-6 py-4 text-gray-700">{row.partyName}</td>
+                                                <td className="px-6 py-4 text-right text-green-600 font-medium">
+                                                    {row.inBags > 0 ? `${row.inBags} bags` : '-'}
+                                                </td>
+                                                <td className="px-6 py-4 text-right text-red-600 font-medium">
+                                                    {row.outBags > 0 ? `${row.outBags} bags` : '-'}
+                                                </td>
+                                                <td className="px-6 py-4 text-right text-green-600 font-medium">
+                                                    {row.inQty > 0 ? `${row.inQty} kg` : '-'}
+                                                </td>
+                                                <td className="px-6 py-4 text-right text-red-600 font-medium">
+                                                    {row.outQty > 0 ? `${row.outQty} kg` : '-'}
+                                                </td>
+                                                <td className="px-6 py-4 text-center">
+                                                    <span
+                                                        className={`inline-block px-2 py-1 rounded-full text-xs font-semibold ${row.typeLabel.includes('Return')
+                                                            ? 'bg-orange-100 text-orange-700'
+                                                            : row.typeLabel === 'Purchase'
+                                                                ? 'bg-teal-100 text-teal-700'
+                                                                : 'bg-blue-100 text-blue-700'
+                                                            }`}
+                                                    >
+                                                        {row.typeLabel}
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                        ))
+                                    )}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        {/* Mobile detail cards */}
+                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
+                            {detailMovements.length === 0 ? (
+                                <div className="p-6 text-center text-gray-500 text-sm">
+                                    No movements found for this Mirchi type.
+                                </div>
+                            ) : (
+                                detailMovements.map((row) => (
+                                    <div key={row.id} className="p-4 space-y-2">
+                                        <div className="flex justify-between items-start gap-2">
+                                            <div>
+                                                <div className="text-xs text-gray-500">{row.date}</div>
+                                                <div className="font-mono text-sm font-medium text-gray-800">
+                                                    {row.billNo}
+                                                </div>
+                                                <div className="text-xs text-gray-600 mt-1">
+                                                    {row.partyName}
+                                                </div>
+                                            </div>
+                                            <span
+                                                className={`px-2 py-1 rounded-full text-[10px] font-semibold ${row.typeLabel.includes('Return')
+                                                    ? 'bg-orange-100 text-orange-700'
+                                                    : row.typeLabel === 'Purchase'
+                                                        ? 'bg-teal-100 text-teal-700'
+                                                        : 'bg-blue-100 text-blue-700'
+                                                    }`}
+                                            >
+                                                {row.typeLabel}
+                                            </span>
+                                        </div>
+                                        <div className="grid grid-cols-2 gap-2 text-xs pt-2 border-t border-gray-50">
+                                            <div className="bg-gray-50 p-2 rounded">
+                                                <div className="text-gray-500">माल इन (In)</div>
+                                                <div className="font-medium text-green-700">
+                                                    {row.inQty > 0 ? `${row.inQty} kg` : '-'}
+                                                </div>
+                                            </div>
+                                            <div className="bg-gray-50 p-2 rounded">
+                                                <div className="text-gray-500">माल आउट (Out)</div>
+                                                <div className="font-medium text-red-600">
+                                                    {row.outQty > 0 ? `${row.outQty} kg` : '-'}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
 export default StockReport;

services/db.ts

@@ -1,309 +1,354 @@
-import {
-    Party, MirchiType, Lot, Transaction, PartyType,
-    LotStatus, BillType, ApiResponse, PaymentMode
-} from '../types';
-
-const API_BASE = 'https://antaram-pattanshettybackend.hf.space/api';
-
-// Helper function to parse numeric values from API
-const parseNumeric = (value: any): number => {
-    if (typeof value === 'string') {
-        return parseFloat(value);
-    }
-    return value || 0;
-};
-
-// Helper function to parse poti_weights from string to array
-const parsePotiWeights = (weights: any): number[] => {
-    if (typeof weights === 'string') {
-        try {
-            return JSON.parse(weights);
-        } catch {
-            return [];
-        }
-    }
-    return weights || [];
-};
-
-// Helper function to normalize transaction data from API
-const normalizeTransaction = (tx: any): Transaction => {
-    // Filter out null items that come from PostgreSQL json_agg when there are no items
-    const rawItems = tx.items || [];
-    const validItems = Array.isArray(rawItems)
-        ? rawItems.filter((item: any) => item && item.id !== null)
-        : [];
-
-    return {
-        ...tx,
-        gross_weight_total: parseNumeric(tx.gross_weight_total),
-        net_weight_total: parseNumeric(tx.net_weight_total),
-        subtotal: parseNumeric(tx.subtotal),
-        total_expenses: parseNumeric(tx.total_expenses),
-        total_amount: parseNumeric(tx.total_amount),
-        paid_amount: parseNumeric(tx.paid_amount),
-        balance_amount: parseNumeric(tx.balance_amount),
-        items: validItems.map((item: any) => ({
-            ...item,
-            poti_weights: parsePotiWeights(item.poti_weights),
-            gross_weight: parseNumeric(item.gross_weight),
-            poti_count: parseNumeric(item.poti_count),
-            total_potya: parseNumeric(item.total_potya),
-            net_weight: parseNumeric(item.net_weight),
-            rate_per_kg: parseNumeric(item.rate_per_kg),
-            item_total: parseNumeric(item.item_total),
-        })),
-        expenses: tx.expenses ? {
-            cess_percent: parseNumeric(tx.expenses.cess_percent),
-            cess_amount: parseNumeric(tx.expenses.cess_amount),
-            adat_percent: parseNumeric(tx.expenses.adat_percent),
-            adat_amount: parseNumeric(tx.expenses.adat_amount),
-            poti_rate: parseNumeric(tx.expenses.poti_rate),
-            poti_amount: parseNumeric(tx.expenses.poti_amount),
-            hamali_per_poti: parseNumeric(tx.expenses.hamali_per_poti),
-            hamali_amount: parseNumeric(tx.expenses.hamali_amount),
-            packaging_hamali_per_poti: parseNumeric(tx.expenses.packaging_hamali_per_poti),
-            packaging_hamali_amount: parseNumeric(tx.expenses.packaging_hamali_amount),
-            gaadi_bharni: parseNumeric(tx.expenses.gaadi_bharni),
-        } : {
-            cess_percent: 0,
-            cess_amount: 0,
-            adat_percent: 0,
-            adat_amount: 0,
-            poti_rate: 0,
-            poti_amount: 0,
-            hamali_per_poti: 0,
-            hamali_amount: 0,
-            packaging_hamali_per_poti: 0,
-            packaging_hamali_amount: 0,
-            gaadi_bharni: 0,
-        },
-        payments: tx.payments || [],
-    };
-};
-
-// Parties API
-export const getParties = async (): Promise<Party[]> => {
-    try {
-        const res = await fetch(`${API_BASE}/parties`);
-        if (!res.ok) throw new Error('Failed to load parties');
-        const data = await res.json();
-        return data.map((p: any) => ({
-            ...p,
-            current_balance: parseNumeric(p.current_balance)
-        }));
-    } catch (error) {
-        console.error('Error fetching parties:', error);
-        return [];
-    }
-};
-
-export const saveParty = async (party: Party): Promise<ApiResponse<Party>> => {
-    try {
-        const res = await fetch(`${API_BASE}/parties`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(party),
-        });
-
-        const data = await res.json();
-        if (!res.ok || !data.success) {
-            return { success: false, message: data?.message || 'Error saving party' };
-        }
-
-        return {
-            success: true,
-            data: {
-                ...data.data,
-                current_balance: parseNumeric(data.data.current_balance)
-            },
-            message: data.message || 'Party saved successfully'
-        };
-    } catch (e: any) {
-        return { success: false, message: e.message || 'Database error' };
-    }
-};
-
-// Mirchi Types API
-export const apiGetMirchiTypes = async (): Promise<MirchiType[]> => {
-    try {
-        const res = await fetch(`${API_BASE}/mirchi-types`);
-        if (!res.ok) throw new Error('Failed to load mirchi types');
-        const data = await res.json();
-        return data.map((m: any) => ({
-            ...m,
-            current_rate: parseNumeric(m.current_rate)
-        }));
-    } catch (error) {
-        console.error('Error fetching mirchi types:', error);
-        return [];
-    }
-};
-
-export const apiSaveMirchiType = async (type: MirchiType): Promise<ApiResponse<MirchiType>> => {
-    try {
-        const res = await fetch(`${API_BASE}/mirchi-types`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(type),
-        });
-        const data = await res.json();
-        if (!res.ok || !data.success) {
-            return { success: false, message: data?.message || 'Error saving type' };
-        }
-        return {
-            success: true,
-            data: {
-                ...data.data,
-                current_rate: parseNumeric(data.data.current_rate)
-            },
-            message: data.message
-        };
-    } catch (e: any) {
-        return { success: false, message: e.message || 'Error saving type' };
-    }
-};
-
-// Alias for compatibility
-export const getMirchiTypes = apiGetMirchiTypes;
-export const saveMirchiType = apiSaveMirchiType;
-
-// Lots API
-export const getActiveLots = async (): Promise<Lot[]> => {
-    try {
-        const res = await fetch(`${API_BASE}/lots/active`);
-        if (!res.ok) throw new Error('Failed to load active lots');
-        const data = await res.json();
-        return data.map((l: any) => ({
-            ...l,
-            total_quantity: parseNumeric(l.total_quantity),
-            remaining_quantity: parseNumeric(l.remaining_quantity),
-            avg_rate: parseNumeric(l.avg_rate)
-        }));
-    } catch (error) {
-        console.error('Error fetching active lots:', error);
-        return [];
-    }
-};
-
-// Check if lot number is unique
-export const checkLotUnique = async (lotNumber: string): Promise<boolean> => {
-    try {
-        const res = await fetch(`${API_BASE}/lots/check-unique`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ lot_number: lotNumber }),
-        });
-        if (!res.ok) throw new Error('Failed to check lot uniqueness');
-        const data = await res.json();
-        return !data.exists; // Return true if unique (not exists)
-    } catch (error) {
-        console.error('Error checking lot uniqueness:', error);
-        return false;
-    }
-};
-
-// Get available lots for a specific mirchi type
-export const getAvailableLotsByMirchi = async (mirchiTypeId: string): Promise<Lot[]> => {
-    try {
-        const res = await fetch(`${API_BASE}/lots/available/${mirchiTypeId}`);
-        if (!res.ok) throw new Error('Failed to load available lots');
-        const data = await res.json();
-        return data.map((l: any) => ({
-            ...l,
-            total_quantity: parseNumeric(l.total_quantity),
-            remaining_quantity: parseNumeric(l.remaining_quantity),
-            avg_rate: parseNumeric(l.avg_rate)
-        }));
-    } catch (error) {
-        console.error('Error fetching available lots:', error);
-        return [];
-    }
-};
-
-// Transactions API
-export const getTransactions = async (): Promise<Transaction[]> => {
-    try {
-        const res = await fetch(`${API_BASE}/transactions`);
-        if (!res.ok) throw new Error('Failed to load transactions');
-        const data = await res.json();
-        return data.map(normalizeTransaction);
-    } catch (error) {
-        console.error('Error fetching transactions:', error);
-        return [];
-    }
-};
-
-export const generateBillNumber = (type: BillType, isReturn: boolean = false): string => {
-    const prefix = type === BillType.JAWAAK ? (isReturn ? 'JAWAAK-RET' : 'JAWAAK') : (isReturn ? 'AWAAK-RET' : 'AWAAK');
-    const timestamp = Date.now();
-    return `${prefix}-${new Date().getFullYear()}-${String(timestamp).slice(-4)}`;
-};
-
-export const saveTransaction = async (transaction: Transaction): Promise<ApiResponse<Transaction>> => {
-    try {
-        // Validate Payload
-        if (!transaction.party_id) return { success: false, message: "Party is required" };
-        if (!transaction.items || transaction.items.length === 0) return { success: false, message: "At least one item is required" };
-
-        console.log('=== SAVING TRANSACTION ===');
-        console.log('Transaction ID:', transaction.id);
-        console.log('Items count:', transaction.items?.length);
-        console.log('Items data:', JSON.stringify(transaction.items, null, 2));
-
-        const res = await fetch(`${API_BASE}/transactions`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(transaction)
-        });
-
-        if (!res.ok) {
-            const error = await res.json();
-            console.error('Save transaction error:', error);
-            throw new Error(error.message || 'Failed to save transaction');
-        }
-
-        const result = await res.json();
-        console.log('=== SAVE RESPONSE ===');
-        console.log('Response data:', result.data);
-        console.log('Response items count:', result.data?.items?.length);
-        console.log('Response items:', JSON.stringify(result.data?.items, null, 2));
-
-        return {
-            success: true,
-            data: normalizeTransaction(result.data),
-            message: result.message
-        };
-    } catch (error: any) {
-        console.error('Error saving transaction:', error);
-        return {
-            success: false,
-            message: error.message || 'Failed to save transaction'
-        };
-    }
-};
-
-export const updateTransactionPayment = async (transactionId: string, amount: number): Promise<ApiResponse<Transaction>> => {
-    try {
-        // Validate amount
-        if (amount <= 0) return { success: false, message: "Amount must be greater than 0" };
-
-        const res = await fetch(`${API_BASE}/transactions/${transactionId}/payment`, {
-            method: 'PATCH',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ amount }),
-        });
-
-        const data = await res.json();
-        if (!res.ok || !data.success) {
-            return { success: false, message: data?.message || 'Error updating payment' };
-        }
-
-        return {
-            success: true,
-            message: data.message || 'Payment updated successfully'
-        };
-    } catch (e: any) {
-        console.error('Error updating payment:', e);
-        return { success: false, message: e.message || 'Error updating payment' };
-    }
+import {
+    Party, MirchiType, Lot, Transaction, PartyType,
+    LotStatus, BillType, ApiResponse, PaymentMode
+} from '../types';
+
+const API_BASE = 'https://antaram-pattanshettybackend.hf.space/api';
+
+// Helper function to parse numeric values from API
+const parseNumeric = (value: any): number => {
+    if (typeof value === 'string') {
+        return parseFloat(value);
+    }
+    return value || 0;
+};
+
+// Helper function to parse poti_weights from string to array
+const parsePotiWeights = (weights: any): number[] => {
+    if (typeof weights === 'string') {
+        try {
+            return JSON.parse(weights);
+        } catch {
+            return [];
+        }
+    }
+    return weights || [];
+};
+
+// Helper function to normalize transaction data from API
+const normalizeTransaction = (tx: any): Transaction => {
+    // Filter out null items that come from PostgreSQL json_agg when there are no items
+    const rawItems = tx.items || [];
+    const validItems = Array.isArray(rawItems)
+        ? rawItems.filter((item: any) => item && item.id !== null)
+        : [];
+
+    const grossWeightTotal = parseNumeric(tx.gross_weight_total);
+    const netWeightTotal = parseNumeric(tx.net_weight_total);
+    const subtotal = parseNumeric(tx.subtotal);
+    const totalExpenses = parseNumeric(tx.total_expenses);
+    const totalAmount = parseNumeric(tx.total_amount);
+    const paidAmount = parseNumeric(tx.paid_amount);
+    const balanceAmount = parseNumeric(tx.balance_amount);
+
+    // Normalize expenses and reconstruct other_expenses if backend didn't send it
+    let normalizedExpenses;
+    if (tx.expenses) {
+        const hasOtherExpensesField = Object.prototype.hasOwnProperty.call(tx.expenses, 'other_expenses');
+
+        const baseExpenses = {
+            cess_percent: parseNumeric(tx.expenses.cess_percent),
+            cess_amount: parseNumeric(tx.expenses.cess_amount),
+            adat_percent: parseNumeric(tx.expenses.adat_percent),
+            adat_amount: parseNumeric(tx.expenses.adat_amount),
+            poti_rate: parseNumeric(tx.expenses.poti_rate),
+            poti_amount: parseNumeric(tx.expenses.poti_amount),
+            hamali_per_poti: parseNumeric(tx.expenses.hamali_per_poti),
+            hamali_amount: parseNumeric(tx.expenses.hamali_amount),
+            packaging_hamali_per_poti: parseNumeric(tx.expenses.packaging_hamali_per_poti),
+            packaging_hamali_amount: parseNumeric(tx.expenses.packaging_hamali_amount),
+            gaadi_bharni: parseNumeric(tx.expenses.gaadi_bharni),
+        };
+
+        let otherExpensesValue = hasOtherExpensesField
+            ? parseNumeric(tx.expenses.other_expenses)
+            : 0;
+
+        // If backend doesn't provide other_expenses but total_expenses is known,
+        // infer other_expenses as the remaining part after subtracting known components.
+        if (!hasOtherExpensesField && totalExpenses) {
+            const knownComponents =
+                baseExpenses.poti_amount +
+                baseExpenses.cess_amount +
+                baseExpenses.adat_amount +
+                baseExpenses.hamali_amount +
+                baseExpenses.packaging_hamali_amount +
+                baseExpenses.gaadi_bharni;
+
+            const diff = totalExpenses - knownComponents;
+            if (diff > 0) {
+                otherExpensesValue = diff;
+            }
+        }
+
+        normalizedExpenses = {
+            ...baseExpenses,
+            other_expenses: otherExpensesValue,
+        };
+    } else {
+        normalizedExpenses = {
+            cess_percent: 0,
+            cess_amount: 0,
+            adat_percent: 0,
+            adat_amount: 0,
+            poti_rate: 0,
+            poti_amount: 0,
+            hamali_per_poti: 0,
+            hamali_amount: 0,
+            packaging_hamali_per_poti: 0,
+            packaging_hamali_amount: 0,
+            gaadi_bharni: 0,
+            other_expenses: 0,
+        };
+    }
+
+    return {
+        ...tx,
+        gross_weight_total: grossWeightTotal,
+        net_weight_total: netWeightTotal,
+        subtotal,
+        total_expenses: totalExpenses,
+        total_amount: totalAmount,
+        paid_amount: paidAmount,
+        balance_amount: balanceAmount,
+        items: validItems.map((item: any) => ({
+            ...item,
+            poti_weights: parsePotiWeights(item.poti_weights),
+            gross_weight: parseNumeric(item.gross_weight),
+            poti_count: parseNumeric(item.poti_count),
+            total_potya: parseNumeric(item.total_potya),
+            net_weight: parseNumeric(item.net_weight),
+            rate_per_kg: parseNumeric(item.rate_per_kg),
+            item_total: parseNumeric(item.item_total),
+        })),
+        expenses: normalizedExpenses,
+        payments: tx.payments || [],
+    };
+};
+
+// Parties API
+export const getParties = async (): Promise<Party[]> => {
+    try {
+        const res = await fetch(`${API_BASE}/parties`);
+        if (!res.ok) throw new Error('Failed to load parties');
+        const data = await res.json();
+        return data.map((p: any) => ({
+            ...p,
+            current_balance: parseNumeric(p.current_balance)
+        }));
+    } catch (error) {
+        console.error('Error fetching parties:', error);
+        return [];
+    }
+};
+
+export const saveParty = async (party: Party): Promise<ApiResponse<Party>> => {
+    try {
+        const res = await fetch(`${API_BASE}/parties`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(party),
+        });
+
+        const data = await res.json();
+        if (!res.ok || !data.success) {
+            return { success: false, message: data?.message || 'Error saving party' };
+        }
+
+        return {
+            success: true,
+            data: {
+                ...data.data,
+                current_balance: parseNumeric(data.data.current_balance)
+            },
+            message: data.message || 'Party saved successfully'
+        };
+    } catch (e: any) {
+        return { success: false, message: e.message || 'Database error' };
+    }
+};
+
+// Mirchi Types API
+export const apiGetMirchiTypes = async (): Promise<MirchiType[]> => {
+    try {
+        const res = await fetch(`${API_BASE}/mirchi-types`);
+        if (!res.ok) throw new Error('Failed to load mirchi types');
+        const data = await res.json();
+        return data.map((m: any) => ({
+            ...m,
+            current_rate: parseNumeric(m.current_rate)
+        }));
+    } catch (error) {
+        console.error('Error fetching mirchi types:', error);
+        return [];
+    }
+};
+
+export const apiSaveMirchiType = async (type: MirchiType): Promise<ApiResponse<MirchiType>> => {
+    try {
+        const res = await fetch(`${API_BASE}/mirchi-types`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(type),
+        });
+        const data = await res.json();
+        if (!res.ok || !data.success) {
+            return { success: false, message: data?.message || 'Error saving type' };
+        }
+        return {
+            success: true,
+            data: {
+                ...data.data,
+                current_rate: parseNumeric(data.data.current_rate)
+            },
+            message: data.message
+        };
+    } catch (e: any) {
+        return { success: false, message: e.message || 'Error saving type' };
+    }
+};
+
+// Alias for compatibility
+export const getMirchiTypes = apiGetMirchiTypes;
+export const saveMirchiType = apiSaveMirchiType;
+
+// Lots API
+export const getActiveLots = async (): Promise<Lot[]> => {
+    try {
+        const res = await fetch(`${API_BASE}/lots/active`);
+        if (!res.ok) throw new Error('Failed to load active lots');
+        const data = await res.json();
+        return data.map((l: any) => ({
+            ...l,
+            total_quantity: parseNumeric(l.total_quantity),
+            remaining_quantity: parseNumeric(l.remaining_quantity),
+            avg_rate: parseNumeric(l.avg_rate)
+        }));
+    } catch (error) {
+        console.error('Error fetching active lots:', error);
+        return [];
+    }
+};
+
+// Check if lot number is unique
+export const checkLotUnique = async (lotNumber: string): Promise<boolean> => {
+    try {
+        const res = await fetch(`${API_BASE}/lots/check-unique`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ lot_number: lotNumber }),
+        });
+        if (!res.ok) throw new Error('Failed to check lot uniqueness');
+        const data = await res.json();
+        return !data.exists; // Return true if unique (not exists)
+    } catch (error) {
+        console.error('Error checking lot uniqueness:', error);
+        return false;
+    }
+};
+
+// Get available lots for a specific mirchi type
+export const getAvailableLotsByMirchi = async (mirchiTypeId: string): Promise<Lot[]> => {
+    try {
+        const res = await fetch(`${API_BASE}/lots/available/${mirchiTypeId}`);
+        if (!res.ok) throw new Error('Failed to load available lots');
+        const data = await res.json();
+        return data.map((l: any) => ({
+            ...l,
+            total_quantity: parseNumeric(l.total_quantity),
+            remaining_quantity: parseNumeric(l.remaining_quantity),
+            avg_rate: parseNumeric(l.avg_rate)
+        }));
+    } catch (error) {
+        console.error('Error fetching available lots:', error);
+        return [];
+    }
+};
+
+// Transactions API
+export const getTransactions = async (): Promise<Transaction[]> => {
+    try {
+        const res = await fetch(`${API_BASE}/transactions`);
+        if (!res.ok) throw new Error('Failed to load transactions');
+        const data = await res.json();
+        return data.map(normalizeTransaction);
+    } catch (error) {
+        console.error('Error fetching transactions:', error);
+        return [];
+    }
+};
+
+export const generateBillNumber = (type: BillType, isReturn: boolean = false): string => {
+    const prefix = type === BillType.JAWAAK ? (isReturn ? 'JAWAAK-RET' : 'JAWAAK') : (isReturn ? 'AWAAK-RET' : 'AWAAK');
+    const timestamp = Date.now();
+    return `${prefix}-${new Date().getFullYear()}-${String(timestamp).slice(-4)}`;
+};
+
+export const saveTransaction = async (transaction: Transaction): Promise<ApiResponse<Transaction>> => {
+    try {
+        // Validate Payload
+        if (!transaction.party_id) return { success: false, message: "Party is required" };
+        if (!transaction.items || transaction.items.length === 0) return { success: false, message: "At least one item is required" };
+
+        console.log('=== SAVING TRANSACTION ===');
+        console.log('Transaction ID:', transaction.id);
+        console.log('Items count:', transaction.items?.length);
+        console.log('Items data:', JSON.stringify(transaction.items, null, 2));
+
+        const res = await fetch(`${API_BASE}/transactions`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(transaction)
+        });
+
+        if (!res.ok) {
+            const error = await res.json();
+            console.error('Save transaction error:', error);
+            throw new Error(error.message || 'Failed to save transaction');
+        }
+
+        const result = await res.json();
+        console.log('=== SAVE RESPONSE ===');
+        console.log('Response data:', result.data);
+        console.log('Response items count:', result.data?.items?.length);
+        console.log('Response items:', JSON.stringify(result.data?.items, null, 2));
+
+        return {
+            success: true,
+            data: normalizeTransaction(result.data),
+            message: result.message
+        };
+    } catch (error: any) {
+        console.error('Error saving transaction:', error);
+        return {
+            success: false,
+            message: error.message || 'Failed to save transaction'
+        };
+    }
+};
+
+export const updateTransactionPayment = async (transactionId: string, amount: number): Promise<ApiResponse<Transaction>> => {
+    try {
+        // Validate amount
+        if (amount <= 0) return { success: false, message: "Amount must be greater than 0" };
+
+        const res = await fetch(`${API_BASE}/transactions/${transactionId}/payment`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ amount }),
+        });
+
+        const data = await res.json();
+        if (!res.ok || !data.success) {
+            return { success: false, message: data?.message || 'Error updating payment' };
+        }
+
+        return {
+            success: true,
+            message: data.message || 'Payment updated successfully'
+        };
+    } catch (e: any) {
+        console.error('Error updating payment:', e);
+        return { success: false, message: e.message || 'Error updating payment' };
+    }
 };

tsconfig.json

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

types.ts

@@ -1,122 +1,123 @@
-// Enums
-// NOTE:
-// - AWAAK  = Purchase (Incoming stock)
-// - JAWAAK = Sale     (Outgoing stock)
-export enum BillType {
-    JAWAAK = 'jawaak', // Sale / Outgoing
-    AWAAK = 'awaak'    // Purchase / Incoming
-}
-
-export enum PartyType {
-    JAWAAK = 'jawaak',
-    AWAAK = 'awaak',
-    BOTH = 'both'
-}
-
-export enum PaymentMode {
-    CASH = 'cash',
-    ONLINE = 'online',
-    CHEQUE = 'cheque',
-    DUE = 'due'
-}
-
-export enum LotStatus {
-    ACTIVE = 'active',
-    SOLD_OUT = 'sold_out'
-}
-
-// API Response Wrapper (Backend Ready)
-export interface ApiResponse<T> {
-    success: boolean;
-    data?: T;
-    message?: string;
-    errors?: string[];
-}
-
-// Interfaces
-export interface Party {
-    id: string;
-    name: string;
-    phone: string;
-    city: string;
-    party_type: PartyType;
-    current_balance: number; // +ve = They owe us, -ve = We owe them
-}
-
-export interface MirchiType {
-    id: string;
-    name: string;
-    current_rate: number;
-}
-
-export interface Lot {
-    id: string;
-    lot_number: string;
-    mirchi_type_id: string;
-    mirchi_name: string; // Denormalized for display
-    total_quantity: number;
-    remaining_quantity: number;
-    purchase_date: string;
-    status: LotStatus;
-    avg_rate: number;
-}
-
-export interface Payment {
-    mode: PaymentMode;
-    amount: number;
-    reference?: string;
-}
-
-export interface Expenses {
-    cess_percent: number;
-    cess_amount: number;
-    adat_percent: number;
-    adat_amount: number;
-    poti_rate: number;
-    poti_amount: number;
-    hamali_per_poti: number;
-    hamali_amount: number;
-    packaging_hamali_per_poti: number;
-    packaging_hamali_amount: number;
-    gaadi_bharni: number;
-}
-
-export interface TransactionItem {
-    id: string;
-    mirchi_type_id: string;
-    mirchi_name?: string;
-    quality: string;
-    lot_id?: string; // Optional for Jawaak (created auto), Required for Awaak
-    poti_weights: number[]; // Array of weights [10, 20, 30]
-    gross_weight: number;
-    poti_count: number;
-    total_potya: number; // Deduction
-    net_weight: number;
-    rate_per_kg: number;
-    item_total: number;
-}
-
-export interface Transaction {
-    id: string;
-    bill_number: string;
-    bill_date: string;
-    bill_type: BillType;
-    is_return: boolean; // True for Purchase Return or Sales Return
-    party_id: string;
-    party_name?: string;
-    items: TransactionItem[];
-    expenses: Expenses;
-    payments: Payment[];
-
-    // Totals
-    gross_weight_total: number;
-    net_weight_total: number;
-    subtotal: number;
-    total_expenses: number;
-    total_amount: number;
-    paid_amount: number;
-    balance_amount: number;
-
-    created_at?: string;
-    updated_at?: string;
+// Enums
+// NOTE:
+// - AWAAK  = Purchase (Incoming stock)
+// - JAWAAK = Sale     (Outgoing stock)
+export enum BillType {
+    JAWAAK = 'jawaak', // Sale / Outgoing
+    AWAAK = 'awaak'    // Purchase / Incoming
+}
+
+export enum PartyType {
+    JAWAAK = 'jawaak',
+    AWAAK = 'awaak',
+    BOTH = 'both'
+}
+
+export enum PaymentMode {
+    CASH = 'cash',
+    ONLINE = 'online',
+    CHEQUE = 'cheque',
+    DUE = 'due'
+}
+
+export enum LotStatus {
+    ACTIVE = 'active',
+    SOLD_OUT = 'sold_out'
+}
+
+// API Response Wrapper (Backend Ready)
+export interface ApiResponse<T> {
+    success: boolean;
+    data?: T;
+    message?: string;
+    errors?: string[];
+}
+
+// Interfaces
+export interface Party {
+    id: string;
+    name: string;
+    phone: string;
+    city: string;
+    party_type: PartyType;
+    current_balance: number; // +ve = They owe us, -ve = We owe them
+}
+
+export interface MirchiType {
+    id: string;
+    name: string;
+    current_rate: number;
+}
+
+export interface Lot {
+    id: string;
+    lot_number: string;
+    mirchi_type_id: string;
+    mirchi_name: string; // Denormalized for display
+    total_quantity: number;
+    remaining_quantity: number;
+    purchase_date: string;
+    status: LotStatus;
+    avg_rate: number;
+}
+
+export interface Payment {
+    mode: PaymentMode;
+    amount: number;
+    reference?: string;
+}
+
+export interface Expenses {
+    cess_percent: number;
+    cess_amount: number;
+    adat_percent: number;
+    adat_amount: number;
+    poti_rate: number;
+    poti_amount: number;
+    hamali_per_poti: number;
+    hamali_amount: number;
+    packaging_hamali_per_poti: number;
+    packaging_hamali_amount: number;
+    gaadi_bharni: number;
+    other_expenses: number;
+}
+
+export interface TransactionItem {
+    id: string;
+    mirchi_type_id: string;
+    mirchi_name?: string;
+    quality: string;
+    lot_id?: string; // Optional for Jawaak (created auto), Required for Awaak
+    poti_weights: number[]; // Array of weights [10, 20, 30]
+    gross_weight: number;
+    poti_count: number;
+    total_potya: number; // Deduction
+    net_weight: number;
+    rate_per_kg: number;
+    item_total: number;
+}
+
+export interface Transaction {
+    id: string;
+    bill_number: string;
+    bill_date: string;
+    bill_type: BillType;
+    is_return: boolean; // True for Purchase Return or Sales Return
+    party_id: string;
+    party_name?: string;
+    items: TransactionItem[];
+    expenses: Expenses;
+    payments: Payment[];
+
+    // Totals
+    gross_weight_total: number;
+    net_weight_total: number;
+    subtotal: number;
+    total_expenses: number;
+    total_amount: number;
+    paid_amount: number;
+    balance_amount: number;
+
+    created_at?: string;
+    updated_at?: string;
 }