create-ishvexa-app 1.0.0

package/templates/sfms-app/frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "sfms-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.2",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "vite": "^5.4.8"
+  }
+}

package/templates/sfms-app/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/sfms-app/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="#0d9488"/>
+  <path d="M8 12h16M8 16h12M8 20h14" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/templates/sfms-app/frontend/src/App.jsx

@@ -0,0 +1,38 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { useAuth } from './context/AuthContext.jsx';
+import { AppLayout } from './components/AppLayout.jsx';
+import { LoginPage } from './pages/LoginPage.jsx';
+import { ForgotPassword } from './pages/ForgotPassword.jsx';
+import { DashboardPage } from './pages/DashboardPage.jsx';
+import { StudentsPage } from './pages/StudentsPage.jsx';
+import { PaymentsPage } from './pages/PaymentsPage.jsx';
+import { ReportsPage } from './pages/ReportsPage.jsx';
+
+function PrivateRoute({ children }) {
+  const { isAuthenticated } = useAuth();
+  if (!isAuthenticated) return <Navigate to="/login" replace />;
+  return children;
+}
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/forgot-password" element={<ForgotPassword />} />
+      <Route
+        path="/"
+        element={
+          <PrivateRoute>
+            <AppLayout />
+          </PrivateRoute>
+        }
+      >
+        <Route index element={<DashboardPage />} />
+        <Route path="students" element={<StudentsPage />} />
+        <Route path="payments" element={<PaymentsPage />} />
+        <Route path="reports" element={<ReportsPage />} />
+      </Route>
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

package/templates/sfms-app/frontend/src/api/apiClient.js

@@ -0,0 +1,54 @@
+/** HTTP client with JWT for SFMS API */
+
+const API_BASE = (import.meta.env.VITE_API_BASE_URL || '').replace(/\/+$/, '');
+
+function apiUrl(path) {
+  if (path.startsWith('http')) return path;
+  const p = path.startsWith('/') ? path : `/${path}`;
+  return API_BASE ? `${API_BASE}${p}` : p;
+}
+
+function getToken() {
+  return localStorage.getItem('sfms_token');
+}
+
+export async function apiRequest(path, { method = 'GET', body, headers = {} } = {}) {
+  const opts = {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+  };
+  const token = getToken();
+  if (token) opts.headers.Authorization = `Bearer ${token}`;
+  if (body !== undefined) opts.body = body;
+
+  let resp;
+  try {
+    resp = await fetch(apiUrl(path), opts);
+  } catch {
+    throw new Error(
+      'Cannot reach the API server. Start one backend: cd backend-mysql && npm run dev (or backend-mongodb)'
+    );
+  }
+
+  const text = await resp.text();
+  let data = null;
+  try {
+    data = text ? JSON.parse(text) : null;
+  } catch {
+    data = { message: text || 'Request error' };
+  }
+
+  if (!resp.ok) {
+    if (resp.status === 502 || resp.status === 504) {
+      throw new Error(
+        'API server is not running. Start: cd backend-mysql && npm run dev (or backend-mongodb)'
+      );
+    }
+    const msg = data?.message || `Error ${resp.status}`;
+    throw new Error(msg);
+  }
+  return data;
+}

package/templates/sfms-app/frontend/src/components/AppLayout.jsx

@@ -0,0 +1,61 @@
+import { NavLink, Outlet } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext.jsx';
+
+const navItems = [
+  { to: '/', label: 'Dashboard' },
+  { to: '/students', label: 'Students' },
+  { to: '/payments', label: 'Payments' },
+  { to: '/reports', label: 'Reports' },
+];
+
+export function AppLayout() {
+  const { user, logout } = useAuth();
+
+  return (
+    <div className="min-h-screen flex flex-col md:flex-row bg-slate-50">
+      <aside className="w-full md:w-56 shrink-0 bg-sfms-ink text-white md:min-h-screen flex flex-col">
+        <div className="p-5 border-b border-white/10">
+          <p className="font-display font-bold text-lg tracking-tight">SFMS</p>
+          <p className="text-xs text-teal-200/90 mt-0.5">School fee management</p>
+        </div>
+        <nav className="flex md:flex-col gap-1 p-3 overflow-x-auto md:overflow-visible">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              className={({ isActive }) =>
+                `px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${
+                  isActive ? 'bg-teal-600 text-white' : 'text-slate-300 hover:bg-white/10'
+                }`
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="mt-auto p-4 border-t border-white/10 hidden md:block">
+          <p className="text-xs text-slate-400 truncate" title={user?.email}>
+            {user?.name}
+          </p>
+          <button
+            type="button"
+            onClick={logout}
+            className="mt-2 w-full text-left text-sm text-teal-300 hover:text-white"
+          >
+            Log out
+          </button>
+        </div>
+      </aside>
+      <main className="flex-1 p-4 md:p-8 max-w-6xl w-full mx-auto">
+        <header className="flex justify-between items-center mb-6 md:hidden">
+          <span className="font-display font-semibold text-sfms-ink">SFMS</span>
+          <button type="button" onClick={logout} className="text-sm text-teal-700 font-medium">
+            Log out
+          </button>
+        </header>
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/templates/sfms-app/frontend/src/context/AuthContext.jsx

@@ -0,0 +1,87 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { apiRequest } from '../api/apiClient.js';
+
+const AuthContext = createContext(null);
+
+const TOKEN_KEY = 'sfms_token';
+const USER_KEY = 'sfms_user';
+
+export function AuthProvider({ children }) {
+  const [token, setToken] = useState(() => localStorage.getItem(TOKEN_KEY));
+  const [user, setUser] = useState(() => {
+    const raw = localStorage.getItem(USER_KEY);
+    try {
+      return raw ? JSON.parse(raw) : null;
+    } catch {
+      return null;
+    }
+  });
+
+  useEffect(() => {
+    if (token) localStorage.setItem(TOKEN_KEY, token);
+    else localStorage.removeItem(TOKEN_KEY);
+  }, [token]);
+
+  useEffect(() => {
+    if (user) localStorage.setItem(USER_KEY, JSON.stringify(user));
+    else localStorage.removeItem(USER_KEY);
+  }, [user]);
+
+  const login = useCallback(async (username, password) => {
+    const data = await apiRequest('/api/auth/login', {
+      method: 'POST',
+      body: JSON.stringify({ username, password }),
+    });
+    setToken(data.token);
+    setUser(data.user);
+    return data;
+  }, []);
+
+  const register = useCallback(async (username, email, password, role) => {
+    const data = await apiRequest('/api/auth/register', {
+      method: 'POST',
+      body: JSON.stringify({
+        username,
+        email,
+        password,
+        role: role || 'admin',
+      }),
+    });
+    setToken(data.token);
+    setUser(data.user);
+    return data;
+  }, []);
+
+  const forgotPassword = useCallback(async (payload) => {
+    return apiRequest('/api/auth/forgot-password', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+  }, []);
+
+  const logout = useCallback(() => {
+    setToken(null);
+    setUser(null);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      token,
+      user,
+      login,
+      register,
+      forgotPassword,
+      logout,
+      isAuthenticated: Boolean(token),
+    }),
+    [token, user, login, register, forgotPassword, logout]
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used inside AuthProvider');
+  return ctx;
+}

package/templates/sfms-app/frontend/src/index.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-slate-50 text-slate-900 min-h-screen;
+}

package/templates/sfms-app/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 App from './App.jsx';
+import { AuthProvider } from './context/AuthContext.jsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/sfms-app/frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { apiRequest } from '../api/apiClient.js';
+
+export function DashboardPage() {
+  const [studentCount, setStudentCount] = useState(null);
+  const [paymentCount, setPaymentCount] = useState(null);
+  const [totalPaid, setTotalPaid] = useState(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const [students, payments] = await Promise.all([
+          apiRequest('/api/students'),
+          apiRequest('/api/payments'),
+        ]);
+        if (cancelled) return;
+        setStudentCount(students.length);
+        setPaymentCount(payments.length);
+        setTotalPaid(payments.reduce((sum, p) => sum + (Number(p.amount) || 0), 0));
+      } catch (e) {
+        if (!cancelled) setError(e.message);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const cards = [
+    {
+      label: 'Students',
+      value: studentCount ?? '—',
+      to: '/students',
+      tone: 'bg-teal-50 text-teal-800',
+    },
+    {
+      label: 'Payments',
+      value: paymentCount ?? '—',
+      to: '/payments',
+      tone: 'bg-emerald-50 text-emerald-800',
+    },
+    {
+      label: 'Total paid',
+      value: totalPaid != null ? `${totalPaid.toLocaleString()} FRW` : '—',
+      to: '/reports',
+      tone: 'bg-cyan-50 text-cyan-900',
+    },
+  ];
+
+  return (
+    <div>
+      <h1 className="font-display text-2xl font-bold text-sfms-ink">Dashboard</h1>
+      <p className="text-slate-600 mt-1 text-sm">Overview of school fee data.</p>
+
+      {error && (
+        <p className="mt-4 text-sm text-amber-700 bg-amber-50 border border-amber-100 rounded-lg px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      <div className="grid sm:grid-cols-3 gap-4 mt-8">
+        {cards.map((c) => (
+          <Link
+            key={c.label}
+            to={c.to}
+            className={`rounded-xl p-5 border border-slate-100 shadow-sm hover:shadow-md transition ${c.tone}`}
+          >
+            <p className="text-sm font-medium opacity-80">{c.label}</p>
+            <p className="text-2xl font-bold mt-2">{c.value}</p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/sfms-app/frontend/src/pages/ForgotPassword.jsx

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext.jsx';
+
+export function ForgotPassword() {
+  const { forgotPassword } = useAuth();
+  const navigate = useNavigate();
+  const [form, setForm] = useState({ email: '', newPassword: '', confirmPassword: '' });
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  function validate() {
+    const err = {};
+    const email = form.email.trim();
+    if (!email) err.email = 'Email is required';
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) err.email = 'Invalid email';
+    if (!form.newPassword) err.newPassword = 'New password is required';
+    else if (form.newPassword.length < 6) err.newPassword = 'At least 6 characters';
+    if (!form.confirmPassword) err.confirmPassword = 'Confirm password is required';
+    else if (form.newPassword && form.newPassword !== form.confirmPassword) {
+      err.confirmPassword = 'Passwords must match';
+    }
+    setFieldErrors(err);
+    return Object.keys(err).length === 0;
+  }
+
+  async function onSubmit(e) {
+    e.preventDefault();
+    setError('');
+    setMessage('');
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      const data = await forgotPassword({
+        email: form.email.trim(),
+        newPassword: form.newPassword,
+        confirmPassword: form.confirmPassword,
+      });
+      setMessage(data.message || 'Password reset successfully.');
+      setTimeout(() => navigate('/login', { replace: true }), 2000);
+    } catch (err) {
+      setError(err.message || 'Request failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 border border-slate-100">
+        <h1 className="font-display text-2xl font-bold text-sfms-ink text-center">Reset Password</h1>
+        <p className="text-center text-slate-500 text-sm mt-1 mb-6">Enter your email and new password</p>
+        {error && (
+          <div className="mb-4 text-sm text-red-600 bg-red-50 border border-red-100 rounded-lg px-3 py-2">
+            {error}
+          </div>
+        )}
+        {message && (
+          <div className="mb-4 text-sm text-green-700 bg-green-50 border border-green-100 rounded-lg px-3 py-2">
+            {message}
+          </div>
+        )}
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
+            <input
+              type="email"
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+              className="w-full rounded-lg border border-slate-200 px-3 py-2 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none"
+            />
+            {fieldErrors.email && <p className="text-xs text-red-600 mt-1">{fieldErrors.email}</p>}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">New password</label>
+            <input
+              type="password"
+              value={form.newPassword}
+              onChange={(e) => setForm({ ...form, newPassword: e.target.value })}
+              className="w-full rounded-lg border border-slate-200 px-3 py-2 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none"
+            />
+            {fieldErrors.newPassword && (
+              <p className="text-xs text-red-600 mt-1">{fieldErrors.newPassword}</p>
+            )}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Confirm password</label>
+            <input
+              type="password"
+              value={form.confirmPassword}
+              onChange={(e) => setForm({ ...form, confirmPassword: e.target.value })}
+              className="w-full rounded-lg border border-slate-200 px-3 py-2 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none"
+            />
+            {fieldErrors.confirmPassword && (
+              <p className="text-xs text-red-600 mt-1">{fieldErrors.confirmPassword}</p>
+            )}
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-2.5 rounded-lg bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm disabled:opacity-60 transition"
+          >
+            {loading ? 'Please wait…' : 'Reset password'}
+          </button>
+        </form>
+        <Link to="/login" className="mt-4 block text-center text-sm text-slate-600 hover:text-teal-700">
+          Back to login
+        </Link>
+      </div>
+    </div>
+  );
+}

package/templates/sfms-app/frontend/src/pages/LoginPage.jsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { Link, Navigate, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext.jsx';
+
+export function LoginPage() {
+  const { isAuthenticated, login, register } = useAuth();
+  const navigate = useNavigate();
+  const [mode, setMode] = useState('login');
+  const [form, setForm] = useState({ username: '', email: '', password: '' });
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [formError, setFormError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  if (isAuthenticated) return <Navigate to="/" replace />;
+
+  function validate() {
+    const err = {};
+    if (!form.username.trim()) err.username = 'Username is required';
+    if (mode === 'register') {
+      if (!form.email.trim()) err.email = 'Email is required';
+      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) err.email = 'Invalid email';
+    }
+    if (!form.password || form.password.length < 6) err.password = 'At least 6 characters';
+    setFieldErrors(err);
+    return Object.keys(err).length === 0;
+  }
+
+  async function onSubmit(e) {
+    e.preventDefault();
+    setFormError('');
+    if (!validate()) return;
+    setSubmitting(true);
+    try {
+      if (mode === 'login') await login(form.username.trim(), form.password);
+      else await register(form.username.trim(), form.email.trim(), form.password, 'admin');
+      navigate('/', { replace: true });
+    } catch (err) {
+      setFormError(err.message || 'Something went wrong');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 ">
+      <div className="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 border border-slate-100">
+        <h1 className="font-display text-2xl font-bold text-sfms-ink text-center">SFMS</h1>
+        <p className="text-center text-slate-500 text-sm mt-1 mb-6">
+          {mode === 'login' ? 'Sign in to continue' : 'Create an admin account'}
+        </p>
+
+        <div className="flex rounded-lg bg-slate-100 p-1 mb-6">
+          <button
+            type="button"
+            className={`flex-1 py-2 text-sm font-medium rounded-md transition ${
+              mode === 'login' ? 'bg-white shadow text-sfms-ink' : 'text-slate-600'
+            }`}
+            onClick={() => {
+              setMode('login');
+              setFieldErrors({});
+              setFormError('');
+            }}
+          >
+            Login
+          </button>
+          <button
+            type="button"
+            className={`flex-1 py-2 text-sm font-medium rounded-md transition ${
+              mode === 'register' ? 'bg-white shadow text-sfms-ink' : 'text-slate-600'
+            }`}
+            onClick={() => {
+              setMode('register');
+              setFieldErrors({});
+              setFormError('');
+            }}
+          >
+            Register
+          </button>
+        </div>
+
+        {formError && (
+          <div className="mb-4 text-sm text-red-600 bg-red-50 border border-red-100 rounded-lg px-3 py-2">
+            {formError}
+          </div>
+        )}
+
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Username</label>
+            <input
+              type="text"
+              value={form.username}
+              onChange={(e) => setForm({ ...form, username: e.target.value })}
+              className="w-full rounded-lg border border-slate-200 px-3 py-2 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none"
+              autoComplete="username"
+            />
+            {fieldErrors.username && <p className="text-xs text-red-600 mt-1">{fieldErrors.username}</p>}
+          </div>
+          {mode === 'register' && (
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
+              <input
+                type="email"
+                value={form.email}
+                onChange={(e) => setForm({ ...form, email: e.target.value })}
+                className="w-full rounded-lg border border-slate-200 px-3 py-2 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none"
+                autoComplete="email"
+              />
+              {fieldErrors.email && <p className="text-xs text-red-600 mt-1">{fieldErrors.email}</p>}
+            </div>
+          )}
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Password</label>
+            <input
+              type="password"
+              value={form.password}
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+              className="w-full rounded-lg border border-slate-200 px-3 py-2 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none"
+              autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
+            />
+            {fieldErrors.password && (
+              <p className="text-xs text-red-600 mt-1">{fieldErrors.password}</p>
+            )}
+          </div>
+          <button
+            type="submit"
+            disabled={submitting}
+            className="w-full py-2.5 rounded-lg bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm disabled:opacity-60 transition"
+          >
+            {submitting ? 'Please wait…' : mode === 'login' ? 'Sign in' : 'Create account'}
+          </button>
+        </form>
+        {mode === 'login' && (
+          <Link to="/forgot-password" className="mt-4 block text-center text-sm text-slate-600 hover:text-teal-700">
+            Forgot password?
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}