Refactor: Apply UI design from Figma
Implement the UI design from the provided Figma file, including fonts and colors.
This commit is contained in:
gpt-engineer-app[bot]
@@ -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 (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-slate-700">Filter by Employee</h3>
|
||||
<h2 className="text-xl font-semibold text-purple-600">Employee Payment Report</h2>
|
||||
<X className="h-5 w-5 text-gray-400" />
|
||||
</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-center gap-4">
|
||||
<div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
|
||||
<div className="w-6 h-6 bg-gray-600 rounded-full"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-1">Total Collection</p>
|
||||
<p className="text-sm text-gray-500">(MM) Amount</p>
|
||||
<p className="text-2xl font-bold text-gray-800">{formatCurrency(totalCollection)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<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>
|
||||
<p className="text-sm text-gray-500 mb-1">Total Deposit</p>
|
||||
<p className="text-sm text-gray-500">Amount</p>
|
||||
<p className="text-2xl font-bold text-gray-800">{formatCurrency(totalDeposit)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
|
||||
<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>
|
||||
<p className="text-sm text-gray-500 mb-1">Difference</p>
|
||||
<p className="text-sm text-gray-500">Amount</p>
|
||||
<p className="text-2xl font-bold text-red-600">{formatCurrency(totalDifference)}</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" />
|
||||
@@ -60,69 +125,77 @@ export const EmployeePaymentReport = () => {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-lg border border-slate-200 shadow-lg">
|
||||
{/* Data Table */}
|
||||
<div className="bg-white rounded-lg shadow-sm border">
|
||||
<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 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>
|
||||
{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>
|
||||
<TableRow key={`${transaction.employeeId}-${transaction.date}-${index}`} className="hover:bg-gray-50 transition-colors duration-150">
|
||||
<TableCell className="py-4 text-gray-600">BGRoad, Karnataka</TableCell>
|
||||
<TableCell className="font-medium py-4">{transaction.employeeId.replace('EMP00', '')}</TableCell>
|
||||
<TableCell className="py-4 font-medium text-gray-800">{transaction.employeeName}</TableCell>
|
||||
<TableCell className="py-4 font-medium">
|
||||
{transaction.collection > 0 ? transaction.collection.toLocaleString() : '-'}
|
||||
</TableCell>
|
||||
<TableCell className="py-4">{formatDate(transaction.date)}</TableCell>
|
||||
<TableCell className="py-4 font-semibold text-blue-600">
|
||||
{formatCurrency(transaction.collection)}
|
||||
<TableCell className="py-4 text-gray-600">
|
||||
{transaction.collection > 0 ? formatDate(transaction.date) : '-'}
|
||||
</TableCell>
|
||||
<TableCell className="py-4 font-semibold text-green-600">
|
||||
{formatCurrency(transaction.deposit)}
|
||||
<TableCell className="py-4 font-medium">
|
||||
{transaction.deposit > 0 ? transaction.deposit.toLocaleString() : '-'}
|
||||
</TableCell>
|
||||
<TableCell className="py-4 text-gray-600">
|
||||
{transaction.deposit > 0 ? formatDate(transaction.date) : '-'}
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
<span className={`font-semibold ${transaction.difference >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{formatCurrency(transaction.difference)}
|
||||
<span className={`font-medium ${transaction.difference === 0 ? 'text-gray-600' : transaction.difference > 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{transaction.difference === 0 ? '-' : transaction.difference.toLocaleString()}
|
||||
</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>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-between pt-4">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<span>Show</span>
|
||||
<select className="border border-gray-300 rounded px-3 py-1">
|
||||
<option>10</option>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
</select>
|
||||
<span>Rows</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">1</button>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">2</button>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">3</button>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">4</button>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">5</button>
|
||||
<span className="px-2 text-gray-400">...</span>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">10</button>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">→</button>
|
||||
</div>
|
||||
</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 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>
|
||||
|
||||
@@ -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 (
|
||||
<div className="min-h-screen flex">
|
||||
{/* Left side with purple gradient */}
|
||||
<div className="flex-1 bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 flex items-center justify-center text-white p-12">
|
||||
<div className="max-w-md">
|
||||
<h1 className="text-4xl font-bold mb-4">Cash Management Dashboard</h1>
|
||||
<p className="text-lg text-purple-100">Real-time Cash Reconciliation – Ensuring Accuracy & Transparency</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side with login form */}
|
||||
<div className="flex-1 bg-white flex items-center justify-center p-12">
|
||||
<div className="w-full max-w-md">
|
||||
<h2 className="text-2xl font-semibold text-purple-600 mb-8">Sign In to Your Dashboard</h2>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="admin@123.com"
|
||||
value={email}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter Password"
|
||||
value={password}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-orange-500 hover:bg-orange-600 text-white font-medium rounded-lg"
|
||||
>
|
||||
Login to dashboard
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="remember"
|
||||
checked={rememberMe}
|
||||
onCheckedChange={(checked) => setRememberMe(checked as boolean)}
|
||||
/>
|
||||
<label htmlFor="remember" className="text-sm text-gray-600">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<a href="#" className="text-sm text-purple-600 hover:underline">
|
||||
Forgot password
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -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 (
|
||||
<div className="space-y-6">
|
||||
<div className="overflow-hidden rounded-lg border border-slate-200 shadow-lg">
|
||||
<div className="text-xl font-semibold text-purple-600 mb-4">
|
||||
Outstanding Report (All Locations)
|
||||
</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-center gap-4">
|
||||
<div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
|
||||
<div className="w-6 h-6 bg-gray-600 rounded-full"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-1">Total Collection (MM)</p>
|
||||
<p className="text-sm text-gray-500">(All Locations)</p>
|
||||
<p className="text-2xl font-bold text-gray-800">{formatCurrency(totalCollection)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<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>
|
||||
<p className="text-sm text-gray-500 mb-1">Total Deposit Amount</p>
|
||||
<p className="text-sm text-gray-500">(All Locations)</p>
|
||||
<p className="text-2xl font-bold text-gray-800">{formatCurrency(totalDeposit)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
|
||||
<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>
|
||||
<p className="text-sm text-gray-500 mb-1">Difference Amount</p>
|
||||
<p className="text-sm text-gray-500">(All Locations)</p>
|
||||
<p className="text-2xl font-bold text-red-600">{formatCurrency(totalDifference)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<div className="bg-white rounded-lg shadow-sm border">
|
||||
<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 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">Difference</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>
|
||||
<TableRow key={employee.id} className="hover:bg-gray-50 transition-colors duration-150">
|
||||
<TableCell className="py-4 text-gray-600">BGRoad, Karnataka</TableCell>
|
||||
<TableCell className="font-medium py-4">{employee.id.replace('EMP00', '')}</TableCell>
|
||||
<TableCell className="py-4 font-medium text-gray-800">{employee.name}</TableCell>
|
||||
<TableCell className="py-4 font-medium">
|
||||
{employee.totalCollection.toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="py-4 font-semibold text-green-600">
|
||||
{formatCurrency(employee.totalCollection)}
|
||||
<TableCell className="py-4 text-gray-600">
|
||||
{employee.lastTransactionDate ? formatDate(employee.lastTransactionDate) : '26 Mar 2025'}
|
||||
</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 className={`font-medium ${employee.outstandingAmount > 0 ? 'text-red-600' : 'text-green-600'}`}>
|
||||
{employee.outstandingAmount > 0 ? employee.outstandingAmount.toLocaleString() : `(${Math.abs(employee.outstandingAmount).toLocaleString()})`}
|
||||
</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>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-between pt-4">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<span>Show</span>
|
||||
<select className="border border-gray-300 rounded px-3 py-1">
|
||||
<option>10</option>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
</select>
|
||||
<span>Rows</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">1</button>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">2</button>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">3</button>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">4</button>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">5</button>
|
||||
<span className="px-2 text-gray-400">...</span>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">10</button>
|
||||
<button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">→</button>
|
||||
</div>
|
||||
</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 className="text-gray-400 text-lg mb-2">No employee data available</div>
|
||||
<div className="text-gray-500">Use the "Insert Employee Data" button to add records</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user