create-jinmankn-app 1.0.12 → 1.0.13

package/templates/index/frontend/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.0",
+    "axios": "^1.16.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.15.1",
+    "tailwindcss": "^4.3.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "vite": "^8.0.12"
+  }
+}

package/templates/index/frontend/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>

package/templates/index/frontend/src/App.jsx

@@ -0,0 +1,35 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import DashboardLayout from './components/DashboardLayout';
+import ProtectedRoute from './components/ProtectedRoute';
+import DashboardHome from './pages/DashboardHome';
+import Register from './pages/Register';
+import Login from './pages/Login';
+import Department from './pages/Department';
+import Employee from './pages/Employee';
+import Position from './pages/Position';
+import Reports from './pages/Reports';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+
+        <Route path="/dashboard" element={<ProtectedRoute><DashboardLayout /></ProtectedRoute>}>
+          <Route index element={<DashboardHome />} />
+          <Route path="department" element={<Department />} />
+          <Route path="employee" element={<Employee />} />
+          <Route path="position" element={<Position />} />
+          <Route path="reports" element={<Reports />} />
+        </Route>
+
+        <Route path="/" element={<Navigate to="/dashboard" replace />} />
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;
+

package/templates/index/frontend/src/components/DashboardLayout.jsx

@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react';
+import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+const navItems = [
+  { to: '/dashboard', end: true, label: 'Overview' },
+  { to: '/dashboard/employee', label: 'Employees' },
+  { to: '/dashboard/department', label: 'Departments' },
+  { to: '/dashboard/position', label: 'Positions' },
+  { to: '/dashboard/reports', label: 'Reports' },
+];
+
+function DashboardLayout() {
+  const [user, setUser] = useState(null);
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      setUser(JSON.parse(storedUser));
+    }
+
+    axios.get('http://localhost:5006/api/auth/me', {
+        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
+      })
+      .then((response) => {
+        setUser(response.data.user);
+        localStorage.setItem('user', JSON.stringify(response.data.user));
+      })
+      .catch((err) => {
+        if (!storedUser) {
+          setError(err.response?.data?.message || 'Could not load user');
+        }
+      });
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    navigate('/login');
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <aside className="fixed inset-y-0 left-0 flex w-56 flex-col bg-teal-900 text-white">
+        <div className="border-b border-teal-800 px-4 py-4">
+          <h1 className="text-lg font-bold">DAB HRMS</h1>
+          <p className="text-sm text-teal-200">Human Resource Management System</p>
+        </div>
+
+        <nav className="flex-1 space-y-1 overflow-y-auto px-2 py-4">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.end}
+              className={({ isActive }) => `nav-link ${isActive ? 'nav-link-active' : ''}`}
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+
+        <div className="border-t border-teal-800 px-4 py-4">
+          {error && <p className="mb-2 text-xs text-red-300">{error}</p>}
+          {user && <p className="text-sm">{user.name || user.email}</p>}
+          <button type="button" onClick={handleLogout} className="mt-3 w-full btn-secondary text-sm">
+            Log out
+          </button>
+        </div>
+      </aside>
+
+      <div className="ml-56 min-h-screen">
+        <header className="border-b border-gray-300 bg-white px-6 py-4">
+          <h2 className="text-lg font-semibold">
+            {user ? `Hello, ${user.name || user.email}` : 'Dashboard'}
+          </h2>
+        </header>
+
+        <main className="p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardLayout;
+

package/templates/index/frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+
+export default function ProtectedRoute({ children }) {
+  const token = localStorage.getItem('token');
+  if (!token) return <Navigate to="/login" replace />;
+  return children;
+}
+

package/templates/index/frontend/src/index.css

@@ -0,0 +1,59 @@
+@import 'tailwindcss';
+
+body {
+  @apply bg-gray-100 text-gray-900;
+}
+
+@layer components {
+  .input-field {
+    @apply w-full rounded border border-gray-300 px-3 py-2 focus:border-teal-700 focus:outline-none;
+  }
+
+  .btn-primary {
+    @apply rounded bg-teal-700 px-4 py-2 text-white hover:bg-teal-800 disabled:opacity-50;
+  }
+
+  .btn-secondary {
+    @apply rounded border border-gray-300 bg-white px-4 py-2 text-gray-700 hover:bg-gray-50;
+  }
+
+  .btn-link {
+    @apply text-blue-600 hover:underline;
+  }
+
+  .btn-danger {
+    @apply text-red-600 hover:underline;
+  }
+
+  .box {
+    @apply rounded border border-gray-300 bg-white p-4;
+  }
+
+  .alert-success {
+    @apply mb-4 rounded border border-green-300 bg-green-50 px-3 py-2 text-sm text-green-800;
+  }
+
+  .alert-error {
+    @apply mb-4 rounded border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700;
+  }
+
+  .nav-link {
+    @apply block rounded px-3 py-2 text-sm text-gray-200 hover:bg-teal-800;
+  }
+
+  .nav-link-active {
+    @apply bg-blue-700 text-white hover:bg-blue-700;
+  }
+
+  .data-table {
+    @apply w-full border-collapse text-left text-sm;
+  }
+
+  .data-table th {
+    @apply border border-gray-300 bg-gray-50 px-3 py-2 font-medium;
+  }
+
+  .data-table td {
+    @apply border border-gray-300 px-3 py-2;
+  }
+}

package/templates/index/frontend/src/main.jsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
+

package/templates/index/frontend/src/pages/DashboardHome.jsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+function DashboardHome() {
+  const [departments, setDepartments] = useState([]);
+  const [employees, setEmployees] = useState([]);
+  const [positions, setPositions] = useState([]);
+
+  useEffect(() => {
+    const headers = { Authorization: `Bearer ${localStorage.getItem('token')}` };
+    Promise.all([
+      axios.get('http://localhost:5006/api/departments/list', { headers }),
+      axios.get('http://localhost:5006/api/employees/list', { headers }),
+      axios.get('http://localhost:5006/api/positions/list', { headers }),
+    ])
+      .then(([deptRes, empRes, posRes]) => {
+        setDepartments(deptRes.data);
+        setEmployees(empRes.data);
+        setPositions(posRes.data);
+      })
+      .catch((err) => console.error('Overview load failed:', err));
+  }, []);
+
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold">Overview</h1>
+
+      <div className="mb-6 grid gap-4 sm:grid-cols-3">
+        <div className="box">
+          <p className="text-sm text-gray-600">Employees</p>
+          <p className="text-2xl font-bold">{employees.length}</p>
+        </div>
+        <div className="box">
+          <p className="text-sm text-gray-600">Departments</p>
+          <p className="text-2xl font-bold">{departments.length}</p>
+        </div>
+        <div className="box">
+          <p className="text-sm text-gray-600">Positions</p>
+          <p className="text-2xl font-bold">{positions.length}</p>
+        </div>
+      </div>
+
+      <div className="box">
+        <h2 className="mb-3 font-semibold">Quick links</h2>
+        <ul className="space-y-2 text-blue-600">
+          <li><Link to="/dashboard/employee" className="hover:underline">Manage Employees</Link></li>
+          <li><Link to="/dashboard/department" className="hover:underline">Manage Departments</Link></li>
+          <li><Link to="/dashboard/position" className="hover:underline">Manage Positions</Link></li>
+          <li><Link to="/dashboard/reports" className="hover:underline">View Reports</Link></li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardHome;
+

package/templates/index/frontend/src/pages/Department.jsx

@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Department() {
+  const [departments, setDepartments] = useState([]);
+  const [departmentName, setDepartmentName] = useState('');
+  const [editingId, setEditingId] = useState(null);
+  const [message, setMessage] = useState('');
+
+  const headers = { Authorization: `Bearer ${localStorage.getItem('token')}` };
+
+  const getDepartments = async () => {
+    try {
+      const res = await axios.get('http://localhost:5006/api/departments/list', { headers });
+      setDepartments(res.data);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  useEffect(() => {
+    getDepartments();
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (editingId) {
+        await axios.put(
+          `http://localhost:5006/api/departments/${editingId}`,
+          { departmentName },
+          { headers }
+        );
+        setMessage('Department updated successfully');
+      } else {
+        await axios.post(
+          'http://localhost:5006/api/departments/add',
+          { departmentName },
+          { headers }
+        );
+        setMessage('Department added successfully');
+      }
+      setDepartmentName('');
+      setEditingId(null);
+      getDepartments();
+    } catch (err) {
+      setMessage(err.response?.data?.message || 'Failed to save department');
+    }
+  };
+
+  const handleEdit = (department) => {
+    setDepartmentName(department.departmentName);
+    setEditingId(department._id);
+    setMessage('');
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Delete this department?')) return;
+    try {
+      await axios.delete(`http://localhost:5006/api/departments/${id}`, { headers });
+      setMessage('Department deleted successfully');
+      if (editingId === id) {
+        setEditingId(null);
+        setDepartmentName('');
+      }
+      getDepartments();
+    } catch (err) {
+      setMessage(err.response?.data?.message || 'Failed to delete department');
+    }
+  };
+
+  const handleCancel = () => {
+    setEditingId(null);
+    setDepartmentName('');
+    setMessage('');
+  };
+
+  const isSuccess = message.includes('successfully');
+
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold">Department Management</h1>
+
+      {message && (
+        <p className={isSuccess ? 'alert-success' : 'alert-error'}>{message}</p>
+      )}
+
+      <form onSubmit={handleSubmit} className="mb-6 box space-y-4">
+        <h2 className="font-semibold">{editingId ? 'Edit Department' : 'Add Department'}</h2>
+        <div>
+          <label className="mb-1 block text-sm">Department Name</label>
+          <input
+            type="text"
+            value={departmentName}
+            onChange={(e) => setDepartmentName(e.target.value)}
+            className="input-field"
+            placeholder="e.g. Human Resources"
+            required
+          />
+        </div>
+        <div className="flex items-center gap-3">
+          <button type="submit" className="btn-primary">
+            {editingId ? 'Update Department' : 'Add Department'}
+          </button>
+          {editingId && (
+            <button type="button" className="btn-secondary" onClick={handleCancel}>
+              Cancel
+            </button>
+          )}
+        </div>
+      </form>
+
+      <div className="box">
+        <h2 className="mb-3 font-semibold">Department List ({departments.length})</h2>
+        {departments.length === 0 ? (
+          <p className="text-gray-600">No departments yet.</p>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="data-table">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {departments.map((dept) => (
+                  <tr key={dept._id}>
+                    <td>{dept.departmentName}</td>
+                    <td className="space-x-2">
+                      <button type="button" className="btn-secondary btn-small" onClick={() => handleEdit(dept)}>
+                        Edit
+                      </button>
+                      <button type="button" className="btn-danger btn-small" onClick={() => handleDelete(dept._id)}>
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Department;
+