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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>collect-track-report</title>
|
<title>Employee Collection Management System</title>
|
||||||
<meta name="description" content="Lovable Generated Project" />
|
<meta name="description" content="Full Stack Employee Collection Management Dashboard" />
|
||||||
<meta name="author" content="Lovable" />
|
<meta name="author" content="Lovable" />
|
||||||
|
|
||||||
<meta property="og:title" content="collect-track-report" />
|
<meta property="og:title" content="Employee Collection Management System" />
|
||||||
<meta property="og:description" content="Lovable Generated Project" />
|
<meta property="og:description" content="Full Stack Employee Collection Management Dashboard" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
<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 Index = () => {
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
||||||
|
|
||||||
|
const handleDataUpdate = () => {
|
||||||
|
setRefreshTrigger(prev => prev + 1);
|
||||||
|
setIsModalOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||||||
<div className="text-center">
|
<div className="container mx-auto p-6">
|
||||||
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
|
<div className="mb-8">
|
||||||
<p className="text-xl text-gray-600">Start building your amazing project here!</p>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user