391 lines
15 KiB
TypeScript
391 lines
15 KiB
TypeScript
import { useState, useEffect, type FormEvent } from 'react';
|
|
import { Card, Input, Select } from '../components/reusable';
|
|
import { Button } from '../components/buttons/Button';
|
|
import {
|
|
SALES_REPORT_ROUTES,
|
|
ROUTE_WISE_DISTRIBUTORS,
|
|
BASE_URL,
|
|
PIPELINE,
|
|
MAX_SKUS_PER_CHUNK
|
|
} from '../api/config';
|
|
import { Download, Printer } from 'lucide-react';
|
|
import jsPDF from 'jspdf';
|
|
import autoTable from 'jspdf-autotable';
|
|
|
|
export function DailySalesReportPage() {
|
|
const [date, setDate] = useState('');
|
|
const [route, setRoute] = useState('');
|
|
const [distributor, setDistributor] = useState('');
|
|
const [soEmail, setSoEmail] = useState('');
|
|
const [soOptions, setSoOptions] = useState<{ value: string, label: string }[]>([]);
|
|
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [reportData, setReportData] = useState<any>(null);
|
|
|
|
useEffect(() => {
|
|
async function fetchSOs() {
|
|
try {
|
|
const res = await fetch(`${BASE_URL}${PIPELINE.endpoints.salesOfficers}`);
|
|
const data = await res.json();
|
|
if (data?.response?.options) {
|
|
setSoOptions(data.response.options);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch SOs', err);
|
|
}
|
|
}
|
|
fetchSOs();
|
|
}, []);
|
|
|
|
const generatePdfDoc = () => {
|
|
const totalSkus = reportData?.response?.headers?.reduce((acc: number, h: any) => acc + (h.skus?.length || 0), 0) || 0;
|
|
const maxSkusOnPage = Math.min(totalSkus, MAX_SKUS_PER_CHUNK);
|
|
const requiredWidth = Math.max(297, (maxSkusOnPage + 3) * 12 + 40);
|
|
|
|
const doc = new jsPDF({ orientation: 'landscape', format: [requiredWidth, 210] });
|
|
const pageWidth = doc.internal.pageSize.getWidth();
|
|
const centerX = pageWidth / 2;
|
|
const rightMargin = pageWidth - 14;
|
|
|
|
const drawPageHeader = () => {
|
|
// Headers
|
|
doc.setFontSize(16);
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text('Krishna Flour Mills (Bangalore) Pvt. Limited', centerX, 15, { align: 'center' });
|
|
|
|
doc.setFontSize(11);
|
|
doc.setFont('helvetica', 'normal');
|
|
doc.text('19, Platform Road, Bengaluru - 560 020', centerX, 22, { align: 'center' });
|
|
|
|
doc.setFontSize(12);
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text('DAILY ORDER REPORT', centerX, 30, { align: 'center' });
|
|
|
|
// Simple underline for DAILY ORDER REPORT
|
|
const textWidth = doc.getTextWidth('DAILY ORDER REPORT');
|
|
doc.setLineWidth(0.5);
|
|
doc.line(centerX - textWidth / 2, 31, centerX + textWidth / 2, 31);
|
|
|
|
// Meta Info
|
|
doc.setFontSize(10);
|
|
|
|
let leftY = 40;
|
|
if (distributor) {
|
|
doc.text(`Distributor Name : ${distributor}`, 14, leftY);
|
|
leftY += 5;
|
|
}
|
|
|
|
let rightY = 40;
|
|
if (date) {
|
|
doc.text(`Date : ${date}`, rightMargin, rightY, { align: 'right' });
|
|
rightY += 5;
|
|
}
|
|
|
|
if (soEmail) {
|
|
const selectedSo = soOptions.find(o => o.value === soEmail);
|
|
doc.text(`SO Name : ${selectedSo ? selectedSo.label : soEmail}`, rightMargin, rightY, { align: 'right' });
|
|
rightY += 5;
|
|
}
|
|
};
|
|
|
|
// Split headers into chunks of exactly MAX_SKUS_PER_CHUNK, even if it means splitting a brand.
|
|
const headerChunks: any[][] = [];
|
|
let currentChunk: any[] = [];
|
|
let currentSkuCount = 0;
|
|
|
|
reportData?.response?.headers?.forEach((h: any) => {
|
|
const allSkus = h.skus || [];
|
|
if (allSkus.length === 0) return;
|
|
|
|
let remainingSkus = [...allSkus];
|
|
|
|
while (remainingSkus.length > 0) {
|
|
const availableSpace = MAX_SKUS_PER_CHUNK - currentSkuCount;
|
|
|
|
// Take as many SKUs as we can fit in the current chunk
|
|
const skusToTake = remainingSkus.splice(0, availableSpace);
|
|
|
|
currentChunk.push({
|
|
...h,
|
|
skus: skusToTake
|
|
});
|
|
|
|
currentSkuCount += skusToTake.length;
|
|
|
|
if (currentSkuCount >= MAX_SKUS_PER_CHUNK) {
|
|
headerChunks.push(currentChunk);
|
|
currentChunk = [];
|
|
currentSkuCount = 0;
|
|
}
|
|
}
|
|
});
|
|
|
|
if (currentChunk.length > 0) {
|
|
headerChunks.push(currentChunk);
|
|
}
|
|
|
|
if (headerChunks.length === 0) {
|
|
drawPageHeader(); // Fallback if no data
|
|
}
|
|
|
|
headerChunks.forEach((chunkHeaders, index) => {
|
|
if (index === 0) {
|
|
drawPageHeader();
|
|
} else {
|
|
doc.addPage();
|
|
drawPageHeader();
|
|
}
|
|
|
|
const headRow1: any[] = [
|
|
{ content: 'Sl No', rowSpan: 2, styles: { halign: 'center', valign: 'middle' } },
|
|
{ content: 'Store', rowSpan: 2, styles: { halign: 'center', valign: 'middle' } }
|
|
];
|
|
const headRow2: any[] = [];
|
|
|
|
chunkHeaders.forEach((h: any) => {
|
|
headRow1.push({ content: h.br_code, colSpan: h.skus?.length || 1, styles: { halign: 'center' } });
|
|
h.skus?.forEach((sku: string) => {
|
|
headRow2.push({ content: sku, styles: { halign: 'center' } });
|
|
});
|
|
});
|
|
|
|
const isLastChunk = index === headerChunks.length - 1;
|
|
if (isLastChunk) {
|
|
headRow1.push({ content: 'Total', rowSpan: 2, styles: { halign: 'center', valign: 'middle' } });
|
|
}
|
|
|
|
const body = reportData?.response?.rows?.map((row: any) => {
|
|
const rowData = [row.sl_no, row.store];
|
|
chunkHeaders.flatMap((h: any) => h.skus || []).forEach((sku: string) => {
|
|
const val = row.products?.[sku];
|
|
rowData.push(val === '0' || val === 0 ? '' : val || '');
|
|
});
|
|
if (isLastChunk) {
|
|
const val = row.total;
|
|
rowData.push(val === '0' || val === 0 ? '' : val || '');
|
|
}
|
|
return rowData;
|
|
}) || [];
|
|
|
|
if (reportData?.response?.total_row) {
|
|
const totalRowData = [reportData.response.total_row.sl_no, reportData.response.total_row.store];
|
|
chunkHeaders.flatMap((h: any) => h.skus || []).forEach((sku: string) => {
|
|
const val = reportData.response.total_row.products?.[sku];
|
|
totalRowData.push(val === '0' || val === 0 ? '' : val || '');
|
|
});
|
|
if (isLastChunk) {
|
|
const val = reportData.response.total_row.total;
|
|
totalRowData.push(val === '0' || val === 0 ? '' : val || '');
|
|
}
|
|
body.push(totalRowData);
|
|
}
|
|
|
|
autoTable(doc, {
|
|
head: [headRow1, headRow2],
|
|
body: body,
|
|
startY: 50,
|
|
theme: 'grid',
|
|
horizontalPageBreak: false,
|
|
styles: { fontSize: 6, textColor: [0, 0, 0], lineColor: [0, 0, 0], lineWidth: 0.2, cellPadding: 1, minCellWidth: 10, halign: 'center', valign: 'middle' },
|
|
headStyles: { fillColor: [243, 244, 246], fontStyle: 'bold', halign: 'center' },
|
|
didParseCell: (data) => {
|
|
if (data.section === 'body' && reportData?.response?.total_row && data.row.index === body.length - 1) {
|
|
data.cell.styles.fontStyle = 'bold';
|
|
data.cell.styles.fillColor = [230, 230, 230];
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
return doc;
|
|
};
|
|
|
|
const downloadPDF = () => {
|
|
const doc = generatePdfDoc();
|
|
doc.save(`Daily_Sales_Report_${date || 'Draft'}.pdf`);
|
|
};
|
|
|
|
const printReport = async () => {
|
|
const doc = generatePdfDoc();
|
|
const blob = doc.output('blob');
|
|
|
|
// Fallback for PC / unsupported browsers
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
const iframe = document.createElement('iframe');
|
|
iframe.style.display = 'none';
|
|
iframe.src = blobUrl;
|
|
document.body.appendChild(iframe);
|
|
|
|
iframe.onload = () => {
|
|
setTimeout(() => {
|
|
iframe.contentWindow?.focus();
|
|
iframe.contentWindow?.print();
|
|
}, 500);
|
|
};
|
|
};
|
|
|
|
async function submit(e: FormEvent) {
|
|
e.preventDefault();
|
|
setBusy(true);
|
|
setError(null);
|
|
setReportData(null);
|
|
try {
|
|
const res = await fetch(`${BASE_URL}${PIPELINE.endpoints.dailySalesReport}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json, text/plain, */*',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
date,
|
|
route,
|
|
distributor,
|
|
so_name: soEmail,
|
|
})
|
|
});
|
|
|
|
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 p-6 pb-20">
|
|
<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)}
|
|
/>
|
|
<Select
|
|
label="Route"
|
|
value={route}
|
|
onChange={(e) => {
|
|
setRoute(e.target.value);
|
|
setDistributor('');
|
|
}}
|
|
options={[{ value: '', label: 'Select Route' }, ...SALES_REPORT_ROUTES.map(r => ({ value: r, label: r }))]}
|
|
/>
|
|
<Select
|
|
label="Distributor"
|
|
value={distributor}
|
|
onChange={(e) => setDistributor(e.target.value)}
|
|
options={[{ value: '', label: 'Select Distributor' }, ...(route ? (ROUTE_WISE_DISTRIBUTORS[route] || []) : []).map(d => ({ value: d, label: d }))]}
|
|
/>
|
|
<Select
|
|
label="SO Name"
|
|
value={soEmail}
|
|
onChange={(e) => setSoEmail(e.target.value)}
|
|
options={[{ value: '', label: 'Select SO Name' }, ...soOptions]}
|
|
/>
|
|
|
|
{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 className="flex flex-col gap-1.5">
|
|
{distributor && <div>Distributor Name : {distributor}</div>}
|
|
</div>
|
|
<div className="text-right flex flex-col gap-1.5">
|
|
{date && <div>Date : {date}</div>}
|
|
{soEmail && <div>SO Name : {soOptions.find(o => o.value === soEmail)?.label || soEmail}</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 whitespace-nowrap" 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 whitespace-nowrap">{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' || row.products?.[sku] === 0 ? '' : row.products?.[sku] || ''}
|
|
</td>
|
|
))}
|
|
<td className="py-2 px-3 text-strong font-bold text-center border-l border-black bg-black/5">{row.total === '0' || row.total === 0 ? '' : row.total || ''}</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 whitespace-nowrap">{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' || reportData.response.total_row.products?.[sku] === 0 ? '' : reportData.response.total_row.products?.[sku] || ''}
|
|
</td>
|
|
))}
|
|
<td className="py-2 px-3 text-strong text-center border-l border-black">{reportData.response.total_row.total === '0' || reportData.response.total_row.total === 0 ? '' : reportData.response.total_row.total || ''}</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-4 pb-6 flex gap-4 print:hidden">
|
|
<Button type="button" onClick={downloadPDF} variant="secondary" iconLeft={<Download size={18} />} full>
|
|
Download PDF
|
|
</Button>
|
|
<Button type="button" onClick={printReport} iconLeft={<Printer size={18} />} full>
|
|
Print PDF
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|