alpe-temp 1.0.0 → 1.0.2

package/bin/epms.js

@@ -5,38 +5,34 @@ const readline = require('readline');
 const { execSync } = require('child_process');
 
 const ROOT = path.resolve(__dirname, '..');
-const SERVER_ENTRY = path.join(ROOT, 'backend-project', 'server.js');
-
+const CWD = process.cwd();
 const args = process.argv.slice(2);
 
+// ─── Help ─────────────────────────────────────────────────────────────────────
 if (args.includes('--help') || args.includes('-h')) {
   console.log(`
   alpe-temp — Employee Payroll Management System (EPMS)
 
   Usage:
-    npx alpe-temp              Start the EPMS server
-    npx alpe-temp seed         Seed the database with sample data
+    npx alpe-temp              Scaffold project + start server
+    npx alpe-temp init         Scaffold project files only
+    npx alpe-temp seed         Seed the database
+    npx alpe-temp start        Start server (in existing project)
 
   Options:
     --db <uri>                 MongoDB connection string (non-interactive)
 
-  Environment variables (optional):
+  Environment variables:
     PORT               Server port (default: 3000)
     MONGODB_URI        MongoDB connection string
     JWT_SECRET         Secret for JWT signing
     NODE_ENV           Environment mode (development/production)
-
-  Requirements:
-    - Node.js >= 18
-    - MongoDB (will prompt if not found)
-
-  Visit http://localhost:3000 after starting.
 `);
   process.exit(0);
 }
 
-// ─── Config ──────────────────────────────────────────────────────────────────
-const ENV_PATH = path.join(process.cwd(), '.env');
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+const ENV_PATH = path.join(CWD, '.env');
 
 function loadEnv() {
   if (!fs.existsSync(ENV_PATH)) return {};
@@ -60,7 +56,7 @@ function writeEnv(key, value) {
   fs.writeFileSync(ENV_PATH, updated, 'utf-8');
 }
 
-async function prompt(question, defaultValue) {
+async function ask(question, defaultValue) {
   const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
   return new Promise((resolve) => {
     const hint = defaultValue ? ` (default: ${defaultValue})` : '';
@@ -86,76 +82,169 @@ async function waitForMongo(uri, timeoutMs = 5000) {
   return false;
 }
 
-async function main() {
-  // ─── Seed command ──────────────────────────────────────────────────────
-  if (args.includes('seed')) {
-    const env = loadEnv();
-    if (env.MONGODB_URI) process.env.MONGODB_URI = env.MONGODB_URI;
-    console.log('Seeding database...');
-    execSync('node ' + path.join(ROOT, 'backend-project', 'src', 'seed.js'), {
-      cwd: ROOT,
-      stdio: 'inherit',
-    });
-    return;
+function isScaffolded(dir) {
+  return fs.existsSync(path.join(dir, 'backend-project', 'server.js'));
+}
+
+// ─── Scaffold: copy project to CWD ────────────────────────────────────────────
+function scaffold() {
+  if (isScaffolded(CWD)) {
+    console.log('  Project already exists in this directory.');
+    return false;
+  }
+
+  console.log('\n  Setting up alpe-temp project...\n');
+
+  const skipDirs = new Set(['node_modules', '.git']);
+  const entries = fs.readdirSync(ROOT, { withFileTypes: true });
+
+  for (const entry of entries) {
+    if (skipDirs.has(entry.name)) continue;
+    const src = path.join(ROOT, entry.name);
+    const dest = path.join(CWD, entry.name);
+    if (entry.isDirectory()) {
+      fs.cpSync(src, dest, {
+        recursive: true,
+        filter: (s) => !skipDirs.has(path.basename(s)) && path.basename(s) !== 'node_modules',
+      });
+    } else if (!fs.existsSync(dest)) {
+      fs.copyFileSync(src, dest);
+    }
   }
 
-  // ─── Load existing config ──────────────────────────────────────────────
+  console.log('  ✓ Project files copied');
+  return true;
+}
+
+// ─── Install dependencies ─────────────────────────────────────────────────────
+function installDeps() {
+  console.log('  Installing dependencies...');
+  execSync('npm install', { cwd: CWD, stdio: 'inherit' });
+  console.log('  ✓ Dependencies installed');
+}
+
+// ─── Configure MongoDB ────────────────────────────────────────────────────────
+async function configureMongo() {
   const env = loadEnv();
-  if (env.MONGODB_URI) process.env.MONGODB_URI = env.MONGODB_URI;
+  if (env.MONGODB_URI) {
+    process.env.MONGODB_URI = env.MONGODB_URI;
+    return true;
+  }
 
-  // ─── --db flag overrides everything ────────────────────────────────────
   const dbIndex = args.indexOf('--db');
   if (dbIndex !== -1 && args[dbIndex + 1]) {
     process.env.MONGODB_URI = args[dbIndex + 1];
+    writeEnv('MONGODB_URI', args[dbIndex + 1]);
+    return true;
   }
 
-  // ─── Prompt for MongoDB if not configured ──────────────────────────────
-  if (!process.env.MONGODB_URI) {
-    console.log('\n  MongoDB connection not configured.');
-    const uri = await prompt(
-      'Enter MongoDB URI',
-      'mongodb://127.0.0.1:27017/EPMS'
-    );
-    if (uri) {
-      process.env.MONGODB_URI = uri;
-      writeEnv('MONGODB_URI', uri);
-      console.log('  Saved to .env');
-    }
+  console.log('  MongoDB not configured.');
+  const uri = await ask('Enter MongoDB URI', 'mongodb://127.0.0.1:27017/EPMS');
+  if (uri) {
+    process.env.MONGODB_URI = uri;
+    writeEnv('MONGODB_URI', uri);
+    console.log('  ✓ Saved to .env');
   }
 
-  // ─── Verify MongoDB is reachable ───────────────────────────────────────
+  return !!process.env.MONGODB_URI;
+}
+
+// ─── Verify MongoDB ───────────────────────────────────────────────────────────
+async function verifyMongo() {
   const uri = process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/EPMS';
   process.stdout.write('  Checking MongoDB connection...');
   const reachable = await waitForMongo(uri);
   if (reachable) {
     console.log(' connected');
-  } else {
-    console.log(' failed');
-    console.log(`\n  Could not connect to MongoDB at:\n    ${uri}\n`);
-    const retry = await prompt('Try a different URI', uri);
-    if (retry) {
-      process.env.MONGODB_URI = retry;
-      writeEnv('MONGODB_URI', retry);
-      console.log('  Saved to .env');
-      process.stdout.write('  Checking MongoDB connection...');
-      if (!(await waitForMongo(retry))) {
-        console.log(' failed');
-        console.error('\n  Unable to connect to MongoDB. Please ensure it is running.\n');
-        process.exit(1);
-      }
+    return true;
+  }
+  console.log(' failed');
+  console.log(`\n  Could not connect to MongoDB at:\n    ${uri}\n`);
+  const retry = await ask('Try a different URI', uri);
+  if (retry) {
+    process.env.MONGODB_URI = retry;
+    writeEnv('MONGODB_URI', retry);
+    console.log('  ✓ Saved to .env');
+    process.stdout.write('  Checking MongoDB connection...');
+    if (await waitForMongo(retry)) {
       console.log(' connected');
-    } else {
+      return true;
+    }
+    console.log(' failed');
+  }
+  return false;
+}
+
+// ─── Start server ─────────────────────────────────────────────────────────────
+function startServer() {
+  process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+  const serverEntry = path.join(CWD, 'backend-project', 'server.js');
+  if (!fs.existsSync(serverEntry)) {
+    console.error('  server.js not found. Run from an alpe-temp project directory.');
+    process.exit(1);
+  }
+  require(serverEntry);
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+async function main() {
+  // Seed
+  if (args.includes('seed')) {
+    const cwdEnv = loadEnv();
+    if (cwdEnv.MONGODB_URI) process.env.MONGODB_URI = cwdEnv.MONGODB_URI;
+    if (!process.env.MONGODB_URI) await configureMongo();
+    console.log('Seeding database...');
+    const seedEntry = path.join(isScaffolded(CWD) ? CWD : ROOT, 'backend-project', 'src', 'seed.js');
+    execSync(`node "${seedEntry}"`, { cwd: isScaffolded(CWD) ? CWD : ROOT, stdio: 'inherit' });
+    return;
+  }
+
+  // Init: scaffold only
+  if (args.includes('init')) {
+    scaffold();
+    if (isScaffolded(CWD)) {
+      installDeps();
+      console.log('\n  ✔ Project ready! Run:\n     npm start\n');
+    }
+    return;
+  }
+
+  // Start: just start the server (assume already scaffolded)
+  if (args.includes('start')) {
+    if (!isScaffolded(CWD)) {
+      console.error('  No alpe-temp project found in this directory. Run `npx alpe-temp init` first.');
+      process.exit(1);
+    }
+    const env = loadEnv();
+    if (env.MONGODB_URI) process.env.MONGODB_URI = env.MONGODB_URI;
+    if (!process.env.MONGODB_URI && !await configureMongo()) {
+      console.error('  MongoDB URI is required.');
+      process.exit(1);
+    }
+    if (!(await verifyMongo())) {
       console.error('\n  Unable to connect to MongoDB. Please ensure it is running.\n');
       process.exit(1);
     }
+    startServer();
+    return;
   }
 
-  // ─── Start server ──────────────────────────────────────────────────────
-  process.env.NODE_ENV = process.env.NODE_ENV || 'production';
-  require(SERVER_ENTRY);
+  // Default: scaffold → install → configure → start
+  const justScaffolded = scaffold();
+  if (justScaffolded) installDeps();
+  if (!isScaffolded(CWD)) {
+    console.error('  Project setup failed.');
+    process.exit(1);
+  }
+  await configureMongo();
+  if (!(await verifyMongo())) {
+    console.error('\n  Unable to connect to MongoDB.\n');
+    process.exit(1);
+  }
+  startServer();
 }
 
 main().catch((err) => {
-  console.error('Failed to start:', err.message);
+  console.error('Failed:', err.message);
   process.exit(1);
 });

package/frontend-project/src/App.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/frontend-project/src/Auth/Login.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { Eye, EyeOff, LogIn } from 'lucide-react';
+import { authApi } from '../api/ApiClient';
+import Button from '../components/Button';
+import FormField from '../components/FormField';
+import { useToast } from '../components/Toast';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPwd, setShowPwd] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const toast = useToast();
+
+  const handleLogin = async () => {
+    if (!email || !password) { toast.error('Please fill in all fields'); return; }
+    setLoading(true);
+    try {
+      const data = await authApi.login({ email: email.trim(), password });
+      localStorage.setItem('token', data.data?.accessToken ?? '');
+      localStorage.setItem('user', JSON.stringify(data.data?.user ?? {}));
+      toast.success('Login successful');
+      navigate('/dashboard/overview');
+    } catch (err) {
+      toast.error(err.message ?? 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKey = (e) => { if (e.key === 'Enter') handleLogin(); };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-[760px] flex  h-[500px] overflow-hidden">
+        <div className="hidden bg-[#008A75] sm:flex flex-col w-5/12 p-10 text-white">
+          <div className="mb-auto">
+            <div className="flex items-center gap-2 mb-1">
+              <img src="/logo.png" alt="EPMS" className="w-8 h-10" />
+              <h1 className="text-[22px] font-bold tracking-tight mt-3">EPMS</h1>
+            </div>
+            <p className="text-[10px] text-white/60 font-medium uppercase tracking-widest">Employee Payroll Management System</p>
+          </div>
+          <div className="mt-10">
+            <p className="text-[18px] font-semibold leading-snug">
+              Welcome back.<br />
+              <span className="text-white/60">Manage your workforce.</span>
+            </p>
+            <p className="text-[12px] text-white/50 mt-3 leading-relaxed">
+              Sign in to manage employees, departments, and payroll records.
+            </p>
+          </div>
+          <div className="mt-auto pt-10 border-t border-white/20">
+            <p className="text-[11px] text-white/40">© {new Date().getFullYear()} EPMS · All rights reserved</p>
+          </div>
+        </div>
+        <div className="flex-1 bg-white p-8 sm:p-10 flex flex-col justify-center">
+          <div className="mb-6">
+            <h2 className="text-[20px] font-bold text-gray-800">Sign in</h2>
+            <p className="text-[13px] text-gray-400 mt-1">
+              Don't have an account?{' '}
+              <Link to="/register" className="text-[#008A75] font-semibold hover:underline">Create one</Link>
+            </p>
+          </div>
+          <div className="space-y-3">
+            <FormField label="Email address" required>
+              <FormField.Input type="email" value={email} onChange={(v) => setEmail(v)} placeholder="you@company.com" onKeyDown={handleKey} autoComplete="email" className='rounded-none' />
+            </FormField>
+            <FormField label="Password" required>
+              <div className="relative">
+                <FormField.Input type={showPwd ? 'text' : 'password'} value={password} onChange={(v) => setPassword(v)} placeholder="Enter password" onKeyDown={handleKey} className='rounded-none' autoComplete="current-password" className="pr-10" />
+                <button type="button" onClick={() => setShowPwd((v) => !v)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
+                  {showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
+            </FormField>
+          </div>
+          <Button className="mt-5 rounded-none" fullWidth size="lg" loading={loading} icon={<LogIn className="w-4 h-4" />} onClick={handleLogin}>Sign in</Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend-project/src/Auth/Register.jsx

@@ -0,0 +1,183 @@
+/**
+ * Register.jsx  –  Account creation page.
+ * Matches Login's split-panel layout.
+ * Backend: POST /api/auth/signup  →  { name, email, password }
+ */
+
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { Eye, EyeOff, UserPlus } from 'lucide-react';
+import { authApi } from '../api/ApiClient';
+import Button    from '../components/Button';
+import FormField from '../components/FormField';
+import { useToast } from '../components/Toast';
+
+export default function Register() {
+  const [name,     setName]     = useState('');
+  const [email,    setEmail]    = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm,  setConfirm]  = useState('');
+  const [showPwd,  setShowPwd]  = useState(false);
+  const [loading,  setLoading]  = useState(false);
+  const [errors,   setErrors]   = useState({});
+  const navigate = useNavigate();
+  const toast    = useToast();
+
+  const validate = () => {
+    const e = {};
+    if (!name.trim())                    e.name     = 'Full name is required';
+    if (!email.trim())                   e.email    = 'Email is required';
+    else if (!/\S+@\S+\.\S+/.test(email)) e.email   = 'Enter a valid email';
+    if (!password)                       e.password = 'Password is required';
+    else if (password.length < 6)        e.password = 'Minimum 6 characters';
+    if (!confirm)                        e.confirm  = 'Please confirm your password';
+    else if (confirm !== password)       e.confirm  = 'Passwords do not match';
+    setErrors(e);
+    return Object.keys(e).length === 0;
+  };
+
+  const handleRegister = async () => {
+    if (!validate()) return;
+    try {
+      setLoading(true);
+      const data = await authApi.signup({
+        name:     name.trim(),
+        email:    email.trim(),
+        password: password,
+      });
+
+      localStorage.setItem('token', data.data?.accessToken ?? '');
+      localStorage.setItem('user',  JSON.stringify(data.data?.user ?? {}));
+
+      toast.success('Account created — welcome!');
+      navigate('/dashboard/overview');
+    } catch (err) {
+      toast.error(err.message ?? 'Registration failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKey = (e) => { if (e.key === 'Enter') handleRegister(); };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-[760px] flex rounded-none h-[540px] overflow-hidden ">
+
+        {/* ── Left panel ── */}
+        <div className="hidden sm:flex bg-[#008A75] flex-col w-5/12 p-10 text-white">
+          <div className="mb-auto">
+            <div className="flex items-center gap-2 mb-1">
+              <img src="/logo.png" alt="EPMS" className="w-8 h-10" />
+              <h1 className="text-[22px] font-bold tracking-tight mt-3">EPMS</h1>
+            </div>
+            <p className="text-[10px] text-white/60 font-medium uppercase tracking-widest">Employee Payroll Management System</p>
+          </div>
+
+          <div className="mt-10">
+            <p className="text-[18px] font-semibold leading-snug">
+              Get started today.<br />
+              <span className="text-white/60">Your team awaits.</span>
+            </p>
+            <p className="text-[12px] text-white/50 mt-3 leading-relaxed">
+              Create your admin account and start managing employees, departments, and payroll.
+            </p>
+          </div>
+
+          <div className="mt-auto pt-10 border-t border-white/20">
+            <p className="text-[11px] text-white/40">
+              © {new Date().getFullYear()} EPMS · All rights reserved
+            </p>
+          </div>
+        </div>
+
+        {/* ── Right panel ── */}
+        <div className="flex-1 p-8 sm:p-10 flex flex-col justify-center overflow-y-auto">
+          <div className="mb-6">
+            <h2 className="text-[20px] font-bold text-gray-800">Create account</h2>
+            <p className="text-[13px] text-gray-400 mt-1">
+              Already have an account?{' '}
+              <Link to="/login" className="text-[#008A75] font-semibold hover:underline">
+                Sign in
+              </Link>
+            </p>
+          </div>
+
+          <div className="space-y-3">
+            <FormField label="Full name" required error={errors.name}>
+              <FormField.Input
+                type="text"
+                value={name}
+                onChange={(v) => setName(v)}
+                placeholder="Jane Doe"
+                onKeyDown={handleKey}
+                autoComplete="name"
+                className='rounded-none'
+              />
+            </FormField>
+
+            <FormField label="Email address" required error={errors.email}>
+              <FormField.Input
+                type="email"
+                value={email}
+                onChange={(v) => setEmail(v)}
+                placeholder="you@company.com"
+                onKeyDown={handleKey}
+                autoComplete="email"
+                className='rounded-none'
+              />
+            </FormField>
+
+            <FormField label="Password" required error={errors.password}>
+              <div className="relative">
+                <FormField.Input
+                  type={showPwd ? 'text' : 'password'}
+                  value={password}
+                  onChange={(v) => setPassword(v)}
+                  placeholder="Min. 6 characters"
+                  onKeyDown={handleKey}
+                  autoComplete="new-password"
+                  className="pr-10 rounded-none"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPwd((v) => !v)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+                >
+                  {showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
+            </FormField>
+
+            <FormField label="Confirm password" required error={errors.confirm}>
+              <FormField.Input
+                type={showPwd ? 'text' : 'password'}
+                value={confirm}
+                onChange={(v) => setConfirm(v)}
+                placeholder="Repeat your password"
+                onKeyDown={handleKey}
+                autoComplete="new-password"
+                className='rounded-none'
+              />
+            </FormField>
+          </div>
+
+          <Button
+            className="mt-5 rounded-none"
+            fullWidth
+            size="lg"
+            loading={loading}
+            icon={<UserPlus className="w-4 h-4" />}
+            onClick={handleRegister}
+          >
+            Create account
+          </Button>
+
+          <p className="text-[11px] text-gray-400 text-center mt-4">
+            Protected by JWT authentication
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend-project/src/Intro.jsx

@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+export default function Intro() {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const token = localStorage.getItem('token')
+      navigate(token ? '/dashboard/overview' : '/login', { replace: true })
+    }, 2800)
+    return () => clearTimeout(timer)
+  }, [navigate])
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-white">
+      <div className="flex flex-col items-center gap-6">
+        <img src="/logo.png" alt="EPMS" className="w-16 h-20" />
+
+        <div className="flex flex-col items-center">
+          <span className="text-4xl font-bold tracking-tight text-zinc-800">
+            EP<span className="text-[#008A75]">MS</span>
+          </span>
+          <span className="text-xs text-zinc-800/60 font-medium uppercase tracking-[0.2em] mt-1">
+            Employee Payroll Management System
+          </span>
+        </div>
+
+        <div className="w-6 h-6 border-2 border-zinc-200 border-t-[#008A75] rounded-full animate-spin mt-2" />
+      </div>
+    </div>
+  )
+}

package/frontend-project/src/LayOut.jsx

@@ -0,0 +1,38 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  🏗️  LAYOUT  —  The app shell (reads config, picks the right layout)
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  WHAT THIS FILE DOES:
+//    1. Reads your config.js settings
+//    2. Applies the chosen theme as CSS variables on the root div
+//    3. Renders the correct navigation layout (top or bottom)
+//
+//  HOW TO CUSTOMIZE:
+//    Change config.js values and everything updates automatically.
+//    - navigation: 'topnav' | 'bottomnav'
+//    - theme:      any theme name from themes.js
+//    - rounded:    'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+//    - fontSize:   'normal' | 'large'
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+import React from 'react';
+import { config } from './config';
+import { getDesignTokens } from './design';
+import TopNav from './layouts/TopNav';
+import BottomNav from './layouts/BottomNav';
+
+export default function Layout() {
+  // ─── Read config and generate design tokens ───────────────────────────────
+  const tokens = getDesignTokens(config);
+
+  // ─── Apply CSS variables as inline styles on the root wrapper ─────────────
+  //  Every child component can use:  var(--color-primary), var(--radius), etc.
+  //
+  return (
+    <div style={tokens.cssVars}>
+      {/* Pick the right navigation layout based on config */}
+      {config.navigation === 'bottomnav' ? <BottomNav /> : <TopNav />}
+    </div>
+  );
+}