Upload 28 files

App.tsx

@@ -7,6 +7,8 @@ import AwaakBill from './pages/AwaakBill';
 import StockReport from './pages/StockReport';
 import PartyLedger from './pages/PartyLedger';
 import Settings from './pages/Settings';
+import PWAInstallPrompt from './components/PWAInstallPrompt';
+import { PWAProvider } from './context/PWAContext';
 
 const App = () => {
   // Register Service Worker for PWA
@@ -25,19 +27,22 @@ const App = () => {
   }, []);
 
   return (
-    <HashRouter>
-      <Layout>
-        <Routes>
-          <Route path="/" element={<Dashboard />} />
-          <Route path="/jawaak" element={<JawaakBill />} />
-          <Route path="/awaak" element={<AwaakBill />} />
-          <Route path="/stock" element={<StockReport />} />
-          <Route path="/ledger" element={<PartyLedger />} />
-          <Route path="/settings" element={<Settings />} />
-          <Route path="*" element={<Navigate to="/" replace />} />
-        </Routes>
-      </Layout>
-    </HashRouter>
+    <PWAProvider>
+      <HashRouter>
+        <Layout>
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/jawaak" element={<JawaakBill />} />
+            <Route path="/awaak" element={<AwaakBill />} />
+            <Route path="/stock" element={<StockReport />} />
+            <Route path="/ledger" element={<PartyLedger />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Layout>
+        <PWAInstallPrompt />
+      </HashRouter>
+    </PWAProvider>
   );
 };
 

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

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

index.html

@@ -1,45 +1,52 @@
 <!DOCTYPE html>
 <html lang="mr">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pattanshetty Inventory</title>
-    
-    <!-- PWA Manifest -->
-    <link rel="manifest" href="/manifest.json" />
-    <meta name="theme-color" content="#0d9488" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <meta name="apple-mobile-web-app-title" content="Pattanshetty" />
-    <link rel="apple-touch-icon" href="/icon-192.png" />
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <style>
-      body { font-family: 'Inter', sans-serif; }
-      
-      /* Hide scrollbar for Chrome, Safari and Opera */
-      .no-scrollbar::-webkit-scrollbar {
-          display: none;
-      }
-      /* Hide scrollbar for IE, Edge and Firefox */
-      .no-scrollbar {
-          -ms-overflow-style: none;  /* IE and Edge */
-          scrollbar-width: none;  /* Firefox */
-      }
-
-      /* Chrome, Safari, Edge, Opera - Hide number input arrows */
-      input::-webkit-outer-spin-button,
-      input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      /* Firefox - Hide number input arrows */
-      input[type=number] {
-        -moz-appearance: textfield;
-      }
-    </style>
+
+<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": {
@@ -52,10 +59,37 @@
   }
 }
 </script>
-<link rel="stylesheet" href="/index.css">
+  <link rel="stylesheet" href="/index.css">
 </head>
-  <body class="bg-gray-50 text-gray-900">
-    <div id="root"></div>
+
+<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>

package-lock.json

@@ -8,6 +8,9 @@
       "name": "mirchi-vyapar-manager",
       "version": "0.0.0",
       "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",
@@ -256,6 +259,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -1476,6 +1488,26 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/use-sync-external-store": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
@@ -1582,6 +1614,15 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.8.30",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.30.tgz",
@@ -1668,6 +1709,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/cfb": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
@@ -1759,6 +1820,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.47.0.tgz",
+      "integrity": "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/crc-32": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@@ -1786,6 +1859,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
@@ -1937,6 +2019,16 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/dompurify": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.0.tgz",
+      "integrity": "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.259",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.259.tgz",
@@ -2212,6 +2304,17 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2230,6 +2333,12 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -2351,6 +2460,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2407,6 +2529,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2504,6 +2632,32 @@
         "node": ">=6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
+      "integrity": "sha512-dc6oQ8y37rRcHn316s4ngz/nOjayLF/FFxBF4V9zamQKRqXxyiH1zagkCdktdWhtoQId5K20xt1lB90XzkB+hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf-autotable": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.2.tgz",
+      "integrity": "sha512-YNKeB7qmx3pxOLcNeoqAv3qTS7KuvVwkFe5AduCawpop3NOkBUtqDToxNc225MlNecxT4kP2Zy3z/y/yvGdXUQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jspdf": "^2 || ^3"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2672,6 +2826,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2705,6 +2865,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2774,6 +2941,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
@@ -2919,6 +3096,13 @@
         "redux": "^5.0.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/reselect": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
@@ -2935,6 +3119,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.53.3",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
@@ -3044,6 +3238,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3070,6 +3274,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -3177,6 +3400,15 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/victory-vendor": {
       "version": "37.3.6",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",

package.json

@@ -9,6 +9,9 @@
     "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",

pages/AwaakBill.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
-    getParties, getMirchiTypes, generateBillNumber, saveTransaction
+    getParties, getMirchiTypes, generateBillNumber, saveTransaction,
+    checkLotUnique, getAvailableLotsByMirchi
 } from '../services/db';
 import {
-    Party, MirchiType, Transaction, TransactionItem, BillType, PaymentMode, PartyType
+    Party, MirchiType, Lot, Transaction, TransactionItem, BillType, PaymentMode, PartyType
 } from '../types';
-import { Plus, Trash2, Save, ChevronUp, ChevronDown, RotateCcw } from 'lucide-react';
-import PrintInvoice from '../components/PrintInvoice';
+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 }) => (
@@ -23,7 +25,6 @@ const SummaryInput = ({ label, value, onChange }: { label: string, value: number
                 const parsed = parseFloat(e.target.value);
                 onChange(isNaN(parsed) ? 0 : Math.max(0, parsed));
             }}
-            onWheel={e => e.currentTarget.blur()}
             placeholder="0"
         />
     </div>
@@ -59,11 +60,17 @@ const AwaakBill = () => {
     // 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: 2.0,
+        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,
@@ -121,8 +128,8 @@ const AwaakBill = () => {
 
         const gross = weights.reduce((a, b) => a + b, 0);
         const count = weights.length;
-        const potya = 0; // No deduction for Awaak
-        const net = gross; // Net is same as Gross
+        const potya = count * 1; // 1kg deduction per bag
+        const net = Math.max(0, gross - potya);
         const total = net * (item.rate_per_kg || 0);
 
         return {
@@ -146,6 +153,10 @@ const AwaakBill = () => {
                 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;
         }));
     };
@@ -158,6 +169,43 @@ const AwaakBill = () => {
         }));
     };
 
+    // 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(),
@@ -184,12 +232,13 @@ const AwaakBill = () => {
     const subtotal = items.reduce((acc, item) => acc + (item.item_total || 0), 0);
     const totalPoti = items.reduce((acc, item) => acc + (item.poti_count || 0), 0);
 
-    // Derived Expenses (0 if Return Mode usually, but keeping logic consistent)
-    // Derived Expenses
-    const cessAmt = (subtotal * expenses.cess_percent) / 100;
+    // 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 = cessAmt + adatAmt + hamaliAmt + (expenses.gaadi_bharni || 0);
+    const totalExp = potiAmt + cessAmt + adatAmt + hamaliAmt + (expenses.gaadi_bharni || 0);
     const grandTotal = subtotal + totalExp;
 
     // Calculate Payment Details based on Mode
@@ -234,6 +283,16 @@ const AwaakBill = () => {
                 alert(`Row ${i + 1}: Please select Mirchi Type`);
                 return false;
             }
+            if (!item.lot_number || item.lot_number.trim() === '') {
+                alert(`Row ${i + 1}: Please enter LOT number`);
+                return false;
+            }
+            // Validate LOT number format
+            const lotPattern = /^LOT-[A-Z]{3,4}-\d{8}-.+$/;
+            if (!lotPattern.test(item.lot_number)) {
+                alert(`Row ${i + 1}: Invalid LOT format. Use: LOT-XXXX-YYYYMMDD-XXX`);
+                return false;
+            }
             if (!item.poti_weights || item.poti_weights.length === 0) {
                 alert(`Row ${i + 1}: Please enter weights (e.g. 10, 20)`);
                 return false;
@@ -275,6 +334,7 @@ const AwaakBill = () => {
                 ...expenses,
                 cess_amount: cessAmt,
                 adat_amount: adatAmt,
+                poti_amount: potiAmt,
                 hamali_amount: hamaliAmt
             },
             payments: [
@@ -321,13 +381,29 @@ const AwaakBill = () => {
             </div>
 
             <div className="pt-2 border-t border-dashed space-y-2">
-                {/* 1. Cess Tax */}
-                <div className="flex justify-between items-center">
-                    <span className="text-gray-600 text-xs">सेस (Cess {expenses.cess_percent}%)</span>
-                    <span className="text-gray-800 font-medium">₹{cessAmt.toFixed(2)}</span>
+                {/* 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>
 
-                {/* 2. Adat / Market Yard Tax */}
+                {/* 3. Adat / Market Yard Tax */}
                 <SummaryInput
                     label={`अडत (Adat ${expenses.adat_percent}%)`}
                     value={expenses.adat_percent}
@@ -338,16 +414,15 @@ const AwaakBill = () => {
                     <span>₹{adatAmt.toFixed(2)}</span>
                 </div>
 
-                {/* 3. Poti (Packet) / Bag */}
-                <div className="flex justify-between items-center">
-                    <span className="text-gray-600 text-xs">पोती (Bags)</span>
-                    <span className="text-gray-800 font-medium">{totalPoti}</span>
-                </div>
-
                 {/* 4. Hamali */}
-                <div className="flex justify-between items-center">
-                    <span className="text-gray-600 text-xs">हमाली ({expenses.hamali_per_poti} * {totalPoti})</span>
-                    <span className="text-gray-800 font-medium">₹{hamaliAmt.toFixed(2)}</span>
+                <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 */}
@@ -516,9 +591,13 @@ const AwaakBill = () => {
                                     </button>
                                 </div>
 
-                                <div className="bg-gray-100 px-3 py-1 rounded text-sm font-mono text-gray-600">
-                                    {billDate}
-                                </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>
 
@@ -562,7 +641,7 @@ const AwaakBill = () => {
                                                 <select
                                                     className="w-full border border-gray-300 rounded p-2 text-sm bg-white"
                                                     value={item.mirchi_type_id || ''}
-                                                    onChange={e => handleItemChange(item.id!, 'mirchi_type_id', e.target.value)}
+                                                    onChange={e => handleMirchiChange(item.id!, e.target.value)}
                                                 >
                                                     <option value="">Select Type</option>
                                                     {mirchiTypes.map(m => (
@@ -570,6 +649,24 @@ const AwaakBill = () => {
                                                     ))}
                                                 </select>
                                             </div>
+
+                                            {/* LOT Number Section - Single Dynamic Field */}
+                                            {item.mirchi_type_id && (
+                                                <div className="col-span-2">
+                                                    <label className="block text-xs font-medium text-gray-500 mb-1">LOT Number</label>
+                                                    <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
@@ -585,7 +682,21 @@ const AwaakBill = () => {
                                                 <label className="block text-xs font-medium text-gray-500 mb-1">Gross</label>
                                                 <input type="number" readOnly className="w-full bg-gray-100 border border-gray-300 rounded p-2 text-sm" value={item.gross_weight} />
                                             </div>
-                                            {/* Removed Deduct and Net columns */}
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Poti (count)</label>
+                                                <input type="number" readOnly className="w-full bg-gray-100 border border-gray-300 rounded p-2 text-sm text-red-500" value={item.total_potya} />
+                                            </div>
+                                            <div>
+                                                <label className="block text-xs font-medium text-gray-500 mb-1">Net (Editable)</label>
+                                                <input
+                                                    type="number"
+                                                    min="0"
+                                                    className="w-full bg-blue-50 border border-blue-200 rounded p-2 text-sm font-bold text-blue-800 appearance-none"
+                                                    value={item.net_weight === 0 ? '' : item.net_weight}
+                                                    onChange={e => handleItemChange(item.id!, 'net_weight', Math.max(0, parseFloat(e.target.value) || 0))}
+                                                    placeholder="Auto-calculated"
+                                                />
+                                            </div>
 
                                             <div>
                                                 <label className="block text-xs font-medium text-gray-500 mb-1">Rate (₹)</label>
@@ -621,18 +732,22 @@ const AwaakBill = () => {
                         <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-0">
                             <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">बिल सारांश (Summary)</h3>
                             {SummaryContent()}
-                            <button
-                                onClick={handleSubmit}
-                                disabled={isSubmitting || isOverpaid}
-                                className="w-full mt-6 bg-teal-600 text-white py-3 rounded-lg font-semibold hover:bg-teal-700 flex justify-center items-center gap-2 shadow-lg shadow-teal-100 disabled:opacity-50 disabled:bg-gray-400"
-                            >
-                                <Save size={20} /> {isSubmitting ? 'Saving...' : 'जतन करा (Save)'}
-                            </button>
-                            {savedTransaction && (
-                                <div className="mt-4">
-                                    <PrintInvoice transaction={savedTransaction} />
-                                </div>
-                            )}
+                            <div 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>
 

pages/JawaakBill.tsx

@@ -1,15 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
-    getParties, getMirchiTypes, generateBillNumber, saveTransaction
+    getParties, getMirchiTypes, generateBillNumber, saveTransaction,
+    getAvailableLotsByMirchi
 } from '../services/db';
 import {
-    Party, MirchiType, Transaction, TransactionItem, BillType, PaymentMode, PartyType
+    Party, MirchiType, Lot, Transaction, TransactionItem, BillType, PaymentMode, PartyType
 } from '../types';
-import { Plus, Trash2, Save, ChevronUp, ChevronDown, RotateCcw } from 'lucide-react';
+import { Save, Trash2, Plus, RotateCcw, Printer, Download, ChevronUp, ChevronDown } from 'lucide-react';
 import PrintInvoice from '../components/PrintInvoice';
+import PdfInvoice from '../components/PdfInvoice';
 
-// 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>
@@ -23,7 +24,6 @@ const SummaryInput = ({ label, value, onChange }: { label: string, value: number
                 const parsed = parseFloat(e.target.value);
                 onChange(isNaN(parsed) ? 0 : Math.max(0, parsed));
             }}
-            onWheel={e => e.currentTarget.blur()}
             placeholder="0"
         />
     </div>
@@ -59,8 +59,11 @@ const JawaakBill = () => {
     // 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: 2.0,
+        cess_percent: 1.0,
         cess_amount: 0,
         adat_percent: 3.0,
         adat_amount: 0,
@@ -162,6 +165,29 @@ const JawaakBill = () => {
         }));
     };
 
+    // 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(),
@@ -188,14 +214,14 @@ const JawaakBill = () => {
     const subtotal = items.reduce((acc, item) => acc + (item.item_total || 0), 0);
     const totalPoti = items.reduce((acc, item) => acc + (item.poti_count || 0), 0);
 
-    // Derived Expenses (0 if Return Mode usually, but keeping logic consistent)
-    // Derived Expenses
-    const cessAmt = (subtotal * expenses.cess_percent) / 100;
-    const adatAmt = (subtotal * expenses.adat_percent) / 100;
+    // 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 = cessAmt + adatAmt + potiAmt + hamaliAmt + packagingHamaliAmt + (expenses.gaadi_bharni || 0);
+    const totalExp = potiAmt + cessAmt + adatAmt + hamaliAmt + packagingHamaliAmt + (expenses.gaadi_bharni || 0);
     const grandTotal = subtotal + totalExp;
 
     // Calculate Payment Details based on Mode
@@ -329,38 +355,48 @@ const JawaakBill = () => {
             </div>
 
             <div className="pt-2 border-t border-dashed space-y-2">
-                {/* 1. Cess Tax */}
-                <div className="flex justify-between items-center">
-                    <span className="text-gray-600 text-xs">सेस (Cess {expenses.cess_percent}%)</span>
-                    <span className="text-gray-800 font-medium">₹{cessAmt.toFixed(2)}</span>
+                {/* 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. Adat / Market Yard Tax */}
+                {/* 2. Cess Tax (calculated on subtotal + poti) */}
                 <SummaryInput
-                    label={`अडत (Adat ${expenses.adat_percent}%)`}
-                    value={expenses.adat_percent}
-                    onChange={val => setExpenses({ ...expenses, adat_percent: val })}
+                    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>₹{adatAmt.toFixed(2)}</span>
+                    <span>₹{cessAmt.toFixed(2)}</span>
                 </div>
 
-                {/* 3. Poti (Packet) / Bag */}
+                {/* 3. Adat / Market Yard Tax */}
                 <SummaryInput
-                    label={`पोती (Bags ${totalPoti}) Rate`}
-                    value={expenses.poti_rate}
-                    onChange={val => setExpenses({ ...expenses, poti_rate: val })}
+                    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>₹{potiAmt.toFixed(2)}</span>
+                    <span>₹{adatAmt.toFixed(2)}</span>
                 </div>
 
                 {/* 4. Hamali */}
-                <div className="flex justify-between items-center">
-                    <span className="text-gray-600 text-xs">हमाली ({expenses.hamali_per_poti} * {totalPoti})</span>
-                    <span className="text-gray-800 font-medium">₹{hamaliAmt.toFixed(2)}</span>
+                <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 */}
@@ -532,9 +568,13 @@ const JawaakBill = () => {
                                     </button>
                                 </div>
 
-                                <div className="bg-gray-100 px-3 py-1 rounded text-sm font-mono text-gray-600">
-                                    {billDate}
-                                </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>
 
@@ -578,7 +618,7 @@ const JawaakBill = () => {
                                                 <select
                                                     className="w-full border border-gray-300 rounded p-2 text-sm bg-white"
                                                     value={item.mirchi_type_id || ''}
-                                                    onChange={e => handleItemChange(item.id!, 'mirchi_type_id', e.target.value)}
+                                                    onChange={e => handleMirchiChange(item.id!, e.target.value)}
                                                 >
                                                     <option value="">Select Type</option>
                                                     {mirchiTypes.map(m => (
@@ -586,7 +626,27 @@ const JawaakBill = () => {
                                                     ))}
                                                 </select>
                                             </div>
-                                            <div className="col-span-2 md:col-span-4">
+
+                                            {/* 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"
@@ -643,18 +703,22 @@ const JawaakBill = () => {
                         <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-0">
                             <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">बिल सारांश (Summary)</h3>
                             {SummaryContent()}
-                            <button
-                                onClick={handleSubmit}
-                                disabled={isSubmitting || isOverpaid}
-                                className="w-full mt-6 bg-teal-600 text-white py-3 rounded-lg font-semibold hover:bg-teal-700 flex justify-center items-center gap-2 shadow-lg shadow-teal-100 disabled:opacity-50 disabled:bg-gray-400"
-                            >
-                                <Save size={20} /> {isSubmitting ? 'Saving...' : 'जतन करा (Save)'}
-                            </button>
-                            {savedTransaction && (
-                                <div className="mt-4">
-                                    <PrintInvoice transaction={savedTransaction} />
-                                </div>
-                            )}
+                            <div 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>
 

pages/PartyLedger.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { getParties, getTransactions, updateTransactionPayment } from '../services/db';
 import { Party, Transaction, PartyType, BillType } from '../types';
 import { Users, Filter, Search, ArrowLeft, Eye, Edit, Save, X, Printer, Download } from 'lucide-react';
-import PrintInvoice from '../components/PrintInvoice';
+import PrintInvoice from '../components/PrintInvoice.tsx';
+import PdfInvoice from '../components/PdfInvoice.tsx';
 import { exportPartyLedger } from '../utils/exportToExcel';
 
 const PartyLedger = () => {
@@ -47,6 +48,28 @@ const PartyLedger = () => {
         ? transactions.filter(t => t.party_id === selectedParty.id).sort((a, b) => new Date(b.bill_date).getTime() - new Date(a.bill_date).getTime())
         : [];
 
+    // Memoize combined transaction for PDF generation
+    const combinedTransaction = useMemo(() => {
+        if (!selectedParty || selectedTransactions.length === 0) return null;
+
+        const selected = partyTransactions.filter(t => selectedTransactions.includes(t.id));
+        if (selected.length === 0) return null;
+
+        return {
+            ...selected[0], // Use first transaction as base
+            id: `combined-${selectedParty.id}-${Date.now()}`, // Unique ID for combined
+            bill_number: `COMBINED-${selected.length}-BILLS`,
+            items: selected.flatMap(t => t.items),
+            subtotal: selected.reduce((sum, t) => sum + (t.subtotal || 0), 0),
+            total_expenses: selected.reduce((sum, t) => sum + (t.total_expenses || 0), 0),
+            total_amount: selected.reduce((sum, t) => sum + t.total_amount, 0),
+            paid_amount: selected.reduce((sum, t) => sum + t.paid_amount, 0),
+            balance_amount: selected.reduce((sum, t) => sum + t.balance_amount, 0),
+            gross_weight_total: selected.reduce((sum, t) => sum + (t.gross_weight_total || 0), 0),
+            net_weight_total: selected.reduce((sum, t) => sum + (t.net_weight_total || 0), 0),
+        };
+    }, [selectedTransactions, partyTransactions, selectedParty]);
+
     // Calculate Totals for List View
     const getPartyStats = (partyId: string) => {
         const txs = transactions.filter(t => t.party_id === partyId);
@@ -117,57 +140,31 @@ const PartyLedger = () => {
                                     <p className="text-sm text-gray-500">{selectedParty.city} • {selectedParty.phone}</p>
                                 </div>
                             </div>
-                            {selectedTransactions.length > 0 && (
-                                <button
-                                    onClick={() => {
-                                        const selected = partyTransactions.filter(t => selectedTransactions.includes(t.id));
-                                        if (selected.length > 0) {
-                                            // Create combined transaction for printing
-                                            const combinedTransaction = {
-                                                ...selected[0], // Use first transaction as base
-                                                id: `combined-${selectedParty.id}-${Date.now()}`, // Unique ID for combined
-                                                bill_number: `COMBINED-${selected.length}-BILLS`,
-                                                items: selected.flatMap(t => t.items),
-                                                subtotal: selected.reduce((sum, t) => sum + (t.subtotal || 0), 0),
-                                                total_expenses: selected.reduce((sum, t) => sum + (t.total_expenses || 0), 0),
-                                                total_amount: selected.reduce((sum, t) => sum + t.total_amount, 0),
-                                                paid_amount: selected.reduce((sum, t) => sum + t.paid_amount, 0),
-                                                balance_amount: selected.reduce((sum, t) => sum + t.balance_amount, 0),
-                                                gross_weight_total: selected.reduce((sum, t) => sum + (t.gross_weight_total || 0), 0),
-                                                net_weight_total: selected.reduce((sum, t) => sum + (t.net_weight_total || 0), 0),
-                                            };
-                                            // Trigger print for combined transaction
-                                            const printComponent = document.createElement('div');
-                                            document.body.appendChild(printComponent);
-                                            // Use PrintInvoice component
-                                            import('../components/PrintInvoice').then(({ default: PrintInvoice }) => {
-                                                const React = require('react');
-                                                const ReactDOM = require('react-dom/client');
-                                                const root = ReactDOM.createRoot(printComponent);
-                                                root.render(React.createElement(PrintInvoice, { transaction: combinedTransaction }));
-                                                setTimeout(() => {
-                                                    const printBtn = printComponent.querySelector('button');
-                                                    if (printBtn) printBtn.click();
-                                                    setTimeout(() => {
-                                                        root.unmount();
-                                                        document.body.removeChild(printComponent);
-                                                    }, 1000);
-                                                }, 500);
-                                            });
-                                        }
-                                    }}
-                                    className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors flex items-center gap-2"
+                            {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} />
-                                    Print {selectedTransactions.length} Selected
-                                </button>
+                                    <Printer size={18} className="shrink-0" />
+                                    <span className="hidden sm:inline">Print {selectedTransactions.length} Selected</span>
+                                </PrintInvoice>
+                            )}
+                            {combinedTransaction && (
+                                <PdfInvoice
+                                    transaction={combinedTransaction}
+                                    className="px-2 sm:px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-1 sm:gap-2"
+                                >
+                                    <Download size={18} className="shrink-0" />
+                                    <span className="hidden sm:inline">PDF {selectedTransactions.length} Selected</span>
+                                </PdfInvoice>
                             )}
                             <button
                                 onClick={() => exportPartyLedger(selectedParty, partyTransactions)}
-                                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center gap-2"
+                                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} />
-                                Export to Excel
+                                <Download size={18} className="shrink-0" />
+                                <span className="hidden sm:inline">Export to Excel</span>
                             </button>
                         </div>
                     </>
@@ -433,7 +430,14 @@ const PartyLedger = () => {
                                                 <td className="px-6 py-4 text-gray-600">{tx.bill_date}</td>
                                                 <td className="px-6 py-4 font-mono text-gray-500">{tx.bill_number}</td>
                                                 <td className="px-6 py-4">
-                                                    {tx.items.map(i => i.mirchi_name).join(', ')}
+                                                    {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 ? (
@@ -488,7 +492,18 @@ const PartyLedger = () => {
                                                     )}
                                                 </td>
                                                 <td className="px-6 py-4 text-center">
-                                                    <PrintInvoice transaction={tx} />
+                                                    <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>
                                         ))
@@ -509,9 +524,23 @@ const PartyLedger = () => {
                                 partyTransactions.map(tx => (
                                     <div key={tx.id} className="p-4 space-y-3">
                                         <div className="flex justify-between items-start">
-                                            <div>
-                                                <div className="text-xs text-gray-500">{tx.bill_date}</div>
-                                                <div className="font-mono text-sm font-medium text-gray-800">{tx.bill_number}</div>
+                                            <div 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}</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>
@@ -520,7 +549,14 @@ const PartyLedger = () => {
 
                                         <div className="text-sm text-gray-600">
                                             <span className="font-medium text-gray-500 text-xs block mb-1">Items:</span>
-                                            {tx.items.map(i => i.mirchi_name).join(', ')}
+                                            {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">
@@ -575,8 +611,17 @@ const PartyLedger = () => {
                                         )}
 
                                         {/* Print Button for Mobile */}
-                                        <div className="pt-2 border-t border-gray-100 mt-2">
-                                            <PrintInvoice transaction={tx} />
+                                        <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>
                                 ))
@@ -589,7 +634,7 @@ const PartyLedger = () => {
                     </>
                 )}
             </div>
-        </div>
+        </div >
     );
 };
 

pages/Settings.tsx

@@ -7,6 +7,7 @@ import {
 } 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');
@@ -14,8 +15,7 @@ const Settings = () => {
     const [mirchiTypes, setMirchiTypes] = useState<MirchiType[]>([]);
 
     // PWA Install
-    const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
-    const [isInstallable, setIsInstallable] = useState(false);
+    const { isInstallable, installApp } = usePWA();
 
     // Form States
     const [newParty, setNewParty] = useState<Partial<Party>>({
@@ -41,19 +41,6 @@ const Settings = () => {
             setMirchiTypes(await apiGetMirchiTypes());
         };
         loadData();
-
-        // Listen for PWA install prompt
-        const handleBeforeInstallPrompt = (e: any) => {
-            e.preventDefault();
-            setDeferredPrompt(e);
-            setIsInstallable(true);
-        };
-
-        window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
-
-        return () => {
-            window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
-        };
     }, []);
 
     const handleSaveParty = async () => {
@@ -105,17 +92,7 @@ const Settings = () => {
     };
 
     const handleInstallClick = async () => {
-        if (!deferredPrompt) return;
-
-        deferredPrompt.prompt();
-        const { outcome } = await deferredPrompt.userChoice;
-
-        if (outcome === 'accepted') {
-            console.log('✅ PWA installed');
-        }
-
-        setDeferredPrompt(null);
-        setIsInstallable(false);
+        await installApp();
     };
 
     return (

pages/StockReport.tsx

@@ -31,24 +31,39 @@ const StockReport = () => {
         [lots, searchTerm]
     );
 
-    const aggregatedByMirchi = useMemo(() => {
-        const map = new Map<string, { mirchiId: string; mirchiName: string; totalQty: number; remainingQty: number }>();
+    const aggregatedByLot = useMemo(() => {
+        // Calculate bag count for each lot from transactions
+        return filteredLots.map(lot => {
+            let totalBags = 0;
 
-        filteredLots.forEach((lot) => {
-            const key = lot.mirchi_type_id;
-            const existing = map.get(key) || {
-                mirchiId: lot.mirchi_type_id,
+            // 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,
-                totalQty: 0,
-                remainingQty: 0,
+                totalQuantity: lot.total_quantity,
+                remainingQty: lot.remaining_quantity,
+                totalBags: Math.max(0, totalBags),
+                status: lot.status,
+                purchaseDate: lot.purchase_date,
+                avgRate: lot.avg_rate
             };
-            existing.totalQty += lot.total_quantity;
-            existing.remainingQty += lot.remaining_quantity;
-            map.set(key, existing);
         });
-
-        return Array.from(map.values());
-    }, [filteredLots]);
+    }, [filteredLots, transactions]);
 
     const detailMovements = useMemo(() => {
         if (!selectedMirchiId) return [];
@@ -60,37 +75,45 @@ const StockReport = () => {
             partyName: string;
             inQty: number;
             outQty: number;
+            inBags: number;
+            outBags: number;
             typeLabel: string;
             isReturn: boolean;
         }[] = [];
 
         transactions.forEach((tx) => {
             tx.items
-                .filter((item) => item.mirchi_type_id === selectedMirchiId)
+                .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.JAWAAK) {
-                        // Jawaak = Purchase / Stock IN
+                    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 {
-                        // Awaak = Sales / Stock OUT
+                        // 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';
                         }
                     }
@@ -102,6 +125,8 @@ const StockReport = () => {
                         partyName: party?.name || tx.party_name || 'Unknown Party',
                         inQty,
                         outQty,
+                        inBags,
+                        outBags,
                         typeLabel,
                         isReturn: tx.is_return,
                     });
@@ -111,7 +136,7 @@ const StockReport = () => {
         // Sort latest first
         rows.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
         return rows;
-    }, [selectedMirchiName, transactions, parties]);
+    }, [selectedMirchiId, transactions, parties]);
 
     return (
         <div className="space-y-4">
@@ -162,59 +187,64 @@ const StockReport = () => {
                             <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">एकूण क्वांटिटी (Total Qty)</th>
-                                        <th className="px-6 py-4 text-right">शिल्लक (Remaining)</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">
-                                    {aggregatedByMirchi.length === 0 ? (
+                                    {aggregatedByLot.length === 0 ? (
                                         <tr>
                                             <td
-                                                colSpan={4}
+                                                colSpan={5}
                                                 className="text-center py-8 text-gray-500"
                                             >
                                                 No active stock found
                                             </td>
                                         </tr>
                                     ) : (
-                                        aggregatedByMirchi.map((row) => {
+                                        aggregatedByLot.map((row) => {
                                             const isLow = row.remainingQty < LOW_STOCK_THRESHOLD;
                                             const statusLabel =
                                                 row.remainingQty === 0
                                                     ? 'Out of Stock'
                                                     : isLow
-                                                    ? 'Low Stock'
-                                                    : 'Available';
+                                                        ? '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';
+                                                        ? 'bg-orange-100 text-orange-700'
+                                                        : 'bg-green-100 text-green-700';
 
                                             return (
                                                 <tr
-                                                    key={row.mirchiId}
+                                                    key={row.lotId}
                                                     className="hover:bg-gray-50 transition-colors cursor-pointer"
                                                     onClick={() => {
-                                                        setSelectedMirchiId(row.mirchiId);
-                                                        setSelectedMirchiName(row.mirchiName);
+                                                        setSelectedMirchiId(row.lotId);
+                                                        setSelectedMirchiName(row.lotNumber);
                                                         setViewMode('detail');
                                                     }}
                                                 >
-                                                    <td className="px-6 py-4 font-medium text-teal-700">
+                                                    <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">
-                                                        {row.totalQty} kg
+                                                        <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'
-                                                            }`}
+                                                            className={`font-bold ${isLow ? 'text-red-500' : 'text-gray-800'
+                                                                }`}
                                                         >
                                                             {row.remainingQty} kg
                                                         </span>
@@ -236,43 +266,43 @@ const StockReport = () => {
 
                         {/* Mobile cards */}
                         <div className="md:hidden flex flex-col divide-y divide-gray-100">
-                            {aggregatedByMirchi.length === 0 ? (
+                            {aggregatedByLot.length === 0 ? (
                                 <div className="p-6 text-center text-gray-500 text-sm">
                                     No active stock found
                                 </div>
                             ) : (
-                                aggregatedByMirchi.map((row) => {
+                                aggregatedByLot.map((row) => {
                                     const isLow = row.remainingQty < LOW_STOCK_THRESHOLD;
                                     const statusLabel =
                                         row.remainingQty === 0
                                             ? 'Out of Stock'
                                             : isLow
-                                            ? 'Low Stock'
-                                            : 'Available';
+                                                ? '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';
+                                                ? 'bg-orange-100 text-orange-700'
+                                                : 'bg-green-100 text-green-700';
 
                                     return (
                                         <button
-                                            key={row.mirchiName}
+                                            key={row.lotId}
                                             className="text-left p-4 space-y-2 hover:bg-gray-50 transition-colors"
                                             onClick={() => {
-                                                setSelectedMirchiId(row.mirchiId);
-                                                setSelectedMirchiName(row.mirchiName);
+                                                setSelectedMirchiId(row.lotId);
+                                                setSelectedMirchiName(row.lotNumber);
                                                 setViewMode('detail');
                                             }}
                                         >
                                             <div className="flex items-center justify-between gap-2">
                                                 <div>
-                                                    <div className="text-sm font-semibold text-gray-900">
-                                                        {row.mirchiName}
+                                                    <div className="text-sm font-mono font-semibold text-teal-700">
+                                                        {row.lotNumber}
                                                     </div>
                                                     <div className="text-xs text-gray-500">
-                                                        Mirchi Jaat / Type
+                                                        {row.mirchiName}
                                                     </div>
                                                 </div>
                                                 <span
@@ -281,17 +311,16 @@ const StockReport = () => {
                                                     {statusLabel}
                                                 </span>
                                             </div>
-                                            <div className="grid grid-cols-2 gap-2 text-xs mt-1">
+                                            <div className="grid grid-cols-2 gap-2 text-xs">
                                                 <div className="bg-gray-50 p-2 rounded">
-                                                    <div className="text-gray-500">Total Qty</div>
-                                                    <div className="font-medium">{row.totalQty} kg</div>
+                                                    <div 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</div>
+                                                    <div className="text-gray-500">Remaining Qty</div>
                                                     <div
-                                                        className={`font-bold ${
-                                                            isLow ? 'text-red-500' : 'text-gray-800'
-                                                        }`}
+                                                        className={`font-bold ${isLow ? 'text-red-500' : 'text-gray-800'
+                                                            }`}
                                                     >
                                                         {row.remainingQty} kg
                                                     </div>
@@ -313,6 +342,8 @@ const StockReport = () => {
                                         <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>
@@ -321,7 +352,7 @@ const StockReport = () => {
                                 <tbody className="divide-y divide-gray-100">
                                     {detailMovements.length === 0 ? (
                                         <tr>
-                                            <td colSpan={6} className="px-6 py-8 text-center text-gray-500">
+                                            <td colSpan={8} className="px-6 py-8 text-center text-gray-500">
                                                 No movements found for this Mirchi type.
                                             </td>
                                         </tr>
@@ -330,8 +361,14 @@ const StockReport = () => {
                                             <tr key={row.id} className="hover:bg-gray-50">
                                                 <td className="px-6 py-4 text-gray-600">{row.date}</td>
                                                 <td className="px-6 py-4 font-mono text-gray-500">{row.billNo}</td>
-                                                <td className="px-6 py-4 text-gray-800">{row.partyName}</td>
-                                                <td className="px-6 py-4 text-right text-green-700 font-medium">
+                                                <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">
@@ -339,13 +376,12 @@ const StockReport = () => {
                                                 </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'
+                                                        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>
@@ -377,13 +413,12 @@ const StockReport = () => {
                                                 </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'
+                                                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>

public/service-worker.js

@@ -1,18 +1,22 @@
-const CACHE_NAME = 'pattanshetty-v1';
+const CACHE_NAME = 'pattanshetty-v2';
 const urlsToCache = [
     '/',
     '/index.html',
-    '/src/main.tsx',
-    '/src/App.tsx',
 ];
 
 // Install event - cache resources
 self.addEventListener('install', (event) => {
+    console.log('[ServiceWorker] Installing...');
     event.waitUntil(
         caches.open(CACHE_NAME)
             .then((cache) => {
-                console.log('Opened cache');
-                return cache.addAll(urlsToCache);
+                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();
@@ -20,49 +24,69 @@ self.addEventListener('install', (event) => {
 
 // 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('Deleting old cache:', cacheName);
+                        console.log('[ServiceWorker] Deleting old cache:', cacheName);
                         return caches.delete(cacheName);
                     }
                 })
             );
+        }).catch((err) => {
+            console.error('[ServiceWorker] Activation failed:', err);
         })
     );
     self.clients.claim();
 });
 
-// Fetch event - serve from cache, fallback to network
+// Fetch event - Network first, fallback to cache
 self.addEventListener('fetch', (event) => {
+    // Skip non-GET requests
+    if (event.request.method !== 'GET') {
+        return;
+    }
+
     event.respondWith(
-        caches.match(event.request)
+        fetch(event.request)
             .then((response) => {
-                // Cache hit - return response
-                if (response) {
+                // Check if valid response
+                if (!response || response.status !== 200 || response.type === 'error') {
                     return response;
                 }
 
-                return fetch(event.request).then(
-                    (response) => {
-                        // Check if valid response
-                        if (!response || response.status !== 200 || response.type !== 'basic') {
-                            return response;
-                        }
-
-                        // Clone the response
-                        const responseToCache = response.clone();
+                // Clone the response
+                const responseToCache = response.clone();
 
-                        caches.open(CACHE_NAME)
-                            .then((cache) => {
-                                cache.put(event.request, responseToCache);
-                            });
+                caches.open(CACHE_NAME)
+                    .then((cache) => {
+                        cache.put(event.request, responseToCache);
+                    })
+                    .catch((err) => {
+                        console.error('[ServiceWorker] Cache put failed:', err);
+                    });
 
-                        return response;
-                    }
-                );
+                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

@@ -185,6 +185,41 @@ export const getActiveLots = async (): Promise<Lot[]> => {
     }
 };
 
+// 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 {

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);
+};

vite.config.ts

@@ -1,16 +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
-    }
-})
+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
+    }
+})