alpe-temp 1.0.1 → 1.0.2

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

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>,
+)