alpe-temp 1.0.2 → 1.0.3

package/frontend-project/src/layouts/BottomNav.jsx

@@ -1,38 +1,13 @@
-// ═══════════════════════════════════════════════════════════════════════════
-//  📱  BOTTOM NAV LAYOUT  —  Navbar at the bottom (mobile-first style)
-// ═══════════════════════════════════════════════════════════════════════════
-//
-//  WHAT THIS FILE DOES:
-//    Renders the app shell with a bottom navigation bar.
-//    Switch to this by setting  navigation: 'bottomnav'  in config.js
-//
-//  HOW IT LOOKS:
-//    ┌────────────────────────────────┐
-//    │                                │
-//    │         PAGE CONTENT           │  ← scrollable
-//    │                                │
-//    ├────────────────────────────────┤
-//    │  📊  👥  💰  🏢  📄           │  ← bottom nav (fixed)
-//    └────────────────────────────────┘
-//
-// ═══════════════════════════════════════════════════════════════════════════
-
 import React, { useState } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
-import {
-  LayoutDashboard, Users, DollarSign, Building2,
-  FileText, User, LogOut, ChevronDown,
-} from 'lucide-react';
+import { LayoutDashboard, Users, Building2, Briefcase, FileText, User, LogOut, ChevronDown } from 'lucide-react';
 import { useShell } from './useShell';
 
-// ─── NAVIGATION ITEMS ────────────────────────────────────────────────────────
-//  Add new pages here. The icon + label + path = one nav item.
-//
 const NAV_ITEMS = [
   { label: 'Home',     path: '/dashboard/overview',   Icon: LayoutDashboard },
   { label: 'Employees',path: '/dashboard/employees',  Icon: Users },
-  { label: 'Salary',   path: '/dashboard/salary',     Icon: DollarSign },
   { label: 'Depts',    path: '/dashboard/departments', Icon: Building2 },
+  { label: 'Positions',path: '/dashboard/positions',  Icon: Briefcase },
   { label: 'Reports',  path: '/dashboard/reports',    Icon: FileText },
 ];
 
@@ -42,111 +17,53 @@ export default function BottomNav() {
 
   return (
     <div className="flex flex-col h-screen overflow-hidden">
-      {/* ─── TOP BAR (user menu, logo) ─────────────────────────────────── */}
-      <header
-        className="flex-shrink-0 flex items-center h-[52px] px-4 gap-1 z-20"
-        style={{
-          backgroundColor: 'var(--color-nav-bg)',
-          color: 'var(--color-nav-text)',
-          borderBottom: '1px solid var(--color-border)',
-        }}
-      >
+      <header className="flex-shrink-0 flex items-center h-[52px] px-4 gap-1 z-20"
+        style={{ backgroundColor: 'var(--color-nav-bg)', color: 'var(--color-nav-text)', borderBottom: '1px solid var(--color-border)' }}>
         <div className="flex items-center gap-2 mr-4">
           <img src="/logo.png" alt="logo" className="w-7 h-9" />
           <div className="flex flex-col mt-4">
-            <span className="text-[15px] font-bold tracking-tight leading-tight">
-              EP<span style={{ color: 'var(--color-primary)' }}>MS</span>
-            </span>
-            <span className="text-[7px] font-medium uppercase tracking-wider leading-tight opacity-60">
-              Employee Payroll
-            </span>
+            <span className="text-[15px] font-bold tracking-tight leading-tight">HR<span style={{ color: 'var(--color-primary)' }}>MS</span></span>
+            <span className="text-[7px] font-medium uppercase tracking-wider leading-tight opacity-60">DAB Enterprise</span>
           </div>
         </div>
-
-        {/* Spacer */}
         <div className="flex-1" />
-
-        {/* User dropdown */}
         <div className="relative">
-          <button
-            onClick={() => setMenuOpen((v) => !v)}
-            className="flex items-center gap-2 px-3 py-1.5 text-[12px] font-medium transition-colors hover:opacity-80"
-          >
-            <div
-              className="w-6 h-6 flex items-center justify-center"
-              style={{ backgroundColor: 'var(--color-primary)', color: '#fff' }}
-            >
+          <button onClick={() => setMenuOpen((v) => !v)} className="flex items-center gap-2 px-3 py-1.5 text-[12px] font-medium transition-colors hover:opacity-80">
+            <div className="w-6 h-6 flex items-center justify-center" style={{ backgroundColor: 'var(--color-primary)', color: '#fff' }}>
               <User className="w-3 h-3" />
             </div>
-            <span className="hidden sm:inline">{user?.name ?? 'Admin'}</span>
+            <span className="hidden sm:inline">{user?.userName ?? 'Admin'}</span>
             <ChevronDown className={`w-3 h-3 transition-transform ${menuOpen ? 'rotate-180' : ''}`} />
           </button>
           {menuOpen && (
             <>
               <div className="fixed inset-0 z-10" onClick={() => setMenuOpen(false)} />
-              <div
-                className="absolute right-0 top-full mt-1 z-20 shadow-lg py-1 min-w-[150px]"
-                style={{ backgroundColor: 'var(--color-card)', border: '1px solid var(--color-border)' }}
-              >
+              <div className="absolute right-0 top-full mt-1 z-20 shadow-lg py-1 min-w-[150px]"
+                style={{ backgroundColor: 'var(--color-card)', border: '1px solid var(--color-border)' }}>
                 <div className="px-3 py-2 border-b" style={{ borderColor: 'var(--color-border)' }}>
-                  <p className="text-[12px] font-semibold" style={{ color: 'var(--color-text)' }}>
-                    {user?.name ?? 'Admin'}
-                  </p>
-                  <p className="text-[11px]" style={{ color: 'var(--color-text-muted)' }}>
-                    {user?.email ?? ''}
-                  </p>
+                  <p className="text-[12px] font-semibold" style={{ color: 'var(--color-text)' }}>{user?.userName ?? 'Admin'}</p>
                 </div>
-                <button
-                  onClick={() => { setMenuOpen(false); handleLogout(); }}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-[12px] font-medium transition-colors"
+                <button onClick={() => { setMenuOpen(false); handleLogout(); }} className="w-full flex items-center gap-2 px-3 py-2 text-[12px] font-medium transition-colors"
                   style={{ color: 'var(--color-danger)' }}
                   onMouseEnter={(e) => e.target.style.backgroundColor = 'var(--color-danger)'}
-                  onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}
-                >
-                  <LogOut className="w-3.5 h-3.5" />
-                  Logout
+                  onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}>
+                  <LogOut className="w-3.5 h-3.5" /> Logout
                 </button>
               </div>
             </>
           )}
         </div>
       </header>
-
-      {/* ─── MAIN CONTENT ──────────────────────────────────────────────── */}
-      <main
-        className="flex-1 overflow-y-auto"
-        style={{
-          backgroundColor: 'var(--color-surface)',
-          padding: 'var(--text-base)',
-        }}
-      >
-        <div className="max-w-6xl mx-auto">
-          <Outlet />
-        </div>
+      <main className="flex-1 overflow-y-auto" style={{ backgroundColor: 'var(--color-surface)', padding: 'var(--text-base)' }}>
+        <div className="max-w-6xl mx-auto"><Outlet /></div>
       </main>
-
-      {/* ─── BOTTOM NAV ──────────────────────────────────────────────────── */}
-      <nav
-        className="flex-shrink-0 flex items-center justify-around h-[64px] px-2 z-20"
-        style={{
-          backgroundColor: 'var(--color-nav-bg)',
-          borderTop: '1px solid var(--color-border)',
-        }}
-      >
+      <nav className="flex-shrink-0 flex items-center justify-around h-[64px] px-2 z-20"
+        style={{ backgroundColor: 'var(--color-nav-bg)', borderTop: '1px solid var(--color-border)' }}>
         {NAV_ITEMS.map(({ label, path, Icon }) => (
-          <NavLink
-            key={path}
-            to={path}
-            className="flex flex-col items-center gap-0.5 px-2 py-1 text-[10px] font-medium transition-colors"
-            style={({ isActive }) => ({
-              color: isActive ? 'var(--color-nav-active)' : 'var(--color-nav-text)',
-            })}
-          >
+          <NavLink key={path} to={path} className="flex flex-col items-center gap-0.5 px-2 py-1 text-[10px] font-medium transition-colors"
+            style={({ isActive }) => ({ color: isActive ? 'var(--color-nav-active)' : 'var(--color-nav-text)' })}>
             {({ isActive }) => (
-              <>
-                <Icon className="w-5 h-5" />
-                <span>{label}</span>
-              </>
+              <><Icon className="w-5 h-5" /><span>{label}</span></>
             )}
           </NavLink>
         ))}

package/frontend-project/src/layouts/TopNav.jsx

@@ -1,43 +1,13 @@
-// ═══════════════════════════════════════════════════════════════════════════
-//  📐  TOP NAV LAYOUT  —  Navbar at the top (classic web style)
-// ═══════════════════════════════════════════════════════════════════════════
-//
-//  WHAT THIS FILE DOES:
-//    Renders the app shell with a horizontal nav bar at the top.
-//    This is the default layout (navigation: 'topnav' in config.js).
-//
-//  HOW IT LOOKS:
-//    ┌──────────────────────────────────────────────┐
-//    │  LOGO    Home  Employees  Salary  Reports   👤│  ← top nav (fixed)
-//    ├──────────────────────────────────────────────┤
-//    │                                                │
-//    │              PAGE CONTENT                      │  ← scrollable
-//    │                                                │
-//    └──────────────────────────────────────────────┘
-//
-//  HOW TO ADD A NEW NAV ITEM:
-//    Just add an entry to the NAV_ITEMS array below.
-//    Example:  { label: 'Products', path: '/dashboard/products', Icon: Package }
-//
-// ═══════════════════════════════════════════════════════════════════════════
-
 import React, { useState } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
-import {
-  LayoutDashboard, Users, DollarSign, Building2,
-  FileText, User, LogOut, ChevronDown,
-} from 'lucide-react';
+import { LayoutDashboard, Users, Building2, Briefcase, FileText, User, LogOut, ChevronDown } from 'lucide-react';
 import { useShell } from './useShell';
 
-// ─── NAVIGATION ITEMS ────────────────────────────────────────────────────────
-//  To add a new page, just add an object to this array.
-//  Each item needs: label (shown text), path (URL), Icon (from lucide-react)
-//
 const NAV_ITEMS = [
   { label: 'Overview',    path: '/dashboard/overview',   Icon: LayoutDashboard },
   { label: 'Employees',   path: '/dashboard/employees',  Icon: Users },
-  { label: 'Salary',      path: '/dashboard/salary',     Icon: DollarSign },
   { label: 'Departments', path: '/dashboard/departments', Icon: Building2 },
+  { label: 'Positions',   path: '/dashboard/positions',  Icon: Briefcase },
   { label: 'Reports',     path: '/dashboard/reports',    Icon: FileText },
 ];
 
@@ -47,103 +17,54 @@ export default function TopNav() {
 
   return (
     <div className="flex flex-col h-screen overflow-hidden">
-      {/* ─── TOP NAV BAR ───────────────────────────────────────────────── */}
-      <header
-        className="flex-shrink-0 flex items-center h-[52px] px-4 gap-1 z-20"
-        style={{
-          backgroundColor: 'var(--color-nav-bg)',
-          color: 'var(--color-nav-text)',
-          borderBottom: '1px solid var(--color-border)',
-        }}
-      >
-        {/* Logo + Brand */}
+      <header className="flex-shrink-0 flex items-center h-[52px] px-4 gap-1 z-20"
+        style={{ backgroundColor: 'var(--color-nav-bg)', color: 'var(--color-nav-text)', borderBottom: '1px solid var(--color-border)' }}>
         <div className="flex items-center gap-2 mr-4 pr-4" style={{ borderRight: '1px solid var(--color-border)' }}>
           <img src="/logo.png" alt="logo" className="w-7 h-9" />
           <div className="flex flex-col mt-4">
-            <span className="text-[15px] font-bold tracking-tight leading-tight">
-              EP<span style={{ color: 'var(--color-primary)' }}>MS</span>
-            </span>
-            <span className="text-[7px] font-medium uppercase tracking-wider leading-tight opacity-60">
-              Employee Payroll
-            </span>
+            <span className="text-[15px] font-bold tracking-tight leading-tight">HR<span style={{ color: 'var(--color-primary)' }}>MS</span></span>
+            <span className="text-[7px] font-medium uppercase tracking-wider leading-tight opacity-60">DAB Enterprise</span>
           </div>
         </div>
-
-        {/* Navigation links */}
         <nav className="flex items-center gap-0.5 flex-1">
           {NAV_ITEMS.map(({ label, path, Icon }) => (
-            <NavLink
-              key={path}
-              to={path}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] font-medium transition-colors"
-              style={({ isActive }) => ({
-                backgroundColor: isActive ? 'var(--color-primary)' : 'transparent',
-                color: isActive ? '#ffffff' : 'var(--color-nav-text)',
-              })}
-            >
+            <NavLink key={path} to={path} className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] font-medium transition-colors"
+              style={({ isActive }) => ({ backgroundColor: isActive ? 'var(--color-primary)' : 'transparent', color: isActive ? '#ffffff' : 'var(--color-nav-text)' })}>
               <Icon className="w-3.5 h-3.5 flex-shrink-0" />
               <span className="hidden sm:inline">{label}</span>
             </NavLink>
           ))}
         </nav>
-
-        {/* User dropdown */}
         <div className="relative ml-auto">
-          <button
-            onClick={() => setMenuOpen((v) => !v)}
-            className="flex items-center gap-2 px-3 py-1.5 text-[12px] font-medium transition-colors hover:opacity-80"
-          >
-            <div
-              className="w-6 h-6 flex items-center justify-center"
-              style={{ backgroundColor: 'var(--color-primary)', color: '#fff' }}
-            >
+          <button onClick={() => setMenuOpen((v) => !v)} className="flex items-center gap-2 px-3 py-1.5 text-[12px] font-medium transition-colors hover:opacity-80">
+            <div className="w-6 h-6 flex items-center justify-center" style={{ backgroundColor: 'var(--color-primary)', color: '#fff' }}>
               <User className="w-3 h-3" />
             </div>
-            <span className="hidden sm:inline">{user?.name ?? 'Admin'}</span>
+            <span className="hidden sm:inline">{user?.userName ?? 'Admin'}</span>
             <ChevronDown className={`w-3 h-3 transition-transform ${menuOpen ? 'rotate-180' : ''}`} />
           </button>
           {menuOpen && (
             <>
               <div className="fixed inset-0 z-10" onClick={() => setMenuOpen(false)} />
-              <div
-                className="absolute right-0 top-full mt-1 z-20 shadow-lg py-1 min-w-[150px]"
-                style={{ backgroundColor: 'var(--color-card)', border: '1px solid var(--color-border)' }}
-              >
+              <div className="absolute right-0 top-full mt-1 z-20 shadow-lg py-1 min-w-[150px]"
+                style={{ backgroundColor: 'var(--color-card)', border: '1px solid var(--color-border)' }}>
                 <div className="px-3 py-2 border-b" style={{ borderColor: 'var(--color-border)' }}>
-                  <p className="text-[12px] font-semibold" style={{ color: 'var(--color-text)' }}>
-                    {user?.name ?? 'Admin'}
-                  </p>
-                  <p className="text-[11px]" style={{ color: 'var(--color-text-muted)' }}>
-                    {user?.email ?? ''}
-                  </p>
+                  <p className="text-[12px] font-semibold" style={{ color: 'var(--color-text)' }}>{user?.userName ?? 'Admin'}</p>
                 </div>
-                <button
-                  onClick={() => { setMenuOpen(false); handleLogout(); }}
+                <button onClick={() => { setMenuOpen(false); handleLogout(); }}
                   className="w-full flex items-center gap-2 px-3 py-2 text-[12px] font-medium transition-colors"
                   style={{ color: 'var(--color-danger)' }}
                   onMouseEnter={(e) => e.target.style.backgroundColor = 'var(--color-danger)'}
-                  onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}
-                >
-                  <LogOut className="w-3.5 h-3.5" />
-                  Logout
+                  onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}>
+                  <LogOut className="w-3.5 h-3.5" /> Logout
                 </button>
               </div>
             </>
           )}
         </div>
       </header>
-
-      {/* ─── MAIN CONTENT ──────────────────────────────────────────────── */}
-      <main
-        className="flex-1 overflow-y-auto"
-        style={{
-          backgroundColor: 'var(--color-surface)',
-          padding: '24px',
-        }}
-      >
-        <div className="max-w-7xl mx-auto">
-          <Outlet />
-        </div>
+      <main className="flex-1 overflow-y-auto" style={{ backgroundColor: 'var(--color-surface)', padding: '24px' }}>
+        <div className="max-w-7xl mx-auto"><Outlet /></div>
       </main>
     </div>
   );

package/frontend-project/src/layouts/useShell.js

@@ -1,44 +1,30 @@
-/**
- * layouts/useShell.js  –  Shared auth logic for every layout shell.
- *
- * Returns { user, handleLogout } — plug into any shell component.
- */
-
-import { useEffect, useState } from 'react';
-import { useNavigate }         from 'react-router-dom';
-import { authApi }             from '../api/ApiClient';
-
-export function useShell() {
-  const [user, setUser] = useState(null);
-  const navigate        = useNavigate();
-
-  useEffect(() => {
-    const token = localStorage.getItem('token');
-    if (!token) { navigate('/'); return; }
-
-    try {
-      const payload = JSON.parse(atob(token.split('.')[1]));
-      if (payload.exp < Date.now() / 1000) {
-        localStorage.removeItem('token');
-        localStorage.removeItem('user');
-        navigate('/');
-        return;
-      }
-    } catch {
-      navigate('/');
-      return;
-    }
-
-    const stored = localStorage.getItem('user');
-    setUser(stored ? JSON.parse(stored) : {});
-  }, [navigate]);
-
-  const handleLogout = async () => {
-    try { await authApi.logout(); } catch { /* ignore */ }
-    localStorage.removeItem('token');
-    localStorage.removeItem('user');
-    navigate('/');
-  };
-
-  return { user, handleLogout };
-}
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { authApi } from '../api/ApiClient';
+
+export function useShell() {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        const res = await authApi.me();
+        setUser(res?.data?.user ?? null);
+      } catch {
+        navigate('/');
+      } finally {
+        setLoading(false);
+      }
+    };
+    checkAuth();
+  }, [navigate]);
+
+  const handleLogout = async () => {
+    try { await authApi.logout(); } catch { /* ignore */ }
+    navigate('/');
+  };
+
+  return { user, loading, handleLogout };
+}

package/frontend-project/src/main.jsx

@@ -8,13 +8,12 @@ import Register from './Auth/Register'
 import LayOut from './LayOut'
 import Home from './pages/Home'
 import Employee from './pages/Employee'
-import Salary from './pages/Salary'
 import Department from './pages/Department'
+import Position from './pages/Position'
 import Reports from './pages/Reports'
 import Profile from './pages/Profile'
 import { ToastProvider } from './components'
 
-
 const router = createBrowserRouter(
   createRoutesFromElements(
     <>
@@ -24,8 +23,8 @@ const router = createBrowserRouter(
     <Route path='/dashboard' element={<LayOut />} >
     <Route path='overview' element={<Home />} />
     <Route path='employees' element={<Employee />} />
-    <Route path='salary' element={<Salary />} />
     <Route path='departments' element={<Department />} />
+    <Route path='positions' element={<Position />} />
     <Route path='reports'  element={<Reports />} />
     <Route path='profile'  element={<Profile />} />
     </Route>

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

@@ -20,20 +20,14 @@ export default function Department() {
     try {
       const res = await departmentApi.list();
       setDepartments(res?.data?.departments ?? []);
-    } catch (err) {
-      toast.error('Failed to load departments');
-    } finally {
-      setLoading(false);
-    }
+    } catch { toast.error('Failed to load departments'); }
+    finally { setLoading(false); }
   }, []);
 
   useEffect(() => { loadAll(); }, [loadAll]);
 
   const columns = [
-    { key: 'departmentCode', label: 'Code' },
-    { key: 'departmentName', label: 'Department Name' },
-    { key: 'grossSalary', label: 'Gross Salary', render: (v) => `${Number(v).toLocaleString()} RWF` },
-    { key: 'totalDeduction', label: 'Deductions', render: (v) => `${Number(v).toLocaleString()} RWF` },
+    { key: 'departName', label: 'Department Name' },
     {
       key: 'actions', label: '', align: 'right',
       render: (_, row) => (
@@ -52,7 +46,7 @@ export default function Department() {
           <h1 className="text-[18px] font-bold text-gray-800">Departments</h1>
           <p className="text-[13px] text-gray-400 mt-0.5">{departments.length} departments</p>
         </div>
-        <Button size="sm"  icon={<Plus className="w-3.5 h-3.5" />} onClick={() => setCreateOpen(true)}>Add Department</Button>
+        <Button size="sm" icon={<Plus className="w-3.5 h-3.5" />} onClick={() => setCreateOpen(true)}>Add Department</Button>
       </div>
       <div className="bg-white border border-gray-200 p-5">
         <Table columns={columns} data={departments} rowKey="_id" loading={loading} emptyMessage="No departments yet." maxHeight="480px" />
@@ -66,17 +60,14 @@ export default function Department() {
 
 function CreateModal({ onClose, onCreated }) {
   const toast = useToast();
-  const [form, setForm] = useState({ departmentCode: '', departmentName: '', grossSalary: '', totalDeduction: '0' });
+  const [form, setForm] = useState({ departName: '' });
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
   const set = (f) => (v) => setForm((p) => ({ ...p, [f]: v }));
 
   const validate = () => {
     const e = {};
-    if (!form.departmentCode) e.departmentCode = 'Required';
-    if (!form.departmentName) e.departmentName = 'Required';
-    if (!form.grossSalary) e.grossSalary = 'Required';
-    if (form.totalDeduction === '') e.totalDeduction = 'Required';
+    if (!form.departName) e.departName = 'Required';
     setErrors(e);
     return Object.keys(e).length === 0;
   };
@@ -85,30 +76,18 @@ function CreateModal({ onClose, onCreated }) {
     if (!validate()) return;
     setLoading(true);
     try {
-      await departmentApi.create({ ...form, grossSalary: Number(form.grossSalary), totalDeduction: Number(form.totalDeduction) });
+      await departmentApi.create(form);
       toast.success('Department created');
       onCreated();
-    } catch (err) {
-      toast.error(err.message ?? 'Failed to create department');
-    } finally {
-      setLoading(false);
-    }
+    } catch (err) { toast.error(err.message ?? 'Failed to create department'); }
+    finally { setLoading(false); }
   };
 
   return (
     <Modal open title="Add Department" size="sm" onClose={onClose}>
       <div className="space-y-3">
-        <FormField label="Department Code" required error={errors.departmentCode}>
-          <FormField.Input value={form.departmentCode} onChange={set('departmentCode')} placeholder="e.g. HR" />
-        </FormField>
-        <FormField label="Department Name" required error={errors.departmentName}>
-          <FormField.Input value={form.departmentName} onChange={set('departmentName')} placeholder="e.g. Human Resources" />
-        </FormField>
-        <FormField label="Gross Salary (RWF)" required error={errors.grossSalary}>
-          <FormField.Input type="number" value={form.grossSalary} onChange={set('grossSalary')} placeholder="300000" />
-        </FormField>
-        <FormField label="Total Deduction (RWF)" required error={errors.totalDeduction}>
-          <FormField.Input type="number" value={form.totalDeduction} onChange={set('totalDeduction')} placeholder="30000" />
+        <FormField label="Department Name" required error={errors.departName}>
+          <FormField.Input value={form.departName} onChange={set('departName')} placeholder="e.g. Human Resources" />
         </FormField>
       </div>
       <Modal.Footer>
@@ -121,36 +100,23 @@ function CreateModal({ onClose, onCreated }) {
 
 function EditModal({ department, onClose, onUpdated }) {
   const toast = useToast();
-  const [form, setForm] = useState({
-    departmentCode: department.departmentCode || '',
-    departmentName: department.departmentName || '',
-    grossSalary: department.grossSalary || '',
-    totalDeduction: department.totalDeduction ?? '0',
-  });
+  const [form, setForm] = useState({ departName: department.departName || '' });
   const [loading, setLoading] = useState(false);
   const set = (f) => (v) => setForm((p) => ({ ...p, [f]: v }));
 
   const handleSave = async () => {
     setLoading(true);
     try {
-      await departmentApi.update(department._id, { ...form, grossSalary: Number(form.grossSalary), totalDeduction: Number(form.totalDeduction) });
+      await departmentApi.update(department._id, form);
       toast.success('Department 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 — ${department.departmentName}`} size="sm" onClose={onClose}>
-      <div className="space-y-3">
-        <FormField label="Department Code"><FormField.Input value={form.departmentCode} onChange={set('departmentCode')} /></FormField>
-        <FormField label="Department Name"><FormField.Input value={form.departmentName} onChange={set('departmentName')} /></FormField>
-        <FormField label="Gross Salary (RWF)"><FormField.Input type="number" value={form.grossSalary} onChange={set('grossSalary')} /></FormField>
-        <FormField label="Total Deduction (RWF)"><FormField.Input type="number" value={form.totalDeduction} onChange={set('totalDeduction')} /></FormField>
-      </div>
+    <Modal open title={`Edit — ${department.departName}`} size="sm" onClose={onClose}>
+      <FormField label="Department Name"><FormField.Input value={form.departName} onChange={set('departName')} /></FormField>
       <Modal.Footer>
         <Button variant="outline" onClick={onClose}>Cancel</Button>
         <Button loading={loading} onClick={handleSave}>Save Changes</Button>
@@ -167,18 +133,15 @@ function DeleteModal({ department, onClose, onDeleted }) {
     setLoading(true);
     try {
       await departmentApi.remove(department._id);
-      toast.success(`${department.departmentName} removed`);
+      toast.success(`${department.departName} 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">Delete <strong>{department.departmentName}</strong>? This cannot be undone.</p>
+      <p className="text-[13px] text-gray-600">Delete <strong>{department.departName}</strong>? This cannot be undone.</p>
       <Modal.Footer>
         <Button variant="outline" onClick={onClose}>Cancel</Button>
         <Button variant="danger" loading={loading} icon={<Trash2 className="w-3.5 h-3.5" />} onClick={handleDelete}>Delete</Button>