alpe-temp 1.0.2 → 1.0.3

package/frontend-project/src/pages/Employee.jsx

@@ -1,78 +1,77 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Plus, Download, Pencil, Trash2 } from 'lucide-react';
+import { Plus, Pencil, Trash2, Search } from 'lucide-react';
 import Table from '../components/Table';
 import Modal from '../components/Modal';
 import Button from '../components/Button';
 import FormField from '../components/FormField';
 import { useToast } from '../components/Toast';
-import { employeeApi, departmentApi, excelApi } from '../api/ApiClient';
+import { employeeApi, departmentApi, positionApi } from '../api/ApiClient';
+
+const STATUS_OPTIONS = [
+  { value: 'on mission', label: 'On Mission' },
+  { value: 'on leave', label: 'On Leave' },
+  { value: 'left', label: 'Left' },
+  { value: 'blacklisted', label: 'Blacklisted' },
+  { value: 'deceased', label: 'Deceased' },
+];
 
 const formatDate = (iso) => {
   if (!iso) return '—';
   try { return new Date(iso).toISOString().split('T')[0]; } catch { return '—'; }
 };
 
+function StatusBadge({ status }) {
+  const colors = {
+    'on leave': 'bg-yellow-100 text-yellow-800',
+    'on mission': 'bg-blue-100 text-blue-800',
+    left: 'bg-gray-100 text-gray-800',
+    blacklisted: 'bg-red-100 text-red-800',
+    deceased: 'bg-gray-200 text-gray-600',
+  };
+  return <span className={`px-2 py-0.5 text-[11px] font-semibold ${colors[status] || 'bg-gray-100 text-gray-800'}`}>{status}</span>;
+}
+
 export default function Employee() {
   const toast = useToast();
   const [employees, setEmployees] = useState([]);
   const [departments, setDepartments] = useState([]);
+  const [positions, setPositions] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [exporting, setExporting] = useState(false);
+  const [search, setSearch] = useState('');
   const [createOpen, setCreateOpen] = useState(false);
   const [editTarget, setEditTarget] = useState(null);
   const [deleteTarget, setDeleteTarget] = useState(null);
 
-  const loadAll = useCallback(async () => {
+  const loadAll = useCallback(async (searchTerm) => {
     setLoading(true);
     try {
-      const [empRes, deptRes] = await Promise.allSettled([
-        employeeApi.list(),
+      const [empRes, deptRes, posRes] = await Promise.allSettled([
+        employeeApi.list(searchTerm || undefined),
         departmentApi.list(),
+        positionApi.list(),
       ]);
       if (empRes.status === 'fulfilled') setEmployees(empRes.value?.data?.employees ?? []);
       if (deptRes.status === 'fulfilled') setDepartments(deptRes.value?.data?.departments ?? []);
-    } catch (err) {
-      toast.error('Failed to load data');
-    } finally {
-      setLoading(false);
-    }
+      if (posRes.status === 'fulfilled') setPositions(posRes.value?.data?.positions ?? []);
+    } catch { toast.error('Failed to load data'); }
+    finally { setLoading(false); }
   }, []);
 
   useEffect(() => { loadAll(); }, [loadAll]);
 
-  const handleExport = async () => {
-    setExporting(true);
-    try {
-      try { await excelApi.exportUsers(); toast.success('Report downloaded'); }
-      catch {
-        const rows = employees.map((e) => ({
-          'Emp #': e.employeeNumber,
-          'First Name': e.firstName,
-          'Last Name': e.lastName,
-          Position: e.position,
-          Gender: e.gender,
-          'Hired Date': formatDate(e.hiredDate),
-          Department: e.department?.departmentName ?? '',
-        }));
-        await excelApi.exportCustom('Employees', rows, 'employees-report');
-        toast.success('Report downloaded');
-      }
-    } catch (err) {
-      toast.error(err.message ?? 'Export failed');
-    } finally {
-      setExporting(false);
-    }
-  };
+  const handleSearch = () => loadAll(search);
+  const handleClearSearch = () => { setSearch(''); loadAll(); };
 
   const columns = [
-    { key: 'employeeNumber', label: 'Emp #' },
-    { key: 'firstName', label: 'First Name' },
-    { key: 'lastName', label: 'Last Name' },
-    { key: 'position', label: 'Position' },
-    { key: 'gender', label: 'Gender' },
-    { key: 'telephone', label: 'Phone' },
-    { key: 'hiredDate', label: 'Hired', render: (v) => formatDate(v) },
-    { key: 'department', label: 'Department', render: (v) => v?.departmentName ?? '—' },
+    { key: 'empFirstName', label: 'First Name' },
+    { key: 'empLastName', label: 'Last Name' },
+    { key: 'empGender', label: 'Gender' },
+    { key: 'empEmail', label: 'Email' },
+    { key: 'empTelephone', label: 'Phone' },
+    { key: 'empHireDate', label: 'Hired', render: (v) => formatDate(v) },
+    { key: 'empStatus', label: 'Status', render: (v) => <StatusBadge status={v} /> },
+    { key: 'department', label: 'Dept', render: (v) => v?.departName ?? '—' },
+    { key: 'position', label: 'Position', render: (v) => v?.posName ?? '—' },
     {
       key: 'actions', label: '', align: 'right',
       render: (_, row) => (
@@ -91,37 +90,48 @@ export default function Employee() {
           <h1 className="text-[18px] font-bold text-gray-800">Employees</h1>
           <p className="text-[13px] text-gray-400 mt-0.5">{employees.length} total records</p>
         </div>
-        <div className="flex ">
-          <Button size="sm" variant='dark'  icon={<Plus className="w-3.5 h-3.5" />} onClick={() => setCreateOpen(true)}>Add Employee</Button>
+        <Button size="sm" variant='dark' icon={<Plus className="w-3.5 h-3.5" />} onClick={() => setCreateOpen(true)}>Add Employee</Button>
+      </div>
+      <div className="flex items-center gap-2">
+        <div className="relative w-72">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+          <input
+            type="text" value={search} onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search employees..." onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+            className="w-full pl-9 pr-3 py-2 text-[13px] border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-[#008A75]"
+          />
         </div>
+        <Button size="sm" onClick={handleSearch}>Search</Button>
+        {search && <Button size="sm" variant="ghost" onClick={handleClearSearch}>Clear</Button>}
       </div>
       <div className="bg-white border border-gray-200 p-5">
         <Table columns={columns} data={employees} rowKey="_id" loading={loading} emptyMessage="No employees yet." maxHeight="480px" />
       </div>
-      {createOpen && <CreateModal departments={departments} onClose={() => setCreateOpen(false)} onCreated={() => { setCreateOpen(false); loadAll(); }} />}
-      {editTarget && <EditModal employee={editTarget} departments={departments} onClose={() => setEditTarget(null)} onUpdated={() => { setEditTarget(null); loadAll(); }} />}
+      {createOpen && <CreateModal departments={departments} positions={positions} onClose={() => setCreateOpen(false)} onCreated={() => { setCreateOpen(false); loadAll(); }} />}
+      {editTarget && <EditModal employee={editTarget} departments={departments} positions={positions} onClose={() => setEditTarget(null)} onUpdated={() => { setEditTarget(null); loadAll(); }} />}
       {deleteTarget && <DeleteModal employee={deleteTarget} onClose={() => setDeleteTarget(null)} onDeleted={() => { setDeleteTarget(null); loadAll(); }} />}
     </div>
   );
 }
 
-function CreateModal({ departments, onClose, onCreated }) {
+function CreateModal({ departments, positions, onClose, onCreated }) {
   const toast = useToast();
   const now = new Date().toISOString().split('T')[0];
-  const [form, setForm] = useState({ employeeNumber: '', firstName: '', lastName: '', position: '', address: '', telephone: '', gender: '', hiredDate: now, department: '' });
+  const [form, setForm] = useState({
+    empFirstName: '', empLastName: '', empGender: '', empDateOfBirth: '',
+    empEmail: '', empTelephone: '', empAddress: '', empHireDate: now,
+    empStatus: 'on mission', department: '', position: '',
+  });
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
-
   const set = (field) => (val) => setForm((f) => ({ ...f, [field]: val }));
 
   const validate = () => {
     const e = {};
-    if (!form.employeeNumber) e.employeeNumber = 'Required';
-    if (!form.firstName) e.firstName = 'Required';
-    if (!form.lastName) e.lastName = 'Required';
-    if (!form.position) e.position = 'Required';
-    if (!form.gender) e.gender = 'Required';
-    if (!form.hiredDate) e.hiredDate = 'Required';
+    if (!form.empFirstName) e.empFirstName = 'Required';
+    if (!form.empLastName) e.empLastName = 'Required';
+    if (!form.empGender) e.empGender = 'Required';
+    if (!form.empHireDate) e.empHireDate = 'Required';
     if (!form.department) e.department = 'Required';
     setErrors(e);
     return Object.keys(e).length === 0;
@@ -132,51 +142,53 @@ function CreateModal({ departments, onClose, onCreated }) {
     setLoading(true);
     try {
       await employeeApi.create(form);
-      toast.success('Employee created successfully');
+      toast.success('Employee created');
       onCreated();
-    } catch (err) {
-      toast.error(err.message ?? 'Failed to create employee');
-    } finally {
-      setLoading(false);
-    }
+    } catch (err) { toast.error(err.message ?? 'Failed to create employee'); }
+    finally { setLoading(false); }
   };
 
-  const deptOptions = departments.map((d) => ({ value: d._id, label: `${d.departmentCode} - ${d.departmentName}` }));
+  const deptOptions = departments.map((d) => ({ value: d._id, label: d.departName }));
+  const posOptions = positions.map((p) => ({ value: p._id, label: p.posName }));
 
   return (
-    <Modal open title="Add Employee" size="lg" onClose={onClose}>
+    <Modal open title="Add Employee" size="2xl" onClose={onClose}>
       <div className="grid grid-cols-2 gap-3">
-        <FormField label="Employee #" required error={errors.employeeNumber}>
-          <FormField.Input value={form.employeeNumber} onChange={set('employeeNumber')} placeholder="e.g. EMP001" />
-        </FormField>
-        <FormField label="First Name" required error={errors.firstName}>
-          <FormField.Input value={form.firstName} onChange={set('firstName')} placeholder="Jane" />
+        <FormField label="First Name" required error={errors.empFirstName}>
+          <FormField.Input value={form.empFirstName} onChange={set('empFirstName')} placeholder="First name" />
         </FormField>
-        <FormField label="Last Name" required error={errors.lastName}>
-          <FormField.Input value={form.lastName} onChange={set('lastName')} placeholder="Doe" />
+        <FormField label="Last Name" required error={errors.empLastName}>
+          <FormField.Input value={form.empLastName} onChange={set('empLastName')} placeholder="Last name" />
         </FormField>
-        <FormField label="Position" required error={errors.position}>
-          <FormField.Select value={form.position} onChange={set('position')} placeholder="Select position" options={[
-            { value: 'Admin', label: 'Admin' }, { value: 'Employee', label: 'Employee' }, { value: 'Manager', label: 'Manager' }, { value: 'Mechanic', label: 'Mechanic' }, { value: 'Cashier', label: 'Cashier' },
+        <FormField label="Gender" required error={errors.empGender}>
+          <FormField.Select value={form.empGender} onChange={set('empGender')} placeholder="Select gender" options={[
+            { value: 'male', label: 'Male' }, { value: 'female', label: 'Female' },
           ]} />
         </FormField>
+        <FormField label="Date of Birth">
+          <FormField.Input type="date" value={form.empDateOfBirth} onChange={set('empDateOfBirth')} />
+        </FormField>
+        <FormField label="Email">
+          <FormField.Input type="email" value={form.empEmail} onChange={set('empEmail')} placeholder="employee@company.com" />
+        </FormField>
+        <FormField label="Telephone">
+          <FormField.Input type="tel" value={form.empTelephone} onChange={set('empTelephone')} placeholder="07xxxxxxxx" />
+        </FormField>
         <FormField label="Department" required error={errors.department}>
           <FormField.Select value={form.department} onChange={set('department')} placeholder="Select department" options={deptOptions} />
         </FormField>
-        <FormField label="Gender" required error={errors.gender}>
-          <FormField.Select value={form.gender} onChange={set('gender')} placeholder="Select gender" options={[
-            { value: 'male', label: 'Male' }, { value: 'female', label: 'Female' },
-          ]} />
+        <FormField label="Position">
+          <FormField.Select value={form.position} onChange={set('position')} placeholder="Select position" options={posOptions} />
         </FormField>
-        <FormField label="Hired Date" required error={errors.hiredDate}>
-          <FormField.Input type="date" value={form.hiredDate} onChange={set('hiredDate')} />
+        <FormField label="Hire Date" required error={errors.empHireDate}>
+          <FormField.Input type="date" value={form.empHireDate} onChange={set('empHireDate')} />
         </FormField>
-        <FormField label="Phone Number">
-          <FormField.Input type="tel" value={form.telephone} onChange={set('telephone')} placeholder="07xxxxxxxx" />
+        <FormField label="Status">
+          <FormField.Select value={form.empStatus} onChange={set('empStatus')} options={STATUS_OPTIONS} />
         </FormField>
         <div className="col-span-2">
           <FormField label="Address">
-            <FormField.Textarea value={form.address} onChange={set('address')} placeholder="Kigali, Rwanda" />
+            <FormField.Textarea value={form.empAddress} onChange={set('empAddress')} placeholder="Kigali, Rwanda" />
           </FormField>
         </div>
       </div>
@@ -188,22 +200,25 @@ function CreateModal({ departments, onClose, onCreated }) {
   );
 }
 
-function EditModal({ employee, departments, onClose, onUpdated }) {
+function EditModal({ employee, departments, positions, onClose, onUpdated }) {
   const toast = useToast();
   const [form, setForm] = useState({
-    employeeNumber: employee.employeeNumber || '',
-    firstName: employee.firstName || '',
-    lastName: employee.lastName || '',
-    position: employee.position || '',
-    address: employee.address || '',
-    telephone: employee.telephone || '',
-    gender: employee.gender || '',
-    hiredDate: employee.hiredDate ? employee.hiredDate.split('T')[0] : '',
+    empFirstName: employee.empFirstName || '',
+    empLastName: employee.empLastName || '',
+    empGender: employee.empGender || '',
+    empDateOfBirth: employee.empDateOfBirth ? employee.empDateOfBirth.split('T')[0] : '',
+    empEmail: employee.empEmail || '',
+    empTelephone: employee.empTelephone || '',
+    empAddress: employee.empAddress || '',
+    empHireDate: employee.empHireDate ? employee.empHireDate.split('T')[0] : '',
+    empStatus: employee.empStatus || 'on mission',
     department: employee.department?._id || '',
+    position: employee.position?._id || '',
   });
   const [loading, setLoading] = useState(false);
   const set = (f) => (v) => setForm((p) => ({ ...p, [f]: v }));
-  const deptOptions = departments.map((d) => ({ value: d._id, label: `${d.departmentCode} - ${d.departmentName}` }));
+  const deptOptions = departments.map((d) => ({ value: d._id, label: d.departName }));
+  const posOptions = positions.map((p) => ({ value: p._id, label: p.posName }));
 
   const handleSave = async () => {
     setLoading(true);
@@ -211,28 +226,34 @@ function EditModal({ employee, departments, onClose, onUpdated }) {
       await employeeApi.update(employee._id, form);
       toast.success('Employee updated');
       onUpdated();
-    } catch (err) {
-      toast.error(err.message ?? 'Update failed');
-    } finally {
-      setLoading(false);
-    }
+    } catch (err) { toast.error(err.message ?? 'Update failed'); }
+    finally { setLoading(false); }
   };
 
   return (
-    <Modal open title={`Edit — ${employee.firstName} ${employee.lastName}`} size="lg" onClose={onClose}>
+    <Modal open title={`Edit — ${employee.empFirstName} ${employee.empLastName}`} size="2xl" onClose={onClose}>
       <div className="grid grid-cols-2 gap-3">
-        <FormField label="Employee #"><FormField.Input value={form.employeeNumber} onChange={set('employeeNumber')} /></FormField>
-        <FormField label="First Name"><FormField.Input value={form.firstName} onChange={set('firstName')} /></FormField>
-        <FormField label="Last Name"><FormField.Input value={form.lastName} onChange={set('lastName')} /></FormField>
-        <FormField label="Position"><FormField.Input value={form.position} onChange={set('position')} /></FormField>
+        <FormField label="First Name"><FormField.Input value={form.empFirstName} onChange={set('empFirstName')} /></FormField>
+        <FormField label="Last Name"><FormField.Input value={form.empLastName} onChange={set('empLastName')} /></FormField>
+        <FormField label="Gender">
+          <FormField.Select value={form.empGender} onChange={set('empGender')} options={[{ value: 'male', label: 'Male' }, { value: 'female', label: 'Female' }]} />
+        </FormField>
+        <FormField label="Date of Birth"><FormField.Input type="date" value={form.empDateOfBirth} onChange={set('empDateOfBirth')} /></FormField>
+        <FormField label="Email"><FormField.Input type="email" value={form.empEmail} onChange={set('empEmail')} /></FormField>
+        <FormField label="Telephone"><FormField.Input value={form.empTelephone} onChange={set('empTelephone')} /></FormField>
         <FormField label="Department">
           <FormField.Select value={form.department} onChange={set('department')} options={deptOptions} placeholder="Select department" />
         </FormField>
-        <FormField label="Gender">
-          <FormField.Select value={form.gender} onChange={set('gender')} options={[{ value: 'male', label: 'Male' }, { value: 'female', label: 'Female' }]} placeholder="Select gender" />
+        <FormField label="Position">
+          <FormField.Select value={form.position} onChange={set('position')} options={posOptions} placeholder="Select position" />
+        </FormField>
+        <FormField label="Hire Date"><FormField.Input type="date" value={form.empHireDate} onChange={set('empHireDate')} /></FormField>
+        <FormField label="Status">
+          <FormField.Select value={form.empStatus} onChange={set('empStatus')} options={STATUS_OPTIONS} />
         </FormField>
-        <FormField label="Hired Date"><FormField.Input type="date" value={form.hiredDate} onChange={set('hiredDate')} /></FormField>
-        <FormField label="Phone"><FormField.Input value={form.telephone} onChange={set('telephone')} /></FormField>
+        <div className="col-span-2">
+          <FormField label="Address"><FormField.Textarea value={form.empAddress} onChange={set('empAddress')} /></FormField>
+        </div>
       </div>
       <Modal.Footer>
         <Button variant="outline" onClick={onClose}>Cancel</Button>
@@ -250,20 +271,17 @@ function DeleteModal({ employee, onClose, onDeleted }) {
     setLoading(true);
     try {
       await employeeApi.remove(employee._id);
-      toast.success(`${employee.firstName} ${employee.lastName} removed`);
+      toast.success(`${employee.empFirstName} ${employee.empLastName} removed`);
       onDeleted();
-    } catch (err) {
-      toast.error(err.message ?? 'Delete failed');
-    } finally {
-      setLoading(false);
-    }
+    } catch (err) { toast.error(err.message ?? 'Delete failed'); }
+    finally { setLoading(false); }
   };
 
   return (
     <Modal open title="Confirm Deletion" size="sm" onClose={onClose}>
       <p className="text-[13px] text-gray-600 leading-relaxed">
         Are you sure you want to permanently delete{' '}
-        <span className="font-semibold text-gray-800">{employee.firstName} {employee.lastName}</span>?
+        <span className="font-semibold text-gray-800">{employee.empFirstName} {employee.empLastName}</span>?
       </p>
       <Modal.Footer>
         <Button variant="outline" onClick={onClose}>Cancel</Button>

package/frontend-project/src/pages/Home.jsx

@@ -1,56 +1,58 @@
 import React, { useEffect, useState } from 'react';
 import { StatCard } from '../components/Card';
 import Table from '../components/Table';
-import { employeeApi, salaryApi, departmentApi } from '../api/ApiClient';
+import { employeeApi, departmentApi, positionApi } from '../api/ApiClient';
 
 const TABLE_COLUMNS = [
-  { key: 'employeeNumber', label: 'Emp #' },
-  { key: 'firstName', label: 'First Name' },
-  { key: 'lastName', label: 'Last Name' },
-  { key: 'position', label: 'Position', render: (v) => <Badge>{v}</Badge> },
-  { key: 'gender', label: 'Gender' },
-  { key: 'hiredDate', label: 'Hired', render: (v) => formatDate(v) },
-  { key: 'department', label: 'Department', render: (v) => v?.departmentName ?? '—' },
+  { key: 'empFirstName', label: 'First Name' },
+  { key: 'empLastName', label: 'Last Name' },
+  { key: 'empGender', label: 'Gender' },
+  { key: 'empStatus', label: 'Status', render: (v) => <Badge status={v}>{v}</Badge> },
+  { key: 'empEmail', label: 'Email' },
+  {
+    key: 'department',
+    label: 'Department',
+    render: (v) => v?.departName ?? '\u2014',
+  },
 ];
 
-const formatDate = (iso) => {
-  if (!iso) return '—';
-  try { return new Date(iso).toISOString().split('T')[0]; } catch { return '—'; }
-};
-
-function Badge({ children }) {
+function Badge({ status, children }) {
+  const colors = {
+    'on leave': 'bg-yellow-100 text-yellow-800',
+    'on mission': 'bg-blue-100 text-blue-800',
+    left: 'bg-gray-100 text-gray-800',
+    blacklisted: 'bg-red-100 text-red-800',
+    deceased: 'bg-gray-200 text-gray-600',
+  };
   return (
-    <span className="px-2 py-0.5 bg-[#E6F7F5] text-[#008A75] text-[11px] font-semibold">
+    <span className={`px-2 py-0.5 text-[11px] font-semibold ${colors[status] || 'bg-gray-100 text-gray-800'}`}>
       {children}
     </span>
   );
 }
 
 export default function Home() {
-  const user = (() => { try { return JSON.parse(localStorage.getItem('user')); } catch { return {}; } })();
   const [employees, setEmployees] = useState([]);
   const [totalCount, setTotalCount] = useState(null);
-  const [avgSalary, setAvgSalary] = useState(null);
   const [deptCount, setDeptCount] = useState(null);
+  const [posCount, setPosCount] = useState(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const load = async () => {
       setLoading(true);
       try {
-        const [empRes, countRes, salaryRes, deptRes] = await Promise.allSettled([
-          employeeApi.list(),
-          employeeApi.count(),
-          salaryApi.average(),
-          departmentApi.list(),
+        const [empRes, deptRes, posRes] = await Promise.allSettled([
+          employeeApi.list(), departmentApi.list(), positionApi.list(),
         ]);
-        if (empRes.status === 'fulfilled') setEmployees(empRes.value?.data?.employees ?? []);
-        if (countRes.status === 'fulfilled') setTotalCount(countRes.value?.data?.count ?? 0);
-        if (salaryRes.status === 'fulfilled') setAvgSalary(salaryRes.value?.data?.averageSalary ?? 0);
+        if (empRes.status === 'fulfilled') {
+          const data = empRes.value?.data?.employees ?? [];
+          setEmployees(data);
+          setTotalCount(data.length);
+        }
         if (deptRes.status === 'fulfilled') setDeptCount(deptRes.value?.data?.departments?.length ?? 0);
-      } finally {
-        setLoading(false);
-      }
+        if (posRes.status === 'fulfilled') setPosCount(posRes.value?.data?.positions?.length ?? 0);
+      } finally { setLoading(false); }
     };
     load();
   }, []);
@@ -59,16 +61,14 @@ export default function Home() {
 
   return (
     <div className="space-y-6">
-      <div className="flex justify-between">
-        <h1 className="text-[18px] font-bold text-gray-800">
-          Welcome back, <span className="text-[#008A75]">{user?.name ?? 'Admin'}</span>
-        </h1>
-      </div>
+      <h1 className="text-[18px] font-bold text-gray-800">
+        DAB Enterprise LTD — HRMS Dashboard
+      </h1>
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
         <StatCard label="Total Employees" value={fmt(totalCount)} loading={loading && totalCount == null} className="text-white bg-[#008A75]" />
-        <StatCard label="Avg. Net Salary" value={avgSalary != null ? `${Math.round(avgSalary).toLocaleString()} RWF` : null} loading={loading && avgSalary == null} className="text-zinc-900 bg-zinc-50" />
-        <StatCard label="Departments" value={fmt(deptCount)} loading={loading && deptCount == null} className="text-white bg-[#008A75]" />
-        <StatCard label="Active Today" value={fmt(totalCount)} loading={loading && totalCount == null} className="text-zinc-900 bg-zinc-50" />
+        <StatCard label="Departments" value={fmt(deptCount)} loading={loading && deptCount == null} className="text-zinc-900 bg-zinc-50" />
+        <StatCard label="Positions" value={fmt(posCount)} loading={loading && posCount == null} className="text-white bg-[#008A75]" />
+        <StatCard label="On Leave" value={fmt(employees.filter(e => e.empStatus === 'on leave').length)} loading={loading && totalCount == null} className="text-zinc-900 bg-zinc-50" />
       </div>
       <div className="bg-white border border-gray-200 p-5">
         <h2 className="text-[13px] font-semibold text-gray-700 mb-4">Recent Employees</h2>