alpe-temp 1.0.1 → 1.0.2

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

@@ -0,0 +1,188 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Plus, Pencil, Trash2 } from 'lucide-react';
+import Table from '../components/Table';
+import Modal from '../components/Modal';
+import Button from '../components/Button';
+import FormField from '../components/FormField';
+import { useToast } from '../components/Toast';
+import { departmentApi } from '../api/ApiClient';
+
+export default function Department() {
+  const toast = useToast();
+  const [departments, setDepartments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState(null);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+
+  const loadAll = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await departmentApi.list();
+      setDepartments(res?.data?.departments ?? []);
+    } catch (err) {
+      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: 'actions', label: '', align: 'right',
+      render: (_, row) => (
+        <div className="flex items-center justify-end gap-1.5">
+          <Button size="xs" variant="outline" icon={<Pencil className="w-3 h-3" />} onClick={() => setEditTarget(row)}>Edit</Button>
+          <Button size="xs" variant="danger" icon={<Trash2 className="w-3 h-3" />} onClick={() => setDeleteTarget(row)}>Delete</Button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="space-y-5">
+      <div className="flex items-start justify-between">
+        <div>
+          <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>
+      </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" />
+      </div>
+      {createOpen && <CreateModal onClose={() => setCreateOpen(false)} onCreated={() => { setCreateOpen(false); loadAll(); }} />}
+      {editTarget && <EditModal department={editTarget} onClose={() => setEditTarget(null)} onUpdated={() => { setEditTarget(null); loadAll(); }} />}
+      {deleteTarget && <DeleteModal department={deleteTarget} onClose={() => setDeleteTarget(null)} onDeleted={() => { setDeleteTarget(null); loadAll(); }} />}
+    </div>
+  );
+}
+
+function CreateModal({ onClose, onCreated }) {
+  const toast = useToast();
+  const [form, setForm] = useState({ departmentCode: '', departmentName: '', grossSalary: '', totalDeduction: '0' });
+  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';
+    setErrors(e);
+    return Object.keys(e).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      await departmentApi.create({ ...form, grossSalary: Number(form.grossSalary), totalDeduction: Number(form.totalDeduction) });
+      toast.success('Department created');
+      onCreated();
+    } 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>
+      </div>
+      <Modal.Footer>
+        <Button variant="outline" onClick={onClose}>Cancel</Button>
+        <Button loading={loading} onClick={handleSubmit}>Create Department</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+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 [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) });
+      toast.success('Department updated');
+      onUpdated();
+    } 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.Footer>
+        <Button variant="outline" onClick={onClose}>Cancel</Button>
+        <Button loading={loading} onClick={handleSave}>Save Changes</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+function DeleteModal({ department, onClose, onDeleted }) {
+  const toast = useToast();
+  const [loading, setLoading] = useState(false);
+
+  const handleDelete = async () => {
+    setLoading(true);
+    try {
+      await departmentApi.remove(department._id);
+      toast.success(`${department.departmentName} removed`);
+      onDeleted();
+    } 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>
+      <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>
+      </Modal.Footer>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,274 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Plus, Download, Pencil, Trash2 } from 'lucide-react';
+import Table from '../components/Table';
+import Modal from '../components/Modal';
+import Button from '../components/Button';
+import FormField from '../components/FormField';
+import { useToast } from '../components/Toast';
+import { employeeApi, departmentApi, excelApi } from '../api/ApiClient';
+
+const formatDate = (iso) => {
+  if (!iso) return '—';
+  try { return new Date(iso).toISOString().split('T')[0]; } catch { return '—'; }
+};
+
+export default function Employee() {
+  const toast = useToast();
+  const [employees, setEmployees] = useState([]);
+  const [departments, setDepartments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [exporting, setExporting] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState(null);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+
+  const loadAll = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [empRes, deptRes] = await Promise.allSettled([
+        employeeApi.list(),
+        departmentApi.list(),
+      ]);
+      if (empRes.status === 'fulfilled') setEmployees(empRes.value?.data?.employees ?? []);
+      if (deptRes.status === 'fulfilled') setDepartments(deptRes.value?.data?.departments ?? []);
+    } catch (err) {
+      toast.error('Failed to load data');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { loadAll(); }, [loadAll]);
+
+  const handleExport = async () => {
+    setExporting(true);
+    try {
+      try { await excelApi.exportUsers(); toast.success('Report downloaded'); }
+      catch {
+        const rows = employees.map((e) => ({
+          'Emp #': e.employeeNumber,
+          'First Name': e.firstName,
+          'Last Name': e.lastName,
+          Position: e.position,
+          Gender: e.gender,
+          'Hired Date': formatDate(e.hiredDate),
+          Department: e.department?.departmentName ?? '',
+        }));
+        await excelApi.exportCustom('Employees', rows, 'employees-report');
+        toast.success('Report downloaded');
+      }
+    } catch (err) {
+      toast.error(err.message ?? 'Export failed');
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const columns = [
+    { key: 'employeeNumber', label: 'Emp #' },
+    { key: 'firstName', label: 'First Name' },
+    { key: 'lastName', label: 'Last Name' },
+    { key: 'position', label: 'Position' },
+    { key: 'gender', label: 'Gender' },
+    { key: 'telephone', label: 'Phone' },
+    { key: 'hiredDate', label: 'Hired', render: (v) => formatDate(v) },
+    { key: 'department', label: 'Department', render: (v) => v?.departmentName ?? '—' },
+    {
+      key: 'actions', label: '', align: 'right',
+      render: (_, row) => (
+        <div className="flex items-center justify-end gap-1.5">
+          <Button size="xs" variant="outline" icon={<Pencil className="w-3 h-3" />} onClick={() => setEditTarget(row)}>Edit</Button>
+          <Button size="xs" variant="danger" icon={<Trash2 className="w-3 h-3" />} onClick={() => setDeleteTarget(row)}>Delete</Button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="space-y-5">
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="text-[18px] font-bold text-gray-800">Employees</h1>
+          <p className="text-[13px] text-gray-400 mt-0.5">{employees.length} total records</p>
+        </div>
+        <div className="flex ">
+          <Button size="sm" variant='dark'  icon={<Plus className="w-3.5 h-3.5" />} onClick={() => setCreateOpen(true)}>Add Employee</Button>
+        </div>
+      </div>
+      <div className="bg-white border border-gray-200 p-5">
+        <Table columns={columns} data={employees} rowKey="_id" loading={loading} emptyMessage="No employees yet." maxHeight="480px" />
+      </div>
+      {createOpen && <CreateModal departments={departments} onClose={() => setCreateOpen(false)} onCreated={() => { setCreateOpen(false); loadAll(); }} />}
+      {editTarget && <EditModal employee={editTarget} departments={departments} onClose={() => setEditTarget(null)} onUpdated={() => { setEditTarget(null); loadAll(); }} />}
+      {deleteTarget && <DeleteModal employee={deleteTarget} onClose={() => setDeleteTarget(null)} onDeleted={() => { setDeleteTarget(null); loadAll(); }} />}
+    </div>
+  );
+}
+
+function CreateModal({ departments, onClose, onCreated }) {
+  const toast = useToast();
+  const now = new Date().toISOString().split('T')[0];
+  const [form, setForm] = useState({ employeeNumber: '', firstName: '', lastName: '', position: '', address: '', telephone: '', gender: '', hiredDate: now, department: '' });
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+
+  const set = (field) => (val) => setForm((f) => ({ ...f, [field]: val }));
+
+  const validate = () => {
+    const e = {};
+    if (!form.employeeNumber) e.employeeNumber = 'Required';
+    if (!form.firstName) e.firstName = 'Required';
+    if (!form.lastName) e.lastName = 'Required';
+    if (!form.position) e.position = 'Required';
+    if (!form.gender) e.gender = 'Required';
+    if (!form.hiredDate) e.hiredDate = 'Required';
+    if (!form.department) e.department = 'Required';
+    setErrors(e);
+    return Object.keys(e).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      await employeeApi.create(form);
+      toast.success('Employee created successfully');
+      onCreated();
+    } catch (err) {
+      toast.error(err.message ?? 'Failed to create employee');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const deptOptions = departments.map((d) => ({ value: d._id, label: `${d.departmentCode} - ${d.departmentName}` }));
+
+  return (
+    <Modal open title="Add Employee" size="lg" onClose={onClose}>
+      <div className="grid grid-cols-2 gap-3">
+        <FormField label="Employee #" required error={errors.employeeNumber}>
+          <FormField.Input value={form.employeeNumber} onChange={set('employeeNumber')} placeholder="e.g. EMP001" />
+        </FormField>
+        <FormField label="First Name" required error={errors.firstName}>
+          <FormField.Input value={form.firstName} onChange={set('firstName')} placeholder="Jane" />
+        </FormField>
+        <FormField label="Last Name" required error={errors.lastName}>
+          <FormField.Input value={form.lastName} onChange={set('lastName')} placeholder="Doe" />
+        </FormField>
+        <FormField label="Position" required error={errors.position}>
+          <FormField.Select value={form.position} onChange={set('position')} placeholder="Select position" options={[
+            { value: 'Admin', label: 'Admin' }, { value: 'Employee', label: 'Employee' }, { value: 'Manager', label: 'Manager' }, { value: 'Mechanic', label: 'Mechanic' }, { value: 'Cashier', label: 'Cashier' },
+          ]} />
+        </FormField>
+        <FormField label="Department" required error={errors.department}>
+          <FormField.Select value={form.department} onChange={set('department')} placeholder="Select department" options={deptOptions} />
+        </FormField>
+        <FormField label="Gender" required error={errors.gender}>
+          <FormField.Select value={form.gender} onChange={set('gender')} placeholder="Select gender" options={[
+            { value: 'male', label: 'Male' }, { value: 'female', label: 'Female' },
+          ]} />
+        </FormField>
+        <FormField label="Hired Date" required error={errors.hiredDate}>
+          <FormField.Input type="date" value={form.hiredDate} onChange={set('hiredDate')} />
+        </FormField>
+        <FormField label="Phone Number">
+          <FormField.Input type="tel" value={form.telephone} onChange={set('telephone')} placeholder="07xxxxxxxx" />
+        </FormField>
+        <div className="col-span-2">
+          <FormField label="Address">
+            <FormField.Textarea value={form.address} onChange={set('address')} placeholder="Kigali, Rwanda" />
+          </FormField>
+        </div>
+      </div>
+      <Modal.Footer>
+        <Button variant="outline" onClick={onClose}>Cancel</Button>
+        <Button loading={loading} icon={<Plus className="w-3.5 h-3.5" />} onClick={handleSubmit}>Create Employee</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+function EditModal({ employee, departments, onClose, onUpdated }) {
+  const toast = useToast();
+  const [form, setForm] = useState({
+    employeeNumber: employee.employeeNumber || '',
+    firstName: employee.firstName || '',
+    lastName: employee.lastName || '',
+    position: employee.position || '',
+    address: employee.address || '',
+    telephone: employee.telephone || '',
+    gender: employee.gender || '',
+    hiredDate: employee.hiredDate ? employee.hiredDate.split('T')[0] : '',
+    department: employee.department?._id || '',
+  });
+  const [loading, setLoading] = useState(false);
+  const set = (f) => (v) => setForm((p) => ({ ...p, [f]: v }));
+  const deptOptions = departments.map((d) => ({ value: d._id, label: `${d.departmentCode} - ${d.departmentName}` }));
+
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      await employeeApi.update(employee._id, form);
+      toast.success('Employee updated');
+      onUpdated();
+    } catch (err) {
+      toast.error(err.message ?? 'Update failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open title={`Edit — ${employee.firstName} ${employee.lastName}`} size="lg" onClose={onClose}>
+      <div className="grid grid-cols-2 gap-3">
+        <FormField label="Employee #"><FormField.Input value={form.employeeNumber} onChange={set('employeeNumber')} /></FormField>
+        <FormField label="First Name"><FormField.Input value={form.firstName} onChange={set('firstName')} /></FormField>
+        <FormField label="Last Name"><FormField.Input value={form.lastName} onChange={set('lastName')} /></FormField>
+        <FormField label="Position"><FormField.Input value={form.position} onChange={set('position')} /></FormField>
+        <FormField label="Department">
+          <FormField.Select value={form.department} onChange={set('department')} options={deptOptions} placeholder="Select department" />
+        </FormField>
+        <FormField label="Gender">
+          <FormField.Select value={form.gender} onChange={set('gender')} options={[{ value: 'male', label: 'Male' }, { value: 'female', label: 'Female' }]} placeholder="Select gender" />
+        </FormField>
+        <FormField label="Hired Date"><FormField.Input type="date" value={form.hiredDate} onChange={set('hiredDate')} /></FormField>
+        <FormField label="Phone"><FormField.Input value={form.telephone} onChange={set('telephone')} /></FormField>
+      </div>
+      <Modal.Footer>
+        <Button variant="outline" onClick={onClose}>Cancel</Button>
+        <Button loading={loading} onClick={handleSave}>Save Changes</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+function DeleteModal({ employee, onClose, onDeleted }) {
+  const toast = useToast();
+  const [loading, setLoading] = useState(false);
+
+  const handleDelete = async () => {
+    setLoading(true);
+    try {
+      await employeeApi.remove(employee._id);
+      toast.success(`${employee.firstName} ${employee.lastName} removed`);
+      onDeleted();
+    } catch (err) {
+      toast.error(err.message ?? 'Delete failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open title="Confirm Deletion" size="sm" onClose={onClose}>
+      <p className="text-[13px] text-gray-600 leading-relaxed">
+        Are you sure you want to permanently delete{' '}
+        <span className="font-semibold text-gray-800">{employee.firstName} {employee.lastName}</span>?
+      </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>
+      </Modal.Footer>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { StatCard } from '../components/Card';
+import Table from '../components/Table';
+import { employeeApi, salaryApi, departmentApi } from '../api/ApiClient';
+
+const TABLE_COLUMNS = [
+  { key: 'employeeNumber', label: 'Emp #' },
+  { key: 'firstName', label: 'First Name' },
+  { key: 'lastName', label: 'Last Name' },
+  { key: 'position', label: 'Position', render: (v) => <Badge>{v}</Badge> },
+  { key: 'gender', label: 'Gender' },
+  { key: 'hiredDate', label: 'Hired', render: (v) => formatDate(v) },
+  { key: 'department', label: 'Department', render: (v) => v?.departmentName ?? '—' },
+];
+
+const formatDate = (iso) => {
+  if (!iso) return '—';
+  try { return new Date(iso).toISOString().split('T')[0]; } catch { return '—'; }
+};
+
+function Badge({ children }) {
+  return (
+    <span className="px-2 py-0.5 bg-[#E6F7F5] text-[#008A75] text-[11px] font-semibold">
+      {children}
+    </span>
+  );
+}
+
+export default function Home() {
+  const user = (() => { try { return JSON.parse(localStorage.getItem('user')); } catch { return {}; } })();
+  const [employees, setEmployees] = useState([]);
+  const [totalCount, setTotalCount] = useState(null);
+  const [avgSalary, setAvgSalary] = useState(null);
+  const [deptCount, setDeptCount] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      try {
+        const [empRes, countRes, salaryRes, deptRes] = await Promise.allSettled([
+          employeeApi.list(),
+          employeeApi.count(),
+          salaryApi.average(),
+          departmentApi.list(),
+        ]);
+        if (empRes.status === 'fulfilled') setEmployees(empRes.value?.data?.employees ?? []);
+        if (countRes.status === 'fulfilled') setTotalCount(countRes.value?.data?.count ?? 0);
+        if (salaryRes.status === 'fulfilled') setAvgSalary(salaryRes.value?.data?.averageSalary ?? 0);
+        if (deptRes.status === 'fulfilled') setDeptCount(deptRes.value?.data?.departments?.length ?? 0);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, []);
+
+  const fmt = (n) => (n != null ? Number(n).toLocaleString() : null);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between">
+        <h1 className="text-[18px] font-bold text-gray-800">
+          Welcome back, <span className="text-[#008A75]">{user?.name ?? 'Admin'}</span>
+        </h1>
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard label="Total Employees" value={fmt(totalCount)} loading={loading && totalCount == null} className="text-white bg-[#008A75]" />
+        <StatCard label="Avg. Net Salary" value={avgSalary != null ? `${Math.round(avgSalary).toLocaleString()} RWF` : null} loading={loading && avgSalary == null} className="text-zinc-900 bg-zinc-50" />
+        <StatCard label="Departments" value={fmt(deptCount)} loading={loading && deptCount == null} className="text-white bg-[#008A75]" />
+        <StatCard label="Active Today" value={fmt(totalCount)} loading={loading && totalCount == null} className="text-zinc-900 bg-zinc-50" />
+      </div>
+      <div className="bg-white border border-gray-200 p-5">
+        <h2 className="text-[13px] font-semibold text-gray-700 mb-4">Recent Employees</h2>
+        <Table columns={TABLE_COLUMNS} data={employees.slice(0, 10)} rowKey="_id" loading={loading} emptyMessage="No employees found" maxHeight="280px" />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Profile() {
+  return (
+    <div>Profile</div>
+  )
+}
+
+export default Profile

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

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { UserPlus } from 'lucide-react';
+import { authApi } from '../api/ApiClient';
+import Button from '../components/Button';
+import FormField from '../components/FormField';
+import { useToast } from '../components/Toast';
+
+export default function RegisterDash() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const toast = useToast();
+
+  const handleRegister = async () => {
+    if (!name || !email || !password) { toast.error('Please fill in all fields'); return; }
+    if (password !== confirm) { toast.error('Passwords do not match'); return; }
+    setLoading(true);
+    try {
+      const data = await authApi.signup({ name: name.trim(), email: email.trim(), password });
+      localStorage.setItem('token', data.data?.accessToken ?? '');
+      localStorage.setItem('user', JSON.stringify(data.data?.user ?? {}));
+      toast.success('Account created successfully');
+      navigate('/dashboard/overview');
+    } catch (err) {
+      toast.error(err.message ?? 'Registration failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto mt-10">
+      <h1 className="text-[18px] font-bold text-gray-800 mb-6">Create Dashboard Account</h1>
+      <div className="bg-white border border-gray-200 p-6 space-y-4">
+        <FormField label="Full Name" required>
+          <FormField.Input value={name} onChange={setName} placeholder="Jane Doe" />
+        </FormField>
+        <FormField label="Email" required>
+          <FormField.Input type="email" value={email} onChange={setEmail} placeholder="you@company.com" />
+        </FormField>
+        <FormField label="Password" required>
+          <FormField.Input type="password" value={password} onChange={setPassword} placeholder="Min. 6 characters" />
+        </FormField>
+        <FormField label="Confirm Password" required>
+          <FormField.Input type="password" value={confirm} onChange={setConfirm} placeholder="Repeat password" />
+        </FormField>
+        <Button fullWidth size="lg" loading={loading} icon={<UserPlus className="w-4 h-4" />} onClick={handleRegister}>
+          Create Account
+        </Button>
+      </div>
+    </div>
+  );
+}