From 69268615b5cc2101537d735bb3b408a95a67a6d1 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Tue, 27 May 2025 10:35:29 +0000 Subject: [PATCH] Refactor: Apply UI design from Figma Implement the UI design from the provided Figma file, including fonts and colors. --- src/components/EmployeePaymentReport.tsx | 163 +++++++++++++----- src/components/LoginPage.tsx | 84 +++++++++ src/components/OutstandingReportDashboard.tsx | 142 +++++++++++---- src/pages/Index.tsx | 93 +++++----- 4 files changed, 358 insertions(+), 124 deletions(-) create mode 100644 src/components/LoginPage.tsx diff --git a/src/components/EmployeePaymentReport.tsx b/src/components/EmployeePaymentReport.tsx index f9566fb..8aac2ec 100644 --- a/src/components/EmployeePaymentReport.tsx +++ b/src/components/EmployeePaymentReport.tsx @@ -2,7 +2,8 @@ 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 { Card, CardContent } from "@/components/ui/card"; +import { X } from "lucide-react"; import { useEmployeeData } from "@/hooks/useEmployeeData"; export const EmployeePaymentReport = () => { @@ -41,10 +42,74 @@ export const EmployeePaymentReport = () => { const transactions = getTransactionsToShow(); + // Calculate totals + const totalCollection = transactions.reduce((sum, t) => sum + t.collection, 0); + const totalDeposit = transactions.reduce((sum, t) => sum + t.deposit, 0); + const totalDifference = totalCollection - totalDeposit; + return (
+ {/* Header */}
-

Filter by Employee

+

Employee Payment Report

+ +
+ + {/* Summary Cards */} +
+ + +
+
+
+
+
+

Total Collection

+

(MM) Amount

+

{formatCurrency(totalCollection)}

+
+
+ + + + + +
+
+
+ ✓ +
+
+
+

Total Deposit

+

Amount

+

{formatCurrency(totalDeposit)}

+
+
+ + + + + +
+
+
+ = +
+
+
+

Difference

+

Amount

+

{formatCurrency(totalDifference)}

+
+
+ + +
+ + {/* Filter */} +
+
-
+ {/* Data Table */} +
- - Employee ID - Employee Name - Date - MM Collection - Deposit Amount - Difference - Running Balance - Status + + Location + Emp. ID + Emp. Name + Collections (MM) + Date + Cash Deposit + Deposit Date + Difference {transactions.map((transaction, index) => ( - - {transaction.employeeId} - -
-
- - {transaction.employeeName.charAt(0)} - -
- {transaction.employeeName} -
+ + BGRoad, Karnataka + {transaction.employeeId.replace('EMP00', '')} + {transaction.employeeName} + + {transaction.collection > 0 ? transaction.collection.toLocaleString() : '-'} - {formatDate(transaction.date)} - - {formatCurrency(transaction.collection)} + + {transaction.collection > 0 ? formatDate(transaction.date) : '-'} - - {formatCurrency(transaction.deposit)} + + {transaction.deposit > 0 ? transaction.deposit.toLocaleString() : '-'} + + + {transaction.deposit > 0 ? formatDate(transaction.date) : '-'} - = 0 ? 'text-green-600' : 'text-red-600'}`}> - {formatCurrency(transaction.difference)} + 0 ? 'text-green-600' : 'text-red-600'}`}> + {transaction.difference === 0 ? '-' : transaction.difference.toLocaleString()} - - = 0 ? 'text-green-600' : 'text-red-600'}`}> - {formatCurrency(Math.abs(transaction.runningBalance))} - - - - = 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'} - - ))}
+ {/* Pagination */} +
+
+ Show + + Rows +
+
+ + + + + + ... + + +
+
+ {transactions.length === 0 && (
-
No transaction data available
-
Use the "Insert Employee Data" button to add records
+
No transaction data available
+
Use the "Insert Employee Data" button to add records
)}
diff --git a/src/components/LoginPage.tsx b/src/components/LoginPage.tsx new file mode 100644 index 0000000..ca06a1f --- /dev/null +++ b/src/components/LoginPage.tsx @@ -0,0 +1,84 @@ + +import React, { useState } from 'react'; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Checkbox } from "@/components/ui/checkbox"; + +interface LoginPageProps { + onLogin: () => void; +} + +export const LoginPage = ({ onLogin }: LoginPageProps) => { + const [email, setEmail] = useState('admin@123.com'); + const [password, setPassword] = useState(''); + const [rememberMe, setRememberMe] = useState(false); + + const handleLogin = (e: React.FormEvent) => { + e.preventDefault(); + onLogin(); + }; + + return ( +
+ {/* Left side with purple gradient */} +
+
+

Cash Management Dashboard

+

Real-time Cash Reconciliation – Ensuring Accuracy & Transparency

+
+
+ + {/* Right side with login form */} +
+
+

Sign In to Your Dashboard

+ +
+
+ setEmail(e.target.value)} + className="w-full h-12 px-4 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-purple-500" + /> +
+ +
+ setPassword(e.target.value)} + className="w-full h-12 px-4 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-purple-500" + /> +
+ + + +
+
+ setRememberMe(checked as boolean)} + /> + +
+ + Forgot password + +
+
+
+
+
+ ); +}; diff --git a/src/components/OutstandingReportDashboard.tsx b/src/components/OutstandingReportDashboard.tsx index 70edd81..12d0aaf 100644 --- a/src/components/OutstandingReportDashboard.tsx +++ b/src/components/OutstandingReportDashboard.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Badge } from "@/components/ui/badge"; +import { Card, CardContent } from "@/components/ui/card"; import { useEmployeeData } from "@/hooks/useEmployeeData"; export const OutstandingReportDashboard = () => { @@ -26,63 +27,132 @@ export const OutstandingReportDashboard = () => { return new Date(date).toLocaleDateString('en-IN'); }; + // Calculate totals + const totalCollection = employeeSummaries.reduce((sum, emp) => sum + emp.totalCollection, 0); + const totalDeposit = employeeSummaries.reduce((sum, emp) => sum + emp.totalDeposit, 0); + const totalDifference = totalCollection - totalDeposit; + return (
-
+
+ Outstanding Report (All Locations) +
+ + {/* Summary Cards */} +
+ + +
+
+
+
+
+

Total Collection (MM)

+

(All Locations)

+

{formatCurrency(totalCollection)}

+
+
+ + + + + +
+
+
+ ✓ +
+
+
+

Total Deposit Amount

+

(All Locations)

+

{formatCurrency(totalDeposit)}

+
+
+ + + + + +
+
+
+ = +
+
+
+

Difference Amount

+

(All Locations)

+

{formatCurrency(totalDifference)}

+
+
+ + +
+ + {/* Data Table */} +
- - Employee ID - Employee Name - Net Collection Till Date - Most Recent Transaction - Outstanding Amount - Status + + Location + Emp. ID + Emp. Name + Collections (MM) + Date + Difference {employeeSummaries.map((employee) => ( - - {employee.id} - -
-
- - {employee.name.charAt(0)} - -
- {employee.name} -
+ + BGRoad, Karnataka + {employee.id.replace('EMP00', '')} + {employee.name} + + {employee.totalCollection.toLocaleString()} - - {formatCurrency(employee.totalCollection)} + + {employee.lastTransactionDate ? formatDate(employee.lastTransactionDate) : '26 Mar 2025'} - {employee.lastTransactionDate ? formatDate(employee.lastTransactionDate) : 'No transactions'} - - - 0 ? 'text-red-600' : 'text-green-600'}`}> - {formatCurrency(Math.abs(employee.outstandingAmount))} + 0 ? 'text-red-600' : 'text-green-600'}`}> + {employee.outstandingAmount > 0 ? employee.outstandingAmount.toLocaleString() : `(${Math.abs(employee.outstandingAmount).toLocaleString()})`} - - 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'} - - ))}
+ + {/* Pagination */} +
+
+ Show + + Rows +
+
+ + + + + + ... + + +
+
{employeeSummaries.length === 0 && (
-
No employee data available
-
Use the "Insert Employee Data" button to add records
+
No employee data available
+
Use the "Insert Employee Data" button to add records
)}
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 0b16b97..ae1fa82 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -6,9 +6,11 @@ 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"; +import { LoginPage } from "@/components/LoginPage"; +import { Plus, LogOut } from "lucide-react"; const Index = () => { + const [isAuthenticated, setIsAuthenticated] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); const [refreshTrigger, setRefreshTrigger] = useState(0); @@ -17,64 +19,69 @@ const Index = () => { setIsModalOpen(false); }; + const handleLogin = () => { + setIsAuthenticated(true); + }; + + const handleLogout = () => { + setIsAuthenticated(false); + }; + + if (!isAuthenticated) { + return ; + } + return ( -
+
+ {/* Header */} +
+
+
+

Dashboard

+

Outstanding Report

+
+
+ + +
+
+
+
-
-

- Employee Collection Management -

-

- Track and manage employee collections and deposits -

-
- -
- -
- - + - Outstanding Report Dashboard + Outstanding Report Employee Payment Report - - - - Outstanding Report Dashboard - - - - - + + - - - - Employee Payment Report Dashboard - - - - - + +