create-nodemin-app 1.0.16

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

@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+import api from '../api/axios';
+import Button from '../components/ui/Button';
+import Input from '../components/ui/Input';
+import Modal, { ModalFooter } from '../components/ui/Modal';
+import { validateDepartment } from '../utils/validation';
+
+export default function Departments() {
+  const [departments, setDepartments] = useState([]);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editing, setEditing] = useState(null);
+  const [form, setForm] = useState({ departName: '' });
+  const [errors, setErrors] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  const load = async () => {
+    try {
+      const { data } = await api.get('/departments');
+      setDepartments(data.data);
+    } catch {
+      toast.error('Failed to load departments roster details');
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm({ departName: '' });
+    setErrors({});
+    setModalOpen(true);
+  };
+
+  const openEdit = (dept) => {
+    setEditing(dept);
+    setForm({ departName: dept.departName });
+    setErrors({});
+    setModalOpen(true);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const validationErrors = validateDepartment(form);
+    if (Object.keys(validationErrors).length) {
+      setErrors(validationErrors);
+      return;
+    }
+    setLoading(true);
+    try {
+      if (editing) {
+        await api.put(`/departments/${editing._id}`, form);
+        toast.success('Department updated');
+      } else {
+        await api.post('/departments', form);
+        toast.success('Department created');
+      }
+      setModalOpen(false);
+      load();
+    } catch (err) {
+      toast.error(err.response?.data?.message || 'Operation failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Delete this department?')) return;
+    try {
+      await api.delete(`/departments/${id}`);
+      toast.success('Department deleted');
+      load();
+    } catch (err) {
+      toast.error(err.response?.data?.message || 'Delete failed');
+    }
+  };
+
+  return (
+    <div>
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-stone-50">Departments</h1>
+          <p className="mt-1 text-brand-300">Organize employees by department clusters</p>
+        </div>
+        <Button onClick={openCreate}>Add department</Button>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {departments.map((dept) => (
+          <div
+            key={dept._id}
+            className="group rounded-2xl bg-card p-6 shadow-sm ring-1 ring-brand-700 transition hover:ring-brand-500"
+          >
+            <div className="flex items-start justify-between">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-brand-800 text-brand-200 text-lg font-bold">
+                {dept.departName.charAt(0)}
+              </div>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => openEdit(dept)}
+                  className="rounded-lg px-2 py-1 text-sm font-medium text-brand-300 hover:bg-brand-800 hover:text-stone-100"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleDelete(dept._id)}
+                  className="rounded-lg px-2 py-1 text-sm font-medium text-red-400 hover:bg-red-900/30"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+            <h3 className="mt-4 text-lg font-bold text-stone-50">{dept.departName}</h3>
+          </div>
+        ))}
+      </div>
+
+      {departments.length === 0 && (
+        <p className="py-12 text-center text-brand-400 rounded-2xl bg-card ring-1 ring-brand-700">No departments yet</p>
+      )}
+
+      <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit department' : 'Add department'}>
+        <form onSubmit={handleSubmit}>
+          <Input
+            label="Department name"
+            name="departName"
+            value={form.departName}
+            onChange={(e) => {
+              setForm({ departName: e.target.value });
+              setErrors({});
+            }}
+            error={errors.departName}
+            placeholder="e.g. Sales"
+          />
+          <ModalFooter onCancel={() => setModalOpen(false)} loading={loading} />
+        </form>
+      </Modal>
+    </div>
+  );
+}

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

@@ -0,0 +1,297 @@
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+import api from '../api/axios';
+import Button from '../components/ui/Button';
+import Input from '../components/ui/Input';
+import Select from '../components/ui/Select';
+import Modal, { ModalFooter } from '../components/ui/Modal';
+import { validateEmployee } from '../utils/validation';
+
+const emptyForm = {
+  empFirstName: '',
+  empLastName: '',
+  empEmail: '',
+  empTelephone: '',
+  empGender: '',
+  empAddress: '',
+  empDateOfBirth: '',
+  empHireDate: '',
+  empStatus: 'Active', 
+  department: '',
+  position: '',
+};
+
+// Complete Operational Status Alignment Matrices
+const statusOptions = [
+  { value: 'Active', label: 'Active' },
+  { value: 'On Leave', label: 'On Leave' },
+  { value: 'Left', label: 'Left' },
+  { value: 'Blacklisted', label: 'Blacklisted' },
+  { value: 'Deceased', label: 'Deceased' },
+  { value: 'On Mission', label: 'On Mission' },
+];
+
+const genderOptions = [
+  { value: 'Male', label: 'Male' },
+  { value: 'Female', label: 'Female' },
+  { value: 'Other', label: 'Other' },
+];
+
+export default function Employees() {
+  const [employees, setEmployees] = useState([]);
+  const [departments, setDepartments] = useState([]);
+  const [positions, setPositions] = useState([]);
+  const [search, setSearch] = useState('');
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editing, setEditing] = useState(null);
+  const [form, setForm] = useState(emptyForm);
+  const [errors, setErrors] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  const loadData = async () => {
+    try {
+      const token = localStorage.getItem('token');
+      const headers = token ? { Authorization: `Bearer ${token}` } : {};
+
+      const [empRes, deptRes, posRes] = await Promise.all([
+        api.get('/employees', { headers }).catch(() => ({ data: { data: [] } })),
+        api.get('/departments', { headers }).catch(() => ({ data: { data: [] } })),
+        api.get('/positions', { headers }).catch(() => ({ data: { data: [] } }))
+      ]);
+
+      setEmployees(empRes.data?.data || empRes.data || []);
+      setDepartments(deptRes.data?.data || deptRes.data || []);
+      setPositions(posRes.data?.data || posRes.data || []);
+    } catch (err) {
+      console.error('Data load failure:', err);
+      toast.error('Failed to communicate cleanly with core data models');
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyForm);
+    setErrors({});
+    setModalOpen(true);
+  };
+
+  const openEdit = (emp) => {
+    setEditing(emp);
+    setForm({
+      empFirstName: emp.empFirstName || '',
+      empLastName: emp.empLastName || '',
+      empEmail: emp.empEmail || '',
+      empTelephone: emp.empTelephone || '',
+      empGender: emp.empGender || '',
+      empAddress: emp.empAddress || '',
+      empDateOfBirth: emp.empDateOfBirth?.slice(0, 10) || '',
+      empHireDate: emp.empHireDate?.slice(0, 10) || '',
+      empStatus: emp.empStatus || 'Active',
+      department: emp.department?._id || emp.department || '',
+      position: emp.position?._id || emp.position || '',
+    });
+    setErrors({});
+    setModalOpen(true);
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => ({ ...prev, [name]: '' }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    // Check client-side form configurations
+    const validationErrors = validateEmployee(form);
+    if (Object.keys(validationErrors).length) {
+      setErrors(validationErrors);
+      return;
+    }
+    
+    setLoading(true);
+    try {
+      if (editing) {
+        await api.put(`/employees/${editing._id}`, form);
+        toast.success('Employee record modified successfully');
+      } else {
+        await api.post('/employees', form);
+        toast.success('Employee profile initialized');
+      }
+      setModalOpen(false);
+      loadData();
+    } catch (err) {
+      console.error('Submission failure error trace:', err);
+      
+      // Dynamic Server Error Unpacker Logic
+      if (err.response?.data?.errors && Array.isArray(err.response.data.errors)) {
+        // Extract messages generated directly from express-validator arrays
+        err.response.data.errors.forEach((validationErr) => {
+          toast.error(`${validationErr.path || 'Field'}: ${validationErr.msg}`);
+        });
+      } else {
+        const msg = err.response?.data?.message || 'Operation failed running profile commit';
+        toast.error(msg);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Delete this employee directory entry permanently?')) return;
+    try {
+      await api.delete(`/employees/${id}`);
+      toast.success('Employee record dropped');
+      loadData();
+    } catch (err) {
+      toast.error(err.response?.data?.message || 'Delete operation dropped');
+    }
+  };
+
+  const filtered = employees.filter((e) => {
+    const q = search.toLowerCase();
+    const name = `${e.empFirstName || ''} ${e.empLastName || ''}`.toLowerCase();
+    return name.includes(q) || e.empEmail?.toLowerCase().includes(q);
+  });
+
+  const getStatusBadgeClass = (status) => {
+    switch (status) {
+      case 'Active':
+        return 'bg-green-500/10 text-green-400 ring-1 ring-green-500/20';
+      case 'On Leave':
+        return 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20';
+      case 'On Mission':
+        return 'bg-blue-500/10 text-blue-400 ring-1 ring-blue-500/20';
+      case 'Left':
+        return 'bg-slate-500/10 text-slate-400 ring-1 ring-slate-500/20';
+      case 'Blacklisted':
+        return 'bg-red-500/10 text-red-500 ring-1 ring-red-500/30 font-bold uppercase';
+      case 'Deceased':
+        return 'bg-purple-500/10 text-purple-400 ring-1 ring-purple-500/20';
+      default:
+        return 'bg-zinc-500/10 text-zinc-400 ring-1 ring-zinc-500/20';
+    }
+  };
+
+  return (
+    <div>
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-white">Employees</h1>
+          <p className="mt-1 text-slate-400">Manage organizational employee records</p>
+        </div>
+        <Button onClick={openCreate}>Add employee</Button>
+      </div>
+
+      <div className="mb-6 max-w-md">
+        <input
+          type="search"
+          placeholder="Search by name or email..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-full rounded-xl border border-brand-700 bg-brand-900 py-2.5 px-4 text-stone-100 placeholder:text-brand-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/30"
+        />
+      </div>
+
+      <div className="overflow-hidden rounded-xl bg-card ring-1 ring-brand-800">
+        <table className="w-full text-left text-sm">
+          <thead className="border-b border-brand-700 bg-brand-900/50">
+            <tr>
+              <th className="px-6 py-4 font-semibold text-brand-200">Name</th>
+              <th className="px-6 py-4 font-semibold text-brand-200">Email</th>
+              <th className="px-6 py-4 font-semibold text-brand-200">Department</th>
+              <th className="px-6 py-4 font-semibold text-brand-200">Position</th>
+              <th className="px-6 py-4 font-semibold text-brand-200">Status</th>
+              <th className="px-6 py-4 font-semibold text-brand-200">Actions</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-brand-800">
+            {filtered.map((emp) => (
+              <tr key={emp._id} className="hover:bg-brand-900/30">
+                <td className="px-6 py-4 font-medium text-stone-100">
+                  {emp.empFirstName} {emp.empLastName}
+                </td>
+                <td className="px-6 py-4 text-brand-300">{emp.empEmail}</td>
+                <td className="px-6 py-4">{emp.department?.departName || '—'}</td>
+                <td className="px-6 py-4">{emp.position?.posName || '—'}</td>
+                <td className="px-6 py-4">
+                  <span className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold ${getStatusBadgeClass(emp.empStatus)}`}>
+                    {emp.empStatus || 'Active'}
+                  </span>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="flex gap-2">
+                    <button
+                      type="button"
+                      onClick={() => openEdit(emp)}
+                      className="rounded-lg px-2 py-1 text-sm font-medium text-brand-400 hover:bg-brand-800 hover:text-white"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDelete(emp._id)}
+                      className="rounded-lg px-2 py-1 text-sm font-medium text-red-400 hover:bg-red-900/30"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {filtered.length === 0 && (
+          <p className="py-12 text-center text-brand-400">No employees found</p>
+        )}
+      </div>
+
+      <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit employee' : 'Add employee'} size="xl">
+        <form onSubmit={handleSubmit}>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <Input label="First name" name="empFirstName" value={form.empFirstName} onChange={handleChange} error={errors.empFirstName} />
+            <Input label="Last name" name="empLastName" value={form.empLastName} onChange={handleChange} error={errors.empLastName} />
+            <Input label="Email" name="empEmail" type="email" value={form.empEmail} onChange={handleChange} error={errors.empEmail} />
+            <Input label="Telephone" name="empTelephone" value={form.empTelephone} onChange={handleChange} error={errors.empTelephone} />
+            <Select label="Gender" name="empGender" value={form.empGender} onChange={handleChange} options={genderOptions} placeholder="Select gender" error={errors.empGender} />
+            
+            {/* Input Selection Connected to Custom Rules Status Matrix */}
+            <Select label="Status" name="empStatus" value={form.empStatus} onChange={handleChange} options={statusOptions} error={errors.empStatus} />
+            
+            <Input label="Date of birth" name="empDateOfBirth" type="date" value={form.empDateOfBirth} onChange={handleChange} error={errors.empDateOfBirth} />
+            <Input label="Hire date" name="empHireDate" type="date" value={form.empHireDate} onChange={handleChange} error={errors.empHireDate} />
+            
+            <Select
+              label="Department"
+              name="department"
+              value={form.department}
+              onChange={handleChange}
+              options={departments.map((d) => ({ value: d._id, label: d.departName }))}
+              placeholder="Select department"
+              error={errors.department}
+            />
+            <Select
+              label="Position"
+              name="position"
+              value={form.position}
+              onChange={handleChange}
+              options={positions.map((p) => ({ value: p._id, label: p.posName }))}
+              placeholder="Select position"
+              error={errors.position}
+            />
+            <div className="sm:col-span-2">
+              <Input label="Address" name="empAddress" value={form.empAddress} onChange={handleChange} error={errors.empAddress} />
+            </div>
+          </div>
+          <ModalFooter onCancel={() => setModalOpen(false)} loading={loading} submitLabel={editing ? 'Update' : 'Create'} />
+        </form>
+      </Modal>
+    </div>
+  );
+}

package/templates/HRMS_Mongodb/frontend/src/pages/LeaveReport.jsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import api from '../api/axios';
+import toast from 'react-hot-toast';
+
+export default function LeaveReport() {
+  const [employees, setEmployees] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchEmployees = async () => {
+      try {
+        const token = localStorage.getItem('token');
+        const headers = token ? { Authorization: `Bearer ${token}` } : {};
+        const res = await api.get('/employees', { headers });
+        setEmployees(res.data?.data || res.data || []);
+      } catch (err) {
+        console.error('Failed to load employee records:', err);
+        toast.error('Could not fetch employee directory for report generation');
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchEmployees();
+  }, []);
+
+  // 1. Filter out only employees whose current status is exactly "On Leave"
+  const leaveEmployees = employees.filter((emp) => emp.empStatus === 'On Leave');
+
+  // 2. Reduce the list to group employees by their department name
+  const groupedByDepartment = leaveEmployees.reduce((groups, emp) => {
+    const deptName = emp.department?.departName || 'Unassigned Department';
+    if (!groups[deptName]) {
+      groups[deptName] = [];
+    }
+    groups[deptName].push(emp);
+    return groups;
+  }, {});
+
+  if (loading) {
+    return <div className="p-8 text-white">Generating employee status report...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Report Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between border-b border-brand-800 pb-5">
+        <div>
+          <h1 className="text-2xl font-bold text-white tracking-wide">Employee Status Report</h1>
+          <p className="mt-1 text-slate-400">Comprehensive overview of active workspace leaves of absence</p>
+        </div>
+        <div className="text-sm text-slate-400 bg-brand-900/40 border border-brand-800 px-4 py-2 rounded-xl">
+          Report Generated: <span className="text-white font-medium">{new Date().toLocaleDateString()}</span>
+        </div>
+      </div>
+
+      {/* Summary KPI Block */}
+      <div className="max-w-xs rounded-xl bg-gradient-to-br from-brand-950 to-brand-900 p-5 ring-1 ring-brand-700 shadow-lg">
+        <p className="text-sm font-semibold uppercase tracking-wider text-brand-300">Total Employees On Leave</p>
+        <p className="mt-2 text-4xl font-extrabold text-white">{leaveEmployees.length}</p>
+      </div>
+
+      {/* Main Report Data Output Layout */}
+      {leaveEmployees.length === 0 ? (
+        <div className="rounded-xl bg-card border border-brand-800 p-12 text-center text-slate-400">
+          🎉 No employee profiles are currently registered as "On Leave" across the operational matrix.
+        </div>
+      ) : (
+        <div className="space-y-8">
+          {Object.keys(groupedByDepartment).map((deptName) => (
+            <div key={deptName} className="overflow-hidden rounded-xl bg-card ring-1 ring-brand-800 shadow-md">
+              
+              {/* Department Subsection Banner */}
+              <div className="flex items-center justify-between border-b border-brand-700 bg-brand-900/30 px-6 py-4">
+                <h2 className="text-lg font-bold text-brand-200 uppercase tracking-wide">{deptName}</h2>
+                <span className="rounded-full bg-brand-800 px-3 py-1 text-xs font-semibold text-white ring-1 ring-brand-600">
+                  {groupedByDepartment[deptName].length} on leave
+                </span>
+              </div>
+
+              {/* Department Leave Grid Table View */}
+              <table className="w-full text-left text-sm border-collapse">
+                <thead>
+                  <tr className="border-b border-brand-800 bg-brand-950/20 text-xs font-semibold uppercase tracking-wider text-slate-400">
+                    <th className="px-6 py-3.5">Employee Name</th>
+                    <th className="px-6 py-3.5">Email Address</th>
+                    <th className="px-6 py-3.5">Assigned Position</th>
+                    <th className="px-6 py-3.5">Telephone Connection</th>
+                    <th className="px-6 py-3.5">Hire Date</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-brand-800/60 text-slate-300">
+                  {groupedByDepartment[deptName].map((emp) => (
+                    <tr key={emp._id} className="hover:bg-brand-900/10 transition-colors">
+                      <td className="px-6 py-4 font-medium text-stone-100">
+                        {emp.empFirstName} {emp.empLastName}
+                      </td>
+                      <td className="px-6 py-4 text-brand-300 font-mono text-xs">{emp.empEmail}</td>
+                      <td className="px-6 py-4">{emp.position?.posName || '—'}</td>
+                      <td className="px-6 py-4 text-slate-400">{emp.empTelephone}</td>
+                      <td className="px-6 py-4 text-slate-400">
+                        {emp.empHireDate ? new Date(emp.empHireDate).toLocaleDateString() : '—'}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/HRMS_Mongodb/frontend/src/pages/Login.jsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import { useAuth } from '../context/AuthContext';
+
+export default function Login() {
+  const [formData, setFormData] = useState({ userName: '', password: '' });
+  const [submitting, setSubmitting] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleInputChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!formData.userName || !formData.password) {
+      return toast.error('Please enter all required fields');
+    }
+    try {
+      setSubmitting(true);
+      await login(formData.userName, formData.password);
+      toast.success('Successfully logged into workspace');
+      navigate('/dashboard');
+    } catch (err) {
+      toast.error(err.response?.data?.message || 'Invalid administrative credentials');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-brand-950 via-brand-900 to-brand-950 px-4 py-10">
+      <div className="w-full max-w-md rounded-2xl border border-brand-700/40 bg-card p-8 shadow-2xl shadow-black/30">
+        <p className="text-center text-xs font-semibold uppercase tracking-widest text-brand-400">
+          DAB Enterprise HRMS
+        </p>
+        <h1 className="mt-3 text-center text-2xl font-bold text-white">Sign In to Portal</h1>
+        <p className="mt-2 text-center text-sm text-slate-400">Access your workspace dashboard panel</p>
+
+        <form onSubmit={handleSubmit} className="mt-8 space-y-5">
+          <div>
+            <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300">
+              Username
+            </label>
+            <input
+              type="text"
+              name="userName"
+              value={formData.userName}
+              onChange={handleInputChange}
+              className="mt-2 w-full rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-2.5 text-white focus:border-brand-500 focus:outline-none"
+              placeholder="admin_user"
+            />
+          </div>
+          <div>
+            <div className="flex justify-between">
+              <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300">
+                Password
+              </label>
+              <Link to="/forgot-password" className="text-xs font-medium text-brand-400 hover:underline">
+                Forgot password?
+              </Link>
+            </div>
+            <input
+              type="password"
+              name="password"
+              value={formData.password}
+              onChange={handleInputChange}
+              className="mt-2 w-full rounded-lg border border-slate-800 bg-slate-900/50 px-4 py-2.5 text-white focus:border-brand-500 focus:outline-none"
+              placeholder="••••••••"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={submitting}
+            className="w-full rounded-lg bg-brand-600 py-3 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-500 disabled:opacity-50"
+          >
+            {submitting ? 'Authenticating...' : 'Sign In'}
+          </button>
+        </form>
+
+        <p className="mt-6 text-center text-xs text-slate-400">
+          Need a portal account?{' '}
+          <Link to="/register" className="font-semibold text-brand-400 hover:underline">
+            Create an Admin Profile
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}