Upload 49 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

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "pattanshetti-03-12"
+  }
+}

.gitattributes

@@ -1,35 +1,39 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+public/icon-192.png filter=lfs diff=lfs merge=lfs -text
+public/icon-512.png filter=lfs diff=lfs merge=lfs -text
+dist/icon-192.png filter=lfs diff=lfs merge=lfs -text
+dist/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,51 @@
+import React, { useEffect } from 'react';
+import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
+import Layout from './components/Layout';
+import Dashboard from './pages/Dashboard';
+import JawaakBill from './pages/JawaakBill';
+import AwaakBill from './pages/AwaakBill';
+import StockReport from './pages/StockReport';
+import PartyLedger from './pages/PartyLedger';
+import Settings from './pages/Settings';
+import Analysis from './pages/Analysis';
+import PWAInstallPrompt from './components/PWAInstallPrompt';
+import { PWAProvider } from './context/PWAContext';
+
+const App = () => {
+  // Register Service Worker for PWA
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/service-worker.js')
+          .then(registration => {
+            console.log('✅ PWA Service Worker registered:', registration);
+          })
+          .catch(error => {
+            console.log('❌ SW registration failed:', error);
+          });
+      });
+    }
+  }, []);
+
+  return (
+    <PWAProvider>
+      <HashRouter>
+        <Layout>
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/jawaak" element={<JawaakBill />} />
+            <Route path="/awaak" element={<AwaakBill />} />
+            <Route path="/stock" element={<StockReport />} />
+            <Route path="/ledger" element={<PartyLedger />} />
+            <Route path="/analysis" element={<Analysis />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Layout>
+        <PWAInstallPrompt />
+      </HashRouter>
+    </PWAProvider>
+  );
+};
+
+export default App;

DEPLOYMENT.md

@@ -0,0 +1,38 @@
+# Hugging Face Spaces Deployment
+
+## Frontend Dockerfile
+
+Simple Dockerfile for deploying the React frontend to Hugging Face Spaces.
+
+### Build & Run Locally
+
+```bash
+# Build the Docker image
+docker build -t pattanshetty-frontend .
+
+# Run the container
+docker run -p 7860:7860 pattanshetty-frontend
+```
+
+### Deploy to Hugging Face Spaces
+
+1. Create a new Space on Hugging Face
+2. Choose "Docker" as the SDK
+3. Upload the entire `frontend` folder
+4. The Dockerfile will automatically build and deploy
+
+### Port Configuration
+
+- **Port 7860** - Hugging Face Spaces default port
+- The app will be accessible at your Space URL
+
+### Environment Variables
+
+If you need to set environment variables (like API URL), create a `.env` file or set them in Hugging Face Spaces settings.
+
+### Notes
+
+- Uses `npm run preview` which serves the production build
+- No nginx needed - Vite's preview server handles everything
+- Lightweight Alpine Linux base image
+- Production-ready build

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy all files
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Expose port 7860 (Hugging Face Spaces default)
+EXPOSE 7860
+
+# Start the preview server
+CMD ["npm", "run", "preview", "--", "--port", "7860", "--host", "0.0.0.0"]

components/Layout.tsx

@@ -0,0 +1,124 @@
+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: '/analysis', label: 'अ‍ॅनालिसीस (Analysis)', icon: TrendingUp },
+        { 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/PWAInstallPrompt.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import { Download, X } from 'lucide-react';
+import { usePWA } from '../context/PWAContext';
+
+const PWAInstallPrompt: React.FC = () => {
+    const { deferredPrompt, isInstallable, isIOS, isStandalone, installApp } = usePWA();
+    const [showInstallPrompt, setShowInstallPrompt] = useState(false);
+
+    useEffect(() => {
+        // Show install prompt if installable and not already installed
+        if (isInstallable && !isStandalone) {
+            setShowInstallPrompt(true);
+        }
+
+        // For iOS, show prompt if not installed
+        if (isIOS && !isStandalone) {
+            setShowInstallPrompt(true);
+        }
+    }, [isInstallable, isStandalone, isIOS]);
+
+    const handleInstallClick = async () => {
+        if (isIOS) {
+            // iOS doesn't support programmatic install, show instructions
+            return;
+        }
+
+        await installApp();
+        setShowInstallPrompt(false);
+    };
+
+    const handleDismiss = () => {
+        setShowInstallPrompt(false);
+        // Remember dismissal for 7 days
+        localStorage.setItem('pwa-install-dismissed', Date.now().toString());
+    };
+
+    // Don't show if already installed
+    if (isStandalone) {
+        return null;
+    }
+
+    // Check if dismissed recently (within 7 days)
+    const dismissedTime = localStorage.getItem('pwa-install-dismissed');
+    if (dismissedTime) {
+        const daysSinceDismissed = (Date.now() - parseInt(dismissedTime)) / (1000 * 60 * 60 * 24);
+        if (daysSinceDismissed < 7) {
+            return null;
+        }
+    }
+
+    if (!showInstallPrompt) {
+        return null;
+    }
+
+    return (
+        <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white rounded-lg shadow-2xl border-2 border-teal-600 p-4 z-50 animate-slide-up">
+            <button
+                onClick={handleDismiss}
+                className="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
+            >
+                <X size={20} />
+            </button>
+
+            <div className="flex items-start gap-3">
+                <div className="p-2 bg-teal-100 rounded-lg">
+                    <Download className="text-teal-600" size={24} />
+                </div>
+                <div className="flex-1">
+                    <h3 className="font-bold text-gray-900 mb-1">Install App</h3>
+                    {isIOS ? (
+                        <div className="text-sm text-gray-600">
+                            <p className="mb-2">Install this app on your iPhone:</p>
+                            <ol className="list-decimal list-inside space-y-1 text-xs">
+                                <li>Tap the Share button <span className="inline-block">⎋</span></li>
+                                <li>Scroll and tap "Add to Home Screen"</li>
+                                <li>Tap "Add" in the top right</li>
+                            </ol>
+                        </div>
+                    ) : (
+                        <>
+                            <p className="text-sm text-gray-600 mb-3">
+                                Install our app for a better experience and offline access!
+                            </p>
+                            <button
+                                onClick={handleInstallClick}
+                                className="w-full bg-teal-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-teal-700 transition-colors"
+                            >
+                                Install Now
+                            </button>
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PWAInstallPrompt;

components/PdfInvoice.tsx

@@ -0,0 +1,219 @@
+import React, { useState } from 'react';
+import { Transaction } from '../types';
+import { Download, X, Eye } from 'lucide-react';
+import jsPDF from 'jspdf';
+import 'jspdf-autotable';
+
+interface PdfInvoiceProps {
+    transaction: Transaction;
+    className?: string;
+    children?: React.ReactNode;
+}
+
+const PdfInvoice: React.FC<PdfInvoiceProps> = ({ transaction, className, children }) => {
+    const [showPreview, setShowPreview] = useState(false);
+    const [pdfUrl, setPdfUrl] = useState<string>('');
+
+    const formatINR = (v: number) => `₹${v.toFixed(2)}`;
+    const formatDate = (dateStr: string) => {
+        const date = new Date(dateStr);
+        return date.toLocaleDateString('en-IN', { day: '2-digit', month: '2-digit', year: 'numeric' });
+    };
+
+    const generatePDF = (download: boolean = false) => {
+        const doc = new jsPDF();
+
+        const subtotal = transaction.subtotal || 0;
+        const packing = transaction.expenses?.poti_amount || 0;
+        const cess = transaction.expenses?.cess_amount || 0;
+        const adat = transaction.expenses?.adat_amount || 0;
+        const hamali = (transaction.expenses?.hamali_amount || 0) + (transaction.expenses?.packaging_hamali_amount || 0);
+        const grandTotal = transaction.total_amount || 0;
+        const paidAmount = transaction.paid_amount || 0;
+        const balanceAmount = transaction.balance_amount || 0;
+
+        // Header - Invoice Date on left, Bill No on right
+        doc.setFontSize(13);
+        doc.setFont('helvetica', 'bold');
+        doc.text(`Invoice Date: ${formatDate(transaction.bill_date)}`, 14, 15);
+        doc.text(`Bill No: ${transaction.bill_number}`, 196, 15, { align: 'right' });
+
+        // Party Details Section - LEFT ALIGNED
+        doc.setFontSize(11);
+        doc.setFont('helvetica', 'bold');
+        doc.text('Party Details', 14, 25);
+        doc.setLineWidth(0.5);
+        doc.line(14, 26, 55, 26);
+
+        // Party info - explicitly left aligned at x=14
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(9);
+
+        const partyName = transaction.party_name || '-';
+        const partyCity = transaction.party_city || '-';
+        const partyPhone = transaction.party_phone || '-';
+
+        doc.text(`Name: ${partyName}`, 14, 31, { align: 'left' });
+        doc.text(`Place: ${partyCity}`, 14, 36, { align: 'left' });
+        doc.text(`Mobile: ${partyPhone}`, 14, 41, { align: 'left' });
+
+        // Items Table
+        const tableData = transaction.items.map((item, idx) => {
+            const potiWeights = Array.isArray(item.poti_weights) ? item.poti_weights.join(', ') : (typeof item.poti_weights === 'string' ? item.poti_weights : '-');
+            const amount = item.net_weight * item.rate_per_kg;
+            return [idx + 1, `${item.mirchi_name}\n${potiWeights}`, item.poti_count, item.net_weight, item.rate_per_kg, formatINR(amount)];
+        });
+
+        (doc as any).autoTable({
+            startY: 47,
+            head: [['#', 'Product Type', 'Bags', 'Net (kg)', 'Rate (₹)', 'Amount (₹)']],
+            body: tableData,
+            theme: 'grid',
+            styles: { fontSize: 8, cellPadding: 2, lineWidth: 0.5, lineColor: [0, 0, 0] },
+            headStyles: { fillColor: [255, 255, 255], textColor: [0, 0, 0], fontStyle: 'bold' },
+            bodyStyles: { textColor: [0, 0, 0] },
+            columnStyles: {
+                0: { halign: 'center', cellWidth: 10 },
+                1: { halign: 'left', cellWidth: 60 },
+                2: { halign: 'center', cellWidth: 20 },
+                3: { halign: 'center', cellWidth: 25 },
+                4: { halign: 'center', cellWidth: 25 },
+                5: { halign: 'right', cellWidth: 35 }
+            }
+        });
+
+        // Summary Table - Right side
+        const finalY = (doc as any).lastAutoTable.finalY + 5;
+        const summaryData = [
+            ['Sub Total', formatINR(subtotal)],
+            ['Packing', formatINR(packing)],
+            ['CESS', formatINR(cess)],
+            ['Adat', formatINR(adat)],
+            ['Hamali', formatINR(hamali)],
+            ['Total Amount', formatINR(grandTotal)]
+        ];
+
+        (doc as any).autoTable({
+            startY: finalY,
+            body: summaryData,
+            theme: 'grid',
+            styles: { fontSize: 8, cellPadding: 2, lineWidth: 0.5, lineColor: [0, 0, 0] },
+            bodyStyles: { textColor: [0, 0, 0] },
+            columnStyles: {
+                0: { halign: 'left', cellWidth: 50 },
+                1: { halign: 'right', cellWidth: 35 }
+            },
+            margin: { left: 111 }
+        });
+
+        // Payment Status Section - LEFT ALIGNED
+        const paymentY = (doc as any).lastAutoTable.finalY + 10;
+        doc.setFontSize(11);
+        doc.setFont('helvetica', 'bold');
+        doc.text('Payment Status', 14, paymentY, { align: 'left' });
+        doc.setLineWidth(0.5);
+        doc.line(14, paymentY + 1, 60, paymentY + 1);
+
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(9);
+
+        let currentY = paymentY + 6;
+
+        if (transaction.payments && transaction.payments.length > 0) {
+            transaction.payments.forEach((payment) => {
+                const mode = payment.mode === 'cash' ? 'Cash' : payment.mode === 'online' ? 'Online' : payment.mode;
+                doc.text(`${mode}: ${formatINR(payment.amount)}`, 14, currentY, { align: 'left' });
+                currentY += 5;
+            });
+            doc.setFont('helvetica', 'bold');
+            doc.text(`Total Paid: ${formatINR(paidAmount)}`, 14, currentY, { align: 'left' });
+            currentY += 5;
+        } else {
+            doc.text(`Paid Amount: ${formatINR(paidAmount)}`, 14, currentY, { align: 'left' });
+            currentY += 5;
+        }
+
+        if (balanceAmount > 0) {
+            doc.setFont('helvetica', 'bold');
+            doc.setTextColor(211, 47, 47);
+            doc.text(`Due Amount: ${formatINR(balanceAmount)}`, 14, currentY, { align: 'left' });
+            doc.setTextColor(0, 0, 0);
+        }
+
+        // Signature - Right side
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(9);
+        doc.text('(Authorised Signatory)', 196, paymentY + 20, { align: 'right' });
+
+        if (download) {
+            doc.save(`Invoice_${transaction.bill_number}.pdf`);
+        } else {
+            const pdfBlob = doc.output('blob');
+            const url = URL.createObjectURL(pdfBlob);
+            setPdfUrl(url);
+            setShowPreview(true);
+        }
+    };
+
+    const handleDownload = () => {
+        generatePDF(true);
+        setShowPreview(false);
+        if (pdfUrl) {
+            URL.revokeObjectURL(pdfUrl);
+        }
+    };
+
+    const handleClose = () => {
+        setShowPreview(false);
+        if (pdfUrl) {
+            URL.revokeObjectURL(pdfUrl);
+        }
+    };
+
+    return (
+        <>
+            <button
+                onClick={() => generatePDF(false)}
+                className={className || "p-2 bg-white text-red-600 border border-red-600 rounded-md hover:bg-red-50 transition-colors flex items-center justify-center shadow-sm"}
+                title="Preview & Download PDF"
+            >
+                {children || <Eye size={16} />}
+            </button>
+
+            {showPreview && (
+                <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+                    <div className="bg-white rounded-lg shadow-2xl max-w-6xl w-full max-h-[90vh] flex flex-col">
+                        <div className="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
+                            <h2 className="text-xl font-bold text-gray-800">PDF Preview</h2>
+                            <div className="flex gap-2">
+                                <button
+                                    onClick={handleDownload}
+                                    className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2"
+                                >
+                                    <Download size={18} />
+                                    Download PDF
+                                </button>
+                                <button
+                                    onClick={handleClose}
+                                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                                >
+                                    <X size={24} className="text-gray-600" />
+                                </button>
+                            </div>
+                        </div>
+
+                        <div className="flex-1 overflow-auto p-4 bg-gray-100">
+                            <iframe
+                                src={pdfUrl}
+                                className="w-full h-full min-h-[600px] bg-white rounded shadow-lg"
+                                title="PDF Preview"
+                            />
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default PdfInvoice;

components/PrintInvoice.tsx

@@ -0,0 +1,315 @@
+import React, { useState } from 'react';
+import { Transaction } from '../types';
+import { Printer, X } from 'lucide-react';
+
+interface PrintInvoiceProps {
+  transaction: Transaction;
+  className?: string;
+}
+
+const PrintInvoice: React.FC<PrintInvoiceProps> = ({ transaction, className }) => {
+  const [showPreview, setShowPreview] = useState(false);
+
+  const formatINR = (v: number) => `₹${v.toFixed(2)}`;
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-IN', { day: '2-digit', month: '2-digit', year: 'numeric' });
+  };
+
+  // Calculate totals
+  const subtotal = transaction.subtotal || 0;
+  const packing = transaction.expenses?.poti_amount || 0;
+  const cess = transaction.expenses?.cess_amount || 0;
+  const adat = transaction.expenses?.adat_amount || 0;
+  const hamali = (transaction.expenses?.hamali_amount || 0) + (transaction.expenses?.packaging_hamali_amount || 0);
+  const gaadiBharni = transaction.expenses?.gaadi_bharni || 0;
+  const otherExpenses = transaction.expenses?.other_expenses || 0;
+  const grandTotal = transaction.total_amount || (subtotal + packing + cess + adat + hamali + gaadiBharni + otherExpenses);
+
+  const paidAmount = transaction.paid_amount || 0;
+  const balanceAmount = transaction.balance_amount || 0;
+
+  const handlePrint = () => {
+    const printContent = document.getElementById('invoice-content');
+    if (!printContent) return;
+
+    const iframe = document.createElement('iframe');
+    iframe.style.position = 'absolute';
+    iframe.style.width = '0';
+    iframe.style.height = '0';
+    iframe.style.border = 'none';
+    document.body.appendChild(iframe);
+
+    const doc = iframe.contentWindow?.document;
+    if (doc) {
+      doc.open();
+      doc.write(`
+        <html>
+          <head>
+            <title>Invoice-${transaction.bill_number}</title>
+            <style>
+              /* Reset margins to absolute zero */
+              @page { size: A4; margin: 0; }
+              body { margin: 0; padding: 0; background-color: white; font-family: Helvetica, Arial, sans-serif; }
+              
+              /* Overwrite the container style for printing */
+              #invoice-container-inner {
+                 width: 210mm !important;
+                 /* Reducing slightly from 297mm to 295mm prevents the 'spillover' blank page */
+                 min-height: 295mm !important; 
+                 padding: 15mm !important;
+                 margin: 0 auto !important;
+                 box-sizing: border-box !important;
+                 overflow: hidden !important; /* Cut off any rogue pixels */
+              }
+              
+              /* Helper to hide non-print elements if any sneak in */
+              .print-hidden { display: none !important; }
+            </style>
+          </head>
+          <body>
+            ${printContent.innerHTML}
+          </body>
+        </html>
+      `);
+      doc.close();
+
+      iframe.contentWindow?.focus();
+      setTimeout(() => {
+        iframe.contentWindow?.print();
+        setTimeout(() => {
+          document.body.removeChild(iframe);
+        }, 1000);
+      }, 500);
+    }
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setShowPreview(true)}
+        className={className || "p-2 bg-white text-teal-600 border border-teal-600 rounded-md hover:bg-teal-50 transition-colors flex items-center justify-center shadow-sm"}
+        title="Print Invoice"
+      >
+        <Printer size={16} />
+      </button>
+
+      {showPreview && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-2 sm:p-4">
+          <div className="bg-white rounded-lg shadow-2xl max-w-4xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden flex flex-col">
+
+            {/* Header */}
+            <div className="sticky top-0 bg-white border-b border-gray-200 px-3 py-3 sm:px-6 sm:py-4 flex justify-between items-center z-10 shrink-0">
+              <h2 className="text-lg sm:text-xl font-bold text-gray-800 truncate mr-2">Invoice Preview</h2>
+              <div className="flex gap-2 items-center">
+                <button
+                  onClick={handlePrint}
+                  className="px-3 py-1.5 sm:px-4 sm:py-2 text-sm sm:text-base bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors flex items-center gap-1 sm:gap-2"
+                >
+                  <Printer size={16} className="sm:w-[18px] sm:h-[18px]" />
+                  <span>Print</span>
+                </button>
+                <button
+                  onClick={() => setShowPreview(false)}
+                  className="p-1.5 sm:p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  <X size={20} className="text-gray-600 sm:w-6 sm:h-6" />
+                </button>
+              </div>
+            </div>
+
+            {/* Scrollable Area */}
+            <div className="overflow-auto flex-1 p-2 sm:p-8 bg-gray-100">
+              <div className="mb-4 text-xs text-gray-500 text-center sm:hidden">
+                Scroll horizontally to view full invoice
+              </div>
+
+              {/* Wrapper for ID targeting */}
+              <div id="invoice-content">
+                <div
+                  id="invoice-container-inner"
+                  className="bg-white mx-auto shadow-sm"
+                  style={{
+                    width: '210mm',
+                    minHeight: '297mm', /* This stays 297mm for screen preview, but Print overrides it to 295mm */
+                    padding: '15mm',
+                    margin: 'auto',
+                    fontFamily: 'Helvetica, Arial, sans-serif',
+                    fontSize: '12px',
+                    color: '#000',
+                    backgroundColor: '#fff',
+                    boxSizing: 'border-box',
+                    position: 'relative'
+                  }}
+                >
+
+                  {/* Invoice Header */}
+                  <div style={{ borderBottom: '2px solid #333', paddingBottom: '10px', marginBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
+                    <div>
+                      <h1 style={{ margin: 0, fontSize: '24px', fontWeight: 'bold', letterSpacing: '1px' }}>INVOICE</h1>
+                    </div>
+                    <div style={{ textAlign: 'right' }}>
+                      {/* <div style={{ fontSize: '14px', fontWeight: 'bold' }}>Bill No: {transaction.bill_number}</div> */}
+                      <div style={{ fontSize: '12px', marginTop: '4px' }}>Date: {formatDate(transaction.bill_date)}</div>
+                    </div>
+                  </div>
+
+                  {/* Info Section */}
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
+                    <div style={{ width: '55%', textAlign: 'left' }}>
+                      <div style={{
+                        textTransform: 'uppercase',
+                        fontSize: '10px',
+                        color: '#555',
+                        fontWeight: 'bold',
+                        marginBottom: '4px',
+                        borderBottom: '1px solid #eee',
+                        paddingBottom: '2px',
+                        width: '100%'
+                      }}>Billed To</div>
+
+                      <div style={{ fontSize: '14px', fontWeight: 'bold', marginTop: '5px' }}>{transaction.party_name}</div>
+                      <div style={{ marginTop: '2px' }}>Phone: {transaction.party_phone || '-'}</div>
+                    </div>
+                  </div>
+
+                  {/* Table */}
+                  <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: '20px' }}>
+                    <thead>
+                      <tr style={{ backgroundColor: '#f3f4f6' }}>
+                        <th style={{ border: '1px solid #ccc', padding: '8px 6px', textAlign: 'center', width: '5%' }}>#</th>
+                        <th style={{ border: '1px solid #ccc', padding: '8px 6px', textAlign: 'left', width: '40%' }}>Item Description</th>
+                        <th style={{ border: '1px solid #ccc', padding: '8px 6px', textAlign: 'center', width: '10%' }}>Bags</th>
+                        <th style={{ border: '1px solid #ccc', padding: '8px 6px', textAlign: 'center', width: '15%' }}>Net Weight</th>
+                        <th style={{ border: '1px solid #ccc', padding: '8px 6px', textAlign: 'right', width: '15%' }}>Rate</th>
+                        <th style={{ border: '1px solid #ccc', padding: '8px 6px', textAlign: 'right', width: '15%' }}>Amount</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {transaction.items.map((item, idx) => {
+                        const potiWeights = Array.isArray(item.poti_weights) ? item.poti_weights.join(', ') : (typeof item.poti_weights === 'string' ? item.poti_weights : '-');
+                        const amount = item.net_weight * item.rate_per_kg;
+                        return (
+                          <tr key={idx}>
+                            <td style={{ border: '1px solid #ccc', padding: '6px', textAlign: 'center' }}>{idx + 1}</td>
+                            <td style={{ border: '1px solid #ccc', padding: '6px', textAlign: 'left' }}>
+                              <div style={{ fontWeight: 'bold' }}>{item.mirchi_name}</div>
+                              <div style={{ fontSize: '9px', color: '#666', marginTop: '2px', lineHeight: '1.2' }}>
+                                Weights: {potiWeights}
+                              </div>
+                            </td>
+                            <td style={{ border: '1px solid #ccc', padding: '6px', textAlign: 'center' }}>{item.poti_count}</td>
+                            <td style={{ border: '1px solid #ccc', padding: '6px', textAlign: 'center' }}>{item.net_weight} kg</td>
+                            <td style={{ border: '1px solid #ccc', padding: '6px', textAlign: 'right' }}>{formatINR(item.rate_per_kg)}</td>
+                            <td style={{ border: '1px solid #ccc', padding: '6px', textAlign: 'right' }}>{formatINR(amount)}</td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+
+                  {/* Totals Section */}
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                    <div style={{ width: '50%', paddingRight: '20px', textAlign: 'left' }}>
+                      <div style={{ border: '1px solid #ccc', padding: '10px', borderRadius: '4px' }}>
+                        <div style={{ fontWeight: 'bold', borderBottom: '1px solid #eee', marginBottom: '8px', paddingBottom: '4px' }}>Payment Status</div>
+                        {transaction.payments && transaction.payments.length > 0 ? (
+                          <>
+                            {transaction.payments.map((payment, idx) => (
+                              <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '11px', marginBottom: '2px' }}>
+                                <span>{payment.mode === 'cash' ? 'Cash' : payment.mode === 'online' ? 'Online' : payment.mode}:</span>
+                                <span>{formatINR(payment.amount)}</span>
+                              </div>
+                            ))}
+                            <div style={{ borderTop: '1px dashed #ccc', marginTop: '6px', paddingTop: '6px', display: 'flex', justifyContent: 'space-between', fontWeight: 'bold' }}>
+                              <span>Total Paid:</span>
+                              <span>{formatINR(paidAmount)}</span>
+                            </div>
+                          </>
+                        ) : (
+                          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                            <span>Total Paid:</span>
+                            <span>{formatINR(paidAmount)}</span>
+                          </div>
+                        )}
+
+                        {balanceAmount > 0 && (
+                          <div style={{ marginTop: '8px', color: '#c62828', fontWeight: 'bold', display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                            <span>Due Amount:</span>
+                            <span>{formatINR(balanceAmount)}</span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    <div style={{ width: '45%' }}>
+                      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                        <tbody>
+                          {/* Renamed Sub Total to Total */}
+                          {/* <tr>
+                            <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee' }}>Total</td>
+                            <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee', fontWeight: 'bold' }}>{formatINR(subtotal)}</td>
+                          </tr> */}
+                          <tr>
+                            <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee', color: '#555' }}>Packing Expenses</td>
+                            <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee' }}>{formatINR(packing)}</td>
+                          </tr>
+                          
+                          {/* New Row: Total + Packing Calculation */}
+                          <tr>
+                            <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee', fontWeight: 'bold' }}>Sub Total</td>
+                            <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee', fontWeight: 'bold' }}>{formatINR(subtotal + packing)}</td>
+                          </tr>
+
+                          <tr>
+                            <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee', color: '#555' }}>CESS</td>
+                            <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee' }}>{formatINR(cess)}</td>
+                          </tr>
+                          <tr>
+                            <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee', color: '#555' }}>Adat</td>
+                            <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee' }}>{formatINR(adat)}</td>
+                          </tr>
+                          <tr>
+                            <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee', color: '#555' }}>Hamali</td>
+                            <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee' }}>{formatINR(hamali)}</td>
+                          </tr>
+                          <tr>
+                            <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee', color: '#555' }}>Gaadi Bharni</td>
+                            <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee' }}>{formatINR(gaadiBharni)}</td>
+                          </tr>
+                          <tr>
+                            <td style={{ padding: '4px', textAlign: 'left', borderBottom: '1px solid #eee', color: '#555' }}>Other Expenses</td>
+                            <td style={{ padding: '4px', textAlign: 'right', borderBottom: '1px solid #eee' }}>{formatINR(otherExpenses)}</td>
+                          </tr>
+                          <tr style={{ backgroundColor: '#f3f4f6' }}>
+                            <th style={{ padding: '8px 4px', textAlign: 'left', borderTop: '2px solid #000', fontSize: '14px' }}>Grand Total</th>
+                            <th style={{ padding: '8px 4px', textAlign: 'right', borderTop: '2px solid #000', fontSize: '14px' }}>{formatINR(grandTotal)}</th>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+
+                  {/* Signatures */}
+                  <div style={{ marginTop: '50px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
+                    <div style={{ textAlign: 'left', fontSize: '10px', color: '#666' }}>
+                      <p>Thank you for your business.</p>
+                    </div>
+                    <div style={{ textAlign: 'center' }}>
+                      <div style={{ marginBottom: '40px', fontSize: '10px' }}>For Authorised Signatory</div>
+                      <div style={{ borderTop: '1px solid #000', width: '150px', margin: 'auto' }}></div>
+                      <div style={{ fontSize: '10px', marginTop: '4px' }}>(Signature)</div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default PrintInvoice;

context/PWAContext.tsx

@@ -0,0 +1,83 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+interface PWAContextType {
+    deferredPrompt: any;
+    isInstallable: boolean;
+    isIOS: boolean;
+    isStandalone: boolean;
+    installApp: () => Promise<void>;
+}
+
+const PWAContext = createContext<PWAContextType | undefined>(undefined);
+
+export const PWAProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
+    const [isInstallable, setIsInstallable] = useState(false);
+    const [isIOS, setIsIOS] = useState(false);
+    const [isStandalone, setIsStandalone] = useState(false);
+
+    useEffect(() => {
+        // Check if already installed
+        const standalone = window.matchMedia('(display-mode: standalone)').matches ||
+            (window.navigator as any).standalone ||
+            document.referrer.includes('android-app://');
+
+        setIsStandalone(standalone);
+
+        // Check if iOS
+        const ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream;
+        setIsIOS(ios);
+
+        // Listen for beforeinstallprompt event
+        const handleBeforeInstallPrompt = (e: Event) => {
+            // Prevent the mini-infobar from appearing on mobile
+            e.preventDefault();
+            // Stash the event so it can be triggered later.
+            setDeferredPrompt(e);
+            setIsInstallable(true);
+            console.log('✅ PWA Install Prompt captured');
+        };
+
+        window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+
+        return () => {
+            window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+        };
+    }, []);
+
+    const installApp = async () => {
+        if (!deferredPrompt) {
+            return;
+        }
+
+        // Show the install prompt
+        deferredPrompt.prompt();
+
+        // Wait for the user to respond to the prompt
+        const { outcome } = await deferredPrompt.userChoice;
+
+        if (outcome === 'accepted') {
+            console.log('User accepted the install prompt');
+        } else {
+            console.log('User dismissed the install prompt');
+        }
+
+        // We've used the prompt, so clear it
+        setDeferredPrompt(null);
+        setIsInstallable(false);
+    };
+
+    return (
+        <PWAContext.Provider value={{ deferredPrompt, isInstallable, isIOS, isStandalone, installApp }}>
+            {children}
+        </PWAContext.Provider>
+    );
+};
+
+export const usePWA = () => {
+    const context = useContext(PWAContext);
+    if (context === undefined) {
+        throw new Error('usePWA must be used within a PWAProvider');
+    }
+    return context;
+};

dist/404.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>

dist/assets/purify.es-B6FQ9oRL.js

@@ -0,0 +1,2 @@
+/*! @license DOMPurify 3.3.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.0/LICENSE */const{entries:_t,setPrototypeOf:ct,isFrozen:Yt,getPrototypeOf:Xt,getOwnPropertyDescriptor:jt}=Object;let{freeze:S,seal:y,create:Pe}=Object,{apply:ve,construct:ke}=typeof Reflect<"u"&&Reflect;S||(S=function(o){return o});y||(y=function(o){return o});ve||(ve=function(o,l){for(var a=arguments.length,c=new Array(a>2?a-2:0),O=2;O<a;O++)c[O-2]=arguments[O];return o.apply(l,c)});ke||(ke=function(o){for(var l=arguments.length,a=new Array(l>1?l-1:0),c=1;c<l;c++)a[c-1]=arguments[c];return new o(...a)});const ce=R(Array.prototype.forEach),Vt=R(Array.prototype.lastIndexOf),ft=R(Array.prototype.pop),q=R(Array.prototype.push),$t=R(Array.prototype.splice),ue=R(String.prototype.toLowerCase),Ne=R(String.prototype.toString),Ie=R(String.prototype.match),K=R(String.prototype.replace),qt=R(String.prototype.indexOf),Kt=R(String.prototype.trim),b=R(Object.prototype.hasOwnProperty),A=R(RegExp.prototype.test),Z=Zt(TypeError);function R(s){return function(o){o instanceof RegExp&&(o.lastIndex=0);for(var l=arguments.length,a=new Array(l>1?l-1:0),c=1;c<l;c++)a[c-1]=arguments[c];return ve(s,o,a)}}function Zt(s){return function(){for(var o=arguments.length,l=new Array(o),a=0;a<o;a++)l[a]=arguments[a];return ke(s,l)}}function r(s,o){let l=arguments.length>2&&arguments[2]!==void 0?arguments[2]:ue;ct&&ct(s,null);let a=o.length;for(;a--;){let c=o[a];if(typeof c=="string"){const O=l(c);O!==c&&(Yt(o)||(o[a]=O),c=O)}s[c]=!0}return s}function Jt(s){for(let o=0;o<s.length;o++)b(s,o)||(s[o]=null);return s}function M(s){const o=Pe(null);for(const[l,a]of _t(s))b(s,l)&&(Array.isArray(a)?o[l]=Jt(a):a&&typeof a=="object"&&a.constructor===Object?o[l]=M(a):o[l]=a);return o}function J(s,o){for(;s!==null;){const a=jt(s,o);if(a){if(a.get)return R(a.get);if(typeof a.value=="function")return R(a.value)}s=Xt(s)}function l(){return null}return l}const ut=S(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","search","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),Ce=S(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","enterkeyhint","exportparts","filter","font","g","glyph","glyphref","hkern","image","inputmode","line","lineargradient","marker","mask","metadata","mpath","part","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),Me=S(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),Qt=S(["animate","color-profile","cursor","discard","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),we=S(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover","mprescripts"]),en=S(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),mt=S(["#text"]),pt=S(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","exportparts","face","for","headers","height","hidden","high","href","hreflang","id","inert","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","part","pattern","placeholder","playsinline","popover","popovertarget","popovertargetaction","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","slot","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","wrap","xmlns","slot"]),xe=S(["accent-height","accumulate","additive","alignment-baseline","amplitude","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","exponent","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","mask-type","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","slope","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","tablevalues","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),dt=S(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),fe=S(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),tn=y(/\{\{[\w\W]*|[\w\W]*\}\}/gm),nn=y(/<%[\w\W]*|[\w\W]*%>/gm),on=y(/\$\{[\w\W]*/gm),an=y(/^data-[\-\w.\u00B7-\uFFFF]+$/),rn=y(/^aria-[\-\w]+$/),gt=y(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),sn=y(/^(?:\w+script|data):/i),ln=y(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),ht=y(/^html$/i),cn=y(/^[a-z][.\w]*(-[.\w]+)+$/i);var Tt=Object.freeze({__proto__:null,ARIA_ATTR:rn,ATTR_WHITESPACE:ln,CUSTOM_ELEMENT:cn,DATA_ATTR:an,DOCTYPE_NAME:ht,ERB_EXPR:nn,IS_ALLOWED_URI:gt,IS_SCRIPT_OR_DATA:sn,MUSTACHE_EXPR:tn,TMPLIT_EXPR:on});const Q={element:1,text:3,progressingInstruction:7,comment:8,document:9},fn=function(){return typeof window>"u"?null:window},un=function(o,l){if(typeof o!="object"||typeof o.createPolicy!="function")return null;let a=null;const c="data-tt-policy-suffix";l&&l.hasAttribute(c)&&(a=l.getAttribute(c));const O="dompurify"+(a?"#"+a:"");try{return o.createPolicy(O,{createHTML(P){return P},createScriptURL(P){return P}})}catch{return console.warn("TrustedTypes policy "+O+" could not be created."),null}},Et=function(){return{afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}};function At(){let s=arguments.length>0&&arguments[0]!==void 0?arguments[0]:fn();const o=i=>At(i);if(o.version="3.3.0",o.removed=[],!s||!s.document||s.document.nodeType!==Q.document||!s.Element)return o.isSupported=!1,o;let{document:l}=s;const a=l,c=a.currentScript,{DocumentFragment:O,HTMLTemplateElement:P,Node:me,Element:Ue,NodeFilter:B,NamedNodeMap:St=s.NamedNodeMap||s.MozNamedAttrMap,HTMLFormElement:Rt,DOMParser:Ot,trustedTypes:ee}=s,Y=Ue.prototype,Lt=J(Y,"cloneNode"),yt=J(Y,"remove"),bt=J(Y,"nextSibling"),Dt=J(Y,"childNodes"),te=J(Y,"parentNode");if(typeof P=="function"){const i=l.createElement("template");i.content&&i.content.ownerDocument&&(l=i.content.ownerDocument)}let g,X="";const{implementation:pe,createNodeIterator:Nt,createDocumentFragment:It,getElementsByTagName:Ct}=l,{importNode:Mt}=a;let h=Et();o.isSupported=typeof _t=="function"&&typeof te=="function"&&pe&&pe.createHTMLDocument!==void 0;const{MUSTACHE_EXPR:de,ERB_EXPR:Te,TMPLIT_EXPR:Ee,DATA_ATTR:wt,ARIA_ATTR:xt,IS_SCRIPT_OR_DATA:Pt,ATTR_WHITESPACE:Fe,CUSTOM_ELEMENT:vt}=Tt;let{IS_ALLOWED_URI:He}=Tt,p=null;const ze=r({},[...ut,...Ce,...Me,...we,...mt]);let T=null;const Ge=r({},[...pt,...xe,...dt,...fe]);let u=Object.seal(Pe(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),j=null,_e=null;const v=Object.seal(Pe(null,{tagCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeCheck:{writable:!0,configurable:!1,enumerable:!0,value:null}}));let We=!0,ge=!0,Be=!1,Ye=!0,k=!1,ne=!0,w=!1,he=!1,Ae=!1,U=!1,oe=!1,ie=!1,Xe=!0,je=!1;const kt="user-content-";let Se=!0,V=!1,F={},H=null;const Ve=r({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]);let $e=null;const qe=r({},["audio","video","img","source","image","track"]);let Re=null;const Ke=r({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),ae="http://www.w3.org/1998/Math/MathML",re="http://www.w3.org/2000/svg",N="http://www.w3.org/1999/xhtml";let z=N,Oe=!1,Le=null;const Ut=r({},[ae,re,N],Ne);let se=r({},["mi","mo","mn","ms","mtext"]),le=r({},["annotation-xml"]);const Ft=r({},["title","style","font","a","script"]);let $=null;const Ht=["application/xhtml+xml","text/html"],zt="text/html";let d=null,G=null;const Gt=l.createElement("form"),Ze=function(e){return e instanceof RegExp||e instanceof Function},ye=function(){let e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};if(!(G&&G===e)){if((!e||typeof e!="object")&&(e={}),e=M(e),$=Ht.indexOf(e.PARSER_MEDIA_TYPE)===-1?zt:e.PARSER_MEDIA_TYPE,d=$==="application/xhtml+xml"?Ne:ue,p=b(e,"ALLOWED_TAGS")?r({},e.ALLOWED_TAGS,d):ze,T=b(e,"ALLOWED_ATTR")?r({},e.ALLOWED_ATTR,d):Ge,Le=b(e,"ALLOWED_NAMESPACES")?r({},e.ALLOWED_NAMESPACES,Ne):Ut,Re=b(e,"ADD_URI_SAFE_ATTR")?r(M(Ke),e.ADD_URI_SAFE_ATTR,d):Ke,$e=b(e,"ADD_DATA_URI_TAGS")?r(M(qe),e.ADD_DATA_URI_TAGS,d):qe,H=b(e,"FORBID_CONTENTS")?r({},e.FORBID_CONTENTS,d):Ve,j=b(e,"FORBID_TAGS")?r({},e.FORBID_TAGS,d):M({}),_e=b(e,"FORBID_ATTR")?r({},e.FORBID_ATTR,d):M({}),F=b(e,"USE_PROFILES")?e.USE_PROFILES:!1,We=e.ALLOW_ARIA_ATTR!==!1,ge=e.ALLOW_DATA_ATTR!==!1,Be=e.ALLOW_UNKNOWN_PROTOCOLS||!1,Ye=e.ALLOW_SELF_CLOSE_IN_ATTR!==!1,k=e.SAFE_FOR_TEMPLATES||!1,ne=e.SAFE_FOR_XML!==!1,w=e.WHOLE_DOCUMENT||!1,U=e.RETURN_DOM||!1,oe=e.RETURN_DOM_FRAGMENT||!1,ie=e.RETURN_TRUSTED_TYPE||!1,Ae=e.FORCE_BODY||!1,Xe=e.SANITIZE_DOM!==!1,je=e.SANITIZE_NAMED_PROPS||!1,Se=e.KEEP_CONTENT!==!1,V=e.IN_PLACE||!1,He=e.ALLOWED_URI_REGEXP||gt,z=e.NAMESPACE||N,se=e.MATHML_TEXT_INTEGRATION_POINTS||se,le=e.HTML_INTEGRATION_POINTS||le,u=e.CUSTOM_ELEMENT_HANDLING||{},e.CUSTOM_ELEMENT_HANDLING&&Ze(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(u.tagNameCheck=e.CUSTOM_ELEMENT_HANDLING.tagNameCheck),e.CUSTOM_ELEMENT_HANDLING&&Ze(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(u.attributeNameCheck=e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),e.CUSTOM_ELEMENT_HANDLING&&typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements=="boolean"&&(u.allowCustomizedBuiltInElements=e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),k&&(ge=!1),oe&&(U=!0),F&&(p=r({},mt),T=[],F.html===!0&&(r(p,ut),r(T,pt)),F.svg===!0&&(r(p,Ce),r(T,xe),r(T,fe)),F.svgFilters===!0&&(r(p,Me),r(T,xe),r(T,fe)),F.mathMl===!0&&(r(p,we),r(T,dt),r(T,fe))),e.ADD_TAGS&&(typeof e.ADD_TAGS=="function"?v.tagCheck=e.ADD_TAGS:(p===ze&&(p=M(p)),r(p,e.ADD_TAGS,d))),e.ADD_ATTR&&(typeof e.ADD_ATTR=="function"?v.attributeCheck=e.ADD_ATTR:(T===Ge&&(T=M(T)),r(T,e.ADD_ATTR,d))),e.ADD_URI_SAFE_ATTR&&r(Re,e.ADD_URI_SAFE_ATTR,d),e.FORBID_CONTENTS&&(H===Ve&&(H=M(H)),r(H,e.FORBID_CONTENTS,d)),Se&&(p["#text"]=!0),w&&r(p,["html","head","body"]),p.table&&(r(p,["tbody"]),delete j.tbody),e.TRUSTED_TYPES_POLICY){if(typeof e.TRUSTED_TYPES_POLICY.createHTML!="function")throw Z('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');if(typeof e.TRUSTED_TYPES_POLICY.createScriptURL!="function")throw Z('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');g=e.TRUSTED_TYPES_POLICY,X=g.createHTML("")}else g===void 0&&(g=un(ee,c)),g!==null&&typeof X=="string"&&(X=g.createHTML(""));S&&S(e),G=e}},Je=r({},[...Ce,...Me,...Qt]),Qe=r({},[...we,...en]),Wt=function(e){let t=te(e);(!t||!t.tagName)&&(t={namespaceURI:z,tagName:"template"});const n=ue(e.tagName),f=ue(t.tagName);return Le[e.namespaceURI]?e.namespaceURI===re?t.namespaceURI===N?n==="svg":t.namespaceURI===ae?n==="svg"&&(f==="annotation-xml"||se[f]):!!Je[n]:e.namespaceURI===ae?t.namespaceURI===N?n==="math":t.namespaceURI===re?n==="math"&&le[f]:!!Qe[n]:e.namespaceURI===N?t.namespaceURI===re&&!le[f]||t.namespaceURI===ae&&!se[f]?!1:!Qe[n]&&(Ft[n]||!Je[n]):!!($==="application/xhtml+xml"&&Le[e.namespaceURI]):!1},D=function(e){q(o.removed,{element:e});try{te(e).removeChild(e)}catch{yt(e)}},x=function(e,t){try{q(o.removed,{attribute:t.getAttributeNode(e),from:t})}catch{q(o.removed,{attribute:null,from:t})}if(t.removeAttribute(e),e==="is")if(U||oe)try{D(t)}catch{}else try{t.setAttribute(e,"")}catch{}},et=function(e){let t=null,n=null;if(Ae)e="<remove></remove>"+e;else{const m=Ie(e,/^[\r\n\t ]+/);n=m&&m[0]}$==="application/xhtml+xml"&&z===N&&(e='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+e+"</body></html>");const f=g?g.createHTML(e):e;if(z===N)try{t=new Ot().parseFromString(f,$)}catch{}if(!t||!t.documentElement){t=pe.createDocument(z,"template",null);try{t.documentElement.innerHTML=Oe?X:f}catch{}}const _=t.body||t.documentElement;return e&&n&&_.insertBefore(l.createTextNode(n),_.childNodes[0]||null),z===N?Ct.call(t,w?"html":"body")[0]:w?t.documentElement:_},tt=function(e){return Nt.call(e.ownerDocument||e,e,B.SHOW_ELEMENT|B.SHOW_COMMENT|B.SHOW_TEXT|B.SHOW_PROCESSING_INSTRUCTION|B.SHOW_CDATA_SECTION,null)},be=function(e){return e instanceof Rt&&(typeof e.nodeName!="string"||typeof e.textContent!="string"||typeof e.removeChild!="function"||!(e.attributes instanceof St)||typeof e.removeAttribute!="function"||typeof e.setAttribute!="function"||typeof e.namespaceURI!="string"||typeof e.insertBefore!="function"||typeof e.hasChildNodes!="function")},nt=function(e){return typeof me=="function"&&e instanceof me};function I(i,e,t){ce(i,n=>{n.call(o,e,t,G)})}const ot=function(e){let t=null;if(I(h.beforeSanitizeElements,e,null),be(e))return D(e),!0;const n=d(e.nodeName);if(I(h.uponSanitizeElement,e,{tagName:n,allowedTags:p}),ne&&e.hasChildNodes()&&!nt(e.firstElementChild)&&A(/<[/\w!]/g,e.innerHTML)&&A(/<[/\w!]/g,e.textContent)||e.nodeType===Q.progressingInstruction||ne&&e.nodeType===Q.comment&&A(/<[/\w]/g,e.data))return D(e),!0;if(!(v.tagCheck instanceof Function&&v.tagCheck(n))&&(!p[n]||j[n])){if(!j[n]&&at(n)&&(u.tagNameCheck instanceof RegExp&&A(u.tagNameCheck,n)||u.tagNameCheck instanceof Function&&u.tagNameCheck(n)))return!1;if(Se&&!H[n]){const f=te(e)||e.parentNode,_=Dt(e)||e.childNodes;if(_&&f){const m=_.length;for(let L=m-1;L>=0;--L){const C=Lt(_[L],!0);C.__removalCount=(e.__removalCount||0)+1,f.insertBefore(C,bt(e))}}}return D(e),!0}return e instanceof Ue&&!Wt(e)||(n==="noscript"||n==="noembed"||n==="noframes")&&A(/<\/no(script|embed|frames)/i,e.innerHTML)?(D(e),!0):(k&&e.nodeType===Q.text&&(t=e.textContent,ce([de,Te,Ee],f=>{t=K(t,f," ")}),e.textContent!==t&&(q(o.removed,{element:e.cloneNode()}),e.textContent=t)),I(h.afterSanitizeElements,e,null),!1)},it=function(e,t,n){if(Xe&&(t==="id"||t==="name")&&(n in l||n in Gt))return!1;if(!(ge&&!_e[t]&&A(wt,t))){if(!(We&&A(xt,t))){if(!(v.attributeCheck instanceof Function&&v.attributeCheck(t,e))){if(!T[t]||_e[t]){if(!(at(e)&&(u.tagNameCheck instanceof RegExp&&A(u.tagNameCheck,e)||u.tagNameCheck instanceof Function&&u.tagNameCheck(e))&&(u.attributeNameCheck instanceof RegExp&&A(u.attributeNameCheck,t)||u.attributeNameCheck instanceof Function&&u.attributeNameCheck(t,e))||t==="is"&&u.allowCustomizedBuiltInElements&&(u.tagNameCheck instanceof RegExp&&A(u.tagNameCheck,n)||u.tagNameCheck instanceof Function&&u.tagNameCheck(n))))return!1}else if(!Re[t]){if(!A(He,K(n,Fe,""))){if(!((t==="src"||t==="xlink:href"||t==="href")&&e!=="script"&&qt(n,"data:")===0&&$e[e])){if(!(Be&&!A(Pt,K(n,Fe,"")))){if(n)return!1}}}}}}}return!0},at=function(e){return e!=="annotation-xml"&&Ie(e,vt)},rt=function(e){I(h.beforeSanitizeAttributes,e,null);const{attributes:t}=e;if(!t||be(e))return;const n={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:T,forceKeepAttr:void 0};let f=t.length;for(;f--;){const _=t[f],{name:m,namespaceURI:L,value:C}=_,W=d(m),De=C;let E=m==="value"?De:Kt(De);if(n.attrName=W,n.attrValue=E,n.keepAttr=!0,n.forceKeepAttr=void 0,I(h.uponSanitizeAttribute,e,n),E=n.attrValue,je&&(W==="id"||W==="name")&&(x(m,e),E=kt+E),ne&&A(/((--!?|])>)|<\/(style|title|textarea)/i,E)){x(m,e);continue}if(W==="attributename"&&Ie(E,"href")){x(m,e);continue}if(n.forceKeepAttr)continue;if(!n.keepAttr){x(m,e);continue}if(!Ye&&A(/\/>/i,E)){x(m,e);continue}k&&ce([de,Te,Ee],lt=>{E=K(E,lt," ")});const st=d(e.nodeName);if(!it(st,W,E)){x(m,e);continue}if(g&&typeof ee=="object"&&typeof ee.getAttributeType=="function"&&!L)switch(ee.getAttributeType(st,W)){case"TrustedHTML":{E=g.createHTML(E);break}case"TrustedScriptURL":{E=g.createScriptURL(E);break}}if(E!==De)try{L?e.setAttributeNS(L,m,E):e.setAttribute(m,E),be(e)?D(e):ft(o.removed)}catch{x(m,e)}}I(h.afterSanitizeAttributes,e,null)},Bt=function i(e){let t=null;const n=tt(e);for(I(h.beforeSanitizeShadowDOM,e,null);t=n.nextNode();)I(h.uponSanitizeShadowNode,t,null),ot(t),rt(t),t.content instanceof O&&i(t.content);I(h.afterSanitizeShadowDOM,e,null)};return o.sanitize=function(i){let e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},t=null,n=null,f=null,_=null;if(Oe=!i,Oe&&(i="<!-->"),typeof i!="string"&&!nt(i))if(typeof i.toString=="function"){if(i=i.toString(),typeof i!="string")throw Z("dirty is not a string, aborting")}else throw Z("toString is not a function");if(!o.isSupported)return i;if(he||ye(e),o.removed=[],typeof i=="string"&&(V=!1),V){if(i.nodeName){const C=d(i.nodeName);if(!p[C]||j[C])throw Z("root node is forbidden and cannot be sanitized in-place")}}else if(i instanceof me)t=et("<!---->"),n=t.ownerDocument.importNode(i,!0),n.nodeType===Q.element&&n.nodeName==="BODY"||n.nodeName==="HTML"?t=n:t.appendChild(n);else{if(!U&&!k&&!w&&i.indexOf("<")===-1)return g&&ie?g.createHTML(i):i;if(t=et(i),!t)return U?null:ie?X:""}t&&Ae&&D(t.firstChild);const m=tt(V?i:t);for(;f=m.nextNode();)ot(f),rt(f),f.content instanceof O&&Bt(f.content);if(V)return i;if(U){if(oe)for(_=It.call(t.ownerDocument);t.firstChild;)_.appendChild(t.firstChild);else _=t;return(T.shadowroot||T.shadowrootmode)&&(_=Mt.call(a,_,!0)),_}let L=w?t.outerHTML:t.innerHTML;return w&&p["!doctype"]&&t.ownerDocument&&t.ownerDocument.doctype&&t.ownerDocument.doctype.name&&A(ht,t.ownerDocument.doctype.name)&&(L="<!DOCTYPE "+t.ownerDocument.doctype.name+`>
+`+L),k&&ce([de,Te,Ee],C=>{L=K(L,C," ")}),g&&ie?g.createHTML(L):L},o.setConfig=function(){let i=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};ye(i),he=!0},o.clearConfig=function(){G=null,he=!1},o.isValidAttribute=function(i,e,t){G||ye({});const n=d(i),f=d(e);return it(n,f,t)},o.addHook=function(i,e){typeof e=="function"&&q(h[i],e)},o.removeHook=function(i,e){if(e!==void 0){const t=Vt(h[i],e);return t===-1?void 0:$t(h[i],t,1)[0]}return ft(h[i])},o.removeHooks=function(i){h[i]=[]},o.removeAllHooks=function(){h=Et()},o}var mn=At();export{mn as default};

dist/index.html

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

dist/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": []
+        }
+    ]
+}

dist/service-worker.js

@@ -0,0 +1,92 @@
+const CACHE_NAME = 'pattanshetty-v2';
+const urlsToCache = [
+    '/',
+    '/index.html',
+];
+
+// Install event - cache resources
+self.addEventListener('install', (event) => {
+    console.log('[ServiceWorker] Installing...');
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then((cache) => {
+                console.log('[ServiceWorker] Caching app shell');
+                return cache.addAll(urlsToCache).catch((err) => {
+                    console.error('[ServiceWorker] Cache addAll failed:', err);
+                });
+            })
+            .catch((err) => {
+                console.error('[ServiceWorker] Cache open failed:', err);
+            })
+    );
+    self.skipWaiting();
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+    console.log('[ServiceWorker] Activating...');
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        console.log('[ServiceWorker] Deleting old cache:', cacheName);
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        }).catch((err) => {
+            console.error('[ServiceWorker] Activation failed:', err);
+        })
+    );
+    self.clients.claim();
+});
+
+// Fetch event - Network first, fallback to cache
+self.addEventListener('fetch', (event) => {
+    // Skip non-GET requests
+    if (event.request.method !== 'GET') {
+        return;
+    }
+
+    event.respondWith(
+        fetch(event.request)
+            .then((response) => {
+                // Check if valid response
+                if (!response || response.status !== 200 || response.type === 'error') {
+                    return response;
+                }
+
+                // Clone the response
+                const responseToCache = response.clone();
+
+                caches.open(CACHE_NAME)
+                    .then((cache) => {
+                        cache.put(event.request, responseToCache);
+                    })
+                    .catch((err) => {
+                        console.error('[ServiceWorker] Cache put failed:', err);
+                    });
+
+                return response;
+            })
+            .catch((err) => {
+                console.log('[ServiceWorker] Fetch failed, trying cache:', err);
+                // Network failed, try cache
+                return caches.match(event.request)
+                    .then((cachedResponse) => {
+                        if (cachedResponse) {
+                            return cachedResponse;
+                        }
+                        // Return offline page or error
+                        return new Response('Offline - No cached version available', {
+                            status: 503,
+                            statusText: 'Service Unavailable',
+                            headers: new Headers({
+                                'Content-Type': 'text/plain'
+                            })
+                        });
+                    });
+            })
+    );
+});

firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

index.html

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

pages/Analysis.tsx

@@ -0,0 +1,836 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { getActiveLots, getTransactions } from '../services/db';
+import { BillType, Lot, Transaction } from '../types';
+import { TrendingUp, Search, Download, ArrowLeft } from 'lucide-react';
+import { exportAnalysisReport, exportLotDetailAnalysis } from '../utils/exportToExcel';
+
+interface LotAnalysisRow {
+    lotId: string;
+    lotNumber: string;
+    mirchiName: string;
+    purchaseQty: number;
+    purchaseValue: number;
+    avgPurchaseRate: number;
+    soldQty: number;
+    salesValue: number;
+    avgSaleRate: number;
+    realizedProfit: number;
+    marginPercent: number;
+    remainingQty: number;
+    remainingValueAtCost: number;
+    isActive: boolean;
+}
+
+interface LotDetailRow {
+    id: string;
+    date: string;
+    billNo: string;
+    typeLabel: string;
+    directionLabel: string;
+    qtyKg: number;
+    ratePerKg: number;
+    grossAmount: number;
+    expensesAllocated: number;
+    netAmount: number;
+    profitImpact: number;
+}
+
+const Analysis: React.FC = () => {
+    const [lots, setLots] = useState<Lot[]>([]);
+    const [transactions, setTransactions] = useState<Transaction[]>([]);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [viewMode, setViewMode] = useState<'summary' | 'detail'>('summary');
+    const [selectedLotId, setSelectedLotId] = useState<string | null>(null);
+    const [selectedLotNumber, setSelectedLotNumber] = useState<string | null>(null);
+    const [selectedLotMirchiName, setSelectedLotMirchiName] = useState<string | null>(null);
+    const [lotFilter, setLotFilter] = useState<'all' | 'active' | 'closed'>('all');
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const [lotsData, transactionsData] = await Promise.all([
+                getActiveLots(),
+                getTransactions(),
+            ]);
+            setLots(lotsData);
+            setTransactions(transactionsData);
+        };
+
+        fetchData();
+    }, []);
+
+    const analysisRowsAll: LotAnalysisRow[] = useMemo(() => {
+        if (!transactions.length) {
+            return [];
+        }
+
+        const lotMetaById = new Map<string, Lot>();
+        const lotMetaByNumber = new Map<string, Lot>();
+        lots.forEach((lot) => {
+            lotMetaById.set(lot.id, lot);
+            if (lot.lot_number) {
+                lotMetaByNumber.set(lot.lot_number.toLowerCase(), lot);
+            }
+        });
+
+        const byLot: Record<
+            string,
+            {
+                lotId: string;
+                lotNumber: string;
+                mirchiName: string;
+                purchaseQty: number;
+                purchaseValue: number;
+                soldQty: number;
+                salesValue: number;
+            }
+        > = {};
+
+        transactions.forEach((tx) => {
+            const txTotalWeight =
+                tx.items.reduce((sum, item) => sum + item.net_weight, 0) || 1;
+
+            tx.items.forEach((item) => {
+                const rawLotId = item.lot_id as string | undefined;
+                const rawLotNumber = (item as any).lot_number as string | undefined;
+
+                const metaById = rawLotId ? lotMetaById.get(rawLotId) : undefined;
+                const metaByNumber = rawLotNumber
+                    ? lotMetaByNumber.get(rawLotNumber.toLowerCase())
+                    : undefined;
+                const meta = metaById || metaByNumber;
+
+                const key = meta?.id || rawLotId || rawLotNumber;
+                if (!key) {
+                    return;
+                }
+
+                let existing = byLot[key];
+
+                if (!existing) {
+                    const fallbackName = item.mirchi_name || 'Unknown';
+
+                    existing = {
+                        lotId: meta?.id || rawLotId || key,
+                        lotNumber: meta?.lot_number || rawLotNumber || key.slice(0, 8),
+                        mirchiName: meta?.mirchi_name || fallbackName,
+                        purchaseQty: 0,
+                        purchaseValue: 0,
+                        soldQty: 0,
+                        salesValue: 0,
+                    };
+                    byLot[key] = existing;
+                }
+
+                const weightShare = item.net_weight / txTotalWeight;
+                const allocatedExpenses = tx.total_expenses * weightShare;
+
+                if (tx.bill_type === BillType.AWAAK) {
+                    const sign = tx.is_return ? -1 : 1;
+                    const cost = item.item_total + allocatedExpenses;
+                    existing.purchaseQty += sign * item.net_weight;
+                    existing.purchaseValue += sign * cost;
+                } else {
+                    const sign = tx.is_return ? -1 : 1;
+                    const revenue = item.item_total - allocatedExpenses;
+                    existing.soldQty += sign * item.net_weight;
+                    existing.salesValue += sign * revenue;
+                }
+            });
+        });
+
+        return Object.values(byLot).map((entry) => {
+            let { purchaseQty, purchaseValue, soldQty, salesValue } = entry;
+
+            if (purchaseQty < 0) {
+                purchaseQty = 0;
+                purchaseValue = 0;
+            }
+            if (soldQty < 0) {
+                soldQty = 0;
+                salesValue = 0;
+            }
+
+            const avgPurchaseRate = purchaseQty > 0 ? purchaseValue / purchaseQty : 0;
+            const avgSaleRate = soldQty > 0 ? salesValue / soldQty : 0;
+            const realizedProfit = salesValue - avgPurchaseRate * soldQty;
+            const marginPercent =
+                purchaseValue > 0 ? (realizedProfit / purchaseValue) * 100 : 0;
+
+            const metaFromId = lotMetaById.get(entry.lotId);
+            const metaFromNumber = lotMetaByNumber.get(entry.lotNumber.toLowerCase());
+            const meta = metaFromId || metaFromNumber;
+            const isActive = !!meta;
+            const remainingQty = isActive
+                ? Math.max(0, meta?.remaining_quantity ?? 0)
+                : 0;
+            const remainingValueAtCost = remainingQty * avgPurchaseRate;
+
+            return {
+                lotId: entry.lotId,
+                lotNumber: entry.lotNumber,
+                mirchiName: entry.mirchiName,
+                purchaseQty,
+                purchaseValue,
+                avgPurchaseRate,
+                soldQty,
+                salesValue,
+                avgSaleRate,
+                realizedProfit,
+                marginPercent,
+                remainingQty,
+                remainingValueAtCost,
+                isActive,
+            };
+        });
+    }, [lots, transactions]);
+
+    const analysisRows: LotAnalysisRow[] = useMemo(
+        () =>
+            analysisRowsAll.filter((row) => {
+                const term = searchTerm.toLowerCase();
+                const matchesSearch =
+                    row.mirchiName.toLowerCase().includes(term) ||
+                    row.lotNumber.toLowerCase().includes(term)
+                    || !term;
+
+                if (!matchesSearch) return false;
+
+                if (lotFilter === 'active') {
+                    return row.isActive;
+                }
+                if (lotFilter === 'closed') {
+                    return !row.isActive;
+                }
+
+                return true;
+            }),
+        [analysisRowsAll, searchTerm, lotFilter]
+    );
+
+    const totals = useMemo(
+        () =>
+            analysisRows.reduce(
+                (acc, row) => {
+                    acc.totalPurchaseValue += row.purchaseValue;
+                    acc.totalSalesValue += row.salesValue;
+                    acc.totalRealizedProfit += row.realizedProfit;
+                    acc.totalRemainingValueAtCost += row.remainingValueAtCost;
+                    return acc;
+                },
+                {
+                    totalPurchaseValue: 0,
+                    totalSalesValue: 0,
+                    totalRealizedProfit: 0,
+                    totalRemainingValueAtCost: 0,
+                }
+            ),
+        [analysisRows]
+    );
+
+    const lotsInProfit = useMemo(
+        () => analysisRows.filter((row) => row.realizedProfit > 0).length,
+        [analysisRows]
+    );
+    const lotsInLoss = useMemo(
+        () => analysisRows.filter((row) => row.realizedProfit < 0).length,
+        [analysisRows]
+    );
+
+    const selectedLotSummary = useMemo(
+        () =>
+            selectedLotId
+                ? analysisRows.find((row) => row.lotId === selectedLotId) || null
+                : null,
+        [analysisRows, selectedLotId]
+    );
+
+    const detailRows: LotDetailRow[] = useMemo(() => {
+        if (!selectedLotId) {
+            return [];
+        }
+
+        const avgPurchaseRate =
+            selectedLotSummary && selectedLotSummary.purchaseQty > 0
+                ? selectedLotSummary.purchaseValue / selectedLotSummary.purchaseQty
+                : 0;
+
+        const rows: LotDetailRow[] = [];
+
+        transactions.forEach((tx) => {
+            const lotItems = tx.items.filter((item) => item.lot_id === selectedLotId);
+            if (lotItems.length === 0) {
+                return;
+            }
+
+            const txTotalWeight =
+                tx.items.reduce((sum, item) => sum + item.net_weight, 0) || 1;
+
+            lotItems.forEach((item) => {
+                const weightShare = item.net_weight / txTotalWeight;
+                const allocatedExpenses = tx.total_expenses * weightShare;
+
+                let typeLabel = '';
+                let directionLabel = '';
+                let grossAmount = item.item_total;
+                let netAmount = grossAmount;
+                let profitImpact = 0;
+
+                if (tx.bill_type === BillType.AWAAK) {
+                    if (tx.is_return) {
+                        typeLabel = 'Purchase Return';
+                        directionLabel = 'Export';
+                        grossAmount = -item.item_total;
+                        netAmount = grossAmount - allocatedExpenses;
+                    } else {
+                        typeLabel = 'Purchase';
+                        directionLabel = 'Import';
+                        netAmount = grossAmount + allocatedExpenses;
+                    }
+                } else {
+                    if (tx.is_return) {
+                        typeLabel = 'Sales Return';
+                        directionLabel = 'Import';
+                        grossAmount = -item.item_total;
+                        netAmount = grossAmount + allocatedExpenses;
+                    } else {
+                        typeLabel = 'Sale';
+                        directionLabel = 'Export';
+                        netAmount = grossAmount - allocatedExpenses;
+                    }
+
+                    const cost = item.net_weight * avgPurchaseRate;
+                    profitImpact = netAmount - cost;
+                }
+
+                const displayDate = tx.bill_date
+                    ? tx.bill_date.split('T')[0]
+                    : tx.bill_date;
+
+                rows.push({
+                    id: `${tx.id}-${item.id}`,
+                    date: displayDate,
+                    billNo: tx.bill_number,
+                    typeLabel,
+                    directionLabel,
+                    qtyKg: item.net_weight,
+                    ratePerKg: item.rate_per_kg,
+                    grossAmount,
+                    expensesAllocated: allocatedExpenses,
+                    netAmount,
+                    profitImpact,
+                });
+            });
+        });
+
+        rows.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+        return rows;
+    }, [selectedLotId, selectedLotSummary, transactions]);
+
+    const handleExport = () => {
+        if (viewMode === 'detail' && selectedLotSummary) {
+            const lotSummaryForExport = {
+                lotNumber: selectedLotSummary.lotNumber,
+                mirchiName: selectedLotSummary.mirchiName,
+                purchaseQty: selectedLotSummary.purchaseQty,
+                purchaseValue: selectedLotSummary.purchaseValue,
+                avgPurchaseRate: selectedLotSummary.avgPurchaseRate,
+                soldQty: selectedLotSummary.soldQty,
+                salesValue: selectedLotSummary.salesValue,
+                avgSaleRate: selectedLotSummary.avgSaleRate,
+                realizedProfit: selectedLotSummary.realizedProfit,
+                marginPercent: selectedLotSummary.marginPercent,
+                remainingQty: selectedLotSummary.remainingQty,
+                remainingValueAtCost: selectedLotSummary.remainingValueAtCost,
+            };
+
+            const detailExportRows = detailRows.map((row) => ({
+                date: row.date,
+                billNo: row.billNo,
+                typeLabel: row.typeLabel,
+                directionLabel: row.directionLabel,
+                qtyKg: row.qtyKg,
+                ratePerKg: row.ratePerKg,
+                grossAmount: row.grossAmount,
+                expensesAllocated: row.expensesAllocated,
+                netAmount: row.netAmount,
+                profitImpact: row.profitImpact,
+            }));
+
+            exportLotDetailAnalysis(lotSummaryForExport, detailExportRows);
+            return;
+        }
+
+        if (analysisRows.length === 0) {
+            return;
+        }
+
+        const rowsToExport = analysisRows.map((row) => ({
+            lotNumber: row.lotNumber,
+            mirchiName: row.mirchiName,
+            purchaseQty: row.purchaseQty,
+            purchaseValue: row.purchaseValue,
+            avgPurchaseRate: row.avgPurchaseRate,
+            soldQty: row.soldQty,
+            salesValue: row.salesValue,
+            avgSaleRate: row.avgSaleRate,
+            realizedProfit: row.realizedProfit,
+            marginPercent: row.marginPercent,
+            remainingQty: row.remainingQty,
+            remainingValueAtCost: row.remainingValueAtCost,
+        }));
+
+        exportAnalysisReport(rowsToExport);
+    };
+
+    const profitColor =
+        totals.totalRealizedProfit > 0
+            ? 'text-green-600'
+            : totals.totalRealizedProfit < 0
+            ? 'text-red-600'
+            : 'text-gray-700';
+
+    return (
+        <div className="space-y-4">
+            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+                <div className="sticky top-0 z-10 bg-white 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('summary');
+                                    setSelectedLotId(null);
+                                    setSelectedLotNumber(null);
+                                    setSelectedLotMirchiName(null);
+                                }}
+                                className="mr-1 p-1 hover:bg-gray-100 rounded-full"
+                            >
+                                <ArrowLeft size={20} className="text-gray-600" />
+                            </button>
+                        )}
+                        <TrendingUp className="text-teal-600" />
+                        <h2 className="text-lg md:text-xl font-bold text-gray-800">
+                            {viewMode === 'summary'
+                                ? 'नफा-तोटा अ‍ॅनालिसीस (Profit / Loss Analysis)'
+                                : `${selectedLotNumber ?? ''} - ${selectedLotMirchiName ?? ''} Analysis`}
+                        </h2>
+                    </div>
+                    <div className="flex flex-col md:flex-row gap-3 w-full md:w-auto md:items-center justify-end">
+                        <div className="relative w-full md:w-64">
+                            <Search
+                                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                                size={18}
+                            />
+                            <input
+                                type="text"
+                                placeholder="Search LOT / Mirchi 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 text-sm"
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                            />
+                        </div>
+                        <div className="flex gap-2 text-xs md:text-sm justify-start md:justify-end">
+                            <button
+                                type="button"
+                                onClick={() => setLotFilter('all')}
+                                className={`px-2 py-1 rounded-full border text-[11px] md:text-xs ${
+                                    lotFilter === 'all'
+                                        ? 'bg-teal-600 text-white border-teal-600'
+                                        : 'bg-white text-gray-600 border-gray-300'
+                                }`}
+                            >
+                                All
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => setLotFilter('active')}
+                                className={`px-2 py-1 rounded-full border text-[11px] md:text-xs ${
+                                    lotFilter === 'active'
+                                        ? 'bg-teal-600 text-white border-teal-600'
+                                        : 'bg-white text-gray-600 border-gray-300'
+                                }`}
+                            >
+                                In Stock
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => setLotFilter('closed')}
+                                className={`px-2 py-1 rounded-full border text-[11px] md:text-xs ${
+                                    lotFilter === 'closed'
+                                        ? 'bg-teal-600 text-white border-teal-600'
+                                        : 'bg-white text-gray-600 border-gray-300'
+                                }`}
+                            >
+                                Stockout
+                            </button>
+                        </div>
+                        <button
+                            onClick={handleExport}
+                            className="inline-flex items-center justify-center px-3 py-2 rounded-lg bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium shadow-sm"
+                        >
+                            <Download size={16} className="mr-2" />
+                            Export to Excel
+                        </button>
+                    </div>
+                </div>
+
+                {viewMode === 'detail' && selectedLotSummary && (
+                    <div className="p-4 md:p-5 border-b bg-gray-50">
+                        <div className="flex flex-col gap-3 text-xs md:text-sm">
+                            <div className="flex items-center justify-between gap-3">
+                                <div>
+                                    <div className="font-mono font-semibold text-teal-700">
+                                        {selectedLotSummary.lotNumber}
+                                    </div>
+                                    <div className="text-[11px] md:text-xs text-gray-500">
+                                        {selectedLotSummary.mirchiName}
+                                    </div>
+                                </div>
+                                <div className="text-right">
+                                    <div className="text-[11px] text-gray-500">Remaining</div>
+                                    <div className="font-semibold text-gray-800">
+                                        {selectedLotSummary.remainingQty.toFixed(2)} kg
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="grid grid-cols-2 gap-2">
+                                <div className="bg-white rounded-lg border border-gray-100 p-2 flex flex-col">
+                                    <span className="text-[11px] text-gray-500">Purchase</span>
+                                    <span className="mt-1 text-xs md:text-sm font-medium text-gray-800">
+                                        {selectedLotSummary.purchaseQty.toFixed(2)} kg · ₹
+                                        {selectedLotSummary.purchaseValue.toFixed(0)}
+                                    </span>
+                                </div>
+                                <div className="bg-white rounded-lg border border-gray-100 p-2 flex flex-col">
+                                    <span className="text-[11px] text-gray-500">Sales</span>
+                                    <span className="mt-1 text-xs md:text-sm font-medium text-gray-800">
+                                        {selectedLotSummary.soldQty.toFixed(2)} kg · ₹
+                                        {selectedLotSummary.salesValue.toFixed(0)}
+                                    </span>
+                                </div>
+                            </div>
+                            <div className="flex items-center justify-between gap-3">
+                                <div className="text-[11px] md:text-xs text-gray-500">
+                                    Avg Buy ₹{selectedLotSummary.avgPurchaseRate.toFixed(0)} /kg
+                                    {selectedLotSummary.avgSaleRate > 0 && (
+                                        <>
+                                            {' '}
+                                            · Avg Sell ₹{selectedLotSummary.avgSaleRate.toFixed(0)} /kg
+                                        </>
+                                    )}
+                                </div>
+                                <div
+                                    className={`text-xs md:text-sm font-semibold ${
+                                        selectedLotSummary.realizedProfit > 0
+                                            ? 'text-green-600'
+                                            : selectedLotSummary.realizedProfit < 0
+                                            ? 'text-red-600'
+                                            : 'text-gray-700'
+                                    }`}
+                                >
+                                    {selectedLotSummary.realizedProfit > 0
+                                        ? 'Profit'
+                                        : selectedLotSummary.realizedProfit < 0
+                                        ? 'Loss'
+                                        : 'Break-even'}{' '}
+                                    ₹{selectedLotSummary.realizedProfit.toFixed(0)}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {viewMode === 'summary' ? (
+                    <>
+                        <div className="hidden md:block overflow-x-auto">
+                            <table className="w-full text-sm text-left">
+                                <thead className="bg-gray-50 text-gray-500 font-medium">
+                                    <tr>
+                                        <th className="px-6 py-4">LOT</th>
+                                        <th className="px-6 py-4">Mirchi Type</th>
+                                        <th className="px-6 py-4 text-right">Purchase Qty / Value</th>
+                                        <th className="px-6 py-4 text-right">Sales Qty / Value</th>
+                                        <th className="px-6 py-4 text-right">Remaining Qty</th>
+                                        <th className="px-6 py-4 text-right">Profit / Loss</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {analysisRows.length === 0 ? (
+                                        <tr>
+                                            <td
+                                                colSpan={6}
+                                                className="px-6 py-8 text-center text-gray-500"
+                                            >
+                                                No analysis data available
+                                            </td>
+                                        </tr>
+                                    ) : (
+                                        analysisRows.map((row) => {
+                                            const profitClass =
+                                                row.realizedProfit > 0
+                                                    ? 'text-green-600'
+                                                    : row.realizedProfit < 0
+                                                    ? 'text-red-600'
+                                                    : 'text-gray-700';
+
+                                            return (
+                                                <tr
+                                                    key={row.lotId}
+                                                    className="hover:bg-gray-50 cursor-pointer"
+                                                    onClick={() => {
+                                                        setSelectedLotId(row.lotId);
+                                                        setSelectedLotNumber(row.lotNumber);
+                                                        setSelectedLotMirchiName(row.mirchiName);
+                                                        setViewMode('detail');
+                                                    }}
+                                                >
+                                                    <td className="px-6 py-4 font-mono text-sm font-medium text-teal-700">
+                                                        {row.lotNumber}
+                                                    </td>
+                                                    <td className="px-6 py-4">{row.mirchiName}</td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        <div className="flex flex-col items-end">
+                                                            <span className="text-gray-800 font-semibold">
+                                                                {row.purchaseQty.toFixed(2)} kg
+                                                            </span>
+                                                            <span className="text-xs text-gray-500">
+                                                                ₹{row.purchaseValue.toFixed(0)}
+                                                            </span>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        <div className="flex flex-col items-end">
+                                                            <span className="text-gray-800 font-semibold">
+                                                                {row.soldQty.toFixed(2)} kg
+                                                            </span>
+                                                            <span className="text-xs text-gray-500">
+                                                                ₹{row.salesValue.toFixed(0)}
+                                                            </span>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        <span className="font-semibold text-gray-800">
+                                                            {row.remainingQty.toFixed(2)} kg
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        <span className={`font-semibold ${profitClass}`}>
+                                                            {row.realizedProfit > 0
+                                                                ? 'Profit'
+                                                                : row.realizedProfit < 0
+                                                                ? 'Loss'
+                                                                : 'Break-even'}{' '}
+                                                            ₹{row.realizedProfit.toFixed(0)}
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })
+                                    )}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
+                            {analysisRows.length === 0 ? (
+                                <div className="p-6 text-center text-gray-500 text-sm">
+                                    No analysis data available
+                                </div>
+                            ) : (
+                                analysisRows.map((row) => {
+                                    const profitClass =
+                                        row.realizedProfit > 0
+                                            ? 'text-green-600'
+                                            : row.realizedProfit < 0
+                                            ? 'text-red-600'
+                                            : 'text-gray-700';
+
+                                    return (
+                                        <button
+                                            key={row.lotId}
+                                            type="button"
+                                            className="text-left p-4 space-y-2 hover:bg-gray-50"
+                                            onClick={() => {
+                                                setSelectedLotId(row.lotId);
+                                                setSelectedLotNumber(row.lotNumber);
+                                                setSelectedLotMirchiName(row.mirchiName);
+                                                setViewMode('detail');
+                                            }}
+                                        >
+                                            <div className="flex items-center justify-between gap-2">
+                                                <div>
+                                                    <div className="text-sm font-mono font-semibold text-teal-700">
+                                                        {row.lotNumber}
+                                                    </div>
+                                                    <div className="text-xs text-gray-500">
+                                                        {row.mirchiName}
+                                                    </div>
+                                                    <div className="text-[11px] text-gray-500 mt-0.5">
+                                                        Remaining {row.remainingQty.toFixed(1)} kg
+                                                    </div>
+                                                </div>
+                                                <div className="text-right">
+                                                    <div className={`text-sm font-semibold ${profitClass}`}>
+                                                        {row.realizedProfit > 0
+                                                            ? 'Profit'
+                                                            : row.realizedProfit < 0
+                                                            ? 'Loss'
+                                                            : 'Break-even'}{' '}
+                                                        ₹{row.realizedProfit.toFixed(0)}
+                                                    </div>
+                                                    <div className="text-[11px] text-gray-500">
+                                                        Margin {row.marginPercent.toFixed(1)}%
+                                                    </div>
+                                                </div>
+                                            </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">Purchase</div>
+                                                    <div className="font-medium">
+                                                        {row.purchaseQty.toFixed(1)} kg · ₹
+                                                        {row.purchaseValue.toFixed(0)}
+                                                    </div>
+                                                </div>
+                                                <div className="bg-gray-50 p-2 rounded">
+                                                    <div className="text-gray-500">Sales</div>
+                                                    <div className="font-medium">
+                                                        {row.soldQty.toFixed(1)} kg · ₹
+                                                        {row.salesValue.toFixed(0)}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </button>
+                                    );
+                                })
+                            )}
+                        </div>
+                    </>
+                ) : (
+                    <>
+                        <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">Type</th>
+                                        <th className="px-6 py-4">Import / Export</th>
+                                        <th className="px-6 py-4 text-right">Qty (kg)</th>
+                                        <th className="px-6 py-4 text-right">Rate (₹/kg)</th>
+                                        <th className="px-6 py-4 text-right">Net Amount (₹)</th>
+                                        <th className="px-6 py-4 text-right">Profit Impact (₹)</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {detailRows.length === 0 ? (
+                                        <tr>
+                                            <td
+                                                colSpan={8}
+                                                className="px-6 py-8 text-center text-gray-500"
+                                            >
+                                                No transactions found for this LOT
+                                            </td>
+                                        </tr>
+                                    ) : (
+                                        detailRows.map((row) => {
+                                            const profitClass =
+                                                row.profitImpact > 0
+                                                    ? 'text-green-600'
+                                                    : row.profitImpact < 0
+                                                    ? 'text-red-600'
+                                                    : 'text-gray-700';
+
+                                            return (
+                                                <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-xs text-gray-600">
+                                                        {row.billNo}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-gray-700">{row.typeLabel}</td>
+                                                    <td className="px-6 py-4 text-gray-700">
+                                                        {row.directionLabel}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right text-gray-800">
+                                                        {row.qtyKg.toFixed(2)}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right text-gray-800">
+                                                        ₹{row.ratePerKg.toFixed(2)}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right text-gray-800">
+                                                        ₹{row.netAmount.toFixed(0)}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        <span className={`font-semibold ${profitClass}`}>
+                                                            ₹{row.profitImpact.toFixed(0)}
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })
+                                    )}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
+                            {detailRows.length === 0 ? (
+                                <div className="p-6 text-center text-gray-500 text-sm">
+                                    No transactions found for this LOT
+                                </div>
+                            ) : (
+                                detailRows.map((row) => {
+                                    const profitClass =
+                                        row.profitImpact > 0
+                                            ? 'text-green-600'
+                                            : row.profitImpact < 0
+                                            ? 'text-red-600'
+                                            : 'text-gray-700';
+
+                                    return (
+                                        <div key={row.id} className="p-4 space-y-2">
+                                            <div className="flex items-center justify-between gap-2">
+                                                <div>
+                                                    <div className="text-xs text-gray-500">{row.date}</div>
+                                                    <div className="text-sm font-mono font-medium text-gray-800">
+                                                        {row.billNo}
+                                                    </div>
+                                                    <div className="text-[11px] text-gray-500">
+                                                        {row.typeLabel} · {row.directionLabel}
+                                                    </div>
+                                                </div>
+                                                <div className="text-right">
+                                                    <div className="text-xs text-gray-500">Net Amount</div>
+                                                    <div className="text-sm font-semibold text-gray-800">
+                                                        ₹{row.netAmount.toFixed(0)}
+                                                    </div>
+                                                    <div className={`text-[11px] font-semibold ${profitClass}`}>
+                                                        Profit ₹{row.profitImpact.toFixed(0)}
+                                                    </div>
+                                                </div>
+                                            </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">Qty (kg)</div>
+                                                    <div className="font-medium">
+                                                        {row.qtyKg.toFixed(2)} kg
+                                                    </div>
+                                                </div>
+                                                <div className="bg-gray-50 p-2 rounded">
+                                                    <div className="text-gray-500">Rate / kg</div>
+                                                    <div className="font-medium">
+                                                        ₹{row.ratePerKg.toFixed(2)}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    );
+                                })
+                            )}
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Analysis;

pages/AwaakBill.tsx

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

pages/Dashboard.tsx

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

pages/PartyLedger.tsx

@@ -0,0 +1,864 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { getParties, getTransactions, updateTransactionPayment } from '../services/db';
+import { Party, Transaction, PartyType, BillType } from '../types';
+import { Users, Filter, Search, ArrowLeft, Eye, Edit, Save, X, Printer, Download, Calendar, ArrowUpDown, FileText } from 'lucide-react';
+import PrintInvoice from '../components/PrintInvoice.tsx';
+import PdfInvoice from '../components/PdfInvoice.tsx';
+import { exportPartyLedger } from '../utils/exportToExcel';
+import { generateLedgerPDF } from '../utils/LedgerPdfGenerator'; // Import the new utility
+
+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[]>([]);
+
+    // NEW: Detail view filter state
+    const [detailSearch, setDetailSearch] = useState('');
+    const [fromDate, setFromDate] = useState('');
+    const [toDate, setToDate] = useState('');
+    const [sortOrder, setSortOrder] = useState<'newest' | 'oldest'>('newest');
+
+    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 (base list)
+    const partyTransactions = selectedParty
+        ? transactions.filter(t => t.party_id === selectedParty.id)
+        : [];
+
+    // NEW: Memoized filtered and sorted party transactions
+    const filteredPartyTransactions = useMemo(() => {
+        let filtered = [...partyTransactions];
+
+        // Apply search filter (dynamic - searches everything)
+        if (detailSearch.trim()) {
+            const query = detailSearch.toLowerCase().trim();
+            filtered = filtered.filter(tx => {
+                // Search in bill number
+                if (tx.bill_number?.toLowerCase().includes(query)) return true;
+
+                // Search in date
+                const txDate = tx.bill_date?.split('T')[0] || tx.bill_date || '';
+                if (txDate.includes(query)) return true;
+
+                // Search in items (mirchi name, lot number)
+                const itemsMatch = tx.items?.some(item =>
+                    item.mirchi_name?.toLowerCase().includes(query) ||
+                    item.lot_number?.toLowerCase().includes(query)
+                );
+                if (itemsMatch) return true;
+
+                // Search in amounts (as string)
+                if (tx.total_amount?.toString().includes(query)) return true;
+                if (tx.paid_amount?.toString().includes(query)) return true;
+                if (tx.balance_amount?.toString().includes(query)) return true;
+
+                // Search for "return" or "returned"
+                if (tx.is_return && ('returned'.includes(query) || 'return'.includes(query))) return true;
+
+                // Search for "paid" status
+                if (tx.balance_amount === 0 && 'paid'.includes(query)) return true;
+
+                // Search for "due" or "pending"
+                if (tx.balance_amount > 0 && ('due'.includes(query) || 'pending'.includes(query))) return true;
+
+                return false;
+            });
+        }
+
+        // Apply date range filter
+        if (fromDate) {
+            filtered = filtered.filter(tx => {
+                const txDate = tx.bill_date?.split('T')[0] || tx.bill_date || '';
+                return txDate >= fromDate;
+            });
+        }
+
+        if (toDate) {
+            filtered = filtered.filter(tx => {
+                const txDate = tx.bill_date?.split('T')[0] || tx.bill_date || '';
+                return txDate <= toDate;
+            });
+        }
+
+        // Apply sort
+        filtered.sort((a, b) => {
+            const dateA = new Date(a.bill_date || 0).getTime();
+            const dateB = new Date(b.bill_date || 0).getTime();
+            return sortOrder === 'newest' ? dateB - dateA : dateA - dateB;
+        });
+
+        return filtered;
+    }, [partyTransactions, detailSearch, fromDate, toDate, sortOrder]);
+
+    // Memoize combined transaction for PDF generation
+    const combinedTransaction = useMemo(() => {
+        if (!selectedParty || selectedTransactions.length === 0) return null;
+
+        const selected = filteredPartyTransactions.filter(t => selectedTransactions.includes(t.id));
+        if (selected.length === 0) return null;
+
+        return {
+            ...selected[0], // Use first transaction as base
+            id: `combined-${selectedParty.id}-${Date.now()}`, // Unique ID for combined
+            bill_number: `COMBINED-${selected.length}-BILLS`,
+            items: selected.flatMap(t => t.items),
+            subtotal: selected.reduce((sum, t) => sum + (t.subtotal || 0), 0),
+            total_expenses: selected.reduce((sum, t) => sum + (t.total_expenses || 0), 0),
+            total_amount: selected.reduce((sum, t) => sum + t.total_amount, 0),
+            paid_amount: selected.reduce((sum, t) => sum + t.paid_amount, 0),
+            balance_amount: selected.reduce((sum, t) => sum + t.balance_amount, 0),
+            gross_weight_total: selected.reduce((sum, t) => sum + (t.gross_weight_total || 0), 0),
+            net_weight_total: selected.reduce((sum, t) => sum + (t.net_weight_total || 0), 0),
+        };
+    }, [selectedTransactions, filteredPartyTransactions, selectedParty]);
+
+    // Calculate Totals for List View
+    const getPartyStats = (partyId: string) => {
+        const txs = transactions.filter(t => t.party_id === partyId);
+
+        // Calculate totals - returns should subtract from totals
+        const totalBill = txs.reduce((sum, t) => {
+            if (t.is_return) {
+                return sum - t.total_amount; // Subtract returns
+            }
+            return sum + t.total_amount; // Add normal transactions
+        }, 0);
+
+        const totalPaid = txs.reduce((sum, t) => {
+            if (t.is_return) {
+                return sum - t.paid_amount; // Subtract returns
+            }
+            return sum + t.paid_amount; // Add normal transactions
+        }, 0);
+
+        // Balance is directly from party object for accuracy
+        const party = parties.find(p => p.id === partyId);
+        return {
+            totalBill,
+            totalPaid,
+            balance: party?.current_balance || 0
+        };
+    };
+
+    const handleUpdatePayment = async (tx: Transaction) => {
+        const amount = parseFloat(paymentAmount);
+        if (isNaN(amount) || amount <= 0) {
+            alert('Please enter a valid amount');
+            return;
+        }
+        if (amount > tx.balance_amount) {
+            alert('Amount cannot exceed due balance');
+            return;
+        }
+
+        const res = await updateTransactionPayment(tx.id, amount);
+        if (res.success) {
+            // Update local state for demo/sample data
+            setTransactions((prev) =>
+                prev.map((t) =>
+                    t.id === tx.id
+                        ? {
+                            ...t,
+                            paid_amount: t.paid_amount + amount,
+                            balance_amount: t.balance_amount - amount,
+                        }
+                        : t,
+                ),
+            );
+            setEditingTxId(null);
+            setPaymentAmount('');
+            // Reload data to refresh party balances
+            loadData();
+        } else {
+            alert(res.message);
+        }
+    };
+
+    // NEW: Reset detail filters when going back to list
+    const handleBackToList = () => {
+        setViewMode('list');
+        setSelectedParty(null);
+        setSelectedTransactions([]);
+        setDetailSearch('');
+        setFromDate('');
+        setToDate('');
+        setSortOrder('newest');
+    };
+
+    // NEW: Clear all detail filters
+    const clearDetailFilters = () => {
+        setDetailSearch('');
+        setFromDate('');
+        setToDate('');
+        setSortOrder('newest');
+    };
+
+    // NEW: Check if any filter is active
+    const hasActiveFilters = detailSearch || fromDate || toDate || sortOrder !== 'newest';
+
+
+    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={handleBackToList}
+                                    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>
+                            
+                            <div className="flex items-center gap-2">
+                                {selectedTransactions.length > 0 && combinedTransaction && (
+                                    <PrintInvoice
+                                        transaction={combinedTransaction}
+                                        className="px-2 sm:px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors flex items-center gap-1 sm:gap-2"
+                                    >
+                                        <Printer size={18} className="shrink-0" />
+                                        <span className="hidden sm:inline">Print {selectedTransactions.length} Selected</span>
+                                    </PrintInvoice>
+                                )}
+                                
+                                {/* --- NEW RED PDF BUTTON --- */}
+                                <button
+                                    onClick={() => generateLedgerPDF(selectedParty, filteredPartyTransactions)}
+                                    className="px-2 sm:px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-1 sm:gap-2 shadow-sm"
+                                    title="Download PDF Ledger"
+                                >
+                                    <FileText size={18} className="shrink-0" />
+                                    <span className="hidden sm:inline">PDF Ledger</span>
+                                </button>
+                                {/* ------------------------- */}
+
+                                <button
+                                    onClick={() => exportPartyLedger(selectedParty, filteredPartyTransactions)}
+                                    className="px-2 sm:px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center gap-1 sm:gap-2"
+                                    title="Export to Excel"
+                                >
+                                    <Download size={18} className="shrink-0" />
+                                    <span className="hidden sm:inline">Export to Excel</span>
+                                </button>
+                            </div>
+                        </div>
+                    </>
+                ) : (
+                    <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>
+
+            {/* NEW: Detail View Filters */}
+            {viewMode === 'detail' && selectedParty && (
+                <div className="bg-white p-4 rounded-xl border border-gray-100 shadow-sm">
+                    <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center justify-between">
+                        {/* Search & Filters Row */}
+                        <div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
+                            {/* Dynamic Search */}
+                            <div className="relative flex-1 sm:flex-none">
+                                <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                                <input
+                                    type="text"
+                                    placeholder="Search bill, date, mirchi, amount..."
+                                    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 sm:w-72"
+                                    value={detailSearch}
+                                    onChange={e => setDetailSearch(e.target.value)}
+                                />
+                            </div>
+
+                            {/* Date Range */}
+                            <div className="flex items-center gap-2">
+                                <div className="relative">
+                                    <Calendar size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                                    <input
+                                        type="date"
+                                        className="pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 outline-none"
+                                        value={fromDate}
+                                        onChange={e => setFromDate(e.target.value)}
+                                        title="From Date"
+                                    />
+                                </div>
+                                <span className="text-gray-400 text-sm">to</span>
+                                <div className="relative">
+                                    <Calendar size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                                    <input
+                                        type="date"
+                                        className="pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 outline-none"
+                                        value={toDate}
+                                        onChange={e => setToDate(e.target.value)}
+                                        title="To Date"
+                                    />
+                                </div>
+                            </div>
+
+                            {/* Sort Order */}
+                            <div className="relative">
+                                <ArrowUpDown size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                                <select
+                                    className="pl-9 pr-8 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 outline-none appearance-none bg-white cursor-pointer"
+                                    value={sortOrder}
+                                    onChange={e => setSortOrder(e.target.value as 'newest' | 'oldest')}
+                                >
+                                    <option value="newest">Newest First</option>
+                                    <option value="oldest">Oldest First</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        {/* Results Count & Clear */}
+                        <div className="flex items-center gap-3">
+                            <span className="text-sm text-gray-500">
+                                {filteredPartyTransactions.length} of {partyTransactions.length} transactions
+                            </span>
+                            {hasActiveFilters && (
+                                <button
+                                    onClick={clearDetailFilters}
+                                    className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-1"
+                                >
+                                    <X size={14} />
+                                    Clear Filters
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Content Area */}
+            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+                {viewMode === 'list' ? (
+                    <>
+                        {/* Desktop Table View */}
+                        <div className="hidden md:block overflow-x-auto">
+                            <table className="w-full text-sm text-left">
+                                <thead className="bg-gray-50 text-gray-500 border-b border-gray-100">
+                                    <tr>
+                                        <th className="px-6 py-4 font-medium">Party Name</th>
+                                        <th className="px-6 py-4 font-medium text-right">Total Bill Amount</th>
+                                        <th className="px-6 py-4 font-medium text-right">Jama (Paid)</th>
+                                        <th className="px-6 py-4 font-medium text-right">Baki (Balance)</th>
+                                        <th className="px-6 py-4 font-medium text-center">Action</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {filteredParties.length > 0 ? (
+                                        filteredParties.map(party => {
+                                            const stats = getPartyStats(party.id);
+                                            return (
+                                                <tr key={party.id} className="hover:bg-gray-50 transition-colors">
+                                                    <td className="px-6 py-4 font-medium text-gray-900">{party.name}</td>
+                                                    <td className="px-6 py-4 text-right font-medium">₹{stats.totalBill.toLocaleString()}</td>
+                                                    <td className="px-6 py-4 text-right text-green-600 font-medium">₹{stats.totalPaid.toLocaleString()}</td>
+                                                    <td className={`px-6 py-4 text-right font-bold ${stats.balance !== 0 ? 'text-red-500' : 'text-gray-400'}`}>
+                                                        ₹{Math.abs(stats.balance).toLocaleString()} {stats.balance > 0 ? '(Dr)' : stats.balance < 0 ? '(Cr)' : ''}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <button
+                                                            onClick={() => {
+                                                                setSelectedParty(party);
+                                                                setViewMode('detail');
+                                                                // If this party has no transactions, add some sample data for demo
+                                                                const hasTx = transactions.some(t => t.party_id === party.id);
+                                                                if (!hasTx) {
+                                                                    const sampleTxs = [
+                                                                        {
+                                                                            id: `${party.id}-tx1`,
+                                                                            party_id: party.id,
+                                                                            bill_date: new Date().toISOString().split('T')[0],
+                                                                            bill_number: 'SAMPLE001',
+                                                                            items: [{ mirchi_name: 'Red Chili' }],
+                                                                            is_return: false,
+                                                                            total_amount: 5000,
+                                                                            paid_amount: 2000,
+                                                                            balance_amount: 3000,
+                                                                            bill_type: PartyType.AWAAK,
+                                                                        },
+                                                                        {
+                                                                            id: `${party.id}-tx2`,
+                                                                            party_id: party.id,
+                                                                            bill_date: new Date().toISOString().split('T')[0],
+                                                                            bill_number: 'SAMPLE002',
+                                                                            items: [{ mirchi_name: 'Green Chili' }],
+                                                                            is_return: false,
+                                                                            total_amount: 3000,
+                                                                            paid_amount: 3000,
+                                                                            balance_amount: 0,
+                                                                            bill_type: PartyType.AWAAK,
+                                                                        },
+                                                                    ];
+                                                                    setTransactions(prev => [...prev, ...sampleTxs]);
+                                                                }
+                                                            }}
+                                                            className="p-2 hover:bg-teal-50 text-teal-600 rounded-full transition-colors"
+                                                            title="View Ledger"
+                                                        >
+                                                            <Eye size={18} />
+                                                        </button>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })
+                                    ) : (
+                                        <tr>
+                                            <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
+                                                No parties found.
+                                            </td>
+                                        </tr>
+                                    )}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        {/* Mobile Card View */}
+                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
+                            {filteredParties.length > 0 ? (
+                                filteredParties.map(party => {
+                                    const stats = getPartyStats(party.id);
+                                    return (
+                                        <div key={party.id} className="p-4 space-y-3">
+                                            <div className="flex justify-between items-start">
+                                                <div>
+                                                    <h3 className="font-bold text-gray-900">{party.name}</h3>
+                                                </div>
+                                                <button
+                                                    onClick={() => {
+                                                        setSelectedParty(party);
+                                                        setViewMode('detail');
+                                                        // If this party has no transactions, add sample data for demo
+                                                        const hasTx = transactions.some(t => t.party_id === party.id);
+                                                        if (!hasTx) {
+                                                            const sampleTxs = [
+                                                                {
+                                                                    id: `${party.id}-tx1`,
+                                                                    party_id: party.id,
+                                                                    bill_date: new Date().toISOString().split('T')[0],
+                                                                    bill_number: 'SAMPLE001',
+                                                                    items: [{ mirchi_name: 'Red Chili' }],
+                                                                    is_return: false,
+                                                                    total_amount: 5000,
+                                                                    paid_amount: 2000,
+                                                                    balance_amount: 3000,
+                                                                    bill_type: PartyType.AWAAK,
+                                                                },
+                                                                {
+                                                                    id: `${party.id}-tx2`,
+                                                                    party_id: party.id,
+                                                                    bill_date: new Date().toISOString().split('T')[0],
+                                                                    bill_number: 'SAMPLE002',
+                                                                    items: [{ mirchi_name: 'Green Chili' }],
+                                                                    is_return: false,
+                                                                    total_amount: 3000,
+                                                                    paid_amount: 3000,
+                                                                    balance_amount: 0,
+                                                                    bill_type: PartyType.AWAAK,
+                                                                },
+                                                            ];
+                                                            setTransactions(prev => [...prev, ...sampleTxs]);
+                                                        }
+                                                    }}
+                                                    className="p-2 bg-teal-50 text-teal-600 rounded-lg"
+                                                >
+                                                    <Eye size={18} />
+                                                </button>
+                                            </div>
+                                            <div className="grid grid-cols-3 gap-2 text-xs">
+                                                <div className="bg-gray-50 p-2 rounded">
+                                                    <div className="text-gray-500 mb-1">Total Bill</div>
+                                                    <div className="font-medium">₹{stats.totalBill.toLocaleString()}</div>
+                                                </div>
+                                                <div className="bg-green-50 p-2 rounded">
+                                                    <div className="text-green-600 mb-1">Paid</div>
+                                                    <div className="font-medium text-green-700">₹{stats.totalPaid.toLocaleString()}</div>
+                                                </div>
+                                                <div className="bg-red-50 p-2 rounded">
+                                                    <div className="text-red-500 mb-1">Balance</div>
+                                                    <div className="font-bold text-red-600">
+                                                        ₹{Math.abs(stats.balance).toLocaleString()} {stats.balance > 0 ? 'Dr' : stats.balance < 0 ? 'Cr' : ''}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    );
+                                })
+                            ) : (
+                                <div className="p-8 text-center text-gray-500">
+                                    No parties found.
+                                </div>
+                            )}
+                        </div>
+                    </>
+                ) : (
+                    // Detail View
+                    <>
+                        {/* Desktop Table View */}
+                        <div className="hidden md:block overflow-x-auto">
+                            <table className="w-full text-sm text-left">
+                                <thead className="bg-gray-50 text-gray-500 border-b border-gray-100">
+                                    <tr>
+                                        <th className="px-6 py-4 font-medium text-center">
+                                            <input
+                                                type="checkbox"
+                                                checked={selectedTransactions.length === filteredPartyTransactions.length && filteredPartyTransactions.length > 0}
+                                                onChange={(e) => {
+                                                    if (e.target.checked) {
+                                                        setSelectedTransactions(filteredPartyTransactions.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">
+                                    {filteredPartyTransactions.length > 0 ? (
+                                        filteredPartyTransactions.map(tx => (
+                                            <React.Fragment key={tx.id}>
+                                                <tr className="hover:bg-gray-50">
+                                                    <td className="px-6 py-4 text-center">
+                                                        <input
+                                                            type="checkbox"
+                                                            checked={selectedTransactions.includes(tx.id)}
+                                                            onChange={(e) => {
+                                                                if (e.target.checked) {
+                                                                    setSelectedTransactions([...selectedTransactions, tx.id]);
+                                                                } else {
+                                                                    setSelectedTransactions(selectedTransactions.filter(id => id !== tx.id));
+                                                                }
+                                                            }}
+                                                            className="w-4 h-4 text-teal-600 rounded focus:ring-teal-500"
+                                                        />
+                                                    </td>
+                                                    <td className="px-6 py-4 text-gray-600">{tx.bill_date?.split('T')[0] || tx.bill_date}</td>
+                                                    <td className="px-6 py-4 font-mono text-gray-500">{tx.bill_number}</td>
+                                                    <td className="px-6 py-4">
+                                                        {tx.items.map((i, idx) => (
+                                                            <div key={idx} className="text-sm">
+                                                                {i.mirchi_name}
+                                                                {i.lot_number && (
+                                                                    <span className="ml-2 text-xs font-mono text-gray-500">({i.lot_number})</span>
+                                                                )}
+                                                            </div>
+                                                        ))}
+                                                    </td>
+                                                    <td className="px-6 py-4">
+                                                        {tx.is_return ? (
+                                                            <span className="px-2 py-1 bg-orange-100 text-orange-700 rounded text-xs font-semibold">Returned</span>
+                                                        ) : (
+                                                            <span className="text-gray-400">-</span>
+                                                        )}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right font-medium">₹{tx.total_amount.toLocaleString()}</td>
+                                                    <td className="px-6 py-4 text-right text-green-600">₹{tx.paid_amount.toLocaleString()}</td>
+                                                    <td className="px-6 py-4 text-right font-bold text-red-500">₹{tx.balance_amount.toLocaleString()}</td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        {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>
+                                                        )}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <div className="flex gap-2 justify-center items-center">
+                                                            <PrintInvoice
+                                                                transaction={tx}
+                                                                className="p-2 bg-white text-teal-600 border border-teal-600 rounded-md hover:bg-teal-50 transition-colors flex items-center justify-center shadow-sm"
+                                                            />
+                                                            <PdfInvoice
+                                                                transaction={tx}
+                                                                className="p-2 bg-white text-red-600 border border-red-600 rounded-md hover:bg-red-50 transition-colors flex items-center justify-center shadow-sm"
+                                                            >
+                                                                <Download size={16} />
+                                                            </PdfInvoice>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                                {tx.payments && tx.payments.length > 0 && (
+                                                    <tr className="bg-gray-50">
+                                                        <td colSpan={10} className="px-12 py-2 text-xs text-gray-600">
+                                                            <div className="flex items-start justify-between gap-4">
+                                                                <span className="font-semibold text-gray-700 mt-0.5">Payment History:</span>
+                                                                <div className="flex flex-wrap gap-3">
+                                                                    {[...tx.payments.filter(p => p.mode === 'due'), ...tx.payments.filter(p => p.mode !== 'due')].map((p, idx) => (
+                                                                        <div key={idx} className="flex items-center gap-1 bg-white border border-gray-200 rounded-full px-2 py-0.5 shadow-sm">
+                                                                            <span className="px-2 py-0.5 rounded-full text-[11px] bg-teal-50 text-teal-700 border border-teal-100 capitalize">
+                                                                                {p.mode === 'cash' ? 'Cash' : p.mode === 'online' ? 'Online' : p.mode === 'due' ? 'Due' : p.mode}
+                                                                            </span>
+                                                                            <span className="text-gray-800 font-medium text-xs">₹{p.amount.toLocaleString()}</span>
+                                                                            {p.reference && (
+                                                                                <span className="text-gray-400 text-[11px] ml-1">{p.reference}</span>
+                                                                            )}
+                                                                        </div>
+                                                                    ))}
+                                                                </div>
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                )}
+                                            </React.Fragment>
+                                        ))
+                                    ) : (
+                                        <tr>
+                                            <td colSpan={10} className="px-6 py-8 text-center text-gray-500">
+                                                {partyTransactions.length > 0
+                                                    ? 'No transactions match your filters.'
+                                                    : '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">
+                            {filteredPartyTransactions.length > 0 ? (
+                                filteredPartyTransactions.map(tx => (
+                                    <div key={tx.id} className="p-4 space-y-3">
+                                        <div className="flex justify-between items-start">
+                                            <div className="flex items-start gap-3">
+                                                <input
+                                                    type="checkbox"
+                                                    checked={selectedTransactions.includes(tx.id)}
+                                                    onChange={(e) => {
+                                                        if (e.target.checked) {
+                                                            setSelectedTransactions([...selectedTransactions, tx.id]);
+                                                        } else {
+                                                            setSelectedTransactions(selectedTransactions.filter(id => id !== tx.id));
+                                                        }
+                                                    }}
+                                                    className="w-4 h-4 text-teal-600 rounded focus:ring-teal-500 mt-1"
+                                                />
+                                                <div>
+                                                    <div className="text-xs text-gray-500">{tx.bill_date?.split('T')[0] || tx.bill_date}</div>
+                                                    <div className="font-mono text-sm font-medium text-gray-800">{tx.bill_number}</div>
+                                                </div>
+                                            </div>
+                                            {tx.is_return && (
+                                                <span className="px-2 py-1 bg-orange-100 text-orange-700 rounded text-xs font-semibold">Returned</span>
+                                            )}
+                                        </div>
+
+                                        <div className="text-sm text-gray-600">
+                                            <span className="font-medium text-gray-500 text-xs block mb-1">Items:</span>
+                                            {tx.items.map((i, idx) => (
+                                                <div key={idx}>
+                                                    {i.mirchi_name}
+                                                    {i.lot_number && (
+                                                        <span className="ml-2 text-xs font-mono text-gray-500">({i.lot_number})</span>
+                                                    )}
+                                                </div>
+                                            ))}
+                                        </div>
+
+                                        <div className="grid grid-cols-3 gap-2 text-xs pt-2 border-t border-gray-50">
+                                            <div>
+                                                <div className="text-gray-500">Bill Amount</div>
+                                                <div className="font-medium">₹{tx.total_amount.toLocaleString()}</div>
+                                            </div>
+                                            <div>
+                                                <div className="text-gray-500">Paid</div>
+                                                <div className="font-medium text-green-600">₹{tx.paid_amount.toLocaleString()}</div>
+                                            </div>
+                                            <div>
+                                                <div className="text-gray-500">Due</div>
+                                                <div className="font-bold text-red-500">₹{tx.balance_amount.toLocaleString()}</div>
+                                            </div>
+                                        </div>
+
+                                        {tx.payments && tx.payments.length > 0 && (
+                                            <div className="pt-2 border-t border-gray-100 mt-2 text-xs text-gray-600 space-y-1">
+                                                <div className="font-semibold text-gray-700">Payment History</div>
+                                                {[...tx.payments.filter(p => p.mode === 'due'), ...tx.payments.filter(p => p.mode !== 'due')].map((p, idx) => (
+                                                    <div key={idx} className="flex justify-between">
+                                                        <span>
+                                                            {p.mode === 'cash' ? 'Cash' : p.mode === 'online' ? 'Online' : p.mode === 'due' ? 'Due' : p.mode}
+                                                            {p.reference && (
+                                                                <span className="ml-1 text-gray-400">({p.reference})</span>
+                                                            )}
+                                                        </span>
+                                                        <span className="font-medium">₹{p.amount.toLocaleString()}</span>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        )}
+
+                                        <div className="pt-2">
+                                            {editingTxId === tx.id ? (
+                                                <div className="flex items-center gap-2">
+                                                    <input
+                                                        type="number"
+                                                        className="flex-1 border border-teal-300 rounded px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-teal-500"
+                                                        placeholder="Enter Amount"
+                                                        value={paymentAmount}
+                                                        onChange={e => setPaymentAmount(e.target.value)}
+                                                        autoFocus
+                                                    />
+                                                    <button
+                                                        onClick={() => handleUpdatePayment(tx)}
+                                                        className="p-2 bg-teal-600 text-white rounded hover:bg-teal-700"
+                                                    >
+                                                        <Save size={16} />
+                                                    </button>
+                                                    <button
+                                                        onClick={() => { setEditingTxId(null); setPaymentAmount(''); }}
+                                                        className="p-2 bg-gray-200 text-gray-600 rounded hover:bg-gray-300"
+                                                    >
+                                                        <X size={16} />
+                                                    </button>
+                                                </div>
+                                            ) : (
+                                                <button
+                                                    onClick={() => { setEditingTxId(tx.id); setPaymentAmount(''); }}
+                                                    className="w-full py-2 border border-teal-600 text-teal-600 rounded-lg text-sm font-medium hover:bg-teal-50 transition-colors"
+                                                >
+                                                    Update Due
+                                                </button>
+                                            )}
+                                        </div>
+
+                                        {/* Print Button for Mobile */}
+                                        <div className="pt-2 border-t border-gray-100 mt-2 flex gap-3 items-center">
+                                            <PrintInvoice
+                                                transaction={tx}
+                                                className="p-2 bg-white text-teal-600 border border-teal-600 rounded-md hover:bg-teal-50 transition-colors flex items-center justify-center shadow-sm"
+                                            />
+                                            <PdfInvoice
+                                                transaction={tx}
+                                                className="p-2 bg-white text-red-600 border border-red-600 rounded-md hover:bg-red-50 transition-colors flex items-center justify-center shadow-sm"
+                                            >
+                                                <Download size={16} />
+                                            </PdfInvoice>
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className="p-8 text-center text-gray-500">
+                                    {partyTransactions.length > 0
+                                        ? 'No transactions match your filters.'
+                                        : 'No transactions found.'}
+                                </div>
+                            )}
+                        </div>
+                    </>
+                )}
+            </div>
+        </div >
+    );
+};
+
+export default PartyLedger;

pages/Settings.tsx

@@ -0,0 +1,355 @@
+import React, { useState, useEffect } from 'react';
+import {
+    getParties,
+    saveParty,
+    apiGetMirchiTypes,
+    apiSaveMirchiType,
+} from '../services/db';
+import { Party, MirchiType, PartyType } from '../types';
+import { Save, Plus, Settings as SettingsIcon, Users, Sprout, Bell, Download } from 'lucide-react';
+import { usePWA } from '../context/PWAContext';
+
+const Settings = () => {
+    const [activeTab, setActiveTab] = useState<'parties' | 'mirchi' | 'general'>('parties');
+    const [parties, setParties] = useState<Party[]>([]);
+    const [mirchiTypes, setMirchiTypes] = useState<MirchiType[]>([]);
+
+    // PWA Install
+    const { isInstallable, installApp } = usePWA();
+
+    // Form States
+    const [newParty, setNewParty] = useState<Partial<Party>>({
+        name: '', city: '', phone: '', party_type: PartyType.BOTH, current_balance: 0
+    });
+    const [newMirchi, setNewMirchi] = useState<Partial<MirchiType>>({
+        name: ''
+    });
+
+    // Inline feedback
+    const [partyMessage, setPartyMessage] = useState<{ type: 'error' | 'success'; text: string } | null>(null);
+    const [mirchiMessage, setMirchiMessage] = useState<{ type: 'error' | 'success'; text: string } | null>(null);
+
+    // Alert Config (Mock)
+    const [config, setConfig] = useState({
+        lowStockBagsThreshold: 10,
+        enableNotifications: true,
+    });
+
+    useEffect(() => {
+        const loadData = async () => {
+            setParties(await getParties());
+            setMirchiTypes(await apiGetMirchiTypes());
+        };
+        loadData();
+    }, []);
+
+    useEffect(() => {
+        try {
+            const stored = localStorage.getItem('pp_alert_config');
+            if (!stored) return;
+            const parsed = JSON.parse(stored);
+            setConfig({
+                lowStockBagsThreshold:
+                    typeof parsed.lowStockBagsThreshold === 'number' &&
+                    !Number.isNaN(parsed.lowStockBagsThreshold)
+                        ? parsed.lowStockBagsThreshold
+                        : 10,
+                enableNotifications:
+                    typeof parsed.enableNotifications === 'boolean'
+                        ? parsed.enableNotifications
+                        : true,
+            });
+        } catch (error) {
+            console.error('Error loading alert config', error);
+        }
+    }, []);
+
+    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 handleSaveAlertConfig = () => {
+        try {
+            localStorage.setItem('pp_alert_config', JSON.stringify(config));
+        } catch (error) {
+            console.error('Error saving alert config', error);
+        }
+    };
+
+    const handleInstallClick = async () => {
+        await installApp();
+    };
+
+    return (
+        <div className="flex flex-col md:flex-row h-full gap-6">
+            {/* Sidebar / Tabs */}
+            <div className="w-full md:w-64 bg-white rounded-xl shadow-sm border border-gray-100 p-4 h-fit">
+                <h2 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
+                    <SettingsIcon className="text-teal-600" size={20} /> सेटिंग्स
+                </h2>
+                <div className="space-y-2">
+                    <button
+                        onClick={() => setActiveTab('parties')}
+                        className={`w-full text-left px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-3 transition ${activeTab === 'parties' ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50'}`}
+                    >
+                        <Users size={18} /> पार्टी व्यवस्थापन
+                    </button>
+                    <button
+                        onClick={() => setActiveTab('mirchi')}
+                        className={`w-full text-left px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-3 transition ${activeTab === 'mirchi' ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50'}`}
+                    >
+                        <Sprout size={18} /> मिरची दर & प्रकार
+                    </button>
+                    <button
+                        onClick={() => setActiveTab('general')}
+                        className={`w-full text-left px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-3 transition ${activeTab === 'general' ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50'}`}
+                    >
+                        <Bell size={18} /> Alerts & Rules
+                    </button>
+                </div>
+            </div>
+
+            {/* Content Area */}
+            <div className="flex-1 bg-white rounded-xl shadow-sm border border-gray-100 p-6 overflow-y-auto no-scrollbar">
+
+                {/* PARTIES TAB */}
+                {activeTab === 'parties' && (
+                    <div className="space-y-6">
+                        <div className="border-b pb-4">
+                            <h3 className="text-lg font-bold text-gray-800">Party व्यवस्थापन (Party Management)</h3>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                                <input
+                                    placeholder="Party Name"
+                                    className="border rounded p-2"
+                                    value={newParty.name}
+                                    onChange={e => setNewParty({ ...newParty, name: e.target.value })}
+                                />
+                                <input
+                                    placeholder="Phone"
+                                    className="border rounded p-2"
+                                    value={newParty.phone}
+                                    onChange={e => setNewParty({ ...newParty, phone: e.target.value })}
+                                />
+                                <select
+                                    className="border rounded p-2"
+                                    value={newParty.party_type}
+                                    onChange={e => setNewParty({ ...newParty, party_type: e.target.value as PartyType })}
+                                >
+                                    <option value={PartyType.BOTH}>Both (Purchase & Sales)</option>
+                                    <option value={PartyType.AWAAK}>Only Awaak (Purchase)</option>
+                                    <option value={PartyType.JAWAAK}>Only Jawaak (Sales)</option>
+                                </select>
+                                <button
+                                    onClick={handleSaveParty}
+                                    className="bg-teal-600 text-white rounded p-2 flex items-center justify-center gap-2 font-medium hover:bg-teal-700"
+                                >
+                                    <Plus size={18} /> Save Party
+                                </button>
+                            </div>
+                            {partyMessage && (
+                                <div
+                                    className={`mt-3 text-sm rounded px-3 py-2 ${partyMessage.type === 'error'
+                                        ? 'bg-red-50 text-red-700 border border-red-100'
+                                        : 'bg-green-50 text-green-700 border border-green-100'
+                                        }`}
+                                >
+                                    {partyMessage.text}
+                                </div>
+                            )}
+                        </div>
+
+                        <div>
+                            <h3 className="font-semibold text-gray-700 mb-3">All Parties</h3>
+                            <div className="overflow-x-auto">
+                                <table className="w-full text-sm text-left">
+                                    <thead className="bg-gray-50 text-gray-500">
+                                        <tr>
+                                            <th className="p-2">Name</th>
+                                            <th className="p-2">Phone</th>
+                                            <th className="p-2">Type</th>
+                                            <th className="p-2 text-center">Action</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody className="divide-y">
+                                        {parties.map(p => (
+                                            <tr key={p.id}>
+                                                <td className="p-2">{p.name}</td>
+                                                <td className="p-2">{p.phone}</td>
+                                                <td className="p-2">{p.party_type}</td>
+                                                <td className="p-2 text-center">
+                                                    <button
+                                                        onClick={() => setNewParty(p)}
+                                                        className="text-blue-600 hover:underline text-xs"
+                                                    >
+                                                        Edit
+                                                    </button>
+                                                </td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* MIRCHI TAB */}
+                {activeTab === 'mirchi' && (
+                    <div className="space-y-6">
+                        <div className="border-b pb-4">
+                            <h3 className="text-lg font-bold text-gray-800">मिरची प्रकार (Mirchi Types)</h3>
+                            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+                                <input
+                                    placeholder="Variety Name (e.g. Teja)"
+                                    className="border rounded p-2"
+                                    value={newMirchi.name}
+                                    onChange={e => setNewMirchi({ ...newMirchi, name: e.target.value })}
+                                />
+                                <button
+                                    onClick={handleSaveMirchi}
+                                    className="bg-teal-600 text-white rounded p-2 flex items-center justify-center gap-2 font-medium hover:bg-teal-700"
+                                >
+                                    <Plus size={18} /> Save Type
+                                </button>
+                            </div>
+                            {mirchiMessage && (
+                                <div
+                                    className={`mt-3 text-sm rounded px-3 py-2 ${mirchiMessage.type === 'error'
+                                        ? 'bg-red-50 text-red-700 border border-red-100'
+                                        : 'bg-green-50 text-green-700 border border-green-100'
+                                        }`}
+                                >
+                                    {mirchiMessage.text}
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            {mirchiTypes.map(m => (
+                                <div key={m.id} className="p-4 border rounded-lg hover:shadow-md transition bg-gray-50">
+                                    <div className="flex justify-between items-start mb-2">
+                                        <h4 className="font-bold text-gray-800">{m.name}</h4>
+                                        <button
+                                            onClick={() => setNewMirchi(m)}
+                                            className="text-teal-600 text-xs font-medium"
+                                        >
+                                            Edit
+                                        </button>
+                                    </div>
+                                    <div className="text-xs text-gray-500 mt-1">Mirchi Type</div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {/* General / Alerts Tab */}
+                {activeTab === 'general' && (
+                    <div className="space-y-6">
+                        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+                            <h3 className="text-lg font-semibold text-gray-800 mb-4">Install as App</h3>
+                            <p className="text-sm text-gray-600 mb-4">
+                                Install this application on your device for quick access and offline support.
+                            </p>
+                            {isInstallable ? (
+                                <button
+                                    onClick={handleInstallClick}
+                                    className="px-6 py-3 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors flex items-center gap-2 font-medium"
+                                >
+                                    <Download size={20} />
+                                    Install App
+                                </button>
+                            ) : (
+                                <div className="text-sm text-gray-500 bg-gray-50 p-4 rounded-lg border border-gray-200">
+                                    App is already installed or not available for installation on this device.
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+                            <h3 className="text-lg font-semibold text-gray-800 mb-4">Alert Configuration</h3>
+                            <div className="space-y-4">
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">Low Stock Threshold (Bags / Poti)</label>
+                                    <input
+                                        type="number"
+                                        value={config.lowStockBagsThreshold}
+                                        onChange={(e) =>
+                                            setConfig({
+                                                ...config,
+                                                lowStockBagsThreshold: Number(e.target.value) || 0,
+                                            })
+                                        }
+                                        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
+                                    onClick={handleSaveAlertConfig}
+                                    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,471 @@
+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 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);
+    const [lowStockBagsThreshold, setLowStockBagsThreshold] = useState<number>(10);
+
+    useEffect(() => {
+        const fetch = async () => {
+            setLots(await getActiveLots());
+            setParties(await getParties());
+            setTransactions(await getTransactions());
+        };
+        fetch();
+    }, []);
+
+    useEffect(() => {
+        try {
+            const stored = localStorage.getItem('pp_alert_config');
+            if (!stored) return;
+            const parsed = JSON.parse(stored);
+            if (
+                parsed &&
+                typeof parsed.lowStockBagsThreshold === 'number' &&
+                !Number.isNaN(parsed.lowStockBagsThreshold)
+            ) {
+                setLowStockBagsThreshold(parsed.lowStockBagsThreshold);
+            }
+        } catch (error) {
+            console.error('Error loading alert config', error);
+        }
+    }, []);
+
+    const filteredLots = useMemo(
+        () =>
+            lots.filter((l) =>
+                l.mirchi_name.toLowerCase().includes(searchTerm.toLowerCase())
+            ),
+        [lots, searchTerm]
+    );
+
+    const aggregatedByLot = useMemo(() => {
+        // Calculate bag count for each lot from transactions
+        return filteredLots.map(lot => {
+            let totalBags = 0;
+
+            // Calculate bags from all transactions for this lot
+            transactions.forEach(tx => {
+                tx.items.forEach(item => {
+                    if (item.lot_id === lot.id) {
+                        if (tx.bill_type === BillType.AWAAK) {
+                            // Purchase: Add bags
+                            totalBags += tx.is_return ? -item.poti_count : item.poti_count;
+                        } else {
+                            // Sale: Subtract bags
+                            totalBags += tx.is_return ? item.poti_count : -item.poti_count;
+                        }
+                    }
+                });
+            });
+
+            return {
+                lotId: lot.id,
+                lotNumber: lot.lot_number,
+                mirchiName: lot.mirchi_name,
+                totalQuantity: lot.total_quantity,
+                remainingQty: lot.remaining_quantity,
+                totalBags: Math.max(0, totalBags),
+                status: lot.status,
+                purchaseDate: lot.purchase_date,
+                avgRate: lot.avg_rate
+            };
+        });
+    }, [filteredLots, transactions]);
+
+    const detailMovements = useMemo(() => {
+        if (!selectedMirchiId) return [];
+
+        const rows: {
+            id: string;
+            date: string;
+            billNo: string;
+            partyName: string;
+            inQty: number;
+            outQty: number;
+            inBags: number;
+            outBags: number;
+            typeLabel: string;
+            isReturn: boolean;
+        }[] = [];
+
+        transactions.forEach((tx) => {
+            tx.items
+                .filter((item) => item.lot_id === selectedMirchiId) // Filter by lot_id instead of mirchi_type_id
+                .forEach((item) => {
+                    const party = parties.find((p) => p.id === tx.party_id);
+
+                    let inQty = 0;
+                    let outQty = 0;
+                    let inBags = 0;
+                    let outBags = 0;
+                    let typeLabel = '';
+
+                    if (tx.bill_type === BillType.AWAAK) {
+                        // Awaak = Purchase / Stock IN
+                        if (tx.is_return) {
+                            // Purchase Return: Stock OUT
+                            outQty = item.net_weight;
+                            outBags = item.poti_count;
+                            typeLabel = 'Purchase Return';
+                        } else {
+                            inQty = item.net_weight;
+                            inBags = item.poti_count;
+                            typeLabel = 'Purchase';
+                        }
+                    } else {
+                        // Jawaak = Sales / Stock OUT
+                        if (tx.is_return) {
+                            // Sales Return: Stock IN
+                            inQty = item.net_weight;
+                            inBags = item.poti_count;
+                            typeLabel = 'Sales Return';
+                        } else {
+                            outQty = item.net_weight;
+                            outBags = item.poti_count;
+                            typeLabel = 'Sale';
+                        }
+                    }
+
+                    const displayDate = tx.bill_date ? tx.bill_date.split('T')[0] : tx.bill_date;
+
+                    rows.push({
+                        id: `${tx.id}-${item.id}`,
+                        date: displayDate,
+                        billNo: tx.bill_number,
+                        partyName: party?.name || tx.party_name || 'Unknown Party',
+                        inQty,
+                        outQty,
+                        inBags,
+                        outBags,
+                        typeLabel,
+                        isReturn: tx.is_return,
+                    });
+                });
+        });
+
+        // Sort latest first
+        rows.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+        return rows;
+    }, [selectedMirchiId, transactions, parties]);
+
+    return (
+        <div className="space-y-4">
+            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+                <div className="p-4 md:p-6 border-b flex flex-col md:flex-row md:items-center justify-between gap-4">
+                    <div className="flex items-center gap-2">
+                        {viewMode === 'detail' && (
+                            <button
+                                onClick={() => {
+                                    setViewMode('list');
+                                    setSelectedMirchiId(null);
+                                    setSelectedMirchiName(null);
+                                }}
+                                className="mr-1 p-1 hover:bg-gray-100 rounded-full"
+                            >
+                                <ArrowLeft size={20} className="text-gray-600" />
+                            </button>
+                        )}
+                        <Package className="text-teal-600" />
+                        <h2 className="text-lg md:text-xl font-bold text-gray-800">
+                            {viewMode === 'list'
+                                ? 'स्टॉक रिपोर्ट (Stock Inventory)'
+                                : `${selectedMirchiName ?? ''} - Stock Detail`}
+                        </h2>
+                    </div>
+
+                    {viewMode === 'list' && (
+                        <div className="relative w-full md:w-auto">
+                            <Search
+                                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                                size={18}
+                            />
+                            <input
+                                type="text"
+                                placeholder="Search Mirchi Jaat / Type..."
+                                className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none w-full md:w-64 text-sm"
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                            />
+                        </div>
+                    )}
+                </div>
+
+                {viewMode === 'list' ? (
+                    <>
+                        {/* Desktop table */}
+                        <div className="hidden md:block overflow-x-auto">
+                            <table className="w-full text-sm text-left">
+                                <thead className="bg-gray-50 text-gray-500 font-medium">
+                                    <tr>
+                                        <th className="px-6 py-4">LOT Number</th>
+                                        <th className="px-6 py-4">मिरची जात (Mirchi Type)</th>
+                                        <th className="px-6 py-4 text-right">बॅग/पोती (Bags)</th>
+                                        <th className="px-6 py-4 text-right">शिल्लक वजन (Remaining Qty)</th>
+                                        <th className="px-6 py-4 text-center">स्थिती (Status)</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {aggregatedByLot.length === 0 ? (
+                                        <tr>
+                                            <td
+                                                colSpan={5}
+                                                className="text-center py-8 text-gray-500"
+                                            >
+                                                No active stock found
+                                            </td>
+                                        </tr>
+                                    ) : (
+                                        aggregatedByLot.map((row) => {
+                                            const isLow = row.totalBags > 0 && row.totalBags <= lowStockBagsThreshold;
+                                            const statusLabel =
+                                                row.remainingQty === 0
+                                                    ? 'Stockout'
+                                                    : isLow
+                                                        ? 'Low Stock'
+                                                        : 'Available';
+                                            const statusClasses =
+                                                row.remainingQty === 0
+                                                    ? 'bg-red-100 text-red-700'
+                                                    : isLow
+                                                        ? 'bg-orange-100 text-orange-700'
+                                                        : 'bg-green-100 text-green-700';
+
+                                            return (
+                                                <tr
+                                                    key={row.lotId}
+                                                    className="hover:bg-gray-50 transition-colors cursor-pointer"
+                                                    onClick={() => {
+                                                        setSelectedMirchiId(row.lotId);
+                                                        setSelectedMirchiName(row.lotNumber);
+                                                        setViewMode('detail');
+                                                    }}
+                                                >
+                                                    <td className="px-6 py-4 font-mono text-sm font-medium text-teal-700">
+                                                        {row.lotNumber}
+                                                    </td>
+                                                    <td className="px-6 py-4">
+                                                        {row.mirchiName}
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        <span className="font-medium text-gray-700">
+                                                            {row.totalBags} bags
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-right">
+                                                        <span
+                                                            className={`font-bold ${isLow ? 'text-red-500' : 'text-gray-800'
+                                                                }`}
+                                                        >
+                                                            {row.remainingQty} kg
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <span
+                                                            className={`inline-block px-2 py-1 rounded-full text-xs font-semibold ${statusClasses}`}
+                                                        >
+                                                            {statusLabel}
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })
+                                    )}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        {/* Mobile cards */}
+                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
+                            {aggregatedByLot.length === 0 ? (
+                                <div className="p-6 text-center text-gray-500 text-sm">
+                                    No active stock found
+                                </div>
+                            ) : (
+                                aggregatedByLot.map((row) => {
+                                    const isLow = row.totalBags > 0 && row.totalBags <= lowStockBagsThreshold;
+                                    const statusLabel =
+                                        row.remainingQty === 0
+                                            ? 'Stockout'
+                                            : isLow
+                                                ? 'Low Stock'
+                                                : 'Available';
+                                    const statusClasses =
+                                        row.remainingQty === 0
+                                            ? 'bg-red-100 text-red-700'
+                                            : isLow
+                                                ? 'bg-orange-100 text-orange-700'
+                                                : 'bg-green-100 text-green-700';
+
+                                    return (
+                                        <button
+                                            key={row.lotId}
+                                            className="text-left p-4 space-y-2 hover:bg-gray-50 transition-colors"
+                                            onClick={() => {
+                                                setSelectedMirchiId(row.lotId);
+                                                setSelectedMirchiName(row.lotNumber);
+                                                setViewMode('detail');
+                                            }}
+                                        >
+                                            <div className="flex items-center justify-between gap-2">
+                                                <div>
+                                                    <div className="text-sm font-mono font-semibold text-teal-700">
+                                                        {row.lotNumber}
+                                                    </div>
+                                                    <div className="text-xs text-gray-500">
+                                                        {row.mirchiName}
+                                                    </div>
+                                                </div>
+                                                <span
+                                                    className={`px-2 py-1 rounded-full text-[10px] font-semibold ${statusClasses}`}
+                                                >
+                                                    {statusLabel}
+                                                </span>
+                                            </div>
+                                            <div className="grid grid-cols-2 gap-2 text-xs">
+                                                <div className="bg-gray-50 p-2 rounded">
+                                                    <div className="text-gray-500">Bags</div>
+                                                    <div className="font-medium">{row.totalBags} bags</div>
+                                                </div>
+                                                <div className="bg-gray-50 p-2 rounded">
+                                                    <div className="text-gray-500">Remaining Qty</div>
+                                                    <div
+                                                        className={`font-bold ${isLow ? 'text-red-500' : 'text-gray-800'
+                                                            }`}
+                                                    >
+                                                        {row.remainingQty} kg
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </button>
+                                    );
+                                })
+                            )}
+                        </div>
+                    </>
+                ) : (
+                    <>
+                        {/* Desktop detail table */}
+                        <div className="hidden md:block overflow-x-auto">
+                            <table className="w-full text-sm text-left">
+                                <thead className="bg-gray-50 text-gray-500 font-medium">
+                                    <tr>
+                                        <th className="px-6 py-4">तारीख (Date)</th>
+                                        <th className="px-6 py-4">बिल नंबर (Bill No)</th>
+                                        <th className="px-6 py-4">पार्टी (Party)</th>
+                                        <th className="px-6 py-4 text-right">बॅग इन (In Bags)</th>
+                                        <th className="px-6 py-4 text-right">बॅग आउट (Out Bags)</th>
+                                        <th className="px-6 py-4 text-right">माल इन (In Qty)</th>
+                                        <th className="px-6 py-4 text-right">माल आउट (Out Qty)</th>
+                                        <th className="px-6 py-4 text-center">टाइप (Type)</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-100">
+                                    {detailMovements.length === 0 ? (
+                                        <tr>
+                                            <td colSpan={8} className="px-6 py-8 text-center text-gray-500">
+                                                No movements found for this Mirchi type.
+                                            </td>
+                                        </tr>
+                                    ) : (
+                                        detailMovements.map((row) => (
+                                            <tr key={row.id} className="hover:bg-gray-50">
+                                                <td className="px-6 py-4 text-gray-600">{row.date}</td>
+                                                <td className="px-6 py-4 font-mono text-gray-500">{row.billNo}</td>
+                                                <td className="px-6 py-4 text-gray-700">{row.partyName}</td>
+                                                <td className="px-6 py-4 text-right text-green-600 font-medium">
+                                                    {row.inBags > 0 ? `${row.inBags} bags` : '-'}
+                                                </td>
+                                                <td className="px-6 py-4 text-right text-red-600 font-medium">
+                                                    {row.outBags > 0 ? `${row.outBags} bags` : '-'}
+                                                </td>
+                                                <td className="px-6 py-4 text-right text-green-600 font-medium">
+                                                    {row.inQty > 0 ? `${row.inQty} kg` : '-'}
+                                                </td>
+                                                <td className="px-6 py-4 text-right text-red-600 font-medium">
+                                                    {row.outQty > 0 ? `${row.outQty} kg` : '-'}
+                                                </td>
+                                                <td className="px-6 py-4 text-center">
+                                                    <span
+                                                        className={`inline-block px-2 py-1 rounded-full text-xs font-semibold ${row.typeLabel.includes('Return')
+                                                            ? 'bg-orange-100 text-orange-700'
+                                                            : row.typeLabel === 'Purchase'
+                                                                ? 'bg-teal-100 text-teal-700'
+                                                                : 'bg-blue-100 text-blue-700'
+                                                            }`}
+                                                    >
+                                                        {row.typeLabel}
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                        ))
+                                    )}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        {/* Mobile detail cards */}
+                        <div className="md:hidden flex flex-col divide-y divide-gray-100">
+                            {detailMovements.length === 0 ? (
+                                <div className="p-6 text-center text-gray-500 text-sm">
+                                    No movements found for this Mirchi type.
+                                </div>
+                            ) : (
+                                detailMovements.map((row) => (
+                                    <div key={row.id} className="p-4 space-y-2">
+                                        <div className="flex justify-between items-start gap-2">
+                                            <div>
+                                                <div className="text-xs text-gray-500">{row.date}</div>
+                                                <div className="font-mono text-sm font-medium text-gray-800">
+                                                    {row.billNo}
+                                                </div>
+                                                <div className="text-xs text-gray-600 mt-1">
+                                                    {row.partyName}
+                                                </div>
+                                            </div>
+                                            <span
+                                                className={`px-2 py-1 rounded-full text-[10px] font-semibold ${row.typeLabel.includes('Return')
+                                                    ? 'bg-orange-100 text-orange-700'
+                                                    : row.typeLabel === 'Purchase'
+                                                        ? 'bg-teal-100 text-teal-700'
+                                                        : 'bg-blue-100 text-blue-700'
+                                                    }`}
+                                            >
+                                                {row.typeLabel}
+                                            </span>
+                                        </div>
+                                        <div className="grid grid-cols-2 gap-2 text-xs pt-2 border-t border-gray-50">
+                                            <div className="bg-gray-50 p-2 rounded">
+                                                <div className="text-gray-500">माल इन (In)</div>
+                                                <div className="font-medium text-green-700">
+                                                    {row.inQty > 0 ? `${row.inQty} kg` : '-'}
+                                                </div>
+                                            </div>
+                                            <div className="bg-gray-50 p-2 rounded">
+                                                <div className="text-gray-500">माल आउट (Out)</div>
+                                                <div className="font-medium text-red-600">
+                                                    {row.outQty > 0 ? `${row.outQty} kg` : '-'}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default StockReport;

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,92 @@
+const CACHE_NAME = 'pattanshetty-v2';
+const urlsToCache = [
+    '/',
+    '/index.html',
+];
+
+// Install event - cache resources
+self.addEventListener('install', (event) => {
+    console.log('[ServiceWorker] Installing...');
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then((cache) => {
+                console.log('[ServiceWorker] Caching app shell');
+                return cache.addAll(urlsToCache).catch((err) => {
+                    console.error('[ServiceWorker] Cache addAll failed:', err);
+                });
+            })
+            .catch((err) => {
+                console.error('[ServiceWorker] Cache open failed:', err);
+            })
+    );
+    self.skipWaiting();
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+    console.log('[ServiceWorker] Activating...');
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        console.log('[ServiceWorker] Deleting old cache:', cacheName);
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        }).catch((err) => {
+            console.error('[ServiceWorker] Activation failed:', err);
+        })
+    );
+    self.clients.claim();
+});
+
+// Fetch event - Network first, fallback to cache
+self.addEventListener('fetch', (event) => {
+    // Skip non-GET requests
+    if (event.request.method !== 'GET') {
+        return;
+    }
+
+    event.respondWith(
+        fetch(event.request)
+            .then((response) => {
+                // Check if valid response
+                if (!response || response.status !== 200 || response.type === 'error') {
+                    return response;
+                }
+
+                // Clone the response
+                const responseToCache = response.clone();
+
+                caches.open(CACHE_NAME)
+                    .then((cache) => {
+                        cache.put(event.request, responseToCache);
+                    })
+                    .catch((err) => {
+                        console.error('[ServiceWorker] Cache put failed:', err);
+                    });
+
+                return response;
+            })
+            .catch((err) => {
+                console.log('[ServiceWorker] Fetch failed, trying cache:', err);
+                // Network failed, try cache
+                return caches.match(event.request)
+                    .then((cachedResponse) => {
+                        if (cachedResponse) {
+                            return cachedResponse;
+                        }
+                        // Return offline page or error
+                        return new Response('Offline - No cached version available', {
+                            status: 503,
+                            statusText: 'Service Unavailable',
+                            headers: new Headers({
+                                'Content-Type': 'text/plain'
+                            })
+                        });
+                    });
+            })
+    );
+});

services/db.ts

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

tsconfig.json

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

utils/LedgerPdfGenerator.ts

@@ -0,0 +1,240 @@
+import jsPDF from 'jspdf';
+import autoTable from 'jspdf-autotable';
+import { Party, Transaction } from '../types';
+
+// --- CONFIGURATION ---
+const BG_COLOR: [number, number, number] = [240, 234, 214]; // Beige
+const BORDER_COLOR: [number, number, number] = [0, 0, 0];   // Black
+
+// Helper: Currency Format
+const FORMAT_CURRENCY = (amount: number) => {
+    return new Intl.NumberFormat('en-IN', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+    }).format(amount);
+};
+
+// Helper: Date Format
+const FORMAT_DATE = (dateStr: string) => {
+    if (!dateStr) return "";
+    const dateObj = new Date(dateStr);
+    return `${dateObj.getDate().toString().padStart(2, '0')}/${(dateObj.getMonth() + 1).toString().padStart(2, '0')}/${dateObj.getFullYear().toString().slice(-2)}`;
+};
+
+export const generateLedgerPDF = (party: Party, transactions: Transaction[]) => {
+    const doc = new jsPDF();
+
+    // --- 1. PAGE CONFIGURATION ---
+    const PAGE_WIDTH = 210;
+    const PAGE_HEIGHT = 297;
+    const MARGIN = 14;
+    const CONTENT_WIDTH = PAGE_WIDTH - (MARGIN * 2);
+
+    // --- 2. SETUP & BACKGROUND ---
+    doc.setFillColor(...BG_COLOR);
+    doc.rect(0, 0, PAGE_WIDTH, PAGE_HEIGHT, 'F'); 
+
+    // --- 3. DATA PREPARATION ---
+    const sortedTxs = [...transactions].sort((a, b) => 
+        new Date(a.bill_date).getTime() - new Date(b.bill_date).getTime()
+    );
+
+    let runningBalance = 0; 
+
+    const tableRows = sortedTxs.flatMap(tx => {
+        const rows = [];
+        const dateStr = FORMAT_DATE(tx.bill_date);
+
+        // --- DETERMINE TYPE (AWAAK vs JAWAAK) ---
+        // AWAAK = Purchase (We Owe - Credit)
+        // JAWAAK = Sales (They Owe - Debit)
+        const typeStr = String(tx.bill_type).toUpperCase();
+        const numStr = tx.bill_number ? tx.bill_number.toUpperCase() : "";
+        
+        const isAwaak = typeStr === 'AWAAK' || numStr.includes('AWAAK');
+
+        // --- A. BILL ROW ---
+        // 1. Particulars Construction
+        let itemDetails = "";
+        if (tx.items && tx.items.length > 0) {
+            tx.items.forEach(item => {
+                let wStr = "";
+                if (Array.isArray(item.poti_weights)) wStr = item.poti_weights.join(",");
+                else if (item.poti_weights) wStr = String(item.poti_weights);
+                
+                const prefix = itemDetails ? "\n" : "";
+                itemDetails += `${prefix}${item.mirchi_name}`;
+                if (wStr) itemDetails += ` (${wStr})`;
+            });
+        }
+
+        let billParticulars = `Bill No: ${tx.bill_number}`;
+        if (tx.is_return) billParticulars += " (RETURN)";
+        if (itemDetails) billParticulars += `\n${itemDetails}`;
+
+        let totalPoti = 0;
+        tx.items?.forEach(i => totalPoti += Number(i.poti_count) || 0);
+
+        // 2. FINANCIAL LOGIC (THE FIX)
+        let billDebit = 0;
+        let billCredit = 0;
+
+        if (isAwaak) {
+            // AWAAK (Purchase): 
+            // - Normal Bill: CREDIT (Liability increases)
+            // - Return Bill: DEBIT (Liability decreases)
+            if (tx.is_return) billDebit = tx.total_amount; 
+            else billCredit = tx.total_amount;             
+        } else {
+            // JAWAAK (Sales): 
+            // - Normal Bill: DEBIT (Asset increases - They owe us)
+            // - Return Bill: CREDIT (Asset decreases)
+            if (tx.is_return) billCredit = tx.total_amount; 
+            else billDebit = tx.total_amount;               
+        }
+
+        // Running Balance = Old + Debit - Credit
+        runningBalance = runningBalance + billDebit - billCredit;
+
+        // Push Bill Row
+        rows.push({
+            date: dateStr,
+            particulars: billParticulars,
+            poti: totalPoti > 0 ? totalPoti.toString() : "-",
+            credit: billCredit > 0 ? FORMAT_CURRENCY(billCredit) : "-",
+            debit: billDebit > 0 ? FORMAT_CURRENCY(billDebit) : "-",
+            balance: `${FORMAT_CURRENCY(Math.abs(runningBalance))} ${runningBalance >= 0 ? 'Dr' : 'Cr'}`,
+            isMainRow: true
+        });
+
+        // --- B. PAYMENT ROWS ---
+        if (tx.payments && tx.payments.length > 0) {
+            const validPayments = tx.payments.filter(p => p.mode.toLowerCase() !== 'due');
+
+            validPayments.forEach(p => {
+                let payDebit = 0;
+                let payCredit = 0;
+
+                if (isAwaak) {
+                    // AWAAK (Purchase) Payment:
+                    // - We Pay Money: DEBIT (Liability decreases)
+                    // - Refund (Return): CREDIT
+                    if (tx.is_return) payCredit = p.amount; 
+                    else payDebit = p.amount;               
+                } else {
+                    // JAWAAK (Sales) Payment:
+                    // - They Pay Money: CREDIT (Asset decreases - Debt paid off)
+                    // - Refund (Return): DEBIT
+                    if (tx.is_return) payDebit = p.amount;  
+                    else payCredit = p.amount;              
+                }
+
+                runningBalance = runningBalance + payDebit - payCredit;
+
+                // Description
+                const modeStr = p.mode.charAt(0).toUpperCase() + p.mode.slice(1);
+                let payDesc = `   [${modeStr}]`; 
+                if (p.reference) payDesc += ` ${p.reference}`;
+
+                rows.push({
+                    date: dateStr,
+                    particulars: payDesc,
+                    poti: "-",
+                    credit: payCredit > 0 ? FORMAT_CURRENCY(payCredit) : "-",
+                    debit: payDebit > 0 ? FORMAT_CURRENCY(payDebit) : "-",
+                    balance: `${FORMAT_CURRENCY(Math.abs(runningBalance))} ${runningBalance >= 0 ? 'Dr' : 'Cr'}`,
+                    isMainRow: false
+                });
+            });
+        }
+        return rows;
+    });
+
+    // --- 4. GENERATE TABLE ---
+    autoTable(doc, {
+        startY: 35,
+        tableWidth: CONTENT_WIDTH,
+        margin: { left: MARGIN, right: MARGIN },
+        
+        head: [[
+            'Date', 
+            'Particulars', 
+            'Poti', 
+            'Credit\n(Jama)', 
+            'Debit\n(Nave)', 
+            'Balance'
+        ]],
+        
+        body: tableRows.map(r => [r.date, r.particulars, r.poti, r.credit, r.debit, r.balance]),
+        
+        theme: 'grid', 
+        
+        styles: {
+            fillColor: false,
+            textColor: 0,
+            lineColor: 0, 
+            lineWidth: 0.1,
+            font: 'helvetica',
+            fontSize: 9,
+            valign: 'top',
+            cellPadding: 3,
+            overflow: 'linebreak'
+        },
+        
+        headStyles: {
+            fillColor: false, 
+            textColor: 0,
+            fontStyle: 'bold',
+            halign: 'center',
+            valign: 'middle',
+            lineWidth: 0.1, 
+        },
+        
+        columnStyles: {
+            0: { cellWidth: 20, halign: 'center' }, // Date
+            1: { cellWidth: 72, halign: 'left' },   // Particulars
+            2: { cellWidth: 12, halign: 'center' }, // Poti
+            3: { cellWidth: 26, halign: 'right' },  // Credit
+            4: { cellWidth: 26, halign: 'right' },  // Debit
+            5: { cellWidth: 26, halign: 'right', fontStyle: 'bold' } // Balance
+        },
+
+        didParseCell: (data) => {
+            const rowIdx = data.row.index;
+            const rowData = tableRows[rowIdx];
+            if (data.section === 'body' && data.column.index === 1 && rowData?.isMainRow) {
+                data.cell.styles.fontStyle = 'bold';
+            }
+        },
+
+        didDrawPage: (data) => {
+            // Border
+            doc.setDrawColor(...BORDER_COLOR);
+            doc.setLineWidth(0.4);
+            doc.rect(MARGIN, MARGIN, CONTENT_WIDTH, PAGE_HEIGHT - (MARGIN * 2));
+
+            // Header
+            if (data.pageNumber === 1) {
+                const startX = MARGIN + 4;
+                const startY = 25;
+
+                doc.setFontSize(14); 
+                doc.setFont("helvetica", "bold"); 
+                doc.text("Name of A/c :", startX, startY);
+
+                const labelWidth = doc.getTextWidth("Name of A/c :  ");
+                doc.text(party.name, startX + labelWidth, startY);
+
+                if (party.city || party.phone) {
+                    doc.setFontSize(9);
+                    doc.setFont("helvetica", "normal");
+                    const subText = [party.city, party.phone].filter(Boolean).join(" - ");
+                    doc.text(subText, startX, startY + 6);
+                }
+            }
+        }
+    });
+
+    const cleanName = party.name.replace(/[^a-zA-Z0-9]/g, '_');
+    doc.save(`${cleanName}_Ledger.pdf`);
+};

utils/dateFormatter.ts

@@ -0,0 +1,56 @@
+// Date formatting utility for consistent date display across the app
+
+/**
+ * Formats a date string to DD/MM/YYYY format
+ * @param dateStr - Date string in any format
+ * @returns Formatted date string (DD/MM/YYYY)
+ */
+export const formatDate = (dateStr: string | Date): string => {
+    const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
+
+    if (isNaN(date.getTime())) {
+        return '-';
+    }
+
+    return date.toLocaleDateString('en-IN', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+};
+
+/**
+ * Formats a date string to YYYY-MM-DD format (for input fields)
+ * @param dateStr - Date string in any format
+ * @returns Formatted date string (YYYY-MM-DD)
+ */
+export const formatDateForInput = (dateStr: string | Date): string => {
+    const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
+
+    if (isNaN(date.getTime())) {
+        return '';
+    }
+
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+
+    return `${year}-${month}-${day}`;
+};
+
+/**
+ * Gets today's date in YYYY-MM-DD format
+ * @returns Today's date string
+ */
+export const getTodayDate = (): string => {
+    return formatDateForInput(new Date());
+};
+
+/**
+ * Formats a date to display only date (no time)
+ * @param dateStr - Date string
+ * @returns Formatted date string
+ */
+export const formatDateOnly = (dateStr: string | Date): string => {
+    return formatDate(dateStr);
+};

utils/exportToExcel.ts

@@ -0,0 +1,430 @@
+import XLSX from 'xlsx-js-style';
+import { Transaction, Party, BillType } from '../types';
+
+export interface AnalysisExportRow {
+    lotNumber: string;
+    mirchiName: string;
+    purchaseQty: number;
+    purchaseValue: number;
+    avgPurchaseRate: number;
+    soldQty: number;
+    salesValue: number;
+    avgSaleRate: number;
+    realizedProfit: number;
+    marginPercent: number;
+    remainingQty: number;
+    remainingValueAtCost: number;
+}
+
+export interface LotOverviewExportRow {
+    lotNumber: string;
+    mirchiName: string;
+    purchaseQty: number;
+    purchaseValue: number;
+    avgPurchaseRate: number;
+    soldQty: number;
+    salesValue: number;
+    avgSaleRate: number;
+    realizedProfit: number;
+    marginPercent: number;
+    remainingQty: number;
+    remainingValueAtCost: number;
+}
+
+export interface LotDetailExportRow {
+    date: string;
+    billNo: string;
+    typeLabel: string;
+    directionLabel: string;
+    qtyKg: number;
+    ratePerKg: number;
+    grossAmount: number;
+    expensesAllocated: number;
+    netAmount: number;
+    profitImpact: number;
+}
+
+// ==========================================
+// 2. STYLING CONFIGURATION
+// ==========================================
+
+// Common Colors
+const CLR_BORDER = { rgb: "D1D5DB" }; // Gray-300
+const CLR_TEXT = { rgb: "374151" };   // Gray-700
+const CLR_HEAD_BG = { rgb: "F3F4F6" }; // Gray-100
+const CLR_GREEN = { rgb: "059669" };
+const CLR_RED = { rgb: "DC2626" };
+const CLR_TEAL = { rgb: "0D9488" };
+const CLR_WHITE = { rgb: "FFFFFF" };
+
+// Border Definitions
+const BORDER_ALL = {
+    top: { style: 'thin', color: CLR_BORDER },
+    bottom: { style: 'thin', color: CLR_BORDER },
+    left: { style: 'thin', color: CLR_BORDER },
+    right: { style: 'thin', color: CLR_BORDER }
+};
+
+const BORDER_TOP_SIDE = {
+    top: { style: 'thin', color: { rgb: "9CA3AF" } }, // Darker Gray for Card
+    left: { style: 'thin', color: { rgb: "9CA3AF" } },
+    right: { style: 'thin', color: { rgb: "9CA3AF" } }
+};
+
+const BORDER_BOT_SIDE = {
+    bottom: { style: 'thin', color: { rgb: "9CA3AF" } },
+    left: { style: 'thin', color: { rgb: "9CA3AF" } },
+    right: { style: 'thin', color: { rgb: "9CA3AF" } }
+};
+
+// Style Objects
+const STYLES = {
+    TITLE: {
+        font: { bold: true, sz: 14, color: { rgb: "111827" } },
+        alignment: { horizontal: 'left', vertical: 'center' }
+    },
+    
+    // Card Styles
+    CARD_HEADER: {
+        border: BORDER_TOP_SIDE,
+        fill: { fgColor: CLR_WHITE },
+        font: { sz: 10, color: { rgb: "6B7280" } },
+        alignment: { vertical: 'bottom', horizontal: 'left', indent: 1 }
+    },
+    CARD_VALUE: {
+        border: BORDER_BOT_SIDE,
+        fill: { fgColor: CLR_WHITE },
+        font: { bold: true, sz: 11, color: { rgb: "1F2937" } },
+        alignment: { vertical: 'top', horizontal: 'left', indent: 1 }
+    },
+
+    // Table Styles
+    TABLE_HEAD: {
+        fill: { fgColor: CLR_HEAD_BG },
+        font: { bold: true, color: CLR_TEXT },
+        border: BORDER_ALL,
+        alignment: { horizontal: 'center', vertical: 'center' }
+    },
+    CELL_TEXT: {
+        border: BORDER_ALL,
+        alignment: { vertical: 'center', horizontal: 'left' },
+        font: { color: CLR_TEXT }
+    },
+    CELL_NUM: {
+        border: BORDER_ALL,
+        alignment: { vertical: 'center', horizontal: 'right' },
+        font: { color: { rgb: "111827" } }
+    },
+    CELL_MONO: {
+        border: BORDER_ALL,
+        alignment: { vertical: 'center', horizontal: 'left' },
+        font: { name: 'Courier New', sz: 10, color: CLR_TEXT }
+    },
+
+    // Text Colors
+    TXT_TEAL: { font: { bold: true, sz: 12, color: CLR_TEAL } },
+    TXT_GRAY: { font: { color: { rgb: "6B7280" } } },
+    TXT_GREEN: { font: { bold: true, color: CLR_GREEN } },
+    TXT_RED: { font: { bold: true, color: CLR_RED } }
+};
+
+// Formats
+const FMT_CURRENCY = "₹#,##0.00"; // 2 decimal places for clean alignment
+const FMT_QTY = "0.00 \"kg\"";
+
+// ==========================================
+// 3. HELPER FUNCTIONS
+// ==========================================
+
+// Helper to create cell. 
+// Uses empty string "" if value is null to avoid "null" text in Excel.
+const c = (val: any, s: any = {}, fmt?: string) => {
+    return {
+        v: val === null || val === undefined ? "" : val,
+        s: { ...s, numFmt: fmt }, // Inject format into style for xlsx-js-style
+        z: fmt // Inject format into standard key for compatibility
+    };
+};
+
+const formatIndCurrency = (val: number) => {
+    return val.toLocaleString('en-IN', { 
+        maximumFractionDigits: 0, // Keep summary cards clean (no decimals)
+        style: 'currency', 
+        currency: 'INR' 
+    }).replace('₹', '₹'); // Ensure symbol consistency
+};
+
+// ==========================================
+// 4. EXPORT FUNCTIONS
+// ==========================================
+
+export const exportLotDetailAnalysis = (
+    lot: LotOverviewExportRow,
+    rows: LotDetailExportRow[],
+) => {
+    const data: any[][] = [];
+
+    // --- ROW 1: Main Title ---
+    data.push([
+        c(`${lot.lotNumber} - ${lot.mirchiName} Analysis`, STYLES.TITLE),
+        c(""), c(""), c(""), c(""), c(""), c(""), c("")
+    ]);
+
+    // --- ROW 2: Spacer ---
+    data.push([c("")]);
+
+    // --- ROW 3: Lot Info (Left) & Remaining (Right) ---
+    // Note: We used c("") for spacers to ensure no "null" text
+    data.push([
+        c(lot.lotNumber, { ...STYLES.TXT_TEAL, alignment: { vertical: 'bottom' } }), 
+        c(""), c(""), c(""), c(""), c(""), 
+        c("Remaining", { ...STYLES.TXT_GRAY, alignment: { horizontal: 'right', vertical: 'bottom' } }), 
+        c(Number(lot.remainingQty.toFixed(2)), { font: { bold: true }, alignment: { horizontal: 'right', vertical: 'bottom' } }, FMT_QTY)
+    ]);
+
+    // --- ROW 4: Mirchi Name ---
+    data.push([
+        c(lot.mirchiName, STYLES.TXT_GRAY),
+        c(""), c(""), c(""), c(""), c(""), c(""), c("")
+    ]);
+
+    // --- ROW 5: Spacer ---
+    data.push([c("")]);
+
+    // --- ROW 6: CARD HEADERS ---
+    data.push([
+        c("Purchase", STYLES.CARD_HEADER), c(""), c(""), c(""), 
+        c("Sales", STYLES.CARD_HEADER), c(""), c(""), c("")
+    ]);
+
+    // --- ROW 7: CARD VALUES ---
+    // Format text manually for the card to ensure it looks perfect
+    const buyTxt = `${lot.purchaseQty.toFixed(2)} kg  •  ${formatIndCurrency(lot.purchaseValue)}`;
+    const sellTxt = `${lot.soldQty.toFixed(2)} kg  •  ${formatIndCurrency(lot.salesValue)}`;
+
+    data.push([
+        c(buyTxt, STYLES.CARD_VALUE), c(""), c(""), c(""), 
+        c(sellTxt, STYLES.CARD_VALUE), c(""), c(""), c("")
+    ]);
+
+    // --- ROW 8: Spacer ---
+    data.push([c("")]);
+
+    // --- ROW 9: Avg & Profit Summary ---
+    const avgText = `Avg Buy ₹${lot.avgPurchaseRate.toFixed(0)} /kg   •   Avg Sell ₹${lot.avgSaleRate.toFixed(0)} /kg`;
+    
+    // Profit Logic
+    const pVal = Number(lot.realizedProfit.toFixed(2)); // Round to avoid .774
+    const pLabel = pVal > 0 ? "Profit" : pVal < 0 ? "Loss" : "Break-even";
+    const pStyle = pVal > 0 ? STYLES.TXT_GREEN : pVal < 0 ? STYLES.TXT_RED : STYLES.TXT_GRAY;
+
+    data.push([
+        c(avgText, { font: { color: { rgb: "4B5563" }, italic: true }, alignment: { vertical: 'center' } }), 
+        c(""), c(""), c(""), c(""), c(""), 
+        c(pLabel, { ...STYLES.TXT_GRAY, alignment: { horizontal: 'right', vertical: 'center' } }), 
+        c(pVal, { ...pStyle, alignment: { horizontal: 'right', vertical: 'center' } }, FMT_CURRENCY)
+    ]);
+
+    // --- ROW 10: Spacer ---
+    data.push([c("")]);
+
+    // --- ROW 11: TABLE HEADERS ---
+    data.push([
+        c('Date', STYLES.TABLE_HEAD),
+        c('Bill No', STYLES.TABLE_HEAD),
+        c('Type', STYLES.TABLE_HEAD),
+        c('Import / Export', STYLES.TABLE_HEAD),
+        c('Qty (kg)', STYLES.TABLE_HEAD),
+        c('Rate', STYLES.TABLE_HEAD),
+        c('Net Amount', STYLES.TABLE_HEAD),
+        c('Profit Impact', STYLES.TABLE_HEAD)
+    ]);
+
+    // --- ROW 12+: DATA ---
+    if (rows.length === 0) {
+        data.push([c('No transactions found', STYLES.CELL_TEXT)]);
+    } else {
+        rows.forEach(row => {
+            // Round numbers to 2 decimals to prevent floating point garbage
+            const safeProfit = Number(row.profitImpact.toFixed(2));
+            const safeNet = Number(row.netAmount.toFixed(2));
+            const safeQty = Number(row.qtyKg.toFixed(2));
+            const safeRate = Number(row.ratePerKg.toFixed(2));
+
+            const impactStyle = safeProfit > 0 
+                ? { ...STYLES.CELL_NUM, font: { color: CLR_GREEN } }
+                : safeProfit < 0 
+                    ? { ...STYLES.CELL_NUM, font: { color: CLR_RED } } 
+                    : STYLES.CELL_NUM;
+
+            data.push([
+                c(row.date, STYLES.CELL_TEXT),
+                c(row.billNo, STYLES.CELL_MONO),
+                c(row.typeLabel, STYLES.CELL_TEXT),
+                c(row.directionLabel, STYLES.CELL_TEXT),
+                c(safeQty, STYLES.CELL_NUM, "0.00"),
+                c(safeRate, STYLES.CELL_NUM, "0.00"),
+                c(safeNet, STYLES.CELL_NUM, FMT_CURRENCY),
+                c(safeProfit, impactStyle, FMT_CURRENCY)
+            ]);
+        });
+    }
+
+    // --- GENERATE ---
+    const ws = XLSX.utils.aoa_to_sheet(data);
+
+    // --- MERGES (0-based indices) ---
+    ws['!merges'] = [
+        { s: { r: 0, c: 0 }, e: { r: 0, c: 7 } }, // Title
+        { s: { r: 2, c: 0 }, e: { r: 2, c: 5 } }, // Lot Number
+        { s: { r: 3, c: 0 }, e: { r: 3, c: 5 } }, // Mirchi Name
+        // Purchase Card
+        { s: { r: 5, c: 0 }, e: { r: 5, c: 3 } }, 
+        { s: { r: 6, c: 0 }, e: { r: 6, c: 3 } }, 
+        // Sales Card
+        { s: { r: 5, c: 4 }, e: { r: 5, c: 7 } },
+        { s: { r: 6, c: 4 }, e: { r: 6, c: 7 } },
+        // Avg Line
+        { s: { r: 8, c: 0 }, e: { r: 8, c: 5 } },
+    ];
+
+    // --- COL WIDTHS ---
+    ws['!cols'] = [
+        { wch: 14 }, // Date
+        { wch: 22 }, // Bill No
+        { wch: 12 }, // Type
+        { wch: 14 }, // Imp/Exp
+        { wch: 12 }, // Qty
+        { wch: 10 }, // Rate
+        { wch: 16 }, // Net Amt
+        { wch: 16 }, // Profit
+    ];
+
+    const wb = XLSX.utils.book_new();
+    const safeName = lot.lotNumber.replace(/[^a-zA-Z0-9]/g, '_').substring(0, 30);
+    XLSX.utils.book_append_sheet(wb, ws, safeName);
+    XLSX.writeFile(wb, `Lot_${safeName}_Analysis.xlsx`);
+};
+
+
+// ==========================================
+// 5. OTHER EXPORT FUNCTIONS (Parties/Ledger)
+// ==========================================
+
+export const exportPartyLedger = (party: Party, transactions: Transaction[], dateRange?: { from: string; to: string }) => {
+    // Filter & Sort
+    const filtered = (dateRange ? transactions.filter(t => {
+        const d = new Date(t.bill_date);
+        return d >= new Date(dateRange.from) && d <= new Date(dateRange.to);
+    }) : [...transactions]).sort((a, b) => new Date(a.bill_date).getTime() - new Date(b.bill_date).getTime());
+
+    const data: any[][] = [];
+    data.push([c(`Ledger: ${party.name}`, STYLES.TITLE)]);
+    data.push([c("")]);
+    data.push(['Date', 'Particulars', 'Credit', 'Debit', 'Balance', 'Dr/Cr'].map(h => c(h, STYLES.TABLE_HEAD)));
+
+    let running = 0, tCr = 0, tDr = 0;
+    filtered.forEach(tx => {
+        let cr = 0, dr = 0;
+        if (tx.bill_type === BillType.AWAAK) tx.is_return ? (cr = tx.total_amount) : (dr = tx.total_amount);
+        else tx.is_return ? (dr = tx.total_amount) : (cr = tx.total_amount);
+        
+        tCr += cr; tDr += dr; running += (dr - cr);
+        const desc = `${tx.bill_number} (${tx.bill_type})` + (tx.items.length ? ` - ${tx.items[0].mirchi_name}` : "");
+
+        data.push([
+            c(new Date(tx.bill_date).toLocaleDateString('en-IN'), STYLES.CELL_TEXT),
+            c(desc, STYLES.CELL_TEXT),
+            c(cr || "", STYLES.CELL_NUM, FMT_CURRENCY),
+            c(dr || "", STYLES.CELL_NUM, FMT_CURRENCY),
+            c(Math.abs(running), STYLES.CELL_NUM, FMT_CURRENCY),
+            c(running > 0 ? 'Dr' : 'Cr', STYLES.CELL_TEXT)
+        ]);
+    });
+
+    const totStyle = { ...STYLES.CELL_NUM, font: { bold: true } };
+    data.push([
+        c('TOTAL', { ...STYLES.CELL_TEXT, font: { bold: true } }), c(""),
+        c(tCr, totStyle, FMT_CURRENCY), c(tDr, totStyle, FMT_CURRENCY),
+        c(Math.abs(running), totStyle, FMT_CURRENCY),
+        c(running > 0 ? 'Dr' : 'Cr', { ...STYLES.CELL_TEXT, font: { bold: true } })
+    ]);
+
+    const ws = XLSX.utils.aoa_to_sheet(data);
+    ws['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 5 } }];
+    ws['!cols'] = [{ wch: 12 }, { wch: 40 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 8 }];
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Ledger');
+    XLSX.writeFile(wb, `${party.name.replace(/\s/g,'_')}_Ledger.xlsx`);
+};
+
+export const exportAllParties = (parties: Party[]) => {
+    const data: any[][] = [];
+    data.push(['Party Name', 'Phone', 'City', 'Type', 'Balance', 'Status'].map(h => c(h, STYLES.TABLE_HEAD)));
+    let tRec = 0, tPay = 0;
+
+    parties.forEach(p => {
+        if(p.current_balance > 0) tRec += p.current_balance;
+        if(p.current_balance < 0) tPay += Math.abs(p.current_balance);
+        const color = p.current_balance > 0 ? CLR_GREEN : p.current_balance < 0 ? CLR_RED : undefined;
+        
+        data.push([
+            c(p.name, STYLES.CELL_TEXT), c(p.phone||'-', STYLES.CELL_TEXT), c(p.city||'-', STYLES.CELL_TEXT),
+            c(p.party_type, STYLES.CELL_TEXT), 
+            c(p.current_balance, { ...STYLES.CELL_NUM, font: { color } }, FMT_CURRENCY),
+            c(p.current_balance > 0 ? 'Rec' : p.current_balance < 0 ? 'Pay' : '-', STYLES.CELL_TEXT)
+        ]);
+    });
+
+    data.push([c("")]); data.push([c('SUMMARY', { font: { bold: true } })]);
+    data.push([c('Total Receivable'), c(""), c(""), c(""), c(tRec, STYLES.CELL_NUM, FMT_CURRENCY)]);
+    data.push([c('Total Payable'), c(""), c(""), c(""), c(tPay, STYLES.CELL_NUM, FMT_CURRENCY)]);
+
+    const ws = XLSX.utils.aoa_to_sheet(data);
+    ws['!cols'] = [{ wch: 30 }, { wch: 15 }, { wch: 20 }, { wch: 10 }, { wch: 18 }, { wch: 10 }];
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Parties');
+    XLSX.writeFile(wb, `All_Parties.xlsx`);
+};
+
+export const exportAllTransactions = (transactions: Transaction[]) => {
+    const data: any[][] = [];
+    data.push(['Date', 'Bill No', 'Party', 'Type', 'Amount', 'Paid', 'Balance'].map(h => c(h, STYLES.TABLE_HEAD)));
+    transactions.forEach(tx => {
+        data.push([
+            c(new Date(tx.bill_date).toLocaleDateString('en-IN'), STYLES.CELL_TEXT),
+            c(tx.bill_number, STYLES.CELL_MONO), c(tx.party_name, STYLES.CELL_TEXT), c(tx.bill_type, STYLES.CELL_TEXT),
+            c(tx.total_amount, STYLES.CELL_NUM, FMT_CURRENCY),
+            c(tx.paid_amount, STYLES.CELL_NUM, FMT_CURRENCY),
+            c(tx.balance_amount, STYLES.CELL_NUM, FMT_CURRENCY)
+        ]);
+    });
+    const ws = XLSX.utils.aoa_to_sheet(data);
+    ws['!cols'] = [{ wch: 12 }, { wch: 20 }, { wch: 25 }, { wch: 10 }, { wch: 15 }, { wch: 15 }, { wch: 15 }];
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Transactions');
+    XLSX.writeFile(wb, `All_Transactions.xlsx`);
+};
+
+export const exportAnalysisReport = (rows: AnalysisExportRow[]) => {
+    if (!rows.length) return;
+    const data: any[][] = [];
+    const headers = ['LOT','Mirchi','Buy Qty','Buy Val','Avg Buy','Sell Qty','Sell Val','Avg Sell','Rem Qty','Rem Val','Profit','Margin %'];
+    data.push(headers.map(h => c(h, STYLES.TABLE_HEAD)));
+
+    rows.forEach(r => {
+        const pStyle = r.realizedProfit > 0 ? { ...STYLES.CELL_NUM, font: { color: CLR_GREEN } } : r.realizedProfit < 0 ? { ...STYLES.CELL_NUM, font: { color: CLR_RED } } : STYLES.CELL_NUM;
+        data.push([
+            c(r.lotNumber, STYLES.CELL_TEXT), c(r.mirchiName, STYLES.CELL_TEXT),
+            c(r.purchaseQty, STYLES.CELL_NUM,"0.00"), c(r.purchaseValue, STYLES.CELL_NUM,FMT_CURRENCY), c(r.avgPurchaseRate, STYLES.CELL_NUM,FMT_CURRENCY),
+            c(r.soldQty, STYLES.CELL_NUM,"0.00"), c(r.salesValue, STYLES.CELL_NUM,FMT_CURRENCY), c(r.avgSaleRate, STYLES.CELL_NUM,FMT_CURRENCY),
+            c(r.remainingQty, STYLES.CELL_NUM,"0.00"), c(r.remainingValueAtCost, STYLES.CELL_NUM,FMT_CURRENCY),
+            c(r.realizedProfit, pStyle,FMT_CURRENCY), c(r.marginPercent/100, STYLES.CELL_NUM,"0.00%")
+        ]);
+    });
+    const ws = XLSX.utils.aoa_to_sheet(data);
+    ws['!cols'] = headers.map(() => ({ wch: 14 }));
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Summary');
+    XLSX.writeFile(wb, `Analysis_Summary.xlsx`);
+};

vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        host: true, // Listen on all addresses
+        port: 3000
+    },
+    preview: {
+        host: true, // Listen on all addresses
+        port: 7860,
+        strictPort: true,
+        allowedHosts: ['antaram-pratikpattanshetty.hf.space'] // Add this line
+    }
+})