alpe-temp 1.0.0 → 1.0.2

package/frontend-project/src/components/Table.jsx

@@ -0,0 +1,127 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  📊  TABLE  —  Reusable data table with loading & empty states
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  HOW TO USE:
+//    <Table
+//      columns={[
+//        { key: 'name', label: 'Name' },
+//        { key: 'email', label: 'Email', align: 'center' },
+//        { key: 'status', label: 'Status', render: (val) => <Badge>{val}</Badge> },
+//      ]}
+//      data={users}
+//      rowKey="id"
+//    />
+//
+//  PROPS:
+//    columns:      array of { key, label, align?, render? }
+//    data:         array of row objects
+//    rowKey:       unique key per row (default: 'id')
+//    loading:      show loading skeleton
+//    emptyMessage: text when no data
+//    className:    additional CSS classes
+//    maxHeight:    max scrollable height (default: '360px')
+//
+//  CONFIG INTEGRATION:
+//    - Rounded corners from config.js
+//    - Colors from CSS variables
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+import React from 'react';
+import { config } from '../config';
+import { getRoundedClass } from '../design';
+
+export default function Table({
+  columns,
+  data = [],
+  rowKey = 'id',
+  loading = false,
+  emptyMessage = 'No data found',
+  className = '',
+  maxHeight = '360px',
+}) {
+  const ALIGN = { left: 'text-left', center: 'text-center', right: 'text-right' };
+  const roundClass = getRoundedClass(config.rounded);
+
+  return (
+    <div
+      className={`w-full overflow-auto border ${roundClass} ${className}`}
+      style={{ maxHeight, borderColor: 'var(--color-border)' }}
+    >
+      <table className="w-full min-w-max">
+        {/* ─── HEADER ──────────────────────────────────────────────────── */}
+        <thead className="sticky top-0 z-10">
+          <tr
+            className="border-b"
+            style={{
+              backgroundColor: 'var(--color-surface)',
+              borderColor: 'var(--color-border)',
+            }}
+          >
+            {columns.map((col) => (
+              <th
+                key={col.key}
+                className={`px-4 py-3 text-[11px] font-semibold uppercase tracking-wider whitespace-nowrap ${ALIGN[col.align ?? 'left']}`}
+                style={{ color: 'var(--color-text-muted)' }}
+              >
+                {col.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+
+        {/* ─── BODY ────────────────────────────────────────────────────── */}
+        <tbody className="divide-y" style={{ backgroundColor: 'var(--color-card)', borderColor: 'var(--color-border)' }}>
+          {/* Loading skeleton */}
+          {loading ? (
+            Array.from({ length: 5 }).map((_, i) => (
+              <tr key={i}>
+                {columns.map((col) => (
+                  <td key={col.key} className="px-4 py-3">
+                    <div
+                      className="h-3 animate-pulse"
+                      style={{
+                        width: `${60 + (i * 13 + col.key.length * 7) % 30}%`,
+                        backgroundColor: 'var(--color-border)',
+                      }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))
+          ) : data.length === 0 ? (
+            // Empty state
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="px-4 py-10 text-center text-[13px]"
+                style={{ color: 'var(--color-text-muted)' }}
+              >
+                {emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            // Data rows
+            data.map((row, rowIdx) => (
+              <tr
+                key={row[rowKey] ?? rowIdx}
+                className="transition-colors duration-100 hover:bg-gray-50"
+              >
+                {columns.map((col) => (
+                  <td
+                    key={col.key}
+                    className={`px-4 py-3 text-[12px] font-medium whitespace-nowrap ${ALIGN[col.align ?? 'left']}`}
+                    style={{ color: 'var(--color-text)' }}
+                  >
+                    {col.render ? col.render(row[col.key], row) : (row[col.key] ?? '—')}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/frontend-project/src/components/Toast.jsx

@@ -0,0 +1,64 @@
+import React, { createContext, useCallback, useContext, useState } from 'react';
+import { CheckCircle, XCircle, Info, X } from 'lucide-react';
+
+const ToastContext = createContext(null);
+
+const ICONS = {
+  success: <CheckCircle className="w-4 h-4 text-emerald-500 flex-shrink-0" />,
+  error:   <XCircle    className="w-4 h-4 text-red-500    flex-shrink-0" />,
+  info:    <Info        className="w-4 h-4 text-blue-500   flex-shrink-0" />,
+};
+
+const BG = {
+  success: 'bg-white border-emerald-200',
+  error:   'bg-white border-red-200',
+  info:    'bg-white border-blue-200',
+};
+
+let _id = 0;
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+
+  const add = useCallback((message, type = 'info', duration = 3500) => {
+    const id = ++_id;
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), duration);
+    return id;
+  }, []);
+
+  const remove = useCallback((id) => setToasts((prev) => prev.filter((t) => t.id !== id)), []);
+
+  const api = {
+    success: (msg, dur) => add(msg, 'success', dur),
+    error:   (msg, dur) => add(msg, 'error',   dur),
+    info:    (msg, dur) => add(msg, 'info',     dur),
+    remove,
+  };
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      <div className="fixed top-5 right-5 z-[9999] flex flex-col gap-2 pointer-events-none">
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={`pointer-events-auto flex items-center gap-3 px-4 py-3 border shadow-lg text-[13px] font-medium text-gray-700 min-w-[240px] max-w-xs ${BG[t.type]}`}
+          >
+            {ICONS[t.type]}
+            <span className="flex-1">{t.message}</span>
+            <button onClick={() => remove(t.id)} className="text-gray-300 hover:text-gray-500 transition-colors">
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used inside <ToastProvider>');
+  return ctx;
+}

package/frontend-project/src/components/index.js

@@ -0,0 +1,14 @@
+/**
+ * src/components/ui/index.js
+ * Barrel export for all reusable UI primitives.
+ *
+ * Usage:
+ *   import { Button, Table, Modal, FormField, Card, StatCard, ToastProvider, useToast } from '../components/ui';
+ */
+
+export { default as Button }    from './Button';
+export { default as Table }     from './Table';
+export { default as Modal }     from './Modal';
+export { default as FormField } from './FormField';
+export { Card, StatCard }       from './Card';
+export { ToastProvider, useToast } from './Toast';

package/frontend-project/src/config.js

@@ -0,0 +1,66 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  🎨  APP CONFIGURATION  —  Change ONE value to transform the whole app!
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  📖  BEGINNER GUIDE:
+//
+//    This is the ONLY file you need to touch to change the entire look
+//    and behavior of the app. Every page, component, and layout reads
+//    from this file.
+//
+//  🚀  QUICK EXAMPLES:
+//
+//    1. navigation: 'bottomnav'   →  navbar moves to the bottom (mobile style)
+//    2. theme:      'midnight'    →  dark mode, instantly
+//    3. rounded:    'none'        →  all buttons/cards become square
+//    4. fontSize:   'large'       →  bigger text everywhere
+//    5. colors.primary: '#FF0000' →  brand color changes to red
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+export const config = {
+  // ─── NAVIGATION ───────────────────────────────────────────────────────
+  //  'topnav'    →  horizontal bar at the TOP of the screen
+  //  'bottomnav' →  bar at the BOTTOM (great for mobile / app-like feel)
+  navigation: 'bottomnav',
+
+  // ─── THEME ────────────────────────────────────────────────────────────
+  //  Pick any theme name from themes.js. Available themes:
+  //    'forest'   (green - default)
+  //    'midnight' (dark)
+  //    'slate'    (blue-gray)
+  //    'rose'     (pink/crimson)
+  //    'amber'    (orange/gold)
+  //    'ocean'    (navy/cyan)
+  //    'chalk'    (black & white)
+  //    'violet'   (purple)
+  theme: 'forest',
+
+  // ─── BORDER RADIUS ────────────────────────────────────────────────────
+  //  Controls how rounded buttons, cards, inputs, and modals are.
+  //  'none'  →  completely square (sharp, modern)
+  //  'sm'    →  slightly rounded
+  //  'md'    →  moderately rounded (default feel)
+  //  'lg'    →  very rounded (pill-like)
+  //  'xl'    →  extra rounded
+  //  'full'  →  fully pill-shaped
+  rounded: 'md',
+
+  // ─── FONT SIZE ────────────────────────────────────────────────────────
+  //  'normal' →  default text size
+  //  'large'  →  bigger text (easier to read)
+  fontSize: 'normal',
+
+  // ─── COLORS ───────────────────────────────────────────────────────────
+  //  Leave empty ('') to use the theme's default colors.
+  //  Set a value to override that specific color.
+  //  Format: any valid CSS color (#hex, rgb, name)
+  colors: {
+    primary: '',       // main brand color (buttons, links, active nav)
+    // secondary: '',  // secondary accent
+    // success: '',    // success states (green)
+    // danger: '',     // error/danger states (red)
+    // warning: '',    // warning states (yellow/amber)
+    // info: '',       // info states (blue)
+  },
+};

package/frontend-project/src/design.js

@@ -0,0 +1,115 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  📐  DESIGN TOKENS  —  Turns config.js into CSS variables and utilities
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  WHAT THIS FILE DOES:
+//    Takes your config.js settings and turns them into:
+//      1. CSS custom properties (variables) for global styling
+//      2. Tailwind-compatible class names for components
+//
+//  HOW IT WORKS:
+//    The Layout component calls `getDesignTokens(config)` to get an object
+//    with CSS variable values and utility class names. These are applied
+//    to the root div so every child component can use them.
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+import { getTheme } from './themes';
+
+// ─── RADIUS VALUES ───────────────────────────────────────────────────────────
+const RADIUS = {
+  none: '0px',
+  sm:   '0.125rem',  // 2px
+  md:   '0.375rem',  // 6px
+  lg:   '0.5rem',    // 8px
+  xl:   '0.75rem',   // 12px
+  full: '9999px',
+};
+
+// ─── FONT SIZE SCALES ────────────────────────────────────────────────────────
+const FONT_SCALE = {
+  normal: {
+    xs:  '0.75rem',    // 12px
+    sm:  '0.8125rem',  // 13px
+    base:'0.875rem',   // 14px
+    lg:  '1rem',       // 16px
+    xl:  '1.25rem',    // 20px
+    '2xl':'1.5rem',    // 24px
+    '3xl':'2rem',      // 32px
+  },
+  large: {
+    xs:  '0.8125rem',  // 13px
+    sm:  '0.875rem',   // 14px
+    base:'1rem',       // 16px
+    lg:  '1.125rem',   // 18px
+    xl:  '1.375rem',   // 22px
+    '2xl':'1.75rem',   // 28px
+    '3xl':'2.25rem',   // 36px
+  },
+};
+
+// ─── ROUNDED CLASS HELPER ────────────────────────────────────────────────────
+//  Use this in components to get the Tailwind rounded class for a given level.
+//  Example:  getRoundedClass('md')  →  'rounded-md'
+//
+export function getRoundedClass(level = 'md') {
+  const map = {
+    none: 'rounded-none',
+    sm:   'rounded-sm',
+    md:   'rounded-md',
+    lg:   'rounded-lg',
+    xl:   'rounded-xl',
+    full: 'rounded-full',
+  };
+  return map[level] || map.md;
+}
+
+// ─── GENERATE DESIGN TOKENS ──────────────────────────────────────────────────
+//  This is called once by the Layout component to produce:
+//    {
+//      cssVars: { '--color-primary': '#008A75', ... },
+//      roundedClass: 'rounded-md',
+//      theme: { ... resolved theme colors },
+//    }
+//
+export function getDesignTokens(config) {
+  const theme = getTheme(config.theme, config.colors);
+
+  // Merge user color overrides
+  const colors = { ...theme };
+  if (config.colors) {
+    Object.entries(config.colors).forEach(([key, val]) => {
+      if (val) colors[key] = val;
+    });
+  }
+
+  // Build CSS variable map
+  const cssVars = {
+    '--color-primary':    colors.primary,
+    '--color-surface':    colors.surface,
+    '--color-card':       colors.card,
+    '--color-border':     colors.border,
+    '--color-text':       colors.text,
+    '--color-text-muted': colors.textMuted,
+    '--color-nav-bg':     colors.navBg,
+    '--color-nav-text':   colors.navText,
+    '--color-nav-active': colors.navActive,
+    '--color-danger':     colors.danger,
+    '--color-success':    colors.success,
+    '--color-warning':    colors.warning,
+    '--color-info':       colors.info,
+    '--radius':           RADIUS[config.rounded] || RADIUS.md,
+  };
+
+  // Add font size variables
+  const fontSizes = FONT_SCALE[config.fontSize] || FONT_SCALE.normal;
+  Object.entries(fontSizes).forEach(([key, val]) => {
+    cssVars[`--text-${key}`] = val;
+  });
+
+  return {
+    cssVars,
+    roundedClass: getRoundedClass(config.rounded),
+    theme: colors,
+  };
+}

package/frontend-project/src/index.css

@@ -0,0 +1,60 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   🎨  GLOBAL STYLES  —  Tailwind + CSS custom properties
+   ═══════════════════════════════════════════════════════════════════════════
+   
+   CSS VARIABLES (--color-*, --radius, --text-*):
+     These are set dynamically by design.js based on your config.js.
+     They are applied to the :root element by the Layout component.
+   
+   HOW TO USE IN COMPONENTS:
+     style={{ color: 'var(--color-primary)' }}
+     or Tailwind: className="bg-[var(--color-primary)]"
+   
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ─── Custom CSS Variables (applied by Layout component) ───────────────── */
+:root {
+  --color-primary:    #008A75;
+  --color-surface:    #F9FAFB;
+  --color-card:       #FFFFFF;
+  --color-border:     #E5E7EB;
+  --color-text:       #1F2937;
+  --color-text-muted: #9CA3AF;
+  --color-nav-bg:     #FFFFFF;
+  --color-nav-text:   #4B5563;
+  --color-nav-active: #008A75;
+  --color-danger:     #EF4444;
+  --color-success:    #10B981;
+  --color-warning:    #F59E0B;
+  --color-info:       #3B82F6;
+  --radius:           0.375rem;
+  --text-xs:          0.75rem;
+  --text-sm:          0.8125rem;
+  --text-base:        0.875rem;
+  --text-lg:          1rem;
+  --text-xl:          1.25rem;
+  --text-2xl:         1.5rem;
+  --text-3xl:         2rem;
+}
+
+/* ─── Tailwind-like utilities using CSS variables ──────────────────────── */
+@layer utilities {
+  .bg-primary { background-color: var(--color-primary); }
+  .text-primary { color: var(--color-primary); }
+  .border-primary { border-color: var(--color-primary); }
+  .bg-surface { background-color: var(--color-surface); }
+  .bg-card { background-color: var(--color-card); }
+  .text-muted { color: var(--color-text-muted); }
+}
+
+/* ─── Animations ───────────────────────────────────────────────────────── */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}

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

@@ -0,0 +1,156 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  📱  BOTTOM NAV LAYOUT  —  Navbar at the bottom (mobile-first style)
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  WHAT THIS FILE DOES:
+//    Renders the app shell with a bottom navigation bar.
+//    Switch to this by setting  navigation: 'bottomnav'  in config.js
+//
+//  HOW IT LOOKS:
+//    ┌────────────────────────────────┐
+//    │                                │
+//    │         PAGE CONTENT           │  ← scrollable
+//    │                                │
+//    ├────────────────────────────────┤
+//    │  📊  👥  💰  🏢  📄           │  ← bottom nav (fixed)
+//    └────────────────────────────────┘
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+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 ────────────────────────────────────────────────────────
+//  Add new pages here. The icon + label + path = one nav item.
+//
+const NAV_ITEMS = [
+  { label: 'Home',     path: '/dashboard/overview',   Icon: LayoutDashboard },
+  { label: 'Employees',path: '/dashboard/employees',  Icon: Users },
+  { label: 'Salary',   path: '/dashboard/salary',     Icon: DollarSign },
+  { label: 'Depts',    path: '/dashboard/departments', Icon: Building2 },
+  { label: 'Reports',  path: '/dashboard/reports',    Icon: FileText },
+];
+
+export default function BottomNav() {
+  const { user, handleLogout } = useShell();
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col h-screen overflow-hidden">
+      {/* ─── TOP BAR (user menu, logo) ─────────────────────────────────── */}
+      <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)',
+        }}
+      >
+        <div className="flex items-center gap-2 mr-4">
+          <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>
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* User dropdown */}
+        <div className="relative">
+          <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: 'var(--text-base)',
+        }}
+      >
+        <div className="max-w-6xl mx-auto">
+          <Outlet />
+        </div>
+      </main>
+
+      {/* ─── BOTTOM NAV ──────────────────────────────────────────────────── */}
+      <nav
+        className="flex-shrink-0 flex items-center justify-around h-[64px] px-2 z-20"
+        style={{
+          backgroundColor: 'var(--color-nav-bg)',
+          borderTop: '1px solid var(--color-border)',
+        }}
+      >
+        {NAV_ITEMS.map(({ label, path, Icon }) => (
+          <NavLink
+            key={path}
+            to={path}
+            className="flex flex-col items-center gap-0.5 px-2 py-1 text-[10px] font-medium transition-colors"
+            style={({ isActive }) => ({
+              color: isActive ? 'var(--color-nav-active)' : 'var(--color-nav-text)',
+            })}
+          >
+            {({ isActive }) => (
+              <>
+                <Icon className="w-5 h-5" />
+                <span>{label}</span>
+              </>
+            )}
+          </NavLink>
+        ))}
+      </nav>
+    </div>
+  );
+}