alpe-temp 1.0.0 → 1.0.2

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

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

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

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

package/frontend-project/src/main.jsx

@@ -0,0 +1,41 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import { createBrowserRouter , createRoutesFromElements  , RouterProvider , Route } from 'react-router-dom'
+import Intro from './Intro'
+import Login from './Auth/Login'
+import Register from './Auth/Register'
+import LayOut from './LayOut'
+import Home from './pages/Home'
+import Employee from './pages/Employee'
+import Salary from './pages/Salary'
+import Department from './pages/Department'
+import Reports from './pages/Reports'
+import Profile from './pages/Profile'
+import { ToastProvider } from './components'
+
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <>
+    <Route path='/' element={<Intro />} />
+    <Route path='/login' element={<Login />} />
+    <Route path='/register' element={<Register />} />
+    <Route path='/dashboard' element={<LayOut />} >
+    <Route path='overview' element={<Home />} />
+    <Route path='employees' element={<Employee />} />
+    <Route path='salary' element={<Salary />} />
+    <Route path='departments' element={<Department />} />
+    <Route path='reports'  element={<Reports />} />
+    <Route path='profile'  element={<Profile />} />
+    </Route>
+    </>
+  )
+)
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <ToastProvider >
+    <RouterProvider  router={router} />
+    </ToastProvider>
+  </StrictMode>,
+)

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>
+  );
+}