From 3861605df17dcaf82a29f7fbd84376f1fc7cd112 Mon Sep 17 00:00:00 2001
From: suryacp23 <suryacp.com@gmail.com>
Date: Fri, 17 Jul 2026 13:13:40 +0530
Subject: [PATCH] reports page added

---
 src/App.tsx                          |   2 +
 src/api/config.ts                    |  28 ++++
 src/screens/ConsoleLayout.tsx        |   8 +-
 src/screens/DailySalesReportPage.tsx | 230 +++++++++++++++++++++++++++
 src/screens/tabs.ts                  |   6 +-
 5 files changed, 268 insertions(+), 6 deletions(-)
 create mode 100644 src/screens/DailySalesReportPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 15be7b1..0bbea71 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import { StoresPage } from './screens/StoresPage'
 import { DailyLogsPage } from './screens/DailyLogsPage'
 import { AllDailyLogsPage } from './screens/AllDailyLogsPage'
 import { AnalyticsPage } from './screens/AnalyticsPage'
+import { DailySalesReportPage } from './screens/DailySalesReportPage'
 function App() {
   return (
     <AuthProvider>
@@ -33,6 +34,7 @@ function App() {
 
 
             <Route path="/analytics" element={<AnalyticsPage />} />
+            <Route path="/sales-report" element={<DailySalesReportPage />} />
           </Route>
           <Route path="*" element={<Navigate to="/daily" replace />} />
         </Routes>
diff --git a/src/api/config.ts b/src/api/config.ts
index 59a4a58..ff193ea 100644
--- a/src/api/config.ts
+++ b/src/api/config.ts
@@ -175,3 +175,31 @@ export const WORKFLOWS = {
   store: STORE,
   dailyReports: DAILY_REPORTS,
 } as const;
+
+// --- Daily Sales Report Constants ---
+export const SALES_REPORT_ROUTES = [
+  'Krishna',
+  'East-1',
+  'East-2',
+  'East-3',
+  'East-4',
+  'West-1',
+  'West-2',
+  'West-3',
+  'West-4'
+];
+
+export const SALES_REPORT_DISTRIBUTORS = [
+  'Banashree Multi Millet Flour',
+  'Shiva nandi Enterprises',
+  'BPK & Co',
+  'Gaviranga',
+  'Bhagwan Enterprises',
+  'Shreshtaa Trading Co',
+  'Rajarajeshwari Enterprises',
+  'Byraveshwara Trading Co'
+];
+
+export const SALES_REPORT_SO_NAMES = [
+  'Surya C'
+];
diff --git a/src/screens/ConsoleLayout.tsx b/src/screens/ConsoleLayout.tsx
index ac5454b..c4142df 100644
--- a/src/screens/ConsoleLayout.tsx
+++ b/src/screens/ConsoleLayout.tsx
@@ -27,7 +27,7 @@ export function ConsoleLayout() {
 
   return (
     <div className="h-[100dvh] overflow-hidden bg-app flex flex-col">
-      <header className="sticky top-0 z-20 shrink-0 flex items-center justify-between gap-3 px-4 h-14 pt-[env(safe-area-inset-top)] top-navbar">
+      <header className="print:hidden sticky top-0 z-20 shrink-0 flex items-center justify-between gap-3 px-4 h-14 pt-[env(safe-area-inset-top)] top-navbar">
         <div className="flex items-center gap-3 flex-1">
           <button
             type="button"
@@ -51,10 +51,10 @@ export function ConsoleLayout() {
       </main>
 
       <nav
-        className="fixed bottom-0 inset-x-0 z-20 h-16 pb-[env(safe-area-inset-bottom)] bg-card border-t border-border-subtle grid shadow-[0_-2px_16px_rgba(11,27,59,0.06)]"
-        style={{ gridTemplateColumns: `repeat(${SCREENS.filter(t => t.key !== 'analytics' && t.key !== 'all-daily').length}, minmax(0, 1fr))` }}
+        className="print:hidden fixed bottom-0 inset-x-0 z-20 h-16 pb-[env(safe-area-inset-bottom)] bg-card border-t border-border-subtle grid shadow-[0_-2px_16px_rgba(11,27,59,0.06)]"
+        style={{ gridTemplateColumns: `repeat(${SCREENS.filter(t => t.key !== 'analytics' && t.key !== 'all-daily' && t.key !== 'sales-report').length}, minmax(0, 1fr))` }}
       >
-        {SCREENS.filter(t => t.key !== 'analytics' && t.key !== 'all-daily').map((t) => {
+        {SCREENS.filter(t => t.key !== 'analytics' && t.key !== 'all-daily' && t.key !== 'sales-report').map((t) => {
           const Icon = t.icon;
           return (
             <NavLink
diff --git a/src/screens/DailySalesReportPage.tsx b/src/screens/DailySalesReportPage.tsx
new file mode 100644
index 0000000..4588e90
--- /dev/null
+++ b/src/screens/DailySalesReportPage.tsx
@@ -0,0 +1,230 @@
+import { useState, type FormEvent } from 'react';
+import { Card, Input, Select } from '../components/reusable';
+import { Button } from '../components/buttons';
+import {
+  SALES_REPORT_ROUTES,
+  SALES_REPORT_DISTRIBUTORS,
+  SALES_REPORT_SO_NAMES
+} from '../api/config';
+
+export function DailySalesReportPage() {
+  const [date, setDate] = useState('');
+  const [route, setRoute] = useState('');
+  const [distributor, setDistributor] = useState('');
+  const [soName, setSoName] = useState('');
+
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [reportData, setReportData] = useState<any>(null);
+
+  const printTable = () => {
+    const tableHtml = document.getElementById('report-table')?.outerHTML;
+    if (!tableHtml) return;
+
+    const printWindow = window.open('', '', 'height=600,width=800');
+    if (!printWindow) return;
+
+    printWindow.document.write(`
+      <html>
+        <head>
+          <title>Daily Sales Report</title>
+          <style>
+            body { font-family: sans-serif; padding: 20px; margin: 0; }
+            .header-block { text-align: center; margin-bottom: 20px; }
+            .header-block h1 { margin: 0; font-size: 18px; font-weight: bold; }
+            .header-block h2 { margin: 4px 0 12px; font-size: 14px; font-weight: normal; }
+            .header-block h3 { margin: 0 0 20px; font-size: 16px; font-weight: bold; text-decoration: underline; }
+            .meta-info { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 16px; font-weight: bold; }
+            .meta-right { text-align: right; line-height: 1.5; }
+            table { width: 100%; border-collapse: collapse; font-size: 12px; border: 1px solid black; }
+            th, td { border: 1px solid black; padding: 6px; text-align: left; }
+            th { font-weight: bold; background-color: #f3f4f6; text-align: center; }
+            .text-center { text-align: center; }
+            .align-bottom { vertical-align: bottom; }
+          </style>
+        </head>
+        <body>
+          <div class="header-block">
+            <h1>Krishna Flour Mills (Bangalore) Pvt. Limited</h1>
+            <h2>19, Platform Road, Bengaluru - 560 020</h2>
+            <h3>DAILY ORDER REPORT</h3>
+          </div>
+          <div class="meta-info">
+            <div>Distributor Name : ${distributor}</div>
+            <div class="meta-right">
+              <div>Date : ${date}</div>
+              <div>SO Name : ${soName}</div>
+            </div>
+          </div>
+          ${tableHtml}
+        </body>
+      </html>
+    `);
+    
+    printWindow.document.close();
+    printWindow.focus();
+    setTimeout(() => {
+      printWindow.print();
+      printWindow.close();
+    }, 250);
+  };
+
+  async function submit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    setReportData(null);
+    try {
+      const res = await fetch('https://sandbox.getzino.in/api/papi2/daily-sales-report', {
+        method: 'POST',
+        headers: {
+          'TemplateID': '157',
+          'Accept': 'application/json, text/plain, */*',
+          'Content-Type': 'application/json',
+          'sec-ch-ua-platform': '"Android"',
+        },
+        body: JSON.stringify({
+          date,
+          route,
+          distributor,
+          so_name: soName,
+        })
+      });
+
+      if (!res.ok) {
+        throw new Error(`Error: ${res.status} ${res.statusText}`);
+      }
+
+      const data = await res.json();
+      setReportData(data);
+    } catch (err) {
+      setError((err as Error).message ?? 'Failed to fetch report');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+      <h1 className="m-0 text-xl font-extrabold text-strong tracking-[-0.01em] print:hidden">Daily Sales Report</h1>
+
+      <Card className="print:hidden">
+        <form onSubmit={submit} className="flex flex-col gap-4">
+          <Input
+            label="Date"
+            type="date"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+            required
+          />
+          <Select
+            label="Route"
+            value={route}
+            onChange={(e) => setRoute(e.target.value)}
+            options={[{ value: '', label: 'Select Route' }, ...SALES_REPORT_ROUTES]}
+            required
+          />
+          <Select
+            label="Distributor"
+            value={distributor}
+            onChange={(e) => setDistributor(e.target.value)}
+            options={[{ value: '', label: 'Select Distributor' }, ...SALES_REPORT_DISTRIBUTORS]}
+            required
+          />
+          <Select
+            label="SO Name"
+            value={soName}
+            onChange={(e) => setSoName(e.target.value)}
+            options={[{ value: '', label: 'Select SO Name' }, ...SALES_REPORT_SO_NAMES]}
+            required
+          />
+
+          {error && <div className="text-xs text-ruby-600 font-medium">{error}</div>}
+
+          <Button type="submit" full disabled={busy}>
+            {busy ? 'Fetching...' : 'Get Report'}
+          </Button>
+        </form>
+      </Card>
+
+      {reportData?.response && (
+        <Card className="overflow-x-auto p-0 pb-2 border-0 shadow-none print:m-0 print:p-0">
+          <div className="p-4 pb-2 print:hidden">
+            <h2 className="text-lg font-bold text-strong m-0">Report Details</h2>
+          </div>
+          <div className="w-full overflow-x-auto p-4 pt-2">
+            <div className="min-w-max">
+              <div className="flex flex-col items-center text-center gap-1">
+                <h1 className="m-0 text-lg font-bold text-strong">Krishna Flour Mills (Bangalore) Pvt. Limited</h1>
+                <h2 className="m-0 text-sm font-normal text-strong">19, Platform Road, Bengaluru - 560 020</h2>
+                <h3 className="m-0 text-base font-bold text-strong underline mt-1 mb-4">DAILY ORDER REPORT</h3>
+              </div>
+              
+              <div className="flex justify-between items-start text-sm font-bold text-strong mb-2">
+                <div>Distributor Name : {distributor}</div>
+                <div className="text-right flex flex-col gap-1.5">
+                  <div>Date : {date}</div>
+                  <div>SO Name : {soName}</div>
+                </div>
+              </div>
+
+              <table id="report-table" className="w-full text-sm text-left border border-black border-collapse mt-2">
+              <thead>
+                <tr className="border-b border-black bg-black/5">
+                  <th className="py-2 px-3 font-bold text-black align-bottom border-r border-black" rowSpan={2}>Sl No</th>
+                  <th className="py-2 px-3 font-bold text-black align-bottom" rowSpan={2}>Store</th>
+                  {reportData.response.headers?.map((h: any) => (
+                    <th key={h.br_code} colSpan={h.skus?.length || 1} className="py-1 px-3 font-bold text-black text-center border-l border-black">
+                      {h.br_code}
+                    </th>
+                  ))}
+                  <th className="py-2 px-3 font-bold text-black align-bottom border-l border-black" rowSpan={2}>Total</th>
+                </tr>
+                <tr className="border-b border-black bg-black/5">
+                  {reportData.response.headers?.flatMap((h: any) => h.skus || []).map((sku: string, idx: number) => (
+                    <th key={`${sku}-${idx}`} className="py-1 px-3 font-bold text-black text-center border-l border-black whitespace-nowrap">
+                      {sku}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {reportData.response.rows?.map((row: any) => (
+                  <tr key={row.sl_no} className="border-b border-black hover:bg-black/5 transition-colors">
+                    <td className="py-2 px-3 text-strong border-r border-black">{row.sl_no}</td>
+                    <td className="py-2 px-3 text-strong whitespace-nowrap">{row.store}</td>
+                    {reportData.response.headers?.flatMap((h: any) => h.skus || []).map((sku: string, idx: number) => (
+                      <td key={`${sku}-${idx}`} className="py-2 px-3 text-strong text-center border-l border-black">
+                        {row.products?.[sku] ?? 0}
+                      </td>
+                    ))}
+                    <td className="py-2 px-3 text-strong font-bold text-center border-l border-black bg-black/5">{row.total ?? 0}</td>
+                  </tr>
+                ))}
+                {reportData.response.total_row && (
+                  <tr className="border-b border-black bg-black/10 font-bold">
+                    <td className="py-2 px-3 text-strong border-r border-black">{reportData.response.total_row.sl_no}</td>
+                    <td className="py-2 px-3 text-strong whitespace-nowrap text-right">{reportData.response.total_row.store}</td>
+                    {reportData.response.headers?.flatMap((h: any) => h.skus || []).map((sku: string, idx: number) => (
+                      <td key={`total-${sku}-${idx}`} className="py-2 px-3 text-strong text-center border-l border-black">
+                        {reportData.response.total_row.products?.[sku] ?? 0}
+                      </td>
+                    ))}
+                    <td className="py-2 px-3 text-strong text-center border-l border-black">{reportData.response.total_row.total ?? 0}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+            {(!reportData.response.rows || reportData.response.rows.length === 0) && (
+              <div className="py-8 text-center text-faint">No records found.</div>
+            )}
+            </div>
+          </div>
+          <div className="p-4 pt-2 flex justify-center print:hidden">
+            <Button type="button" onClick={printTable} full>Print / Save PDF</Button>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/src/screens/tabs.ts b/src/screens/tabs.ts
index 44b4611..53eb9cf 100644
--- a/src/screens/tabs.ts
+++ b/src/screens/tabs.ts
@@ -1,4 +1,4 @@
-import { Store, Phone, ShoppingCart, ClipboardList, Home, type LucideIcon } from 'lucide-react';
+import { Store, Phone, ShoppingCart, ClipboardList, Home, FileText, type LucideIcon } from 'lucide-react';
 import {
   OrdersView,
   CallsView,
@@ -15,9 +15,10 @@ import {
 } from '../components/dv';
 
 import { AnalyticsPage } from './AnalyticsPage';
+import { DailySalesReportPage } from './DailySalesReportPage';
 import { BarChart2 } from 'lucide-react';
 
-export type ScreenKey = 'orders' | 'calls' | 'stores' | 'daily' | 'analytics' | 'all-daily';
+export type ScreenKey = 'orders' | 'calls' | 'stores' | 'daily' | 'analytics' | 'all-daily' | 'sales-report';
 
 export interface ScreenDef {
   key: ScreenKey;
@@ -31,6 +32,7 @@ export interface ScreenDef {
 
 export const SCREENS: ScreenDef[] = [
   { key: 'analytics', label: 'Analytics', icon: BarChart2, View: AnalyticsPage as any },
+  { key: 'sales-report', label: 'Sales Report', icon: FileText, View: DailySalesReportPage as any },
   { key: 'daily', label: 'Home', icon: Home, View: DailyLogsView, Detail: DailyLogDetail, noun: 'Daily Log' },
   { key: 'orders', label: 'Orders', icon: ShoppingCart, View: OrdersView, Detail: OrderDetail, noun: 'Order' },
   { key: 'calls', label: 'Calls', icon: Phone, View: CallsView, Detail: CallDetail, noun: 'Call' },