577 lines
24 KiB
TypeScript
577 lines
24 KiB
TypeScript
import React, { useMemo, useState } from "react";
|
|
import { Download, FileSpreadsheet, Printer, RefreshCw } from "lucide-react";
|
|
import { Card, CardContent } from "../components/ui/Card.tsx";
|
|
import { Button } from "../components/ui/Button.tsx";
|
|
import { api } from "../services/api.ts";
|
|
import { useDepartments } from "../hooks/useDepartments.ts";
|
|
import * as XLSX from "xlsx";
|
|
|
|
interface ContractorPaymentData {
|
|
contractor_id: number;
|
|
contractor_name: string;
|
|
as_per_contractor: number;
|
|
dana: number;
|
|
tukdi: number;
|
|
groundnut: number;
|
|
commission_salary: number;
|
|
total: number;
|
|
tds_base_amount: number;
|
|
payable_before_deduction: number;
|
|
security_deduction: number;
|
|
advance: number;
|
|
final_payable: number;
|
|
excess_short: number;
|
|
}
|
|
|
|
interface SubDepartmentTotals {
|
|
sub_department_id: number;
|
|
sub_department_name: string;
|
|
contractors: ContractorPaymentData[];
|
|
subTotal: ContractorPaymentData;
|
|
}
|
|
|
|
export const ContractorPaymentPage: React.FC = () => {
|
|
const { departments } = useDepartments();
|
|
const [selectedDepartment, setSelectedDepartment] = useState<string>("");
|
|
const [startDate, setStartDate] = useState(() => {
|
|
const date = new Date();
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-01`;
|
|
});
|
|
const [endDate, setEndDate] = useState(() => {
|
|
const date = new Date();
|
|
return date.toISOString().split("T")[0];
|
|
});
|
|
const [loading, setLoading] = useState(false);
|
|
const [reportData, setReportData] = useState<SubDepartmentTotals[]>([]);
|
|
const [companyName, setCompanyName] = useState("DUSAD AGROFOOD PVT LTD");
|
|
|
|
// Fetch report data
|
|
const fetchReport = async () => {
|
|
if (!selectedDepartment) {
|
|
alert("Please select a department");
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
// Fetch completed allocations for the date range
|
|
const params: Record<string, any> = {
|
|
startDate,
|
|
endDate,
|
|
departmentId: parseInt(selectedDepartment),
|
|
};
|
|
|
|
const data = await api.getCompletedAllocationsReport(params);
|
|
|
|
// Process data to group by sub-department and contractor
|
|
const processedData = processReportData(data.allocations);
|
|
setReportData(processedData);
|
|
} catch (err: any) {
|
|
console.error("Failed to fetch report:", err);
|
|
alert(err.message || "Failed to fetch report");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Process raw allocation data into the payment report format
|
|
const processReportData = (allocations: any[]): SubDepartmentTotals[] => {
|
|
const subDeptMap = new Map<number, Map<number, ContractorPaymentData>>();
|
|
const subDeptNames = new Map<number, string>();
|
|
|
|
allocations.forEach((alloc) => {
|
|
const subDeptId = alloc.sub_department_id || 0;
|
|
const contractorId = alloc.contractor_id || 0;
|
|
const subDeptName = alloc.sub_department_name || "Other";
|
|
|
|
subDeptNames.set(subDeptId, subDeptName);
|
|
|
|
if (!subDeptMap.has(subDeptId)) {
|
|
subDeptMap.set(subDeptId, new Map());
|
|
}
|
|
|
|
const contractorMap = subDeptMap.get(subDeptId)!;
|
|
|
|
if (!contractorMap.has(contractorId)) {
|
|
contractorMap.set(contractorId, {
|
|
contractor_id: contractorId,
|
|
contractor_name: alloc.contractor_name || "Unknown",
|
|
as_per_contractor: 0,
|
|
dana: 0,
|
|
tukdi: 0,
|
|
groundnut: 0,
|
|
commission_salary: 0,
|
|
total: 0,
|
|
tds_base_amount: 0,
|
|
payable_before_deduction: 0,
|
|
security_deduction: 0,
|
|
advance: 0,
|
|
final_payable: 0,
|
|
excess_short: 0,
|
|
});
|
|
}
|
|
|
|
const contractor = contractorMap.get(contractorId)!;
|
|
const amount = parseFloat(alloc.total_amount) || parseFloat(alloc.rate) || 0;
|
|
const activity = (alloc.activity || "").toLowerCase();
|
|
|
|
// Categorize by activity type
|
|
if (activity.includes("dana")) {
|
|
contractor.dana += amount;
|
|
} else if (activity.includes("tukdi")) {
|
|
contractor.tukdi += amount;
|
|
} else if (activity.includes("groundnut")) {
|
|
contractor.groundnut += amount;
|
|
} else if (activity.includes("commission") || activity.includes("salary")) {
|
|
contractor.commission_salary += amount;
|
|
} else {
|
|
contractor.as_per_contractor += amount;
|
|
}
|
|
});
|
|
|
|
// Calculate totals for each contractor
|
|
const result: SubDepartmentTotals[] = [];
|
|
|
|
subDeptMap.forEach((contractorMap, subDeptId) => {
|
|
const contractors: ContractorPaymentData[] = [];
|
|
const subTotal: ContractorPaymentData = {
|
|
contractor_id: 0,
|
|
contractor_name: "Sub Total",
|
|
as_per_contractor: 0,
|
|
dana: 0,
|
|
tukdi: 0,
|
|
groundnut: 0,
|
|
commission_salary: 0,
|
|
total: 0,
|
|
tds_base_amount: 0,
|
|
payable_before_deduction: 0,
|
|
security_deduction: 0,
|
|
advance: 0,
|
|
final_payable: 0,
|
|
excess_short: 0,
|
|
};
|
|
|
|
contractorMap.forEach((contractor) => {
|
|
// Calculate derived values
|
|
contractor.total = contractor.as_per_contractor + contractor.dana +
|
|
contractor.tukdi + contractor.groundnut + contractor.commission_salary;
|
|
contractor.tds_base_amount = Math.round(contractor.total * 0.01); // 1% TDS
|
|
contractor.payable_before_deduction = contractor.total - contractor.tds_base_amount;
|
|
contractor.security_deduction = Math.round(contractor.total * 0.0035); // 0.35% security
|
|
contractor.final_payable = contractor.payable_before_deduction -
|
|
contractor.security_deduction - contractor.advance;
|
|
contractor.excess_short = contractor.as_per_contractor - contractor.final_payable;
|
|
|
|
// Add to subtotal
|
|
subTotal.as_per_contractor += contractor.as_per_contractor;
|
|
subTotal.dana += contractor.dana;
|
|
subTotal.tukdi += contractor.tukdi;
|
|
subTotal.groundnut += contractor.groundnut;
|
|
subTotal.commission_salary += contractor.commission_salary;
|
|
subTotal.total += contractor.total;
|
|
subTotal.tds_base_amount += contractor.tds_base_amount;
|
|
subTotal.payable_before_deduction += contractor.payable_before_deduction;
|
|
subTotal.security_deduction += contractor.security_deduction;
|
|
subTotal.advance += contractor.advance;
|
|
subTotal.final_payable += contractor.final_payable;
|
|
subTotal.excess_short += contractor.excess_short;
|
|
|
|
contractors.push(contractor);
|
|
});
|
|
|
|
result.push({
|
|
sub_department_id: subDeptId,
|
|
sub_department_name: subDeptNames.get(subDeptId) || "Other",
|
|
contractors,
|
|
subTotal,
|
|
});
|
|
});
|
|
|
|
return result;
|
|
};
|
|
|
|
// Format date for display
|
|
const formatDateRange = () => {
|
|
const start = new Date(startDate);
|
|
const end = new Date(endDate);
|
|
return `${start.toLocaleDateString("en-GB", { day: "2-digit", month: "2-digit", year: "numeric" }).replace(/\//g, ".")} TO ${end.toLocaleDateString("en-GB", { day: "2-digit", month: "2-digit", year: "numeric" }).replace(/\//g, ".")}`;
|
|
};
|
|
|
|
// Export to Excel
|
|
const exportToExcel = () => {
|
|
if (reportData.length === 0) {
|
|
alert("No data to export");
|
|
return;
|
|
}
|
|
|
|
const wb = XLSX.utils.book_new();
|
|
const wsData: any[][] = [];
|
|
|
|
// Header rows
|
|
wsData.push([companyName]);
|
|
wsData.push([formatDateRange()]);
|
|
wsData.push(["ALL CONTRACTOR PAYMENT SHEET"]);
|
|
wsData.push([]);
|
|
|
|
// Column headers
|
|
wsData.push([
|
|
"S.NO", "NAME CONTRACTOR", "As per Contractor", "", "", "", "", "",
|
|
"TDS @1%", "Payable", "SECURITY", "ADVANCE", "Final Payable", "Excess/Short"
|
|
]);
|
|
wsData.push([
|
|
"", "", "ALL", "DANA", "TUKDI", "GROUNDNUT", "Commission & Salary", "Total",
|
|
"(BASE AMOUNT)", "(Before deduction)", "DEDUCTION 0.35%", "", "", ""
|
|
]);
|
|
|
|
let serialNo = 1;
|
|
|
|
reportData.forEach((subDept) => {
|
|
// Sub-department header
|
|
wsData.push([subDept.sub_department_name.toUpperCase()]);
|
|
|
|
subDept.contractors.forEach((contractor) => {
|
|
wsData.push([
|
|
serialNo++,
|
|
contractor.contractor_name,
|
|
contractor.as_per_contractor || "",
|
|
contractor.dana || "",
|
|
contractor.tukdi || "",
|
|
contractor.groundnut || "",
|
|
contractor.commission_salary || "",
|
|
contractor.total || "",
|
|
contractor.tds_base_amount || "",
|
|
contractor.payable_before_deduction || "",
|
|
contractor.security_deduction || "",
|
|
contractor.advance || "",
|
|
contractor.final_payable || "",
|
|
contractor.excess_short || "",
|
|
]);
|
|
});
|
|
|
|
// Sub Total row
|
|
wsData.push([
|
|
"",
|
|
"Sub Total",
|
|
subDept.subTotal.as_per_contractor,
|
|
subDept.subTotal.dana,
|
|
subDept.subTotal.tukdi,
|
|
subDept.subTotal.groundnut,
|
|
subDept.subTotal.commission_salary,
|
|
subDept.subTotal.total,
|
|
subDept.subTotal.tds_base_amount,
|
|
subDept.subTotal.payable_before_deduction,
|
|
subDept.subTotal.security_deduction,
|
|
subDept.subTotal.advance,
|
|
subDept.subTotal.final_payable,
|
|
subDept.subTotal.excess_short,
|
|
]);
|
|
});
|
|
|
|
// Footer
|
|
wsData.push([]);
|
|
wsData.push(["CONTRACTOR", "", "", "", "", "", "CHECKER", "", "", "", "", "", "AUTHORISED AUTHORITY"]);
|
|
|
|
const ws = XLSX.utils.aoa_to_sheet(wsData);
|
|
|
|
// Set column widths
|
|
ws["!cols"] = [
|
|
{ wch: 5 }, // S.NO
|
|
{ wch: 30 }, // NAME CONTRACTOR
|
|
{ wch: 12 }, // ALL
|
|
{ wch: 10 }, // DANA
|
|
{ wch: 10 }, // TUKDI
|
|
{ wch: 12 }, // GROUNDNUT
|
|
{ wch: 14 }, // Commission
|
|
{ wch: 12 }, // Total
|
|
{ wch: 12 }, // TDS
|
|
{ wch: 12 }, // Payable
|
|
{ wch: 12 }, // Security
|
|
{ wch: 10 }, // Advance
|
|
{ wch: 14 }, // Final Payable
|
|
{ wch: 12 }, // Excess/Short
|
|
];
|
|
|
|
XLSX.utils.book_append_sheet(wb, ws, "Payment Report");
|
|
|
|
const filename = `contractor_payment_${startDate}_to_${endDate}.xlsx`;
|
|
XLSX.writeFile(wb, filename);
|
|
};
|
|
|
|
// Print report
|
|
const printReport = () => {
|
|
window.print();
|
|
};
|
|
|
|
// Calculate grand totals
|
|
const grandTotal = useMemo(() => {
|
|
const total: ContractorPaymentData = {
|
|
contractor_id: 0,
|
|
contractor_name: "Grand Total",
|
|
as_per_contractor: 0,
|
|
dana: 0,
|
|
tukdi: 0,
|
|
groundnut: 0,
|
|
commission_salary: 0,
|
|
total: 0,
|
|
tds_base_amount: 0,
|
|
payable_before_deduction: 0,
|
|
security_deduction: 0,
|
|
advance: 0,
|
|
final_payable: 0,
|
|
excess_short: 0,
|
|
};
|
|
|
|
reportData.forEach((subDept) => {
|
|
total.as_per_contractor += subDept.subTotal.as_per_contractor;
|
|
total.dana += subDept.subTotal.dana;
|
|
total.tukdi += subDept.subTotal.tukdi;
|
|
total.groundnut += subDept.subTotal.groundnut;
|
|
total.commission_salary += subDept.subTotal.commission_salary;
|
|
total.total += subDept.subTotal.total;
|
|
total.tds_base_amount += subDept.subTotal.tds_base_amount;
|
|
total.payable_before_deduction += subDept.subTotal.payable_before_deduction;
|
|
total.security_deduction += subDept.subTotal.security_deduction;
|
|
total.advance += subDept.subTotal.advance;
|
|
total.final_payable += subDept.subTotal.final_payable;
|
|
total.excess_short += subDept.subTotal.excess_short;
|
|
});
|
|
|
|
return total;
|
|
}, [reportData]);
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<Card>
|
|
<div className="border-b border-gray-200 px-6 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<FileSpreadsheet className="text-green-600" size={24} />
|
|
<h2 className="text-xl font-semibold text-gray-800">
|
|
Contractor Payment Report
|
|
</h2>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="secondary" onClick={printReport} disabled={reportData.length === 0}>
|
|
<Printer size={16} className="mr-2" />
|
|
Print
|
|
</Button>
|
|
<Button onClick={exportToExcel} disabled={reportData.length === 0}>
|
|
<Download size={16} className="mr-2" />
|
|
Export to Excel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<CardContent>
|
|
{/* Filters */}
|
|
<div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Company Name</label>
|
|
<input
|
|
type="text"
|
|
value={companyName}
|
|
onChange={(e) => setCompanyName(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Department</label>
|
|
<select
|
|
value={selectedDepartment}
|
|
onChange={(e) => setSelectedDepartment(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Select Department</option>
|
|
{departments.map((dept) => (
|
|
<option key={dept.id} value={dept.id}>{dept.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
|
|
<input
|
|
type="date"
|
|
value={startDate}
|
|
onChange={(e) => setStartDate(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">End Date</label>
|
|
<input
|
|
type="date"
|
|
value={endDate}
|
|
onChange={(e) => setEndDate(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<Button onClick={fetchReport} disabled={loading}>
|
|
<RefreshCw size={16} className={`mr-2 ${loading ? "animate-spin" : ""}`} />
|
|
{loading ? "Generating..." : "Generate Report"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Report Table */}
|
|
{reportData.length > 0 && (
|
|
<div className="overflow-x-auto print:overflow-visible" id="payment-report">
|
|
<div className="min-w-[1200px]">
|
|
{/* Report Header */}
|
|
<div className="text-center mb-4 bg-yellow-300 py-2">
|
|
<h1 className="text-lg font-bold text-black">{companyName}</h1>
|
|
<p className="text-sm font-semibold">{formatDateRange()}</p>
|
|
<p className="text-base font-bold">ALL CONTRACTOR PAYMENT SHEET</p>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<table className="w-full border-collapse text-sm">
|
|
<thead>
|
|
<tr className="bg-yellow-300">
|
|
<th rowSpan={2} className="border border-black px-2 py-1 text-left">S.NO</th>
|
|
<th rowSpan={2} className="border border-black px-2 py-1 text-left">NAME CONTRACTOR</th>
|
|
<th colSpan={6} className="border border-black px-2 py-1 text-center">As per DAFPL</th>
|
|
<th rowSpan={2} className="border border-black px-2 py-1 text-center">TDS @1%<br/>(BASE AMOUNT)</th>
|
|
<th rowSpan={2} className="border border-black px-2 py-1 text-center">Payable<br/>(Before deduction)</th>
|
|
<th rowSpan={2} className="border border-black px-2 py-1 text-center">SECURITY<br/>DEDUCTION 0.35%</th>
|
|
<th rowSpan={2} className="border border-black px-2 py-1 text-center">ADVANCE</th>
|
|
<th rowSpan={2} className="border border-black px-2 py-1 text-center">Final Payable</th>
|
|
<th rowSpan={2} className="border border-black px-2 py-1 text-center">Excess/Short</th>
|
|
</tr>
|
|
<tr className="bg-yellow-300">
|
|
<th className="border border-black px-2 py-1 text-center">ALL</th>
|
|
<th className="border border-black px-2 py-1 text-center">DANA</th>
|
|
<th className="border border-black px-2 py-1 text-center">TUKDI</th>
|
|
<th className="border border-black px-2 py-1 text-center">GROUNDNUT</th>
|
|
<th className="border border-black px-2 py-1 text-center">Commission<br/>& Salary</th>
|
|
<th className="border border-black px-2 py-1 text-center">Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{reportData.map((subDept, subDeptIdx) => (
|
|
<React.Fragment key={subDept.sub_department_id}>
|
|
{/* Sub-department header */}
|
|
<tr className="bg-yellow-300">
|
|
<td colSpan={14} className="border border-black px-2 py-1 font-bold">
|
|
{subDept.sub_department_name.toUpperCase()}
|
|
</td>
|
|
</tr>
|
|
|
|
{/* Contractors */}
|
|
{subDept.contractors.map((contractor, idx) => {
|
|
const rowNum = reportData
|
|
.slice(0, subDeptIdx)
|
|
.reduce((acc, sd) => acc + sd.contractors.length, 0) + idx + 1;
|
|
|
|
return (
|
|
<tr key={contractor.contractor_id} className="hover:bg-gray-50">
|
|
<td className="border border-black px-2 py-1">{rowNum}</td>
|
|
<td className="border border-black px-2 py-1 font-medium">{contractor.contractor_name}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.as_per_contractor || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.dana || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.tukdi || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.groundnut || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.commission_salary || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.total || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.tds_base_amount || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.payable_before_deduction || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.security_deduction || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.advance || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.final_payable || ""}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{contractor.excess_short || ""}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
|
|
{/* Sub Total */}
|
|
<tr className="bg-yellow-300 font-bold">
|
|
<td className="border border-black px-2 py-1"></td>
|
|
<td className="border border-black px-2 py-1">Sub Total</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.as_per_contractor}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.dana}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.tukdi}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.groundnut}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.commission_salary}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.total}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.tds_base_amount}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.payable_before_deduction}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.security_deduction}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.advance}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.final_payable}</td>
|
|
<td className="border border-black px-2 py-1 text-right">{subDept.subTotal.excess_short}</td>
|
|
</tr>
|
|
</React.Fragment>
|
|
))}
|
|
|
|
{/* Grand Total */}
|
|
<tr className="bg-yellow-400 font-bold text-base">
|
|
<td className="border border-black px-2 py-2"></td>
|
|
<td className="border border-black px-2 py-2">GRAND TOTAL</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.as_per_contractor}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.dana}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.tukdi}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.groundnut}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.commission_salary}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.total}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.tds_base_amount}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.payable_before_deduction}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.security_deduction}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.advance}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.final_payable}</td>
|
|
<td className="border border-black px-2 py-2 text-right">{grandTotal.excess_short}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* Footer */}
|
|
<div className="mt-8 flex justify-between text-sm font-medium border-t border-black pt-4">
|
|
<div className="text-center">
|
|
<div className="border-t border-black w-40 pt-2">CONTRACTOR</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="border-t border-black w-40 pt-2">CHECKER</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="border-t border-black w-48 pt-2">AUTHORISED AUTHORITY</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{reportData.length === 0 && !loading && (
|
|
<div className="text-center py-12 text-gray-500">
|
|
<FileSpreadsheet size={48} className="mx-auto mb-4 text-gray-300" />
|
|
<p>Select a department and date range, then click "Generate Report"</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Print Styles */}
|
|
<style>{`
|
|
@media print {
|
|
body * {
|
|
visibility: hidden;
|
|
}
|
|
#payment-report, #payment-report * {
|
|
visibility: visible;
|
|
}
|
|
#payment-report {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|