Implement full-stack application
Develop ReactJS frontend with PHP backend, including login, data display, and dashboards based on the provided Figma design and specifications.
This commit is contained in:
gpt-engineer-app[bot]
+5
-4
@@ -1,14 +1,15 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>collect-track-report</title>
|
||||
<meta name="description" content="Lovable Generated Project" />
|
||||
<title>Employee Collection Management System</title>
|
||||
<meta name="description" content="Full Stack Employee Collection Management Dashboard" />
|
||||
<meta name="author" content="Lovable" />
|
||||
|
||||
<meta property="og:title" content="collect-track-report" />
|
||||
<meta property="og:description" content="Lovable Generated Project" />
|
||||
<meta property="og:title" content="Employee Collection Management System" />
|
||||
<meta property="og:description" content="Full Stack Employee Collection Management Dashboard" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useEmployeeData } from "@/hooks/useEmployeeData";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
interface AdminDataEntryModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onDataUpdate: () => void;
|
||||
}
|
||||
|
||||
export const AdminDataEntryModal = ({ isOpen, onClose, onDataUpdate }: AdminDataEntryModalProps) => {
|
||||
const { employees, addTransaction } = useEmployeeData();
|
||||
const { toast } = useToast();
|
||||
|
||||
const [selectedEmployeeId, setSelectedEmployeeId] = useState<string>('');
|
||||
const [collectionAmount, setCollectionAmount] = useState<string>('');
|
||||
const [depositAmount, setDepositAmount] = useState<string>('');
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!selectedEmployeeId) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Please select an employee",
|
||||
variant: "destructive"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const collection = parseFloat(collectionAmount) || 0;
|
||||
const deposit = parseFloat(depositAmount) || 0;
|
||||
|
||||
if (collection === 0 && deposit === 0) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Please enter at least one amount (collection or deposit)",
|
||||
variant: "destructive"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
addTransaction(selectedEmployeeId, {
|
||||
date: format(selectedDate, 'yyyy-MM-dd'),
|
||||
collection,
|
||||
deposit
|
||||
});
|
||||
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Transaction added successfully",
|
||||
});
|
||||
|
||||
// Reset form
|
||||
setSelectedEmployeeId('');
|
||||
setCollectionAmount('');
|
||||
setDepositAmount('');
|
||||
setSelectedDate(new Date());
|
||||
|
||||
onDataUpdate();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setSelectedEmployeeId('');
|
||||
setCollectionAmount('');
|
||||
setDepositAmount('');
|
||||
setSelectedDate(new Date());
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[500px] bg-white">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl font-bold text-slate-800">Insert Employee Data</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6 mt-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="employee" className="text-sm font-medium text-slate-700">
|
||||
Select Employee
|
||||
</Label>
|
||||
<Select value={selectedEmployeeId} onValueChange={setSelectedEmployeeId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Choose an employee" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{employees.map(employee => (
|
||||
<SelectItem key={employee.id} value={employee.id}>
|
||||
{employee.name} (ID: {employee.id})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="date" className="text-sm font-medium text-slate-700">
|
||||
Transaction Date
|
||||
</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-start text-left font-normal",
|
||||
!selectedDate && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{selectedDate ? format(selectedDate, "PPP") : <span>Pick a date</span>}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={selectedDate}
|
||||
onSelect={(date) => date && setSelectedDate(date)}
|
||||
initialFocus
|
||||
className="pointer-events-auto"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="collection" className="text-sm font-medium text-slate-700">
|
||||
MM Collection Amount (₹)
|
||||
</Label>
|
||||
<Input
|
||||
id="collection"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
value={collectionAmount}
|
||||
onChange={(e) => setCollectionAmount(e.target.value)}
|
||||
className="text-right"
|
||||
step="0.01"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="deposit" className="text-sm font-medium text-slate-700">
|
||||
Deposit Amount (₹)
|
||||
</Label>
|
||||
<Input
|
||||
id="deposit"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
value={depositAmount}
|
||||
onChange={(e) => setDepositAmount(e.target.value)}
|
||||
className="text-right"
|
||||
step="0.01"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3 pt-4">
|
||||
<Button type="button" variant="outline" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700">
|
||||
Add Transaction
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,130 @@
|
||||
|
||||
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 { Badge } from "@/components/ui/badge";
|
||||
import { useEmployeeData } from "@/hooks/useEmployeeData";
|
||||
|
||||
export const EmployeePaymentReport = () => {
|
||||
const { employees, getEmployeeTransactions } = useEmployeeData();
|
||||
const [selectedEmployeeId, setSelectedEmployeeId] = useState<string>('all');
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('en-IN', {
|
||||
style: 'currency',
|
||||
currency: 'INR'
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('en-IN');
|
||||
};
|
||||
|
||||
const getTransactionsToShow = () => {
|
||||
if (selectedEmployeeId === 'all') {
|
||||
return employees.flatMap(employee =>
|
||||
getEmployeeTransactions(employee.id).map(transaction => ({
|
||||
...transaction,
|
||||
employeeName: employee.name,
|
||||
employeeId: employee.id
|
||||
}))
|
||||
).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||
} else {
|
||||
const employee = employees.find(emp => emp.id === selectedEmployeeId);
|
||||
return getEmployeeTransactions(selectedEmployeeId).map(transaction => ({
|
||||
...transaction,
|
||||
employeeName: employee?.name || '',
|
||||
employeeId: selectedEmployeeId
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const transactions = getTransactionsToShow();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-slate-700">Filter by Employee</h3>
|
||||
<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.id})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-lg border border-slate-200 shadow-lg">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-slate-50">
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Employee ID</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Employee Name</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Date</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">MM Collection</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Deposit Amount</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Difference</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Running Balance</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{transactions.map((transaction, index) => (
|
||||
<TableRow key={`${transaction.employeeId}-${transaction.date}-${index}`} className="hover:bg-slate-50 transition-colors duration-150">
|
||||
<TableCell className="font-medium py-4">{transaction.employeeId}</TableCell>
|
||||
<TableCell className="py-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
|
||||
<span className="text-blue-600 font-semibold text-sm">
|
||||
{transaction.employeeName.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-medium">{transaction.employeeName}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-4">{formatDate(transaction.date)}</TableCell>
|
||||
<TableCell className="py-4 font-semibold text-blue-600">
|
||||
{formatCurrency(transaction.collection)}
|
||||
</TableCell>
|
||||
<TableCell className="py-4 font-semibold text-green-600">
|
||||
{formatCurrency(transaction.deposit)}
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
<span className={`font-semibold ${transaction.difference >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{formatCurrency(transaction.difference)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
<span className={`font-semibold ${transaction.runningBalance >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{formatCurrency(Math.abs(transaction.runningBalance))}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
<Badge
|
||||
variant={transaction.difference >= 0 ? "default" : "destructive"}
|
||||
className={transaction.difference >= 0 ? "bg-green-100 text-green-800 hover:bg-green-200" : "bg-red-100 text-red-800 hover:bg-red-200"}
|
||||
>
|
||||
{transaction.difference >= 0 ? 'Balanced' : 'Deficit'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{transactions.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-slate-400 text-lg mb-2">No transaction data available</div>
|
||||
<div className="text-slate-500">Use the "Insert Employee Data" button to add records</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,90 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useEmployeeData } from "@/hooks/useEmployeeData";
|
||||
|
||||
export const OutstandingReportDashboard = () => {
|
||||
const { employees, getEmployeeSummary } = useEmployeeData();
|
||||
|
||||
const employeeSummaries = employees.map(employee => {
|
||||
const summary = getEmployeeSummary(employee.id);
|
||||
return {
|
||||
...employee,
|
||||
...summary
|
||||
};
|
||||
});
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('en-IN', {
|
||||
style: 'currency',
|
||||
currency: 'INR'
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('en-IN');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="overflow-hidden rounded-lg border border-slate-200 shadow-lg">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-slate-50">
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Employee ID</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Employee Name</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Net Collection Till Date</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Most Recent Transaction</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Outstanding Amount</TableHead>
|
||||
<TableHead className="font-semibold text-slate-700 py-4">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{employeeSummaries.map((employee) => (
|
||||
<TableRow key={employee.id} className="hover:bg-slate-50 transition-colors duration-150">
|
||||
<TableCell className="font-medium py-4">{employee.id}</TableCell>
|
||||
<TableCell className="py-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
|
||||
<span className="text-blue-600 font-semibold text-sm">
|
||||
{employee.name.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-medium">{employee.name}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-4 font-semibold text-green-600">
|
||||
{formatCurrency(employee.totalCollection)}
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
{employee.lastTransactionDate ? formatDate(employee.lastTransactionDate) : 'No transactions'}
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
<span className={`font-semibold ${employee.outstandingAmount > 0 ? 'text-red-600' : 'text-green-600'}`}>
|
||||
{formatCurrency(Math.abs(employee.outstandingAmount))}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
<Badge
|
||||
variant={employee.outstandingAmount > 0 ? "destructive" : "default"}
|
||||
className={employee.outstandingAmount > 0 ? "bg-red-100 text-red-800 hover:bg-red-200" : "bg-green-100 text-green-800 hover:bg-green-200"}
|
||||
>
|
||||
{employee.outstandingAmount > 0 ? 'Pending' : 'Clear'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{employeeSummaries.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-slate-400 text-lg mb-2">No employee data available</div>
|
||||
<div className="text-slate-500">Use the "Insert Employee Data" button to add records</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,175 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export interface Employee {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
department: string;
|
||||
}
|
||||
|
||||
export interface Transaction {
|
||||
date: string;
|
||||
collection: number;
|
||||
deposit: number;
|
||||
}
|
||||
|
||||
export interface ProcessedTransaction extends Transaction {
|
||||
difference: number;
|
||||
runningBalance: number;
|
||||
}
|
||||
|
||||
export interface EmployeeSummary {
|
||||
totalCollection: number;
|
||||
totalDeposit: number;
|
||||
outstandingAmount: number;
|
||||
lastTransactionDate: string | null;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'employeeCollectionData';
|
||||
|
||||
// Sample employee data
|
||||
const initialEmployees: Employee[] = [
|
||||
{
|
||||
id: 'EMP001',
|
||||
name: 'Mayank Sharma',
|
||||
email: 'mayank.sharma@company.com',
|
||||
department: 'Collections'
|
||||
},
|
||||
{
|
||||
id: 'EMP002',
|
||||
name: 'Priya Patel',
|
||||
email: 'priya.patel@company.com',
|
||||
department: 'Collections'
|
||||
},
|
||||
{
|
||||
id: 'EMP003',
|
||||
name: 'Rajesh Kumar',
|
||||
email: 'rajesh.kumar@company.com',
|
||||
department: 'Collections'
|
||||
},
|
||||
{
|
||||
id: 'EMP004',
|
||||
name: 'Anjali Singh',
|
||||
email: 'anjali.singh@company.com',
|
||||
department: 'Collections'
|
||||
},
|
||||
{
|
||||
id: 'EMP005',
|
||||
name: 'Vikram Gupta',
|
||||
email: 'vikram.gupta@company.com',
|
||||
department: 'Collections'
|
||||
}
|
||||
];
|
||||
|
||||
// Sample transaction data for demonstration
|
||||
const initialTransactions: Record<string, Transaction[]> = {
|
||||
'EMP001': [
|
||||
{ date: '2025-03-26', collection: 10000, deposit: 0 },
|
||||
{ date: '2025-03-27', collection: 20000, deposit: 0 },
|
||||
{ date: '2025-03-28', collection: 0, deposit: 5000 },
|
||||
{ date: '2025-03-29', collection: 0, deposit: 7000 },
|
||||
{ date: '2025-03-30', collection: 0, deposit: 8000 },
|
||||
{ date: '2025-03-31', collection: 0, deposit: 15000 }
|
||||
],
|
||||
'EMP002': [
|
||||
{ date: '2025-03-25', collection: 15000, deposit: 0 },
|
||||
{ date: '2025-03-26', collection: 12000, deposit: 15000 },
|
||||
{ date: '2025-03-27', collection: 0, deposit: 12000 }
|
||||
],
|
||||
'EMP003': [
|
||||
{ date: '2025-03-24', collection: 8000, deposit: 0 },
|
||||
{ date: '2025-03-25', collection: 0, deposit: 8000 }
|
||||
]
|
||||
};
|
||||
|
||||
export const useEmployeeData = () => {
|
||||
const [employees] = useState<Employee[]>(initialEmployees);
|
||||
const [transactions, setTransactions] = useState<Record<string, Transaction[]>>({});
|
||||
|
||||
// Load data from localStorage on mount
|
||||
useEffect(() => {
|
||||
const savedData = localStorage.getItem(STORAGE_KEY);
|
||||
if (savedData) {
|
||||
try {
|
||||
const parsed = JSON.parse(savedData);
|
||||
setTransactions(parsed);
|
||||
} catch (error) {
|
||||
console.error('Error loading saved data:', error);
|
||||
setTransactions(initialTransactions);
|
||||
}
|
||||
} else {
|
||||
setTransactions(initialTransactions);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Save data to localStorage whenever transactions change
|
||||
useEffect(() => {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(transactions));
|
||||
}, [transactions]);
|
||||
|
||||
const addTransaction = (employeeId: string, transaction: Omit<Transaction, 'id'>) => {
|
||||
setTransactions(prev => ({
|
||||
...prev,
|
||||
[employeeId]: [...(prev[employeeId] || []), transaction].sort((a, b) =>
|
||||
new Date(a.date).getTime() - new Date(b.date).getTime()
|
||||
)
|
||||
}));
|
||||
};
|
||||
|
||||
const processTransactions = (employeeTransactions: Transaction[]): ProcessedTransaction[] => {
|
||||
let runningBalance = 0;
|
||||
|
||||
return employeeTransactions.map(transaction => {
|
||||
const difference = transaction.deposit - transaction.collection;
|
||||
runningBalance += difference;
|
||||
|
||||
return {
|
||||
...transaction,
|
||||
difference,
|
||||
runningBalance
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const getEmployeeTransactions = (employeeId: string): ProcessedTransaction[] => {
|
||||
const employeeTransactions = transactions[employeeId] || [];
|
||||
return processTransactions(employeeTransactions);
|
||||
};
|
||||
|
||||
const getEmployeeSummary = (employeeId: string): EmployeeSummary => {
|
||||
const employeeTransactions = transactions[employeeId] || [];
|
||||
|
||||
if (employeeTransactions.length === 0) {
|
||||
return {
|
||||
totalCollection: 0,
|
||||
totalDeposit: 0,
|
||||
outstandingAmount: 0,
|
||||
lastTransactionDate: null
|
||||
};
|
||||
}
|
||||
|
||||
const totalCollection = employeeTransactions.reduce((sum, t) => sum + t.collection, 0);
|
||||
const totalDeposit = employeeTransactions.reduce((sum, t) => sum + t.deposit, 0);
|
||||
const outstandingAmount = totalCollection - totalDeposit;
|
||||
|
||||
// Find the most recent transaction date
|
||||
const lastTransactionDate = employeeTransactions
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())[0]?.date || null;
|
||||
|
||||
return {
|
||||
totalCollection,
|
||||
totalDeposit,
|
||||
outstandingAmount,
|
||||
lastTransactionDate
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
employees,
|
||||
transactions,
|
||||
addTransaction,
|
||||
getEmployeeTransactions,
|
||||
getEmployeeSummary
|
||||
};
|
||||
};
|
||||
+82
-5
@@ -1,11 +1,88 @@
|
||||
// Update this page (the content is just a fallback if you fail to update the page)
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { OutstandingReportDashboard } from "@/components/OutstandingReportDashboard";
|
||||
import { EmployeePaymentReport } from "@/components/EmployeePaymentReport";
|
||||
import { AdminDataEntryModal } from "@/components/AdminDataEntryModal";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
const Index = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
||||
|
||||
const handleDataUpdate = () => {
|
||||
setRefreshTrigger(prev => prev + 1);
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
|
||||
<p className="text-xl text-gray-600">Start building your amazing project here!</p>
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-slate-800 mb-2">
|
||||
Employee Collection Management
|
||||
</h1>
|
||||
<p className="text-slate-600 text-lg">
|
||||
Track and manage employee collections and deposits
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 flex justify-end">
|
||||
<Button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 flex items-center gap-2"
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
Insert Employee Data
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="outstanding" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-2 bg-white rounded-lg shadow-md p-1">
|
||||
<TabsTrigger
|
||||
value="outstanding"
|
||||
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white rounded-md py-3 text-lg font-medium transition-all duration-200"
|
||||
>
|
||||
Outstanding Report Dashboard
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="payment"
|
||||
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white rounded-md py-3 text-lg font-medium transition-all duration-200"
|
||||
>
|
||||
Employee Payment Report
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="outstanding" className="space-y-6">
|
||||
<Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-t-lg">
|
||||
<CardTitle className="text-2xl font-bold">Outstanding Report Dashboard</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6">
|
||||
<OutstandingReportDashboard key={refreshTrigger} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="payment" className="space-y-6">
|
||||
<Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="bg-gradient-to-r from-green-600 to-green-700 text-white rounded-t-lg">
|
||||
<CardTitle className="text-2xl font-bold">Employee Payment Report Dashboard</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6">
|
||||
<EmployeePaymentReport key={refreshTrigger} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<AdminDataEntryModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
onDataUpdate={handleDataUpdate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user