301 lines
14 KiB
TypeScript
301 lines
14 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { useSupabaseEmployeeData } from "@/hooks/useSupabaseEmployeeData";
|
|
import { Currency, convert, formatCurrency, getUsdToLbpRate } from "@/lib/currency";
|
|
|
|
interface DetailedTransaction {
|
|
location: string;
|
|
empId: string;
|
|
empName: string;
|
|
collectionAmount: number;
|
|
collectionDate: string;
|
|
depositAmount: number;
|
|
depositDate: string;
|
|
difference: number;
|
|
}
|
|
|
|
export const DetailedEmployeePaymentReport = () => {
|
|
const [displayCurrency, setDisplayCurrency] = useState<Currency>("USD");
|
|
const { employees, transactions } = useSupabaseEmployeeData(displayCurrency);
|
|
const [selectedEmployeeId, setSelectedEmployeeId] = useState<string>('all');
|
|
|
|
const formatDate = (date: string) => {
|
|
return new Date(date).toLocaleDateString('en-US');
|
|
};
|
|
|
|
// Process transactions with the specific business logic
|
|
const processEmployeeTransactions = (employeeId: string): DetailedTransaction[] => {
|
|
const employee = employees.find(emp => emp.id === employeeId);
|
|
if (!employee) return [];
|
|
|
|
const employeeTransactions = transactions
|
|
.filter(t => t.employee_id === employeeId)
|
|
.map(t => ({
|
|
...t,
|
|
collection_amount: convert(t.collection_amount, t.currency, displayCurrency),
|
|
deposit_amount: convert(t.deposit_amount, t.currency, displayCurrency),
|
|
}))
|
|
.sort((a, b) => new Date(a.transaction_date).getTime() - new Date(b.transaction_date).getTime());
|
|
|
|
const detailedTransactions: DetailedTransaction[] = [];
|
|
let pendingCollections: { amount: number; date: string }[] = [];
|
|
|
|
// Group transactions by date
|
|
const transactionsByDate = employeeTransactions.reduce((acc, transaction) => {
|
|
const date = transaction.transaction_date;
|
|
if (!acc[date]) {
|
|
acc[date] = { collections: 0, deposits: 0 };
|
|
}
|
|
acc[date].collections += transaction.collection_amount;
|
|
acc[date].deposits += transaction.deposit_amount;
|
|
return acc;
|
|
}, {} as Record<string, { collections: number; deposits: number }>);
|
|
|
|
// Process each date chronologically
|
|
Object.entries(transactionsByDate)
|
|
.sort(([a], [b]) => new Date(a).getTime() - new Date(b).getTime())
|
|
.forEach(([date, { collections, deposits }]) => {
|
|
// Add collection entry if there's a collection
|
|
if (collections > 0) {
|
|
pendingCollections.push({ amount: collections, date });
|
|
detailedTransactions.push({
|
|
location: employee.location || 'BGRoad, Karnataka',
|
|
empId: employee.emp_id.replace('EMP', ''),
|
|
empName: employee.name,
|
|
collectionAmount: collections,
|
|
collectionDate: date,
|
|
depositAmount: 0,
|
|
depositDate: '',
|
|
difference: 0
|
|
});
|
|
}
|
|
|
|
// Process deposits
|
|
if (deposits > 0) {
|
|
let remainingDeposit = deposits;
|
|
const depositDate = date;
|
|
|
|
// First, try to clear pending collections in chronological order
|
|
for (let i = 0; i < pendingCollections.length && remainingDeposit > 0; i++) {
|
|
const pending = pendingCollections[i];
|
|
const amountToClear = Math.min(pending.amount, remainingDeposit);
|
|
|
|
if (amountToClear > 0) {
|
|
// Find the corresponding collection entry and update it
|
|
const collectionEntry = detailedTransactions.find(
|
|
dt => dt.collectionDate === pending.date && dt.depositAmount === 0
|
|
);
|
|
|
|
if (collectionEntry) {
|
|
collectionEntry.depositAmount = amountToClear;
|
|
collectionEntry.depositDate = depositDate;
|
|
collectionEntry.difference = amountToClear - collectionEntry.collectionAmount;
|
|
}
|
|
|
|
pending.amount -= amountToClear;
|
|
remainingDeposit -= amountToClear;
|
|
}
|
|
}
|
|
|
|
// Remove fully cleared collections
|
|
pendingCollections = pendingCollections.filter(p => p.amount > 0);
|
|
|
|
// If there's remaining deposit after clearing collections, add separate deposit entries
|
|
while (remainingDeposit > 0) {
|
|
detailedTransactions.push({
|
|
location: employee.location || 'BGRoad, Karnataka',
|
|
empId: employee.emp_id.replace('EMP', ''),
|
|
empName: employee.name,
|
|
collectionAmount: 0,
|
|
collectionDate: '',
|
|
depositAmount: remainingDeposit,
|
|
depositDate: depositDate,
|
|
difference: remainingDeposit
|
|
});
|
|
remainingDeposit = 0;
|
|
}
|
|
}
|
|
});
|
|
|
|
return detailedTransactions;
|
|
};
|
|
|
|
const getTransactionsToShow = (): DetailedTransaction[] => {
|
|
if (selectedEmployeeId === 'all') {
|
|
return employees.flatMap(employee => processEmployeeTransactions(employee.id));
|
|
} else {
|
|
return processEmployeeTransactions(selectedEmployeeId);
|
|
}
|
|
};
|
|
|
|
const detailedTransactions = getTransactionsToShow();
|
|
|
|
// Calculate totals (combined, in display currency)
|
|
const totalCollection = detailedTransactions.reduce((sum, t) => sum + t.collectionAmount, 0);
|
|
const totalDeposit = detailedTransactions.reduce((sum, t) => sum + t.depositAmount, 0);
|
|
const totalDifference = totalDeposit - totalCollection;
|
|
|
|
// Per-currency totals from raw transactions, filtered to current selection
|
|
const filteredRawTx = selectedEmployeeId === 'all'
|
|
? transactions
|
|
: transactions.filter(t => t.employee_id === selectedEmployeeId);
|
|
const totalCollectionUSD = filteredRawTx.filter(t => t.currency === 'USD').reduce((s, t) => s + t.collection_amount, 0);
|
|
const totalCollectionLBP = filteredRawTx.filter(t => t.currency === 'LBP').reduce((s, t) => s + t.collection_amount, 0);
|
|
const totalDepositUSD = filteredRawTx.filter(t => t.currency === 'USD').reduce((s, t) => s + t.deposit_amount, 0);
|
|
const totalDepositLBP = filteredRawTx.filter(t => t.currency === 'LBP').reduce((s, t) => s + t.deposit_amount, 0);
|
|
const totalDifferenceUSD = totalDepositUSD - totalCollectionUSD;
|
|
const totalDifferenceLBP = totalDepositLBP - totalCollectionLBP;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-xl font-semibold text-purple-600">Employee Payment Report (Detailed)</h2>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs text-gray-500">Rate: 1 USD = {getUsdToLbpRate().toLocaleString()} LBP</span>
|
|
<Select value={displayCurrency} onValueChange={(v) => setDisplayCurrency(v as Currency)}>
|
|
<SelectTrigger className="w-32">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="USD">View in USD</SelectItem>
|
|
<SelectItem value="LBP">View in LBP</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary Cards */}
|
|
<div className="grid grid-cols-3 gap-6 mb-6">
|
|
<Card className="bg-white shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center shrink-0">
|
|
<div className="w-6 h-6 bg-gray-600 rounded-full"></div>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-gray-500 mb-1">Total Collection (MM)</p>
|
|
<p className="text-xs text-gray-500">USD: <span className="font-medium text-gray-700">{formatCurrency(totalCollectionUSD, "USD")}</span></p>
|
|
<p className="text-xs text-gray-500">LBP: <span className="font-medium text-gray-700">{formatCurrency(totalCollectionLBP, "LBP")}</span></p>
|
|
<p className="text-lg font-bold text-gray-800 mt-1">≈ {formatCurrency(totalCollection, displayCurrency)}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center shrink-0">
|
|
<div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
|
|
<span className="text-white text-xs">✓</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-gray-500 mb-1">Total Deposit Amount</p>
|
|
<p className="text-xs text-gray-500">USD: <span className="font-medium text-gray-700">{formatCurrency(totalDepositUSD, "USD")}</span></p>
|
|
<p className="text-xs text-gray-500">LBP: <span className="font-medium text-gray-700">{formatCurrency(totalDepositLBP, "LBP")}</span></p>
|
|
<p className="text-lg font-bold text-gray-800 mt-1">≈ {formatCurrency(totalDeposit, displayCurrency)}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center shrink-0">
|
|
<div className="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center">
|
|
<span className="text-white text-xs">=</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-gray-500 mb-1">Net Difference</p>
|
|
<p className="text-xs text-gray-500">USD: <span className={`font-medium ${totalDifferenceUSD >= 0 ? 'text-green-600' : 'text-red-600'}`}>{formatCurrency(totalDifferenceUSD, "USD")}</span></p>
|
|
<p className="text-xs text-gray-500">LBP: <span className={`font-medium ${totalDifferenceLBP >= 0 ? 'text-green-600' : 'text-red-600'}`}>{formatCurrency(totalDifferenceLBP, "LBP")}</span></p>
|
|
<p className={`text-lg font-bold mt-1 ${totalDifference >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
|
≈ {formatCurrency(totalDifference, displayCurrency)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Filter */}
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div></div>
|
|
<Select value={selectedEmployeeId} onValueChange={setSelectedEmployeeId}>
|
|
<SelectTrigger className="w-64">
|
|
<SelectValue placeholder="Select employee" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Employees</SelectItem>
|
|
{employees.map(employee => (
|
|
<SelectItem key={employee.id} value={employee.id}>
|
|
{employee.name} (ID: {employee.emp_id})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Data Table */}
|
|
<div className="bg-white rounded-lg shadow-sm border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-gray-50">
|
|
<TableHead className="font-medium text-gray-600 py-4">Location</TableHead>
|
|
<TableHead className="font-medium text-gray-600 py-4">Emp. ID</TableHead>
|
|
<TableHead className="font-medium text-gray-600 py-4">Emp. Name</TableHead>
|
|
<TableHead className="font-medium text-gray-600 py-4">Collections (MM)</TableHead>
|
|
<TableHead className="font-medium text-gray-600 py-4">Date</TableHead>
|
|
<TableHead className="font-medium text-gray-600 py-4">Cash Deposit</TableHead>
|
|
<TableHead className="font-medium text-gray-600 py-4">Deposit Date</TableHead>
|
|
<TableHead className="font-medium text-gray-600 py-4">Difference</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{detailedTransactions.map((transaction, index) => (
|
|
<TableRow key={`${transaction.empId}-${index}`} className="hover:bg-gray-50 transition-colors duration-150">
|
|
<TableCell className="py-4 text-gray-600">{transaction.location}</TableCell>
|
|
<TableCell className="font-medium py-4">{transaction.empId}</TableCell>
|
|
<TableCell className="py-4 font-medium text-gray-800">{transaction.empName}</TableCell>
|
|
<TableCell className="py-4 font-medium">
|
|
{transaction.collectionAmount > 0 ? formatCurrency(transaction.collectionAmount, displayCurrency) : '-'}
|
|
</TableCell>
|
|
<TableCell className="py-4 text-gray-600">
|
|
{transaction.collectionDate ? formatDate(transaction.collectionDate) : '-'}
|
|
</TableCell>
|
|
<TableCell className="py-4 font-medium">
|
|
{transaction.depositAmount > 0 ? formatCurrency(transaction.depositAmount, displayCurrency) : '-'}
|
|
</TableCell>
|
|
<TableCell className="py-4 text-gray-600">
|
|
{transaction.depositDate ? formatDate(transaction.depositDate) : '-'}
|
|
</TableCell>
|
|
<TableCell className="py-4">
|
|
<span className={`font-medium ${
|
|
transaction.difference === 0 ? 'text-gray-600' :
|
|
transaction.difference > 0 ? 'text-green-600' : 'text-red-600'
|
|
}`}>
|
|
{transaction.difference === 0 ? '-' : formatCurrency(transaction.difference, displayCurrency)}
|
|
</span>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{detailedTransactions.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<div className="text-gray-400 text-lg mb-2">No transaction data available</div>
|
|
<div className="text-gray-500">Use the "Insert Employee Data" button to add records</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|