gitea_admin/krishnasales_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pdf downloading and printing fixed

Browse Source
This commit is contained in:
suryacp23 2026-07-17 13:44:36 +05:30
parent 654a569002
commit 53c3369f61
1 changed files with 61 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/screens/DailySalesReportPage.tsx
View File

@ -6,6 +6,7 @@ import {
SALES_REPORT_DISTRIBUTORS, SALES_REPORT_DISTRIBUTORS,
SALES_REPORT_SO_NAMES SALES_REPORT_SO_NAMES
} from '../api/config'; } from '../api/config';
import { Download, Printer } from 'lucide-react';
import jsPDF from 'jspdf'; import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable'; import autoTable from 'jspdf-autotable';
@ -19,7 +20,7 @@ export function DailySalesReportPage() {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [reportData, setReportData] = useState<any>(null); const [reportData, setReportData] = useState<any>(null);
const printTable = () => { const generatePDF = (shouldPrint = false) => {
const doc = new jsPDF(); const doc = new jsPDF();
// Headers // Headers
@ -34,7 +35,7 @@ export function DailySalesReportPage() {
doc.setFontSize(12); doc.setFontSize(12);
doc.setFont('helvetica', 'bold'); doc.setFont('helvetica', 'bold');
doc.text('DAILY ORDER REPORT', 105, 30, { align: 'center' }); doc.text('DAILY ORDER REPORT', 105, 30, { align: 'center' });
// Simple underline for DAILY ORDER REPORT // Simple underline for DAILY ORDER REPORT
const textWidth = doc.getTextWidth('DAILY ORDER REPORT'); const textWidth = doc.getTextWidth('DAILY ORDER REPORT');
doc.setLineWidth(0.5); doc.setLineWidth(0.5);
@ -55,7 +56,12 @@ export function DailySalesReportPage() {
headStyles: { fillColor: [243, 244, 246], fontStyle: 'bold', halign: 'center' }, headStyles: { fillColor: [243, 244, 246], fontStyle: 'bold', halign: 'center' },
}); });
doc.save(`Daily_Sales_Report_${date || 'Draft'}.pdf`); if (shouldPrint) {
doc.autoPrint();
window.open(doc.output('bloburl'), '_blank');
} else {
doc.save(`Daily_Sales_Report_${date || 'Draft'}.pdf`);
}
}; };
async function submit(e: FormEvent) { async function submit(e: FormEvent) {
@ -148,7 +154,7 @@ export function DailySalesReportPage() {
<h2 className="m-0 text-sm font-normal text-strong">19, Platform Road, Bengaluru - 560 020</h2> <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> <h3 className="m-0 text-base font-bold text-strong underline mt-1 mb-4">DAILY ORDER REPORT</h3>
</div> </div>
<div className="flex justify-between items-start text-sm font-bold text-strong mb-2"> <div className="flex justify-between items-start text-sm font-bold text-strong mb-2">
<div>Distributor Name : {distributor}</div> <div>Distributor Name : {distributor}</div>
<div className="text-right flex flex-col gap-1.5"> <div className="text-right flex flex-col gap-1.5">
@ -158,59 +164,64 @@ export function DailySalesReportPage() {
</div> </div>
<table id="report-table" className="w-full text-sm text-left border border-black border-collapse mt-2"> <table id="report-table" className="w-full text-sm text-left border border-black border-collapse mt-2">
<thead> <thead>
<tr className="border-b border-black bg-black/5"> <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 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> <th className="py-2 px-3 font-bold text-black align-bottom" rowSpan={2}>Store</th>
{reportData.response.headers?.map((h: any) => ( {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"> <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} {h.br_code}
</th> </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> <th className="py-2 px-3 font-bold text-black align-bottom border-l border-black" rowSpan={2}>Total</th>
</tr> </tr>
))} <tr className="border-b border-black bg-black/5">
{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) => ( {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"> <th key={`${sku}-${idx}`} className="py-1 px-3 font-bold text-black text-center border-l border-black whitespace-nowrap">
{reportData.response.total_row.products?.[sku] ?? 0} {sku}
</td> </th>
))} ))}
<td className="py-2 px-3 text-strong text-center border-l border-black">{reportData.response.total_row.total ?? 0}</td>
</tr> </tr>
)} </thead>
</tbody> <tbody>
</table> {reportData.response.rows?.map((row: any) => (
{(!reportData.response.rows || reportData.response.rows.length === 0) && ( <tr key={row.sl_no} className="border-b border-black hover:bg-black/5 transition-colors">
<div className="py-8 text-center text-faint">No records found.</div> <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> </div>
<div className="p-4 pt-2 flex justify-center print:hidden"> <div className="p-4 pt-4 pb-6 flex flex-col gap-4 print:hidden">
<Button type="button" onClick={printTable} full>Print / Save PDF</Button> <Button type="button" onClick={() => generatePDF(false)} variant="secondary" iconLeft={<Download size={18} />} full>
Download PDF
</Button>
<Button type="button" onClick={() => generatePDF(true)} iconLeft={<Printer size={18} />} full>
Print PDF
</Button>
</div> </div>
</Card> </Card>
)} )}