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]
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user