Upload 29 files

.dockerignore

@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+build/
+
+# Environment files (will be set in HF Spaces)
+.env.local
+.env.development
+
+# Git
+.git/
+.gitignore
+
+# Logs
+*.log
+npm-debug.log*
+
+# IDE
+.vscode/
+.idea/
+
+# Test files
+*.test.ts
+*.test.tsx
+__tests__/
+
+# Documentation
+README.md
+docs/

.env

@@ -0,0 +1,4 @@
+# Environment Variables
+
+# Backend API URL
+VITE_API_URL=https://antaram-pattanshettybackend.hf.space/api

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* 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

@@ -0,0 +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?

App.tsx

@@ -0,0 +1,44 @@
+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';
+
+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 (
+    <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>
+    </HashRouter>
+  );
+};
+
+export default App;

Dockerfile

@@ -0,0 +1,33 @@
+# Multi-stage build for Vite React app
+
+# Stage 1: Build
+FROM node:18-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Stage 2: Serve with nginx
+FROM nginx:alpine
+
+# Copy built files from builder
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose Hugging Face port
+EXPOSE 7860
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

components/Layout.tsx

@@ -0,0 +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>
+    );
+};
+
+export default Layout;

components/PrintInvoice.tsx

@@ -0,0 +1,360 @@
+import React, { useRef } from 'react';
+import { Transaction, BillType } from '../types';
+
+interface PrintInvoiceProps {
+    transaction: Transaction;
+    businessName?: string;
+    businessAddress?: string;
+    businessGSTIN?: string;
+    businessPhone?: string;
+}
+
+const PrintInvoice: React.FC<PrintInvoiceProps> = ({
+    transaction,
+    businessName = 'Pattanshetty Traders',
+    businessAddress = 'Market Yard, Sangli',
+    businessGSTIN = 'GSTIN: 27ABCDE1234F1Z5',
+    businessPhone = 'फोन: 98765 43210'
+}) => {
+    const printRef = useRef<HTMLDivElement>(null);
+
+    // Debug logging
+    React.useEffect(() => {
+        console.log('PrintInvoice - Transaction:', transaction);
+        console.log('PrintInvoice - Items count:', transaction.items?.length);
+        console.log('PrintInvoice - Items:', transaction.items);
+    }, [transaction]);
+
+    const handlePrint = () => {
+        const printContent = printRef.current;
+        if (!printContent) return;
+
+        const printWindow = window.open('', '', 'width=800,height=600');
+        if (!printWindow) return;
+
+        printWindow.document.write(`
+            <!DOCTYPE html>
+            <html>
+            <head>
+                <title>Invoice - ${transaction.bill_number}</title>
+                <style>
+                    @media print {
+                        @page {
+                            size: A4;
+                            margin: 10mm 8mm;
+                        }
+                        body {
+                            margin: 0;
+                            padding: 0;
+                        }
+                    }
+                    * {
+                        margin: 0;
+                        padding: 0;
+                        box-sizing: border-box;
+                    }
+                    body {
+                        font-family: Arial, sans-serif;
+                        font-size: 11pt;
+                        line-height: 1.3;
+                        color: #000;
+                    }
+                    .invoice-container {
+                        width: 210mm;
+                        height: 148.5mm;
+                        padding: 8mm 10mm;
+                        page-break-after: always;
+                    }
+                    .header {
+                        padding-bottom: 8px;
+                        margin-bottom: 10px;
+                    }
+                    .header-top {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: flex-start;
+                        margin-bottom: 4px;
+                    }
+                    .business-name {
+                        font-size: 16pt;
+                        font-weight: bold;
+                    }
+                    .business-details {
+                        font-size: 9pt;
+                        color: #333;
+                    }
+                    .bill-info {
+                        text-align: right;
+                        font-size: 9pt;
+                    }
+                    .bill-info div {
+                        margin-bottom: 2px;
+                    }
+                    .party-section {
+                        display: flex;
+                        justify-content: space-between;
+                        margin: 8px 0;
+                        padding: 6px 8px;
+                        background-color: #f9f9f9;
+                        border-radius: 4px;
+                        font-size: 9pt;
+                    }
+                    .party-details {
+                        flex: 1;
+                    }
+                    .party-label {
+                        font-weight: bold;
+                        margin-bottom: 2px;
+                        font-size: 10pt;
+                    }
+                    .payment-info {
+                        text-align: right;
+                    }
+                    table {
+                        width: 100%;
+                        border-collapse: collapse;
+                        margin: 6px 0;
+                        font-size: 9pt;
+                    }
+                    th {
+                        background-color: #e8e8e8;
+                        border: 1px solid #333;
+                        padding: 3px 4px;
+                        text-align: left;
+                        font-weight: bold;
+                        font-size: 9pt;
+                    }
+                    td {
+                        border: 1px solid #666;
+                        padding: 3px 4px;
+                        font-size: 9pt;
+                    }
+                    .text-right {
+                        text-align: right;
+                    }
+                    .text-center {
+                        text-align: center;
+                    }
+                    .summary-section {
+                        margin-top: 6px;
+                        display: flex;
+                        justify-content: space-between;
+                        gap: 10px;
+                    }
+                    .summary-left {
+                        flex: 1;
+                        padding: 6px;
+                        background-color: #f9f9f9;
+                        border-radius: 4px;
+                    }
+                    .summary-right {
+                        width: 180px;
+                        border: 1px solid #333;
+                        padding: 6px 8px;
+                        background-color: #fff;
+                    }
+                    .summary-row {
+                        display: flex;
+                        justify-content: space-between;
+                        padding: 2px 0;
+                        font-size: 9pt;
+                    }
+                    .summary-row.total {
+                        border-top: 2px solid #000;
+                        margin-top: 4px;
+                        padding-top: 4px;
+                        font-weight: bold;
+                        font-size: 10pt;
+                    }
+                    .footer {
+                        margin-top: 12px;
+                        font-size: 9pt;
+                        color: #666;
+                    }
+                    .signature {
+                        text-align: right;
+                        margin-top: 20px;
+                        font-size: 10pt;
+                    }
+                </style>
+            </head>
+            <body>
+                ${printContent.innerHTML}
+            </body>
+            </html>
+        `);
+
+        printWindow.document.close();
+        setTimeout(() => {
+            printWindow.print();
+            printWindow.close();
+        }, 250);
+    };
+
+    const formatDate = (dateString: string) => {
+        const date = new Date(dateString);
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    };
+
+    const billTypeLabel = transaction.bill_type === BillType.JAWAAK
+        ? (transaction.is_return ? 'खरेदी परतावा' : 'खरेदी बिल')
+        : (transaction.is_return ? 'विक्री परतावा' : 'विक्री बिल');
+
+    return (
+        <>
+            {/* Hidden print content */}
+            <div style={{ display: 'none' }}>
+                <div ref={printRef} className="invoice-container">
+                    {/* Header */}
+                    <div className="header">
+                        <div className="header-top">
+                            <div>
+                                <div className="business-name">{businessName}</div>
+                                <div className="business-details">{businessAddress} • {businessGSTIN}</div>
+                                <div className="business-details">{businessPhone}</div>
+                            </div>
+                            <div className="bill-info">
+                                <div><strong>बिल दिनांक:</strong> {formatDate(transaction.bill_date)}</div>
+                                <div><strong>बिल प्रकार:</strong> {billTypeLabel}</div>
+                                <div><strong>बिल नंबर:</strong> {transaction.bill_number}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Party Details */}
+                    <div className="party-section">
+                        <div className="party-details">
+                            <div className="party-label">पार्टी माहिती</div>
+                            <div><strong>{transaction.party_name}</strong></div>
+                            <div style={{ fontSize: '9pt', color: '#666' }}>Party ID: {transaction.party_id}</div>
+                        </div>
+                        <div className="payment-info">
+                            <div><strong>दिलेली रक्कम:</strong> ₹{transaction.paid_amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
+                            <div><strong>बाकी रक्कम:</strong> ₹{transaction.balance_amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
+                        </div>
+                    </div>
+
+                    {/* Items Table */}
+                    <table>
+                        <thead>
+                            <tr>
+                                <th className="text-center">#</th>
+                                <th>जात / Particular</th>
+                                <th className="text-center">Lot</th>
+                                <th className="text-center">Bags</th>
+                                <th className="text-right">Gross (kg)</th>
+                                <th className="text-right">Net (kg)</th>
+                                <th className="text-right">Rate (₹)</th>
+                                <th className="text-right">Amount (₹)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {transaction.items && transaction.items.length > 0 ? (
+                                transaction.items.map((item, index) => (
+                                    <tr key={item.id || index}>
+                                        <td className="text-center">{index + 1}</td>
+                                        <td>{item.mirchi_name || 'N/A'}</td>
+                                        <td className="text-center">{item.lot_id ? item.lot_id.substring(0, 8) : '-'}</td>
+                                        <td className="text-center">{item.poti_count || 0}</td>
+                                        <td className="text-right">{(item.gross_weight || 0).toFixed(2)}</td>
+                                        <td className="text-right">{(item.net_weight || 0).toFixed(2)}</td>
+                                        <td className="text-right">{(item.rate_per_kg || 0).toFixed(2)}</td>
+                                        <td className="text-right">₹{(item.item_total || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
+                                    </tr>
+                                ))
+                            ) : (
+                                <tr>
+                                    <td colSpan={8} className="text-center">No items found</td>
+                                </tr>
+                            )}
+                        </tbody>
+                    </table>
+
+                    {/* Summary Section */}
+                    <div className="summary-section">
+                        <div className="summary-left">
+                            <div style={{ fontSize: '10pt', fontWeight: 'bold', marginBottom: '4px' }}>वजन सारांश</div>
+                            <div style={{ fontSize: '9pt' }}>
+                                <div>पोत्या: {transaction.items.reduce((sum, i) => sum + i.poti_count, 0)}</div>
+                                <div>एकूण वजन: {transaction.gross_weight_total.toFixed(2)} kg</div>
+                                <div>निव्वळ वजन: {transaction.net_weight_total.toFixed(2)} kg</div>
+                            </div>
+                        </div>
+                        <div className="summary-right">
+                            <div className="summary-row">
+                                <span>मूळ रक्कम:</span>
+                                <span>₹{transaction.subtotal.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
+                            </div>
+                            {transaction.expenses.cess_amount > 0 && (
+                                <div className="summary-row">
+                                    <span>सेस ({transaction.expenses.cess_percent}%):</span>
+                                    <span>₹{transaction.expenses.cess_amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
+                                </div>
+                            )}
+                            {transaction.expenses.adat_amount > 0 && (
+                                <div className="summary-row">
+                                    <span>अडत ({transaction.expenses.adat_percent}%):</span>
+                                    <span>₹{transaction.expenses.adat_amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
+                                </div>
+                            )}
+                            {transaction.expenses.poti_amount > 0 && (
+                                <div className="summary-row">
+                                    <span>पोती:</span>
+                                    <span>₹{transaction.expenses.poti_amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
+                                </div>
+                            )}
+                            {transaction.expenses.hamali_amount > 0 && (
+                                <div className="summary-row">
+                                    <span>हमाली:</span>
+                                    <span>₹{transaction.expenses.hamali_amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
+                                </div>
+                            )}
+                            {transaction.expenses.packaging_hamali_amount > 0 && (
+                                <div className="summary-row">
+                                    <span>पॅकेजिंग हमाली:</span>
+                                    <span>₹{transaction.expenses.packaging_hamali_amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
+                                </div>
+                            )}
+                            {transaction.expenses.gaadi_bharni > 0 && (
+                                <div className="summary-row">
+                                    <span>गाडी भरणी:</span>
+                                    <span>₹{transaction.expenses.gaadi_bharni.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
+                                </div>
+                            )}
+                            <div className="summary-row total">
+                                <span>एकूण रक्कम:</span>
+                                <span>₹{transaction.total_amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Footer */}
+                    <div className="footer">
+                        नोंद: कृपया माल प्राप्त झाल्यानंतर वजन व रक्कम तपासा. कोणतीही तक्रार 24 तासात नोंदवा.
+                    </div>
+
+                    <div className="signature">
+                        (अधिकृत सही)
+                    </div>
+                </div>
+            </div>
+
+            {/* Print Button */}
+            <button
+                onClick={handlePrint}
+                className="px-3 py-1 border border-teal-600 text-teal-600 rounded-md text-xs font-medium hover:bg-teal-50 transition-colors inline-flex items-center gap-1"
+                title="Print Invoice"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M5 4v3H4a2 2 0 00-2 2v3a2 2 0 002 2h1v2a2 2 0 002 2h6a2 2 0 002-2v-2h1a2 2 0 002-2V9a2 2 0 00-2-2h-1V4a2 2 0 00-2-2H7a2 2 0 00-2 2zm8 0H7v3h6V4zm0 8H7v4h6v-4z" clipRule="evenodd" />
+                </svg>
+                Print
+            </button>
+        </>
+    );
+};
+
+export default PrintInvoice;

index.html

@@ -0,0 +1,61 @@
+<!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="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>
+</body>
+</html>

index.tsx

@@ -0,0 +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>
+);

metadata.json

@@ -0,0 +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": []
+}

nginx.conf

@@ -0,0 +1,27 @@
+server {
+    listen 7860;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Enable gzip compression
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    # Handle client-side routing
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "mirchi-vyapar-manager",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "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

@@ -0,0 +1,681 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+    getParties, getMirchiTypes, generateBillNumber, saveTransaction
+} from '../services/db';
+import {
+    Party, MirchiType, Transaction, TransactionItem, BillType, PaymentMode, PartyType
+} from '../types';
+import { Plus, Trash2, Save, ChevronUp, ChevronDown, RotateCcw } from 'lucide-react';
+import PrintInvoice from '../components/PrintInvoice';
+
+// 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));
+            }}
+            onWheel={e => e.currentTarget.blur()}
+            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 }>({});
+
+    const [expenses, setExpenses] = useState({
+        cess_percent: 2.0,
+        cess_amount: 0,
+        adat_percent: 3.0,
+        adat_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 = 0; // No deduction for Awaak
+        const net = gross; // Net is same as Gross
+        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);
+        }));
+    };
+
+    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 (0 if Return Mode usually, but keeping logic consistent)
+    // Derived Expenses
+    const cessAmt = (subtotal * expenses.cess_percent) / 100;
+    const adatAmt = (subtotal * expenses.adat_percent) / 100;
+    const hamaliAmt = totalPoti * expenses.hamali_per_poti;
+    const totalExp = 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;
+            }
+            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,
+                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. Cess Tax */}
+                <div className="flex justify-between items-center">
+                    <span className="text-gray-600 text-xs">सेस (Cess {expenses.cess_percent}%)</span>
+                    <span className="text-gray-800 font-medium">₹{cessAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 2. 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>
+
+                {/* 3. Poti (Packet) / Bag */}
+                <div className="flex justify-between items-center">
+                    <span className="text-gray-600 text-xs">पोती (Bags)</span>
+                    <span className="text-gray-800 font-medium">{totalPoti}</span>
+                </div>
+
+                {/* 4. Hamali */}
+                <div className="flex justify-between items-center">
+                    <span className="text-gray-600 text-xs">हमाली ({expenses.hamali_per_poti} * {totalPoti})</span>
+                    <span className="text-gray-800 font-medium">₹{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"
+                                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 => handleHybridCashChange(parseFloat(e.target.value) || 0)}
+                                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"
+                                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 => setOnlineAmount(parseFloat(e.target.value) || 0)}
+                                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>
+
+                                <div className="bg-gray-100 px-3 py-1 rounded text-sm font-mono text-gray-600">
+                                    {billDate}
+                                </div>
+                            </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 => handleItemChange(item.id!, 'mirchi_type_id', e.target.value)}
+                                                >
+                                                    <option value="">Select Type</option>
+                                                    {mirchiTypes.map(m => (
+                                                        <option key={m.id} value={m.id}>{m.name}</option>
+                                                    ))}
+                                                </select>
+                                            </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>
+                                            {/* Removed Deduct and Net columns */}
+
+                                            <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()}
+                            <button
+                                onClick={handleSubmit}
+                                disabled={isSubmitting || isOverpaid}
+                                className="w-full mt-6 bg-teal-600 text-white py-3 rounded-lg font-semibold hover:bg-teal-700 flex justify-center items-center gap-2 shadow-lg shadow-teal-100 disabled:opacity-50 disabled:bg-gray-400"
+                            >
+                                <Save size={20} /> {isSubmitting ? 'Saving...' : 'जतन करा (Save)'}
+                            </button>
+                            {savedTransaction && (
+                                <div className="mt-4">
+                                    <PrintInvoice transaction={savedTransaction} />
+                                </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

@@ -0,0 +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>
+    );
+};
+
+export default Dashboard;

pages/JawaakBill.tsx

@@ -0,0 +1,703 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+    getParties, getMirchiTypes, generateBillNumber, saveTransaction
+} from '../services/db';
+import {
+    Party, MirchiType, Transaction, TransactionItem, BillType, PaymentMode, PartyType
+} from '../types';
+import { Plus, Trash2, Save, ChevronUp, ChevronDown, RotateCcw } from 'lucide-react';
+import PrintInvoice from '../components/PrintInvoice';
+
+// 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));
+            }}
+            onWheel={e => e.currentTarget.blur()}
+            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 }>({});
+
+    const [expenses, setExpenses] = useState({
+        cess_percent: 2.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);
+        }));
+    };
+
+    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 (0 if Return Mode usually, but keeping logic consistent)
+    // Derived Expenses
+    const cessAmt = (subtotal * expenses.cess_percent) / 100;
+    const adatAmt = (subtotal * expenses.adat_percent) / 100;
+    const potiAmt = totalPoti * expenses.poti_rate;
+    const hamaliAmt = totalPoti * expenses.hamali_per_poti;
+    const packagingHamaliAmt = totalPoti * expenses.packaging_hamali_per_poti;
+    const totalExp = cessAmt + adatAmt + potiAmt + 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. Cess Tax */}
+                <div className="flex justify-between items-center">
+                    <span className="text-gray-600 text-xs">सेस (Cess {expenses.cess_percent}%)</span>
+                    <span className="text-gray-800 font-medium">₹{cessAmt.toFixed(2)}</span>
+                </div>
+
+                {/* 2. 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>
+
+                {/* 3. Poti (Packet) / Bag */}
+                <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>
+
+                {/* 4. Hamali */}
+                <div className="flex justify-between items-center">
+                    <span className="text-gray-600 text-xs">हमाली ({expenses.hamali_per_poti} * {totalPoti})</span>
+                    <span className="text-gray-800 font-medium">₹{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"
+                                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 => handleHybridCashChange(parseFloat(e.target.value) || 0)}
+                                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"
+                                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 => setOnlineAmount(parseFloat(e.target.value) || 0)}
+                                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>
+
+                                <div className="bg-gray-100 px-3 py-1 rounded text-sm font-mono text-gray-600">
+                                    {billDate}
+                                </div>
+                            </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 => handleItemChange(item.id!, 'mirchi_type_id', e.target.value)}
+                                                >
+                                                    <option value="">Select Type</option>
+                                                    {mirchiTypes.map(m => (
+                                                        <option key={m.id} value={m.id}>{m.name}</option>
+                                                    ))}
+                                                </select>
+                                            </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</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()}
+                            <button
+                                onClick={handleSubmit}
+                                disabled={isSubmitting || isOverpaid}
+                                className="w-full mt-6 bg-teal-600 text-white py-3 rounded-lg font-semibold hover:bg-teal-700 flex justify-center items-center gap-2 shadow-lg shadow-teal-100 disabled:opacity-50 disabled:bg-gray-400"
+                            >
+                                <Save size={20} /> {isSubmitting ? 'Saving...' : 'जतन करा (Save)'}
+                            </button>
+                            {savedTransaction && (
+                                <div className="mt-4">
+                                    <PrintInvoice transaction={savedTransaction} />
+                                </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

@@ -0,0 +1,596 @@
+import React, { useEffect, useState } 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';
+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())
+        : [];
+
+    // Calculate Totals for List View
+    const getPartyStats = (partyId: string) => {
+        const txs = transactions.filter(t => t.party_id === partyId);
+        const totalBill = txs.reduce((sum, t) => sum + t.total_amount, 0);
+        const totalPaid = txs.reduce((sum, t) => sum + t.paid_amount, 0);
+        // Balance is directly from party object for accuracy, or calculated? 
+        // Using party.current_balance is better as it's the source of truth for ledger
+        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 && (
+                                <button
+                                    onClick={() => {
+                                        const selected = partyTransactions.filter(t => selectedTransactions.includes(t.id));
+                                        if (selected.length > 0) {
+                                            // Create combined transaction for printing
+                                            const combinedTransaction = {
+                                                ...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),
+                                            };
+                                            // Trigger print for combined transaction
+                                            const printComponent = document.createElement('div');
+                                            document.body.appendChild(printComponent);
+                                            // Use PrintInvoice component
+                                            import('../components/PrintInvoice').then(({ default: PrintInvoice }) => {
+                                                const React = require('react');
+                                                const ReactDOM = require('react-dom/client');
+                                                const root = ReactDOM.createRoot(printComponent);
+                                                root.render(React.createElement(PrintInvoice, { transaction: combinedTransaction }));
+                                                setTimeout(() => {
+                                                    const printBtn = printComponent.querySelector('button');
+                                                    if (printBtn) printBtn.click();
+                                                    setTimeout(() => {
+                                                        root.unmount();
+                                                        document.body.removeChild(printComponent);
+                                                    }, 1000);
+                                                }, 500);
+                                            });
+                                        }
+                                    }}
+                                    className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors flex items-center gap-2"
+                                >
+                                    <Printer size={18} />
+                                    Print {selectedTransactions.length} Selected
+                                </button>
+                            )}
+                            <button
+                                onClick={() => exportPartyLedger(selectedParty, partyTransactions)}
+                                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center gap-2"
+                            >
+                                <Download size={18} />
+                                Export to Excel
+                            </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">City</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-gray-500">{party.city}</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={6} 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>
+                                                    <p className="text-xs text-gray-500">{party.city}</p>
+                                                </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}</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 => i.mirchi_name).join(', ')}
+                                                </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">
+                                                    <PrintInvoice transaction={tx} />
+                                                </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>
+                                                <div className="text-xs text-gray-500">{tx.bill_date}</div>
+                                                <div className="font-mono text-sm font-medium text-gray-800">{tx.bill_number}</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 => i.mirchi_name).join(', ')}
+                                        </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">
+                                            <PrintInvoice transaction={tx} />
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="p-8 text-center text-gray-500">
+                                    No transactions found.
+                                </div>
+                            )}
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default PartyLedger;

pages/Settings.tsx

@@ -0,0 +1,340 @@
+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';
+
+const Settings = () => {
+    const [activeTab, setActiveTab] = useState<'parties' | 'mirchi' | 'general'>('parties');
+    const [parties, setParties] = useState<Party[]>([]);
+    const [mirchiTypes, setMirchiTypes] = useState<MirchiType[]>([]);
+
+    // PWA Install
+    const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
+    const [isInstallable, setIsInstallable] = useState(false);
+
+    // 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();
+
+        // Listen for PWA install prompt
+        const handleBeforeInstallPrompt = (e: any) => {
+            e.preventDefault();
+            setDeferredPrompt(e);
+            setIsInstallable(true);
+        };
+
+        window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+
+        return () => {
+            window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+        };
+    }, []);
+
+    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 () => {
+        if (!deferredPrompt) return;
+
+        deferredPrompt.prompt();
+        const { outcome } = await deferredPrompt.userChoice;
+
+        if (outcome === 'accepted') {
+            console.log('✅ PWA installed');
+        }
+
+        setDeferredPrompt(null);
+        setIsInstallable(false);
+    };
+
+    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

@@ -0,0 +1,416 @@
+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 aggregatedByMirchi = useMemo(() => {
+        const map = new Map<string, { mirchiId: string; mirchiName: string; totalQty: number; remainingQty: number }>();
+
+        filteredLots.forEach((lot) => {
+            const key = lot.mirchi_type_id;
+            const existing = map.get(key) || {
+                mirchiId: lot.mirchi_type_id,
+                mirchiName: lot.mirchi_name,
+                totalQty: 0,
+                remainingQty: 0,
+            };
+            existing.totalQty += lot.total_quantity;
+            existing.remainingQty += lot.remaining_quantity;
+            map.set(key, existing);
+        });
+
+        return Array.from(map.values());
+    }, [filteredLots]);
+
+    const detailMovements = useMemo(() => {
+        if (!selectedMirchiId) return [];
+
+        const rows: {
+            id: string;
+            date: string;
+            billNo: string;
+            partyName: string;
+            inQty: number;
+            outQty: number;
+            typeLabel: string;
+            isReturn: boolean;
+        }[] = [];
+
+        transactions.forEach((tx) => {
+            tx.items
+                .filter((item) => item.mirchi_type_id === selectedMirchiId)
+                .forEach((item) => {
+                    const party = parties.find((p) => p.id === tx.party_id);
+                    let inQty = 0;
+                    let outQty = 0;
+                    let typeLabel = '';
+
+                    if (tx.bill_type === BillType.JAWAAK) {
+                        // Jawaak = Purchase / Stock IN
+                        if (tx.is_return) {
+                            // Purchase Return: Stock OUT
+                            outQty = item.net_weight;
+                            typeLabel = 'Purchase Return';
+                        } else {
+                            inQty = item.net_weight;
+                            typeLabel = 'Purchase';
+                        }
+                    } else {
+                        // Awaak = Sales / Stock OUT
+                        if (tx.is_return) {
+                            // Sales Return: Stock IN
+                            inQty = item.net_weight;
+                            typeLabel = 'Sales Return';
+                        } else {
+                            outQty = item.net_weight;
+                            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,
+                        typeLabel,
+                        isReturn: tx.is_return,
+                    });
+                });
+        });
+
+        // Sort latest first
+        rows.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+        return rows;
+    }, [selectedMirchiName, 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">मिरची जात (Mirchi Type)</th>
+                                        <th className="px-6 py-4 text-right">एकूण क्वांटिटी (Total Qty)</th>
+                                        <th className="px-6 py-4 text-right">शिल्लक (Remaining)</th>
+                                        <th className="px-6 py-4 text-center">स्थिती (Status)</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {aggregatedByMirchi.length === 0 ? (
+                                        <tr>
+                                            <td
+                                                colSpan={4}
+                                                className="text-center py-8 text-gray-500"
+                                            >
+                                                No active stock found
+                                            </td>
+                                        </tr>
+                                    ) : (
+                                        aggregatedByMirchi.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.mirchiId}
+                                                    className="hover:bg-gray-50 transition-colors cursor-pointer"
+                                                    onClick={() => {
+                                                        setSelectedMirchiId(row.mirchiId);
+                                                        setSelectedMirchiName(row.mirchiName);
+                                                        setViewMode('detail');
+                                                    }}
+                                                >
+                                                    <td className="px-6 py-4 font-medium text-teal-700">
+                                                        {row.mirchiName}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        {row.totalQty} kg
+                                                    </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">
+                            {aggregatedByMirchi.length === 0 ? (
+                                <div className="p-6 text-center text-gray-500 text-sm">
+                                    No active stock found
+                                </div>
+                            ) : (
+                                aggregatedByMirchi.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.mirchiName}
+                                            className="text-left p-4 space-y-2 hover:bg-gray-50 transition-colors"
+                                            onClick={() => {
+                                                setSelectedMirchiId(row.mirchiId);
+                                                setSelectedMirchiName(row.mirchiName);
+                                                setViewMode('detail');
+                                            }}
+                                        >
+                                            <div className="flex items-center justify-between gap-2">
+                                                <div>
+                                                    <div className="text-sm font-semibold text-gray-900">
+                                                        {row.mirchiName}
+                                                    </div>
+                                                    <div className="text-xs text-gray-500">
+                                                        Mirchi Jaat / Type
+                                                    </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 mt-1">
+                                                <div className="bg-gray-50 p-2 rounded">
+                                                    <div className="text-gray-500">Total Qty</div>
+                                                    <div className="font-medium">{row.totalQty} kg</div>
+                                                </div>
+                                                <div className="bg-gray-50 p-2 rounded">
+                                                    <div className="text-gray-500">Remaining</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 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={6} 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-800">{row.partyName}</td>
+                                                <td className="px-6 py-4 text-right text-green-700 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;

public/manifest.json

@@ -0,0 +1,52 @@
+{
+    "name": "Pattanshetty Inventory",
+    "short_name": "Pattanshetty",
+    "description": "Inventory Management System for Mirchi Trading",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#f9fafb",
+    "theme_color": "#0d9488",
+    "orientation": "portrait-primary",
+    "icons": [
+        {
+            "src": "/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any maskable"
+        },
+        {
+            "src": "/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any maskable"
+        }
+    ],
+    "categories": [
+        "business",
+        "productivity"
+    ],
+    "screenshots": [],
+    "shortcuts": [
+        {
+            "name": "New Purchase Bill",
+            "short_name": "Purchase",
+            "description": "Create new purchase bill",
+            "url": "/awaak",
+            "icons": []
+        },
+        {
+            "name": "New Sales Bill",
+            "short_name": "Sales",
+            "description": "Create new sales bill",
+            "url": "/jawaak",
+            "icons": []
+        },
+        {
+            "name": "Party Ledger",
+            "short_name": "Ledger",
+            "description": "View party ledger",
+            "url": "/ledger",
+            "icons": []
+        }
+    ]
+}

public/service-worker.js

@@ -0,0 +1,68 @@
+const CACHE_NAME = 'pattanshetty-v1';
+const urlsToCache = [
+    '/',
+    '/index.html',
+    '/src/main.tsx',
+    '/src/App.tsx',
+];
+
+// Install event - cache resources
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then((cache) => {
+                console.log('Opened cache');
+                return cache.addAll(urlsToCache);
+            })
+    );
+    self.skipWaiting();
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        console.log('Deleting old cache:', cacheName);
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        })
+    );
+    self.clients.claim();
+});
+
+// Fetch event - serve from cache, fallback to network
+self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        caches.match(event.request)
+            .then((response) => {
+                // Cache hit - return response
+                if (response) {
+                    return response;
+                }
+
+                return fetch(event.request).then(
+                    (response) => {
+                        // Check if valid response
+                        if (!response || response.status !== 200 || response.type !== 'basic') {
+                            return response;
+                        }
+
+                        // Clone the response
+                        const responseToCache = response.clone();
+
+                        caches.open(CACHE_NAME)
+                            .then((cache) => {
+                                cache.put(event.request, responseToCache);
+                            });
+
+                        return response;
+                    }
+                );
+            })
+    );
+});

services/db.ts

@@ -0,0 +1,274 @@
+import {
+    Party, MirchiType, Lot, Transaction, TransactionItem, PartyType,
+    LotStatus, BillType, ApiResponse, PaymentMode
+} from '../types';
+
+const API_BASE = import.meta.env.VITE_API_URL || '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 [];
+    }
+};
+
+// 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

@@ -0,0 +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
+  }
+}

types.ts

@@ -0,0 +1,122 @@
+// 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;
+}

utils/exportToExcel.ts

@@ -0,0 +1,205 @@
+import * as XLSX from 'xlsx';
+import { Transaction, Party } from '../types';
+
+/**
+ * Export party ledger to Excel
+ */
+export const exportPartyLedger = (
+    party: Party,
+    transactions: Transaction[],
+    dateRange?: { from: string; to: string }
+) => {
+    // Filter transactions by date range if provided
+    const filteredTransactions = dateRange
+        ? transactions.filter(t => {
+            const txDate = new Date(t.bill_date);
+            return txDate >= new Date(dateRange.from) && txDate <= new Date(dateRange.to);
+        })
+        : transactions;
+
+    // Prepare data for Excel
+    const data = filteredTransactions.map(tx => ({
+        'Date': new Date(tx.bill_date).toLocaleDateString('en-IN'),
+        'Bill Number': tx.bill_number,
+        'Type': tx.bill_type.toUpperCase(),
+        'Return': tx.is_return ? 'Yes' : 'No',
+        'Items': tx.items.map(i => i.mirchi_name).join(', '),
+        'Gross Weight (kg)': tx.gross_weight_total.toFixed(2),
+        'Net Weight (kg)': tx.net_weight_total.toFixed(2),
+        'Subtotal (₹)': tx.subtotal.toFixed(2),
+        'Expenses (₹)': tx.total_expenses.toFixed(2),
+        'Total Amount (₹)': tx.total_amount.toFixed(2),
+        'Paid (₹)': tx.paid_amount.toFixed(2),
+        'Balance (₹)': tx.balance_amount.toFixed(2),
+    }));
+
+    // Add summary row
+    const totalAmount = filteredTransactions.reduce((sum, tx) => sum + tx.total_amount, 0);
+    const totalPaid = filteredTransactions.reduce((sum, tx) => sum + tx.paid_amount, 0);
+    const totalBalance = filteredTransactions.reduce((sum, tx) => sum + tx.balance_amount, 0);
+
+    data.push({
+        'Date': '',
+        'Bill Number': '',
+        'Type': '',
+        'Return': '',
+        'Items': 'TOTAL',
+        'Gross Weight (kg)': '',
+        'Net Weight (kg)': '',
+        'Subtotal (₹)': '',
+        'Expenses (₹)': '',
+        'Total Amount (₹)': totalAmount.toFixed(2),
+        'Paid (₹)': totalPaid.toFixed(2),
+        'Balance (₹)': totalBalance.toFixed(2),
+    } as any);
+
+    // Create worksheet
+    const ws = XLSX.utils.json_to_sheet(data);
+
+    // Set column widths
+    ws['!cols'] = [
+        { wch: 12 }, // Date
+        { wch: 20 }, // Bill Number
+        { wch: 10 }, // Type
+        { wch: 8 },  // Return
+        { wch: 30 }, // Items
+        { wch: 15 }, // Gross Weight
+        { wch: 15 }, // Net Weight
+        { wch: 15 }, // Subtotal
+        { wch: 15 }, // Expenses
+        { wch: 15 }, // Total Amount
+        { wch: 15 }, // Paid
+        { wch: 15 }, // Balance
+    ];
+
+    // Create workbook
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Ledger');
+
+    // Add party info sheet
+    const partyInfo = [
+        { Field: 'Party Name', Value: party.name },
+        { Field: 'Phone', Value: party.phone || '-' },
+        { Field: 'City', Value: party.city || '-' },
+        { Field: 'Type', Value: party.party_type },
+        { Field: 'Current Balance', Value: `₹${party.current_balance.toFixed(2)}` },
+        { Field: '', Value: '' },
+        { Field: 'Export Date', Value: new Date().toLocaleString('en-IN') },
+        { Field: 'Total Transactions', Value: filteredTransactions.length.toString() },
+    ];
+    const wsInfo = XLSX.utils.json_to_sheet(partyInfo);
+    XLSX.utils.book_append_sheet(wb, wsInfo, 'Party Info');
+
+    // Generate filename
+    const filename = `${party.name.replace(/\s+/g, '_')}_Ledger_${new Date().toISOString().split('T')[0]}.xlsx`;
+
+    // Download file
+    XLSX.writeFile(wb, filename);
+};
+
+/**
+ * Export all parties to Excel
+ */
+export const exportAllParties = (parties: Party[]) => {
+    const data = parties.map(p => ({
+        'Party Name': p.name,
+        'Phone': p.phone || '-',
+        'City': p.city || '-',
+        'Type': p.party_type.toUpperCase(),
+        'Current Balance (₹)': p.current_balance.toFixed(2),
+        'Status': p.current_balance > 0 ? 'Receivable' : p.current_balance < 0 ? 'Payable' : 'Settled',
+    }));
+
+    // Add summary
+    const totalReceivable = parties.filter(p => p.current_balance > 0).reduce((sum, p) => sum + p.current_balance, 0);
+    const totalPayable = parties.filter(p => p.current_balance < 0).reduce((sum, p) => sum + Math.abs(p.current_balance), 0);
+
+    data.push({
+        'Party Name': '',
+        'Phone': '',
+        'City': '',
+        'Type': 'SUMMARY',
+        'Current Balance (₹)': '',
+        'Status': '',
+    } as any);
+
+    data.push({
+        'Party Name': '',
+        'Phone': '',
+        'City': '',
+        'Type': 'Total Receivable',
+        'Current Balance (₹)': totalReceivable.toFixed(2),
+        'Status': '',
+    } as any);
+
+    data.push({
+        'Party Name': '',
+        'Phone': '',
+        'City': '',
+        'Type': 'Total Payable',
+        'Current Balance (₹)': totalPayable.toFixed(2),
+        'Status': '',
+    } as any);
+
+    const ws = XLSX.utils.json_to_sheet(data);
+    ws['!cols'] = [
+        { wch: 30 }, // Party Name
+        { wch: 15 }, // Phone
+        { wch: 20 }, // City
+        { wch: 15 }, // Type
+        { wch: 20 }, // Balance
+        { wch: 15 }, // Status
+    ];
+
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'All Parties');
+
+    const filename = `All_Parties_${new Date().toISOString().split('T')[0]}.xlsx`;
+    XLSX.writeFile(wb, filename);
+};
+
+/**
+ * Export all transactions to Excel
+ */
+export const exportAllTransactions = (
+    transactions: Transaction[],
+    dateRange?: { from: string; to: string }
+) => {
+    const filteredTransactions = dateRange
+        ? transactions.filter(t => {
+            const txDate = new Date(t.bill_date);
+            return txDate >= new Date(dateRange.from) && txDate <= new Date(dateRange.to);
+        })
+        : transactions;
+
+    const data = filteredTransactions.map(tx => ({
+        'Date': new Date(tx.bill_date).toLocaleDateString('en-IN'),
+        'Bill Number': tx.bill_number,
+        'Party': tx.party_name,
+        'Type': tx.bill_type.toUpperCase(),
+        'Return': tx.is_return ? 'Yes' : 'No',
+        'Items': tx.items.map(i => `${i.mirchi_name} (${i.net_weight}kg)`).join(', '),
+        'Total Amount (₹)': tx.total_amount.toFixed(2),
+        'Paid (₹)': tx.paid_amount.toFixed(2),
+        'Balance (₹)': tx.balance_amount.toFixed(2),
+    }));
+
+    const ws = XLSX.utils.json_to_sheet(data);
+    ws['!cols'] = [
+        { wch: 12 },
+        { wch: 20 },
+        { wch: 25 },
+        { wch: 10 },
+        { wch: 8 },
+        { wch: 40 },
+        { wch: 15 },
+        { wch: 15 },
+        { wch: 15 },
+    ];
+
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Transactions');
+
+    const filename = `All_Transactions_${new Date().toISOString().split('T')[0]}.xlsx`;
+    XLSX.writeFile(wb, filename);
+};

vite.config.ts

@@ -0,0 +1,29 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, '.', '');
+  return {
+    server: {
+      port: 3000,
+      host: '0.0.0.0',
+    },
+    preview: {
+      port: 7860,
+      host: '0.0.0.0',
+    },
+    plugins: [react()],
+    define: {
+      'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+      'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+      // Expose VITE_ prefixed env variables
+      'import.meta.env.VITE_API_URL': JSON.stringify(env.VITE_API_URL)
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      }
+    }
+  };
+});