Refactor: Apply UI design from Figma

Implement the UI design from the provided Figma file, including fonts and colors.

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 (
     <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,58 +125,43 @@ 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">
+            <TableRow className="bg-gray-50">
-              <TableHead className="font-semibold text-slate-700 py-4">Employee ID</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Location</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Employee Name</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Emp. ID</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Date</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Emp. Name</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">MM Collection</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Collections (MM)</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Deposit Amount</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Date</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Difference</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Cash Deposit</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Running Balance</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Deposit Date</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Status</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">
+              <TableRow key={`${transaction.employeeId}-${transaction.date}-${index}`} className="hover:bg-gray-50 transition-colors duration-150">
-                <TableCell className="font-medium py-4">{transaction.employeeId}</TableCell>
+                <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 text-gray-600">
+                  {transaction.collection > 0 ? formatDate(transaction.date) : '-'}
+                </TableCell>
+                <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">
-                  <div className="flex items-center space-x-3">
+                  <span className={`font-medium ${transaction.difference === 0 ? 'text-gray-600' : transaction.difference > 0 ? 'text-green-600' : 'text-red-600'}`}>
-                    <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
+                    {transaction.difference === 0 ? '-' : transaction.difference.toLocaleString()}
-                      <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>
             ))}
@@ -119,10 +169,33 @@ export const EmployeePaymentReport = () => {
         </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-gray-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-500">Use the "Insert Employee Data" button to add records</div>
         </div>
       )}
     </div>

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 (
+    <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>
+  );
+};

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,52 +27,98 @@ 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">
+            <TableRow className="bg-gray-50">
-              <TableHead className="font-semibold text-slate-700 py-4">Employee ID</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Location</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Employee Name</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Emp. ID</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Net Collection Till Date</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Emp. Name</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Most Recent Transaction</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Collections (MM)</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Outstanding Amount</TableHead>
+              <TableHead className="font-medium text-gray-600 py-4">Date</TableHead>
-              <TableHead className="font-semibold text-slate-700 py-4">Status</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">
+              <TableRow key={employee.id} className="hover:bg-gray-50 transition-colors duration-150">
-                <TableCell className="font-medium py-4">{employee.id}</TableCell>
+                <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 text-gray-600">
+                  {employee.lastTransactionDate ? formatDate(employee.lastTransactionDate) : '26 Mar 2025'}
+                </TableCell>
                 <TableCell className="py-4">
-                  <div className="flex items-center space-x-3">
+                  <span className={`font-medium ${employee.outstandingAmount > 0 ? 'text-red-600' : 'text-green-600'}`}>
-                    <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
+                    {employee.outstandingAmount > 0 ? employee.outstandingAmount.toLocaleString() : `(${Math.abs(employee.outstandingAmount).toLocaleString()})`}
-                      <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>
             ))}
@@ -79,10 +126,33 @@ export const OutstandingReportDashboard = () => {
         </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-gray-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-500">Use the "Insert Employee Data" button to add records</div>
         </div>
       )}
     </div>

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);
   };
 
-  return (
+  const handleLogin = () => {
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+    setIsAuthenticated(true);
-      <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">
+  const handleLogout = () => {
+    setIsAuthenticated(false);
+  };
+
+  if (!isAuthenticated) {
+    return <LoginPage onLogin={handleLogin} />;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <div className="bg-white border-b border-gray-200 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-semibold text-gray-800">Dashboard</h1>
+            <p className="text-sm text-gray-500">Outstanding Report</p>
+          </div>
+          <div className="flex items-center gap-4">
             <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"
+              className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-lg font-medium"
             >
-            <Plus className="h-5 w-5" />
               Insert Employee Data
             </Button>
+            <Button 
+              onClick={handleLogout}
+              variant="outline"
+              className="text-gray-600 border-gray-300"
+            >
+              <LogOut className="h-4 w-4 mr-2" />
+              Logout
+            </Button>
+          </div>
+        </div>
       </div>
 
+      <div className="container mx-auto p-6">
         <Tabs defaultValue="outstanding" className="space-y-6">
-          <TabsList className="grid w-full grid-cols-2 bg-white rounded-lg shadow-md p-1">
+          <TabsList className="grid w-full grid-cols-2 bg-white rounded-lg shadow-sm p-1 border">
             <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"
+              className="data-[state=active]:bg-purple-600 data-[state=active]:text-white rounded-md py-3 text-base font-medium transition-all duration-200"
             >
-              Outstanding Report Dashboard
+              Outstanding Report
             </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"
+              className="data-[state=active]:bg-purple-600 data-[state=active]:text-white rounded-md py-3 text-base font-medium transition-all duration-200"
             >
               Employee Payment Report
             </TabsTrigger>
           </TabsList>
 
-          <TabsContent value="outstanding" className="space-y-6">
+          <TabsContent value="outstanding">
-            <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">
+          <TabsContent value="payment">
-            <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>