create-nodemin-app 1.0.16

package/templates/HRMS_Mysql/frontend/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "hrms-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "vite": "^5.0.0"
+  }
+}

package/templates/HRMS_Mysql/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/HRMS_Mysql/frontend/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="#b87322" rx="4"/><text x="16" y="22" text-anchor="middle" fill="white" font-size="18" font-weight="bold" font-family="Arial">H</text></svg>

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

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react'
+import { Routes, Route, Navigate } from 'react-router-dom'
+import api from './api'
+import Login from './pages/Login'
+import Register from './pages/Register'
+import ForgotPassword from './pages/ForgotPassword'
+import Layout from './components/Layout'
+import Dashboard from './pages/Dashboard'
+import Employees from './pages/Employees'
+import Departments from './pages/Departments'
+import Positions from './pages/Positions'
+import Users from './pages/Users'
+import EmployeeStatusReport from './pages/EmployeeStatusReport'
+
+function ProtectedRoute({ children }) {
+  const [auth, setAuth] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.get('/me')
+      .then(res => setAuth(res.data))
+      .catch(() => setAuth(null))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-primary-50">
+        <div className="text-primary-700 text-xl">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!auth) return <Navigate to="/login" replace />;
+  return children;
+}
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<Login />} />
+      <Route path="/register" element={<Register />} />
+      <Route path="/forgot-password" element={<ForgotPassword />} />
+      <Route path="/" element={<ProtectedRoute><Layout /></ProtectedRoute>}>
+        <Route index element={<Dashboard />} />
+        <Route path="employees" element={<Employees />} />
+        <Route path="departments" element={<Departments />} />
+        <Route path="positions" element={<Positions />} />
+        <Route path="users" element={<Users />} />
+        <Route path="reports/employee-status" element={<EmployeeStatusReport />} />
+      </Route>
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

package/templates/HRMS_Mysql/frontend/src/api.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: 'http://localhost:5000/api',
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+});
+
+export default api;

package/templates/HRMS_Mysql/frontend/src/components/Layout.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Outlet, NavLink, useNavigate } from 'react-router-dom'
+import api from '../api'
+
+const navItems = [
+  { to: '/', label: 'Dashboard', end: true },
+  { to: '/employees', label: 'Employees' },
+  { to: '/departments', label: 'Departments' },
+  { to: '/positions', label: 'Positions' },
+  { to: '/users', label: 'Users' },
+  { to: '/reports/employee-status', label: 'Leave Report' },
+];
+
+export default function Layout() {
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    await api.post('/logout');
+    navigate('/login');
+  };
+
+  return (
+    <div className="min-h-screen bg-primary-50 flex">
+      <aside className="w-64 bg-primary-700 text-white flex flex-col">
+        <div className="p-4 border-b border-primary-600">
+          <h1 className="text-xl font-bold">HRMS</h1>
+          <p className="text-primary-200 text-sm">DAB Enterprise LTD</p>
+        </div>
+        <nav className="flex-1 p-2 space-y-1">
+          {navItems.map(item => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.end}
+              className={({ isActive }) =>
+                `block px-3 py-2 rounded text-sm transition-colors ${
+                  isActive ? 'bg-primary-500 text-white' : 'text-primary-100 hover:bg-primary-600'
+                }`
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="p-4 border-t border-primary-600">
+          <button
+            onClick={handleLogout}
+            className="w-full px-3 py-2 rounded text-sm bg-primary-500 hover:bg-primary-400 text-white transition-colors"
+          >
+            Logout
+          </button>
+        </div>
+      </aside>
+      <main className="flex-1 p-6 overflow-auto">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-primary-50 text-gray-800;
+}

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

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

package/templates/HRMS_Mysql/frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react'
+import api from '../api'
+
+export default function Dashboard() {
+  const [stats, setStats] = useState({ employees: 0, departments: 0, positions: 0, users: 0 });
+
+  useEffect(() => {
+    Promise.all([
+      api.get('/employees'),
+      api.get('/departments'),
+      api.get('/positions'),
+      api.get('/users'),
+    ]).then(([emp, dep, pos, usr]) => {
+      setStats({
+        employees: emp.data.length,
+        departments: dep.data.length,
+        positions: pos.data.length,
+        users: usr.data.length,
+      });
+    }).catch(() => {});
+  }, []);
+
+  const cards = [
+    { label: 'Employees', value: stats.employees, color: 'bg-primary-500' },
+    { label: 'Departments', value: stats.departments, color: 'bg-primary-600' },
+    { label: 'Positions', value: stats.positions, color: 'bg-primary-400' },
+    { label: 'Users', value: stats.users, color: 'bg-primary-700' },
+  ];
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-primary-800 mb-6">Dashboard</h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {cards.map(card => (
+          <div key={card.label} className="bg-white rounded-lg shadow p-6">
+            <div className={`inline-block px-3 py-1 rounded text-white text-sm mb-2 ${card.color}`}>
+              {card.label}
+            </div>
+            <div className="text-3xl font-bold text-gray-800">{card.value}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/HRMS_Mysql/frontend/src/pages/Departments.jsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react'
+import api from '../api'
+
+export default function Departments() {
+  const [departments, setDepartments] = useState([]);
+  const [form, setForm] = useState({ DepartName: '' });
+  const [editing, setEditing] = useState(null);
+  const [showForm, setShowForm] = useState(false);
+
+  useEffect(() => { load(); }, []);
+
+  const load = async () => {
+    const res = await api.get('/departments');
+    setDepartments(res.data);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (editing) {
+      await api.put(`/departments/${editing}`, form);
+    } else {
+      await api.post('/departments', form);
+    }
+    setForm({ DepartName: '' });
+    setEditing(null);
+    setShowForm(false);
+    load();
+  };
+
+  const handleEdit = (dep) => {
+    setForm({ DepartName: dep.DepartName });
+    setEditing(dep.DepartID);
+    setShowForm(true);
+  };
+
+  const handleDelete = async (id) => {
+    if (confirm('Delete this department?')) {
+      await api.delete(`/departments/${id}`);
+      load();
+    }
+  };
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold text-primary-800">Departments</h1>
+        <button onClick={() => { setShowForm(true); setEditing(null); setForm({ DepartName: '' }); }}
+          className="bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-500 transition-colors">
+          Add Department
+        </button>
+      </div>
+
+      {showForm && (
+        <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow p-4 mb-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Department Name</label>
+              <input
+                type="text" value={form.DepartName}
+                onChange={(e) => setForm({ ...form, DepartName: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500"
+                required
+              />
+            </div>
+          </div>
+          <div className="mt-4 space-x-2">
+            <button type="submit" className="bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-500">
+              {editing ? 'Update' : 'Save'}
+            </button>
+            <button type="button" onClick={() => setShowForm(false)}
+              className="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">
+              Cancel
+            </button>
+          </div>
+        </form>
+      )}
+
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <table className="w-full">
+          <thead className="bg-primary-600 text-white">
+            <tr>
+              <th className="px-4 py-3 text-left">ID</th>
+              <th className="px-4 py-3 text-left">Department Name</th>
+              <th className="px-4 py-3 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {departments.map(dep => (
+              <tr key={dep.DepartID} className="border-t hover:bg-primary-50">
+                <td className="px-4 py-3">{dep.DepartID}</td>
+                <td className="px-4 py-3">{dep.DepartName}</td>
+                <td className="px-4 py-3 text-right space-x-2">
+                  <button onClick={() => handleEdit(dep)}
+                    className="text-primary-600 hover:underline text-sm">Edit</button>
+                  <button onClick={() => handleDelete(dep.DepartID)}
+                    className="text-red-600 hover:underline text-sm">Delete</button>
+                </td>
+              </tr>
+            ))}
+            {departments.length === 0 && (
+              <tr><td colSpan="3" className="px-4 py-8 text-center text-gray-500">No departments found</td></tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/templates/HRMS_Mysql/frontend/src/pages/EmployeeStatusReport.jsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react'
+import api from '../api'
+
+export default function EmployeeStatusReport() {
+  const [report, setReport] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.get('/reports/employees-on-leave')
+      .then(res => setReport(res.data))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return <div className="text-center py-8 text-primary-700">Loading report...</div>;
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold text-primary-800">Employee Status Report</h1>
+        <span className="bg-primary-600 text-white px-4 py-2 rounded text-sm">
+          Total on Leave: {report?.total || 0}
+        </span>
+      </div>
+
+      {report && Object.keys(report.departments).length === 0 && (
+        <div className="bg-white rounded-lg shadow p-8 text-center text-gray-500">
+          No employees currently on leave.
+        </div>
+      )}
+
+      {report && Object.entries(report.departments).map(([dept, emps]) => (
+        <div key={dept} className="bg-white rounded-lg shadow mb-6 overflow-hidden">
+          <div className="bg-primary-600 text-white px-4 py-3 font-semibold flex justify-between">
+            <span>{dept}</span>
+            <span>{emps.length} employee{emps.length !== 1 ? 's' : ''}</span>
+          </div>
+          <table className="w-full">
+            <thead className="bg-primary-100">
+              <tr>
+                <th className="px-4 py-2 text-left text-sm">ID</th>
+                <th className="px-4 py-2 text-left text-sm">Name</th>
+                <th className="px-4 py-2 text-left text-sm">Gender</th>
+                <th className="px-4 py-2 text-left text-sm">Email</th>
+                <th className="px-4 py-2 text-left text-sm">Phone</th>
+                <th className="px-4 py-2 text-left text-sm">Position</th>
+                <th className="px-4 py-2 text-left text-sm">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {emps.map(emp => (
+                <tr key={emp.EmpID} className="border-t hover:bg-primary-50">
+                  <td className="px-4 py-2 text-sm">{emp.EmpID}</td>
+                  <td className="px-4 py-2 text-sm">{emp.EmpFirstName} {emp.EmpLastName}</td>
+                  <td className="px-4 py-2 text-sm">{emp.EmpGender || '-'}</td>
+                  <td className="px-4 py-2 text-sm">{emp.EmpEmail}</td>
+                  <td className="px-4 py-2 text-sm">{emp.EmpTelephone || '-'}</td>
+                  <td className="px-4 py-2 text-sm">{emp.PosName || '-'}</td>
+                  <td className="px-4 py-2 text-sm">
+                    <span className="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">on leave</span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/HRMS_Mysql/frontend/src/pages/Employees.jsx

@@ -0,0 +1,252 @@
+import React, { useState, useEffect } from 'react'
+import api from '../api'
+
+export default function Employees() {
+  const [employees, setEmployees] = useState([]);
+  const [departments, setDepartments] = useState([]);
+  const [positions, setPositions] = useState([]);
+  const [search, setSearch] = useState('');
+  const [form, setForm] = useState({
+    EmpFirstName: '', EmpLastName: '', EmpGender: '', EmpDateOfBirth: '',
+    EmpEmail: '', EmpTelephone: '', EmpAddress: '', EmpHireDate: '',
+    EmpStatus: 'on leave', DepartID: '', PosID: ''
+  });
+  const [editing, setEditing] = useState(null);
+  const [showForm, setShowForm] = useState(false);
+
+  useEffect(() => {
+    load();
+    api.get('/departments').then(r => setDepartments(r.data));
+    api.get('/positions').then(r => setPositions(r.data));
+  }, []);
+
+  const load = async () => {
+    const params = search ? { params: { search } } : {};
+    const res = await api.get('/employees', params);
+    setEmployees(res.data);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(load, 500);
+    return () => clearTimeout(timer);
+  }, [search]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const payload = {
+      ...form,
+      DepartID: form.DepartID ? parseInt(form.DepartID) : null,
+      PosID: form.PosID ? parseInt(form.PosID) : null
+    };
+    if (editing) {
+      await api.put(`/employees/${editing}`, payload);
+    } else {
+      await api.post('/employees', payload);
+    }
+    resetForm();
+    load();
+  };
+
+  const handleEdit = (emp) => {
+    setForm({
+      EmpFirstName: emp.EmpFirstName || '',
+      EmpLastName: emp.EmpLastName || '',
+      EmpGender: emp.EmpGender || '',
+      EmpDateOfBirth: emp.EmpDateOfBirth ? emp.EmpDateOfBirth.split('T')[0] : '',
+      EmpEmail: emp.EmpEmail || '',
+      EmpTelephone: emp.EmpTelephone || '',
+      EmpAddress: emp.EmpAddress || '',
+      EmpHireDate: emp.EmpHireDate ? emp.EmpHireDate.split('T')[0] : '',
+      EmpStatus: emp.EmpStatus || 'on leave',
+      DepartID: emp.DepartID ? emp.DepartID.toString() : '',
+      PosID: emp.PosID ? emp.PosID.toString() : ''
+    });
+    setEditing(emp.EmpID);
+    setShowForm(true);
+  };
+
+  const handleDelete = async (id) => {
+    if (confirm('Delete this employee?')) {
+      await api.delete(`/employees/${id}`);
+      load();
+    }
+  };
+
+  const resetForm = () => {
+    setForm({
+      EmpFirstName: '', EmpLastName: '', EmpGender: '', EmpDateOfBirth: '',
+      EmpEmail: '', EmpTelephone: '', EmpAddress: '', EmpHireDate: '',
+      EmpStatus: 'on leave', DepartID: '', PosID: ''
+    });
+    setEditing(null);
+    setShowForm(false);
+  };
+
+  const statusColors = {
+    'on leave': 'bg-yellow-100 text-yellow-800',
+    'left': 'bg-gray-100 text-gray-800',
+    'blacklisted': 'bg-red-100 text-red-800',
+    'deceased': 'bg-gray-200 text-gray-900',
+    'on mission': 'bg-blue-100 text-blue-800',
+  };
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold text-primary-800">Employees</h1>
+        <button onClick={() => { setShowForm(true); setEditing(null); }}
+          className="bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-500 transition-colors">
+          Add Employee
+        </button>
+      </div>
+
+      <div className="mb-4">
+        <input
+          type="text" placeholder="Search by name, email or phone..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-full md:w-96 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+
+      {showForm && (
+        <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow p-4 mb-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">First Name *</label>
+              <input type="text" value={form.EmpFirstName}
+                onChange={(e) => setForm({ ...form, EmpFirstName: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500" required />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Last Name *</label>
+              <input type="text" value={form.EmpLastName}
+                onChange={(e) => setForm({ ...form, EmpLastName: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500" required />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Gender</label>
+              <select value={form.EmpGender}
+                onChange={(e) => setForm({ ...form, EmpGender: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500">
+                <option value="">Select</option>
+                <option value="Male">Male</option>
+                <option value="Female">Female</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Date of Birth</label>
+              <input type="date" value={form.EmpDateOfBirth}
+                onChange={(e) => setForm({ ...form, EmpDateOfBirth: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
+              <input type="email" value={form.EmpEmail}
+                onChange={(e) => setForm({ ...form, EmpEmail: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500" required />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Telephone</label>
+              <input type="text" value={form.EmpTelephone}
+                onChange={(e) => setForm({ ...form, EmpTelephone: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Address</label>
+              <textarea value={form.EmpAddress}
+                onChange={(e) => setForm({ ...form, EmpAddress: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500" rows="1" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Hire Date</label>
+              <input type="date" value={form.EmpHireDate}
+                onChange={(e) => setForm({ ...form, EmpHireDate: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+              <select value={form.EmpStatus}
+                onChange={(e) => setForm({ ...form, EmpStatus: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500">
+                <option value="on leave">On Leave</option>
+                <option value="left">Left</option>
+                <option value="blacklisted">Blacklisted</option>
+                <option value="deceased">Deceased</option>
+                <option value="on mission">On Mission</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Department</label>
+              <select value={form.DepartID}
+                onChange={(e) => setForm({ ...form, DepartID: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500">
+                <option value="">Select</option>
+                {departments.map(d => <option key={d.DepartID} value={d.DepartID}>{d.DepartName}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Position</label>
+              <select value={form.PosID}
+                onChange={(e) => setForm({ ...form, PosID: e.target.value })}
+                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500">
+                <option value="">Select</option>
+                {positions.map(p => <option key={p.PosID} value={p.PosID}>{p.PosName}</option>)}
+              </select>
+            </div>
+          </div>
+          <div className="mt-4 space-x-2">
+            <button type="submit" className="bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-500">
+              {editing ? 'Update' : 'Save'}
+            </button>
+            <button type="button" onClick={resetForm}
+              className="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">Cancel</button>
+          </div>
+        </form>
+      )}
+
+      <div className="bg-white rounded-lg shadow overflow-x-auto">
+        <table className="w-full min-w-[800px]">
+          <thead className="bg-primary-600 text-white">
+            <tr>
+              <th className="px-4 py-3 text-left">ID</th>
+              <th className="px-4 py-3 text-left">Name</th>
+              <th className="px-4 py-3 text-left">Gender</th>
+              <th className="px-4 py-3 text-left">Email</th>
+              <th className="px-4 py-3 text-left">Phone</th>
+              <th className="px-4 py-3 text-left">Department</th>
+              <th className="px-4 py-3 text-left">Position</th>
+              <th className="px-4 py-3 text-left">Status</th>
+              <th className="px-4 py-3 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {employees.map(emp => (
+              <tr key={emp.EmpID} className="border-t hover:bg-primary-50">
+                <td className="px-4 py-3">{emp.EmpID}</td>
+                <td className="px-4 py-3">{emp.EmpFirstName} {emp.EmpLastName}</td>
+                <td className="px-4 py-3">{emp.EmpGender || '-'}</td>
+                <td className="px-4 py-3">{emp.EmpEmail}</td>
+                <td className="px-4 py-3">{emp.EmpTelephone || '-'}</td>
+                <td className="px-4 py-3">{emp.DepartName || '-'}</td>
+                <td className="px-4 py-3">{emp.PosName || '-'}</td>
+                <td className="px-4 py-3">
+                  <span className={`px-2 py-1 rounded text-xs ${statusColors[emp.EmpStatus] || 'bg-gray-100 text-gray-800'}`}>
+                    {emp.EmpStatus}
+                  </span>
+                </td>
+                <td className="px-4 py-3 text-right space-x-2">
+                  <button onClick={() => handleEdit(emp)} className="text-primary-600 hover:underline text-sm">Edit</button>
+                  <button onClick={() => handleDelete(emp.EmpID)} className="text-red-600 hover:underline text-sm">Delete</button>
+                </td>
+              </tr>
+            ))}
+            {employees.length === 0 && (
+              <tr><td colSpan="9" className="px-4 py-8 text-center text-gray-500">No employees found</td></tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}