create-nodemin-app 1.0.16

package/templates/HRMS_Mongodb/frontend/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "dab-hrms-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "lucide-react": "^0.469.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.4.1",
+    "react-router-dom": "^7.1.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.0.0",
+    "vite": "^6.0.6"
+  }
+}

package/templates/HRMS_Mongodb/frontend/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="8" fill="#0f766e"/>
+  <path d="M8 22V12l4 5 4-5 4 5 4-5v10" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/templates/HRMS_Mongodb/frontend/src/App.jsx

@@ -0,0 +1,50 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { useAuth } from './context/AuthContext';
+import ProtectedRoute from './components/ProtectedRoute';
+import DashboardLayout from './components/layout/DashboardLayout';
+
+// View Components
+import Login from './pages/Login';
+import Register from './pages/Register';
+import ForgotPassword from './pages/ResetPassword';
+import Dashboard from './pages/Dashboard';
+import Employees from './pages/Employees';
+import Departments from './pages/Departments';
+import Positions from './pages/Positions';
+import LeaveReport from './pages/LeaveReport';
+
+export default function App() {
+  const { sessionKey } = useAuth();
+
+  return (
+    <Routes>
+      {/* Public Authentication Pipelines */}
+      <Route path="/" element={<Navigate to="/dashboard" replace />} />
+      <Route path="/login" element={<Login />} />
+      <Route path="/register" element={<Register />} />
+      <Route path="/forgot-password" element={<ForgotPassword />} />
+
+      {/* Protected Global Administrative Portal Clusters */}
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute>
+            <DashboardLayout />
+          </ProtectedRoute>
+        }
+      >
+        {/* Core Administrative Views */}
+        <Route path="dashboard" element={<Dashboard key={`dash-${sessionKey}`} />} />
+        <Route path="employees" element={<Employees key={`emp-${sessionKey}`} />} />
+        <Route path="departments" element={<Departments key={`dept-${sessionKey}`} />} />
+        <Route path="positions" element={<Positions key={`pos-${sessionKey}`} />} />
+        
+        {/* FIXED & PROTECTED: Safely nested within the layout shell tree */}
+        <Route path="reports/leave" element={<LeaveReport key={`leave-${sessionKey}`} />} />
+      </Route>
+
+      {/* Fallback Catch-All Wildcard Navigation */}
+      <Route path="*" element={<Navigate to="/dashboard" replace />} />
+    </Routes>
+  );
+}

package/templates/HRMS_Mongodb/frontend/src/api/axios.js

@@ -0,0 +1,54 @@
+import axios from 'axios';
+
+// Create an instance of axios with standard configurations
+const api = axios.create({
+  // Fallback to local server proxy url if VITE_API_BASE_URL is not explicitly configured
+  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000/api',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json'
+  },
+});
+
+/**
+ * Request Interceptor
+ * Intercepts every outgoing request before it leaves the browser, 
+ * injects the JWT token from localStorage if present to prevent 401 loops.
+ */
+api.interceptors.request.use(
+  (config) => {
+    // Read the token saved during successful authentication
+    const token = localStorage.getItem('token');
+    
+    if (token) {
+      // Standard HTTP header syntax expected by your backend protect middleware
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    
+    return config;
+  },
+  (error) => {
+    // Handle request setup formatting errors gracefully
+    return Promise.reject(error);
+  }
+);
+
+/**
+ * Response Interceptor (Optional Safeguard)
+ * Instantly intercepts incoming responses. If the server sends an authorization 
+ * or verification error, it purges local references to keep data fresh.
+ */
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // If the server returns a 401 or token validation fails explicitly
+    if (error.response && error.response.status === 401) {
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;

package/templates/HRMS_Mongodb/frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,26 @@
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const ProtectedRoute = ({ children }) => {
+  const { isAuthenticated, loading } = useAuth();
+  const location = useLocation();
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-brand-950">
+        <div className="flex flex-col items-center gap-4">
+          <div className="h-10 w-10 animate-spin rounded-full border-4 border-brand-800 border-t-brand-400" />
+          <p className="text-sm text-slate-400">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;

package/templates/HRMS_Mongodb/frontend/src/components/layout/DashboardLayout.jsx

@@ -0,0 +1,16 @@
+import { Outlet } from 'react-router-dom';
+import Sidebar from '../layout/Sidebar'; // Double check this path matches where your Sidebar file sits
+
+export default function DashboardLayout() {
+  return (
+    <div className="flex min-h-screen bg-slate-950 text-slate-100">
+      {/* 1. Sidebar stays locked on the left side */}
+      <Sidebar />
+
+      {/* 2. Main content pane wraps the switching views on the right side */}
+      <main className="flex-1 p-8 lg:p-12 overflow-y-auto">
+        <Outlet /> 
+      </main>
+    </div>
+  );
+}

package/templates/HRMS_Mongodb/frontend/src/components/layout/Sidebar.jsx

@@ -0,0 +1,108 @@
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import toast from 'react-hot-toast';
+
+const mainNavigation = [
+  { name: 'Dashboard', href: '/dashboard' },
+  { name: 'Employees', href: '/employees' },
+  { name: 'Departments', href: '/departments' },
+  { name: 'Positions', href: '/positions' },
+];
+
+const reportNavigation = [
+  { name: 'Leave Report', href: '/reports/leave' },
+];
+
+export default function Sidebar() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    // 1. Flush local authorization credentials from memory
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    
+    // 2. Alert profile termination successfully
+    toast.success('Session closed successfully');
+    
+    // 3. Kick tracking route to root login gateway outside layout shell
+    navigate('/login');
+  };
+
+  const renderLinks = (items) => (
+    <ul className="space-y-1.5">
+      {items.map((item) => {
+        const isActive = location.pathname === item.href;
+        return (
+          <li key={item.name}>
+            <Link
+              to={item.href}
+              className={`group flex items-center justify-between rounded-xl px-4 py-2.5 text-sm font-medium tracking-wide transition-all duration-200 relative ${
+                isActive
+                  ? 'bg-brand-500 text-white font-semibold shadow-lg shadow-brand-500/15'
+                  : 'text-slate-400 hover:bg-brand-900/40 hover:text-stone-100'
+              }`}
+            >
+              <span>{item.name}</span>
+              
+              {isActive ? (
+                <span className="h-1.5 w-1.5 rounded-full bg-white animate-pulse" />
+              ) : (
+                <span className="text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-150 text-slate-500 font-mono">
+                  &rarr;
+                </span>
+              )}
+            </Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  return (
+    <div className="flex h-screen w-64 flex-col bg-brand-950 border-r border-brand-800/60 p-4 justify-between select-none">
+      <div>
+        {/* Core Branding Platform Panel Header */}
+        <div className="mb-8 px-4 py-3 border-b border-brand-900/80 flex items-center justify-between">
+          <span className="text-base font-bold tracking-widest text-white uppercase bg-clip-text">
+            DAB Enterprise
+          </span>
+          <span className="text-[10px] bg-brand-900 text-brand-400 px-2 py-0.5 rounded-md font-mono border border-brand-800/40">
+            v1.0
+          </span>
+        </div>
+
+        {/* Section 1: Main Management Routing Links */}
+        <div className="space-y-2">
+          <span className="px-4 text-[11px] font-bold uppercase tracking-widest text-brand-500/80 block mb-2">
+            Core Directories
+          </span>
+          <nav>{renderLinks(mainNavigation)}</nav>
+        </div>
+
+        {/* Section 2: Analytics & Status Reporting Modules */}
+        <div className="mt-8 space-y-2">
+          <span className="px-4 text-[11px] font-bold uppercase tracking-widest text-brand-500/80 block mb-2">
+            Analytics Matrices
+          </span>
+          <nav>{renderLinks(reportNavigation)}</nav>
+        </div>
+      </div>
+
+      {/* Footer Branding Info & Pure Text Action Logout Trigger */}
+      <div className="space-y-3">
+        <button
+          type="button"
+          onClick={handleLogout}
+          className="w-full rounded-xl px-4 py-2.5 text-left text-sm font-medium tracking-wide text-red-400 hover:bg-red-500/10 hover:text-red-300 transition-all duration-150"
+        >
+          Logout
+        </button>
+        <div className="px-4 py-3 bg-brand-900/20 border border-brand-900/60 rounded-xl text-center">
+          <p className="text-[11px] text-slate-500 font-medium">
+            HR Administration Engine
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/HRMS_Mongodb/frontend/src/components/ui/Button.jsx

@@ -0,0 +1,33 @@
+const variants = {
+  primary: 'bg-brand-600 text-white hover:bg-brand-500 shadow-lg shadow-brand-950/50',
+  secondary: 'bg-brand-800 text-slate-200 border border-brand-600 hover:bg-brand-700',
+  danger: 'bg-red-700 text-white hover:bg-red-600',
+  ghost: 'text-slate-300 hover:bg-brand-800',
+};
+
+const sizes = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2.5 text-sm',
+  lg: 'px-6 py-3 text-base',
+};
+
+export default function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  className = '',
+  disabled,
+  type = 'button',
+  ...props
+}) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={`inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-card disabled:cursor-not-allowed disabled:opacity-50 ${variants[variant]} ${sizes[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/templates/HRMS_Mongodb/frontend/src/components/ui/Input.jsx

@@ -0,0 +1,20 @@
+export default function Input({ label, error, id, className = '', ...props }) {
+  const inputId = id || props.name;
+  return (
+    <div className="w-full">
+      {label && (
+        <label htmlFor={inputId} className="mb-1.5 block text-sm font-medium text-slate-300">
+          {label}
+        </label>
+      )}
+      <input
+        id={inputId}
+        className={`w-full rounded-lg border bg-brand-950/50 px-4 py-2.5 text-white placeholder:text-slate-500 transition focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/25 ${
+          error ? 'border-red-500' : 'border-brand-700/60'
+        } ${className}`}
+        {...props}
+      />
+      {error && <p className="mt-1 text-sm text-red-400">{error}</p>}
+    </div>
+  );
+}

package/templates/HRMS_Mongodb/frontend/src/components/ui/Modal.jsx

@@ -0,0 +1,48 @@
+import Button from './Button';
+
+export default function Modal({ isOpen, onClose, title, children, size = 'md' }) {
+  if (!isOpen) return null;
+
+  const sizes = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-brand-950/80 backdrop-blur-sm" onClick={onClose} aria-hidden />
+      <div
+        className={`relative w-full ${sizes[size]} max-h-[90vh] overflow-y-auto rounded-xl bg-card p-6 shadow-2xl ring-1 ring-brand-800`}
+        role="dialog"
+        aria-modal="true"
+      >
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-xl font-bold text-white">{title}</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg px-2 py-1 text-sm font-medium text-slate-400 hover:bg-brand-800 hover:text-white"
+          >
+            Close
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function ModalFooter({ onCancel, submitLabel = 'Save', loading, danger }) {
+  return (
+    <div className="mt-6 flex justify-end gap-3 border-t border-brand-800 pt-4">
+      <Button variant="secondary" type="button" onClick={onCancel}>
+        Cancel
+      </Button>
+      <Button variant={danger ? 'danger' : 'primary'} type="submit" disabled={loading}>
+        {loading ? 'Saving...' : submitLabel}
+      </Button>
+    </div>
+  );
+}

package/templates/HRMS_Mongodb/frontend/src/components/ui/Select.jsx

@@ -0,0 +1,27 @@
+export default function Select({ label, error, id, options = [], placeholder, className = '', ...props }) {
+  const selectId = id || props.name;
+  return (
+    <div className="w-full">
+      {label && (
+        <label htmlFor={selectId} className="mb-1.5 block text-sm font-medium text-slate-300">
+          {label}
+        </label>
+      )}
+      <select
+        id={selectId}
+        className={`w-full rounded-lg border bg-brand-950/50 px-4 py-2.5 text-white transition focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/25 ${
+          error ? 'border-red-500' : 'border-brand-700/60'
+        } ${className}`}
+        {...props}
+      >
+        {placeholder && <option value="">{placeholder}</option>}
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      {error && <p className="mt-1 text-sm text-red-400">{error}</p>}
+    </div>
+  );
+}

package/templates/HRMS_Mongodb/frontend/src/context/AuthContext.jsx

@@ -0,0 +1,97 @@
+import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import toast from 'react-hot-toast';
+import api from '../api/axios';
+import { clearUserSession } from '../utils/session';
+
+const AuthContext = createContext(null);
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [sessionKey, setSessionKey] = useState(0);
+
+  const bumpSession = useCallback(() => {
+    setSessionKey((key) => key + 1);
+  }, []);
+
+  const persistAuth = (token, userData) => {
+    clearUserSession();
+    localStorage.setItem('token', token);
+    localStorage.setItem('user', JSON.stringify(userData));
+    setUser(userData);
+    bumpSession();
+  };
+
+  const logout = useCallback(() => {
+    clearUserSession();
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    setUser(null);
+    toast.dismiss();
+    bumpSession();
+  }, [bumpSession]);
+
+  const login = async (userName, password) => {
+    clearUserSession();
+    const { data } = await api.post('/auth/login', { userName, password });
+    persistAuth(data.token, data.user);
+    return data;
+  };
+
+  const register = async (payload) => {
+    const { data } = await api.post('/auth/register', payload);
+    return data;
+  };
+
+  // FIXED: Accepts full payload containing email, password, and confirmPassword
+  const resetPassword = async (payload) => {
+    const { data } = await api.post('/auth/reset-password', payload);
+    return data;
+  };
+
+  useEffect(() => {
+    const init = async () => {
+      const token = localStorage.getItem('token');
+      if (!token) {
+        setLoading(false);
+        return;
+      }
+      try {
+        const { data } = await api.get('/auth/me');
+        setUser(data.user);
+        localStorage.setItem('user', JSON.stringify(data.user));
+      } catch {
+        clearUserSession();
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
+        setUser(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    init();
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        loading,
+        sessionKey,
+        login,
+        logout,
+        register,
+        resetPassword,
+        isAuthenticated: !!user,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
+  return ctx;
+};

package/templates/HRMS_Mongodb/frontend/src/index.css

@@ -0,0 +1,34 @@
+@import 'tailwindcss';
+
+@theme {
+  --font-sans: 'DM Sans', system-ui, sans-serif;
+  --color-brand-50: #eff6ff;
+  --color-brand-100: #dbeafe;
+  --color-brand-200: #bfdbfe;
+  --color-brand-300: #93c5fd;
+  --color-brand-400: #60a5fa;
+  --color-brand-500: #3b82f6;
+  --color-brand-600: #2563eb;
+  --color-brand-700: #1d4ed8;
+  --color-brand-800: #1e3a8a;
+  --color-brand-900: #172554;
+  --color-brand-950: #0f172a;
+  --color-surface: #0f172a;
+  --color-card: #1e293b;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  background: var(--color-surface);
+  color: #e2e8f0;
+  -webkit-font-smoothing: antialiased;
+}
+
+#root {
+  min-height: 100vh;
+}

package/templates/HRMS_Mongodb/frontend/src/main.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from './context/AuthContext';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/HRMS_Mongodb/frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import api from '../api/axios';
+import toast from 'react-hot-toast';
+
+const StatCard = ({ label, value }) => (
+  <div className="rounded-xl bg-card p-5 ring-1 ring-brand-800">
+    <p className="text-2xl font-bold text-white">{value}</p>
+    <p className="mt-1 text-sm text-slate-400">{label}</p>
+  </div>
+);
+
+export default function Dashboard() {
+  const [stats, setStats] = useState(null);
+  const [counts, setCounts] = useState({ departments: 0, positions: 0 });
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        // Fetch global corporate HR metric objects
+        const statsRes = await api.get('/employees/stats');
+        setStats(statsRes.data.data);
+
+        // Fetches administrative management node parameters unconditionally
+        const [deptRes, posRes] = await Promise.all([
+          api.get('/departments'),
+          api.get('/positions'),
+        ]);
+        
+        setCounts({ 
+          departments: deptRes.data.count || deptRes.data.data?.length || 0, 
+          positions: posRes.data.count || posRes.data.data?.length || 0 
+        });
+      } catch (error) {
+        console.error('Dashboard load failure:', error);
+        toast.error('Failed to load dashboard metrics');
+      }
+    };
+    load();
+  }, []);
+
+  return (
+    <div>
+      <header className="mb-8">
+        <h1 className="text-2xl font-bold text-white">Dashboard</h1>
+        <p className="mt-1 text-slate-400">Company-wide HR overview</p>
+      </header>
+
+      {/* Metrics Layout Grid */}
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <StatCard label="Total employees" value={stats?.total ?? '—'} />
+        <StatCard label="Active employees" value={stats?.active ?? '—'} />
+        <StatCard label="Departments" value={counts.departments} />
+        <StatCard label="Positions" value={counts.positions} />
+      </div>
+
+      {/* Department Breakdown Progress Bar Section */}
+      {stats?.byDepartment?.length > 0 && (
+        <div className="mt-8 rounded-xl bg-card p-6 ring-1 ring-brand-800">
+          <h2 className="text-lg font-semibold text-white">Employees by department</h2>
+          <div className="mt-4 space-y-3">
+            {stats.byDepartment.map((item) => (
+              <div key={item._id} className="flex items-center gap-4">
+                <span className="w-36 shrink-0 text-sm text-slate-300 truncate">{item._id || 'Unassigned'}</span>
+                <div className="h-2 flex-1 overflow-hidden rounded-full bg-brand-950">
+                  <div
+                    className="h-full rounded-full bg-brand-500"
+                    style={{ width: `${Math.min(100, (item.count / (stats.total || 1)) * 100)}%` }}
+                  />
+                </div>
+                <span className="w-6 text-right text-sm font-medium text-white">{item.count}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}