create-steve-rogers 1.0.0 → 1.0.2

package/apps/SFMS/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/apps/SFMS/frontend/postcss.config.js

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

package/apps/SFMS/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/apps/SFMS/frontend/src/App.jsx

@@ -0,0 +1,41 @@
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from './context/AuthContext.jsx';
+import { AppLayout } from './components/AppLayout.jsx';
+import { LoginPage } from './pages/LoginPage.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();
+  const location = useLocation();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return children;
+}
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <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/apps/SFMS/frontend/src/api/apiClient.js

@@ -0,0 +1,41 @@
+/** 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 sessionStorage.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;
+
+  const resp = await fetch(apiUrl(path), opts);
+  const text = await resp.text();
+  let data = null;
+  try {
+    data = text ? JSON.parse(text) : null;
+  } catch {
+    data = { message: text || 'Request error' };
+  }
+
+  if (!resp.ok) {
+    const msg = data?.message || `Error ${resp.status}`;
+    throw new Error(msg);
+  }
+  return data;
+}

package/apps/SFMS/frontend/src/components/AppLayout.jsx

@@ -0,0 +1,60 @@
+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="app-shell">
+      <aside className="app-sidebar">
+        <div className="app-brand">
+          <p className="app-brand-name">SFMS</p>
+          <p className="app-brand-subtitle">School fee management</p>
+        </div>
+        <nav className="app-nav">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              className={({ isActive }) =>
+                `app-nav-link ${isActive ? 'active' : ''}`
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="app-user-panel">
+          <p className="app-user-name" title={user?.email}>
+            {user?.name || 'Administrator'}
+          </p>
+          <button type="button" onClick={logout} className="app-user-action">
+            Log out
+          </button>
+        </div>
+      </aside>
+      <main className="app-content">
+        <div className="app-header panel-card">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div>
+              <p className="text-sm uppercase tracking-[0.35em] text-slate-500">Control center</p>
+              <h1 className="page-title">Manage school fees with clarity</h1>
+            </div>
+            <button type="button" onClick={logout} className="btn-secondary">
+              Sign out
+            </button>
+          </div>
+        </div>
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/apps/SFMS/frontend/src/context/AuthContext.jsx

@@ -0,0 +1,79 @@
+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(() => sessionStorage.getItem(TOKEN_KEY));
+  const [user, setUser] = useState(() => {
+    const raw = sessionStorage.getItem(USER_KEY);
+    try {
+      return raw ? JSON.parse(raw) : null;
+    } catch {
+      return null;
+    }
+  });
+
+  useEffect(() => {
+    if (token) sessionStorage.setItem(TOKEN_KEY, token);
+    else sessionStorage.removeItem(TOKEN_KEY);
+  }, [token]);
+
+  useEffect(() => {
+    if (user) sessionStorage.setItem(USER_KEY, JSON.stringify(user));
+    else sessionStorage.removeItem(USER_KEY);
+  }, [user]);
+
+  const login = useCallback(async (email, password) => {
+    const data = await apiRequest('/api/login', {
+      method: 'POST',
+      body: JSON.stringify({ email, password }),
+    });
+    setToken(data.token);
+    setUser(data.user);
+    return data;
+  }, []);
+
+  const register = useCallback(async (name, email, password, role) => {
+    const data = await apiRequest('/api/register', {
+      method: 'POST',
+      body: JSON.stringify({
+        name,
+        email,
+        password,
+        role: role || 'admin',
+      }),
+    });
+    setToken(data.token);
+    setUser(data.user);
+    return data;
+  }, []);
+
+  const logout = useCallback(() => {
+    setToken(null);
+    setUser(null);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      token,
+      user,
+      login,
+      register,
+      logout,
+      isAuthenticated: Boolean(token),
+    }),
+    [token, user, login, register, 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/apps/SFMS/frontend/src/index.css

@@ -0,0 +1,229 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    color-scheme: light;
+    --surface: #f8fafc;
+    --panel: rgba(255,255,255,0.94);
+    --border: rgba(148,163,184,0.24);
+    --text-title: #0f172a;
+    --text-body: #475569;
+    --accent: #0d9488;
+    --accent-dark: #0f766e;
+    --shadow-soft: 0 24px 80px rgba(15,23,42,0.08);
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply min-h-screen bg-slate-50 text-slate-900 antialiased;
+    background-image:
+      radial-gradient(circle at top left, rgba(13,148,136,0.18), transparent 24%),
+      radial-gradient(circle at bottom right, rgba(14,165,233,0.11), transparent 20%),
+      linear-gradient(180deg, #f8fbfd 0%, #f1f5f9 100%);
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+@layer components {
+  .app-shell {
+    @apply min-h-screen flex flex-col md:flex-row bg-transparent;
+  }
+
+  .app-sidebar {
+    @apply w-full md:w-72 flex-shrink-0 border backdrop-blur-xl shadow-sm;
+    border-color: rgba(148,163,184,0.7);
+    background-color: rgba(255,255,255,0.92);
+  }
+
+  .app-brand {
+    @apply p-6 border-b;
+    border-color: rgba(148,163,184,0.7);
+  }
+
+  .app-brand-name {
+    @apply font-display text-2xl font-extrabold tracking-tight text-slate-900;
+  }
+
+  .app-brand-subtitle {
+    @apply mt-1 text-sm text-slate-500;
+  }
+
+  .app-nav {
+    @apply p-4 flex flex-wrap gap-3;
+  }
+
+  .app-nav-link {
+    @apply rounded-full px-4 py-2 text-sm font-semibold text-slate-600 transition duration-200;
+  }
+
+  .app-nav-link:hover {
+    @apply bg-slate-100 text-slate-900;
+  }
+
+  .app-nav-link.active {
+    @apply bg-sfms-ink text-white shadow-lg;
+  }
+
+  .app-user-panel {
+    @apply mt-auto p-6 border-t;
+    border-color: rgba(148,163,184,0.7);
+  }
+
+  .app-user-name {
+    @apply text-sm text-slate-600 truncate;
+  }
+
+  .app-user-action {
+    @apply mt-3 w-full rounded-2xl border border-slate-300 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-100;
+  }
+
+  .app-content {
+    @apply flex-1 px-4 pb-8 pt-5 md:px-8 md:pt-8;
+  }
+
+  .app-header {
+    @apply mb-6;
+  }
+
+  .page-title {
+    @apply font-display text-3xl md:text-4xl font-bold text-slate-900 tracking-tight;
+  }
+
+  .page-subtitle {
+    @apply mt-3 text-slate-600 max-w-2xl leading-7;
+  }
+
+  .panel-card {
+    @apply rounded-[32px] border shadow-[0_24px_80px_rgba(15,23,42,0.08)] p-6;
+    border-color: rgba(148,163,184,0.8);
+    background-color: rgba(255,255,255,0.95);
+  }
+
+  .panel-card-alt {
+    @apply rounded-[32px] border p-6;
+    border-color: rgba(148,163,184,0.7);
+    background-color: rgba(248,250,252,0.9);
+  }
+
+  .stat-grid {
+    @apply grid gap-5 mt-8 sm:grid-cols-3;
+  }
+
+  .stat-card {
+    @apply rounded-[28px] border bg-gradient-to-br from-white to-slate-50 p-6 shadow-sm;
+    border-color: rgba(148,163,184,0.7);
+  }
+
+  .stat-label {
+    @apply text-xs font-semibold uppercase tracking-[0.24em] text-slate-500;
+  }
+
+  .stat-value {
+    @apply mt-4 text-3xl font-bold text-slate-900;
+  }
+
+  .stat-link {
+    @apply mt-5 inline-flex text-sm font-medium text-slate-600 transition hover:text-slate-900;
+  }
+
+  .form-card {
+    @apply rounded-[32px] border shadow-[0_20px_55px_rgba(15,23,42,0.06)] p-6;
+    border-color: rgba(148,163,184,0.8);
+    background-color: rgba(255,255,255,0.95);
+  }
+
+  .input-field {
+    @apply w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-slate-900 outline-none transition duration-200 focus:border-sfms-accent focus:ring-2 focus:ring-sfms-accent;
+  }
+
+  .input-group {
+    @apply space-y-2;
+  }
+
+  .form-actions {
+    @apply flex flex-wrap gap-3;
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center justify-center rounded-2xl bg-sfms-accent px-5 py-3 text-sm font-semibold text-white shadow-lg transition duration-200 hover:bg-sfms-accentDark;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center rounded-2xl border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-700 transition duration-200 hover:bg-slate-100;
+  }
+
+  .btn-destructive {
+    @apply inline-flex items-center justify-center rounded-2xl bg-red-600 px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:bg-red-700;
+  }
+
+  .table-shell {
+    @apply overflow-x-auto rounded-[28px] border border-slate-200 bg-white/95 shadow-sm;
+  }
+
+  .table-head {
+    @apply bg-slate-100 text-slate-600;
+  }
+
+  .table-row {
+    @apply border-t border-slate-100 transition duration-200 hover:bg-slate-50;
+  }
+
+  .table-cell {
+    @apply px-4 py-4;
+  }
+
+  .placeholder-card {
+    @apply rounded-[28px] border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center text-slate-500;
+  }
+
+  .auth-page {
+    @apply min-h-screen flex items-center justify-center px-4 py-10;
+  }
+
+  .auth-card {
+    @apply w-full max-w-4xl overflow-hidden rounded-[40px] border shadow-[0_30px_120px_rgba(15,23,42,0.12)];
+    border-color: rgba(148,163,184,0.8);
+    background-color: rgba(255,255,255,0.95);
+  }
+
+  .auth-split {
+    @apply grid gap-6 md:grid-cols-[1.1fr_0.9fr];
+  }
+
+  .auth-side {
+    @apply hidden md:flex flex-col justify-center gap-4 rounded-tr-[40px] rounded-br-[40px] bg-sfms-accent px-10 py-12 text-white;
+  }
+
+  .auth-logo {
+    @apply text-4xl font-display font-black;
+  }
+
+  .auth-copy {
+    @apply mt-4 text-sm leading-7;
+    color: rgba(241,245,249,0.9);
+  }
+
+  .auth-panel {
+    @apply p-8 sm:p-10;
+  }
+
+  .auth-switcher {
+    @apply flex gap-3 rounded-full bg-slate-100 p-1;
+  }
+
+  .auth-switcher button {
+    @apply flex-1 rounded-full px-4 py-2 text-sm font-semibold transition duration-200;
+  }
+
+  .auth-switcher button.active {
+    @apply bg-white text-slate-900 shadow-sm;
+  }
+}

package/apps/SFMS/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/apps/SFMS/frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,82 @@
+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',
+      accent: 'from-slate-50 to-slate-100',
+    },
+    {
+      label: 'Payments',
+      value: paymentCount ?? '—',
+      to: '/payments',
+      accent: 'from-slate-50 to-teal-50',
+    },
+    {
+      label: 'Total paid',
+      value: totalPaid != null ? `${totalPaid.toLocaleString()} FRW` : '—',
+      to: '/reports',
+      accent: 'from-slate-50 to-cyan-50',
+    },
+  ];
+
+  return (
+    <div>
+      <div className="app-header">
+        <p className="text-sm uppercase tracking-[0.3em] text-slate-500">Dashboard</p>
+        <h1 className="page-title">Overview for today</h1>
+        <p className="page-subtitle">Track the latest student count, payment volume, and total receipts at a glance.</p>
+      </div>
+
+      {error && (
+        <p className="mb-6 rounded-[28px] border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-700">
+          {error}
+        </p>
+      )}
+
+      <div className="stat-grid">
+        {cards.map((card) => (
+          <Link
+            key={card.label}
+            to={card.to}
+            className={`stat-card bg-gradient-to-br ${card.accent} border-slate-200`}
+          >
+            <p className="stat-label">{card.label}</p>
+            <p className="stat-value">{card.value}</p>
+            <span className="stat-link">Open details →</span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}