alpe-temp 1.0.0 → 1.0.2

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

@@ -0,0 +1,264 @@
+import React, { useCallback, useEffect, useMemo, 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 { salaryApi, employeeApi } from '../api/ApiClient';
+
+const getCurrentMonth = () => {
+  const d = new Date();
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+};
+
+export default function Salary() {
+  const toast = useToast();
+  const [salaries, setSalaries] = useState([]);
+  const [employees, setEmployees] = 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 [salRes, empRes] = await Promise.allSettled([
+        salaryApi.list(),
+        employeeApi.list(),
+      ]);
+      if (salRes.status === 'fulfilled') setSalaries(salRes.value?.data?.salaries ?? []);
+      if (empRes.status === 'fulfilled') setEmployees(empRes.value?.data?.employees ?? []);
+    } catch (err) {
+      toast.error('Failed to load data');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { loadAll(); }, [loadAll]);
+
+  const columns = [
+    {
+      key: 'employee', label: 'Employee',
+      render: (v) => v ? `${v.firstName} ${v.lastName}` : '—',
+    },
+    {
+      key: 'dept', label: 'Department',
+      render: (_, row) => row?.employee?.department?.departmentName || '—',
+    },
+    { key: 'grossSalary', label: 'Gross Salary', render: (v) => `${Number(v).toLocaleString()} RWF` },
+    { key: 'totalDeduction', label: 'Deductions', render: (v) => `${Number(v).toLocaleString()} RWF` },
+    { key: 'netSalary', label: 'Net Salary', render: (v) => `${Number(v).toLocaleString()} RWF` },
+    { key: 'month', label: 'Month' },
+    {
+      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">Salary Management</h1>
+          <p className="text-[13px] text-gray-400 mt-0.5">{salaries.length} salary records</p>
+        </div>
+        <Button size="sm" className='bg-[#008A75]' icon={<Plus className="w-3.5 h-3.5" />} onClick={() => setCreateOpen(true)}>Add Salary Record</Button>
+      </div>
+      <div className="bg-white border border-gray-200 p-5">
+        <Table columns={columns} data={salaries} rowKey="_id" loading={loading} emptyMessage="No salary records yet." maxHeight="480px" />
+      </div>
+      {createOpen && <CreateModal employees={employees} onClose={() => setCreateOpen(false)} onCreated={() => { setCreateOpen(false); loadAll(); }} />}
+      {editTarget && <EditModal salary={editTarget} employees={employees} onClose={() => setEditTarget(null)} onUpdated={() => { setEditTarget(null); loadAll(); }} />}
+      {deleteTarget && <DeleteModal salary={deleteTarget} onClose={() => setDeleteTarget(null)} onDeleted={() => { setDeleteTarget(null); loadAll(); }} />}
+    </div>
+  );
+}
+
+function CreateModal({ employees, onClose, onCreated }) {
+  const toast = useToast();
+  const [form, setForm] = useState({ employee: '', grossSalary: '', totalDeduction: '0', month: getCurrentMonth() });
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+  const set = (f) => (v) => setForm((p) => ({ ...p, [f]: v }));
+  const gross = Number(form.grossSalary) || 0;
+  const deduction = Number(form.totalDeduction) || 0;
+  const net = gross - deduction;
+
+  const empMap = useMemo(() => {
+    const m = {};
+    employees.forEach((e) => { m[e._id] = e; });
+    return m;
+  }, [employees]);
+
+  useEffect(() => {
+    if (form.employee) {
+      const emp = empMap[form.employee];
+      if (emp?.department) {
+        setForm((p) => ({
+          ...p,
+          grossSalary: emp.department.grossSalary ?? p.grossSalary,
+          totalDeduction: emp.department.totalDeduction ?? p.totalDeduction,
+        }));
+      }
+    }
+  }, [form.employee, empMap]);
+
+  const validate = () => {
+    const e = {};
+    if (!form.employee) e.employee = 'Required';
+    if (!form.grossSalary) e.grossSalary = 'Required';
+    if (form.totalDeduction === '') e.totalDeduction = 'Required';
+    if (!form.month) e.month = 'Required';
+    setErrors(e);
+    return Object.keys(e).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      await salaryApi.create({ employee: form.employee, grossSalary: gross, totalDeduction: deduction, netSalary: net, month: form.month });
+      toast.success('Salary record created');
+      onCreated();
+    } catch (err) {
+      toast.error(err.message ?? 'Failed to create salary record');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const empOptions = employees.map((e) => ({ value: e._id, label: `${e.employeeNumber} - ${e.firstName} ${e.lastName}` }));
+
+  return (
+    <Modal open title="Add Salary Record" size="sm" onClose={onClose}>
+      <div className="space-y-3">
+        <FormField label="Employee" required error={errors.employee}>
+          <FormField.Select value={form.employee} onChange={set('employee')} placeholder="Select employee" options={empOptions} />
+        </FormField>
+        <FormField label="Gross Salary (RWF)" required error={errors.grossSalary}>
+          <div className="px-3 py-2 bg-gray-50 text-[14px] font-semibold text-gray-700 border border-gray-200">{gross.toLocaleString()} RWF</div>
+        </FormField>
+        <FormField label="Total Deduction (RWF)" required error={errors.totalDeduction}>
+          <div className="px-3 py-2 bg-gray-50 text-[14px] font-semibold text-gray-700 border border-gray-200">{deduction.toLocaleString()} RWF</div>
+        </FormField>
+        <FormField label="Net Salary (RWF)">
+          <div className="px-3 py-2 bg-gray-50 text-[14px] font-semibold text-gray-700 border border-gray-200">{net.toLocaleString()} RWF</div>
+        </FormField>
+        <FormField label="Month" required error={errors.month}>
+          <FormField.Input type="month" value={form.month} onChange={set('month')} />
+        </FormField>
+      </div>
+      <Modal.Footer>
+        <Button variant="outline" onClick={onClose}>Cancel</Button>
+        <Button loading={loading} onClick={handleSubmit}>Create Record</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+function EditModal({ salary, employees, onClose, onUpdated }) {
+  const toast = useToast();
+  const [form, setForm] = useState({ employee: salary.employee?._id || '', grossSalary: salary.grossSalary || '', totalDeduction: salary.totalDeduction || '', month: salary.month || '' });
+  const [loading, setLoading] = useState(false);
+  const set = (f) => (v) => setForm((p) => ({ ...p, [f]: v }));
+  const gross = Number(form.grossSalary) || 0;
+  const deduction = Number(form.totalDeduction) || 0;
+  const net = gross - deduction;
+  const empOptions = employees.map((e) => ({ value: e._id, label: `${e.employeeNumber} - ${e.firstName} ${e.lastName}` }));
+
+  const empMap = useMemo(() => {
+    const m = {};
+    employees.forEach((e) => { m[e._id] = e; });
+    return m;
+  }, [employees]);
+
+  useEffect(() => {
+    if (form.employee) {
+      const emp = empMap[form.employee];
+      if (emp?.department) {
+        setForm((p) => ({
+          ...p,
+          grossSalary: emp.department.grossSalary ?? p.grossSalary,
+          totalDeduction: emp.department.totalDeduction ?? p.totalDeduction,
+        }));
+      }
+    }
+  }, [form.employee, empMap]);
+
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      await salaryApi.update(salary._id, { employee: form.employee, grossSalary: gross, totalDeduction: deduction, netSalary: net, month: form.month });
+      toast.success('Salary record updated');
+      onUpdated();
+    } catch (err) {
+      toast.error(err.message ?? 'Update failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open title="Edit Salary Record" size="sm" onClose={onClose}>
+      <div className="space-y-3">
+        <FormField label="Employee">
+          <FormField.Select value={form.employee} onChange={set('employee')} options={empOptions} placeholder="Select employee" />
+        </FormField>
+        <FormField label="Gross Salary (RWF)">
+          <div className="px-3 py-2 bg-gray-50 text-[14px] font-semibold text-gray-700 border border-gray-200">{gross.toLocaleString()} RWF</div>
+        </FormField>
+        <FormField label="Total Deduction (RWF)">
+          <div className="px-3 py-2 bg-gray-50 text-[14px] font-semibold text-gray-700 border border-gray-200">{deduction.toLocaleString()} RWF</div>
+        </FormField>
+        <FormField label="Net Salary (RWF)">
+          <div className="px-3 py-2 bg-gray-50 text-[14px] font-semibold text-gray-700 border border-gray-200">{net.toLocaleString()} RWF</div>
+        </FormField>
+        <FormField label="Month">
+          <FormField.Input type="month" value={form.month} onChange={set('month')} />
+        </FormField>
+      </div>
+      <Modal.Footer>
+        <Button variant="outline" onClick={onClose}>Cancel</Button>
+        <Button loading={loading} onClick={handleSave}>Save Changes</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+function DeleteModal({ salary, onClose, onDeleted }) {
+  const toast = useToast();
+  const [loading, setLoading] = useState(false);
+
+  const handleDelete = async () => {
+    setLoading(true);
+    try {
+      await salaryApi.remove(salary._id);
+      toast.success('Salary record deleted');
+      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 salary record for <strong>{salary.employee?.firstName} {salary.employee?.lastName}</strong> ({salary.month})? 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/themes.js

@@ -0,0 +1,175 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  🎨  THEMES  —  Every visual style for the app in one place
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  WHAT THIS FILE DOES:
+//    Each theme defines colors for every part of the UI.
+//    Change `theme: 'forest'` in config.js and everything updates.
+//
+//  HOW TO CREATE A NEW THEME:
+//    1. Copy one of the existing themes
+//    2. Give it a name (e.g. 'sunset')
+//    3. Change the hex colors below
+//    4. Add it to this object (e.g. sunset: { ... })
+//    5. Use it:  theme: 'sunset'  in config.js
+//
+//  COLOR GUIDE:
+//    primary:     main brand color (buttons, links, active nav)
+//    surface:     page background
+//    card:        card/panel background
+//    border:      default border color
+//    text:        default text color
+//    textMuted:   secondary/label text
+//    navBg:       navigation bar background
+//    navText:     navigation text
+//    navActive:   navigation active item bg
+//    danger:      delete/error actions
+//    success:     success states
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+export const themes = {
+  // ── 1. FOREST  (green - default) ────────────────────────────────────────
+  forest: {
+    primary:    '#008A75',
+    surface:    '#F9FAFB',
+    card:       '#FFFFFF',
+    border:     '#E5E7EB',
+    text:       '#1F2937',
+    textMuted:  '#9CA3AF',
+    navBg:      '#FFFFFF',
+    navText:    '#4B5563',
+    navActive:  '#008A75',
+    danger:     '#EF4444',
+    success:    '#10B981',
+    warning:    '#F59E0B',
+    info:       '#3B82F6',
+  },
+
+  // ── 2. MIDNIGHT  (dark) ─────────────────────────────────────────────────
+  midnight: {
+    primary:    '#6B7280',
+    surface:    '#18181B',
+    card:       '#27272A',
+    border:     '#3F3F46',
+    text:       '#F4F4F5',
+    textMuted:  '#A1A1AA',
+    navBg:      '#27272A',
+    navText:    '#D4D4D8',
+    navActive:  '#FFFFFF',
+    danger:     '#F87171',
+    success:    '#34D399',
+    warning:    '#FBBF24',
+    info:       '#60A5FA',
+  },
+
+  // ── 3. SLATE  (blue-gray professional) ──────────────────────────────────
+  slate: {
+    primary:    '#6366F1',
+    surface:    '#F1F5F9',
+    card:       '#FFFFFF',
+    border:     '#CBD5E1',
+    text:       '#1E293B',
+    textMuted:  '#94A3B8',
+    navBg:      '#1E293B',
+    navText:    '#CBD5E1',
+    navActive:  '#818CF8',
+    danger:     '#EF4444',
+    success:    '#10B981',
+    warning:    '#F59E0B',
+    info:       '#3B82F6',
+  },
+
+  // ── 4. ROSE  (warm pink/crimson) ────────────────────────────────────────
+  rose: {
+    primary:    '#E11D48',
+    surface:    '#FFF1F2',
+    card:       '#FFFFFF',
+    border:     '#FECDD3',
+    text:       '#1F2937',
+    textMuted:  '#FDA4AF',
+    navBg:      '#FFFFFF',
+    navText:    '#6B7280',
+    navActive:  '#E11D48',
+    danger:     '#DC2626',
+    success:    '#16A34A',
+    warning:    '#D97706',
+    info:       '#2563EB',
+  },
+
+  // ── 5. AMBER  (orange/gold) ─────────────────────────────────────────────
+  amber: {
+    primary:    '#D97706',
+    surface:    '#FFFBEB',
+    card:       '#FFFFFF',
+    border:     '#FDE68A',
+    text:       '#1F2937',
+    textMuted:  '#9CA3AF',
+    navBg:      '#451A03',
+    navText:    '#FDE68A',
+    navActive:  '#F59E0B',
+    danger:     '#DC2626',
+    success:    '#16A34A',
+    warning:    '#D97706',
+    info:       '#2563EB',
+  },
+
+  // ── 6. OCEAN  (deep navy + cyan) ────────────────────────────────────────
+  ocean: {
+    primary:    '#06B6D4',
+    surface:    '#F0F9FF',
+    card:       '#FFFFFF',
+    border:     '#BAE6FD',
+    text:       '#0F172A',
+    textMuted:  '#94A3B8',
+    navBg:      '#172554',
+    navText:    '#BAE6FD',
+    navActive:  '#22D3EE',
+    danger:     '#EF4444',
+    success:    '#10B981',
+    warning:    '#F59E0B',
+    info:       '#3B82F6',
+  },
+
+  // ── 7. CHALK  (black & white minimal) ───────────────────────────────────
+  chalk: {
+    primary:    '#000000',
+    surface:    '#FAFAFA',
+    card:       '#FFFFFF',
+    border:     '#D4D4D4',
+    text:       '#171717',
+    textMuted:  '#A3A3A3',
+    navBg:      '#FFFFFF',
+    navText:    '#525252',
+    navActive:  '#000000',
+    danger:     '#DC2626',
+    success:    '#16A34A',
+    warning:    '#D97706',
+    info:       '#2563EB',
+  },
+
+  // ── 8. VIOLET  (purple modern) ──────────────────────────────────────────
+  violet: {
+    primary:    '#7C3AED',
+    surface:    '#F5F3FF',
+    card:       '#FFFFFF',
+    border:     '#DDD6FE',
+    text:       '#1F2937',
+    textMuted:  '#9CA3AF',
+    navBg:      '#2E1065',
+    navText:    '#DDD6FE',
+    navActive:  '#A78BFA',
+    danger:     '#EF4444',
+    success:    '#10B981',
+    warning:    '#F59E0B',
+    info:       '#3B82F6',
+  },
+};
+
+// ─── GET RESOLVED THEME (applies config overrides) ───────────────────────────
+//  This merges the selected theme with any user overrides from config.js.
+//
+export function getTheme(themeName = 'forest', overrides = {}) {
+  const base = themes[themeName] || themes.forest;
+  return { ...base, ...overrides };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alpe-temp",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Employee Payroll Management System (EPMS) - Full-stack Express + React app",
   "main": "bin/epms.js",
   "bin": {