create-steve-rogers 1.0.1 → 1.0.2

package/apps/SFMS/frontend/src/pages/LoginPage.jsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { Navigate, useNavigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext.jsx';
+
+export function LoginPage() {
+  const { isAuthenticated, login, register } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = location.state?.from;
+  const returnPath = from?.pathname ? `${from.pathname}${from.search || ''}` : '/';
+
+  const [mode, setMode] = useState('login');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [formError, setFormError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  if (isAuthenticated) return <Navigate to={returnPath} replace />;
+
+  function validate() {
+    const err = {};
+    if (!email.trim()) err.email = 'Email is required';
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) err.email = 'Invalid email';
+    if (!password || password.length < 6) err.password = 'At least 6 characters';
+    if (mode === 'register' && !name.trim()) err.name = 'Name is required';
+    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(email.trim(), password);
+      else await register(name.trim(), email.trim(), password, 'admin');
+      navigate(returnPath, { replace: true });
+    } catch (err) {
+      setFormError(err.message || 'Something went wrong');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <div className="auth-split">
+          <section className="auth-panel">
+            <p className="text-sm uppercase tracking-[0.3em] text-slate-500">School fee system</p>
+            <h1 className="mt-4 text-4xl font-display font-bold text-slate-900">Access your SFMS dashboard</h1>
+            <p className="mt-3 text-slate-600 leading-7">Sign in to track students, payments, and reports in one clean workspace.</p>
+
+            <div className="auth-switcher mt-8">
+              <button
+                type="button"
+                className={mode === 'login' ? 'active' : ''}
+                onClick={() => {
+                  setMode('login');
+                  setFieldErrors({});
+                  setFormError('');
+                }}
+              >
+                Login
+              </button>
+              <button
+                type="button"
+                className={mode === 'register' ? 'active' : ''}
+                onClick={() => {
+                  setMode('register');
+                  setFieldErrors({});
+                  setFormError('');
+                }}
+              >
+                Register
+              </button>
+            </div>
+
+            {formError && (
+              <div className="mt-6 rounded-3xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
+                {formError}
+              </div>
+            )}
+
+            <form onSubmit={onSubmit} className="mt-6 space-y-5">
+              {mode === 'register' && (
+                <div className="input-group">
+                  <label className="text-sm font-medium text-slate-700">Full name</label>
+                  <input
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="input-field"
+                    autoComplete="name"
+                  />
+                  {fieldErrors.name && <p className="text-xs text-red-600">{fieldErrors.name}</p>}
+                </div>
+              )}
+              <div className="input-group">
+                <label className="text-sm font-medium text-slate-700">Email</label>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="input-field"
+                  autoComplete="email"
+                />
+                {fieldErrors.email && <p className="text-xs text-red-600">{fieldErrors.email}</p>}
+              </div>
+              <div className="input-group">
+                <label className="text-sm font-medium text-slate-700">Password</label>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="input-field"
+                  autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
+                />
+                {fieldErrors.password && <p className="text-xs text-red-600">{fieldErrors.password}</p>}
+              </div>
+              <button type="submit" disabled={submitting} className="btn-primary w-full">
+                {submitting ? 'Please wait…' : mode === 'login' ? 'Sign in' : 'Create account'}
+              </button>
+            </form>
+          </section>
+          <aside className="auth-side">
+            <p className="auth-logo">SFMS</p>
+            <p className="auth-copy">
+              A modern school fee experience with calm colors, spacious forms, and clear navigation.
+            </p>
+            <p className="text-sm text-slate-100/80">
+              Keep student records clean, track every payment, and build reports without clutter.
+            </p>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/SFMS/frontend/src/pages/PaymentsPage.jsx

@@ -0,0 +1,269 @@
+import { useEffect, useState } from 'react';
+import { apiRequest } from '../api/apiClient.js';
+
+const inputClass = 'input-field';
+
+export function PaymentsPage() {
+  const [list, setList] = useState([]);
+  const [students, setStudents] = useState([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [formTarget, setFormTarget] = useState(null);
+
+  const [studentId, setStudentId] = useState('');
+  const [amount, setAmount] = useState('');
+  const [paymentDate, setPaymentDate] = useState('');
+  const [fieldErrors, setFieldErrors] = useState({});
+
+  async function load() {
+    setError('');
+    try {
+      const [pay, stud] = await Promise.all([
+        apiRequest('/api/payments'),
+        apiRequest('/api/students'),
+      ]);
+      setList(pay);
+      setStudents(stud);
+    } catch (e) {
+      setError(e.message);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  function validate() {
+    const err = {};
+    if (!studentId) err.studentId = 'Select a student';
+    if (!amount.trim()) {
+      err.amount = 'Amount is required';
+    } else if (!/^[0-9]+$/.test(amount)) {
+      err.amount = 'Amount must contain only digits';
+    } else if (Number(amount) < 0) {
+      err.amount = 'Amount must be zero or greater';
+    }
+    if (!paymentDate) err.paymentDate = 'Pick a date';
+    setFieldErrors(err);
+    return Object.keys(err).length === 0;
+  }
+
+  function openNew() {
+    setFormTarget('new');
+    setStudentId(students[0]?.id || '');
+    setAmount('');
+    setPaymentDate(new Date().toISOString().slice(0, 10));
+    setFieldErrors({});
+  }
+
+  function openEdit(row) {
+    setFormTarget(row);
+    setStudentId(row.student_id || '');
+    setAmount(String(row.amount ?? ''));
+    setPaymentDate(row.payment_date?.slice(0, 10) || '');
+    setFieldErrors({});
+  }
+
+  function closeForm() {
+    setFormTarget(null);
+    setFieldErrors({});
+  }
+
+  async function save(e) {
+    e.preventDefault();
+    if (!validate()) return;
+    setSubmitting(true);
+    setError('');
+    try {
+      const payload = {
+        student_id: studentId,
+        amount: Number(amount),
+        payment_date: paymentDate,
+      };
+      if (formTarget !== 'new' && formTarget?.id) {
+        await apiRequest(`/api/payments/${formTarget.id}`, {
+          method: 'PUT',
+          body: JSON.stringify(payload),
+        });
+      } else {
+        await apiRequest('/api/payments', { method: 'POST', body: JSON.stringify(payload) });
+      }
+      closeForm();
+      await load();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function remove(id) {
+    if (!window.confirm('Delete this payment record?')) return;
+    try {
+      await apiRequest(`/api/payments/${id}`, { method: 'DELETE' });
+      await load();
+    } catch (e) {
+      setError(e.message);
+    }
+  }
+
+  return (
+    <div>
+      <div className="app-header">
+        <p className="text-sm uppercase tracking-[0.3em] text-slate-500">Payments</p>
+        <h1 className="page-title">Fee transactions</h1>
+        <p className="page-subtitle">Record each payment and keep your financial view tidy.</p>
+      </div>
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div className="space-y-1">
+          <p className="text-base font-semibold text-slate-900">Payments ledger</p>
+          <p className="text-sm text-slate-500">Create new entries or update existing ones quickly.</p>
+        </div>
+        <button type="button" onClick={openNew} disabled={students.length === 0} className="btn-primary w-full sm:w-auto disabled:opacity-50">
+          + New payment
+        </button>
+      </div>
+
+      {students.length === 0 && (
+        <div className="mb-6 rounded-[28px] border border-amber-100 bg-amber-50 px-4 py-4 text-sm text-amber-800">
+          Add at least one student before recording payments.
+        </div>
+      )}
+
+      {error && (
+        <div className="mb-6 rounded-[28px] border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      {formTarget === 'new' && (
+        <form onSubmit={save} className="form-card mb-8 max-w-2xl space-y-5">
+          <div className="flex items-center justify-between gap-4">
+            <h2 className="text-xl font-semibold text-slate-900">New payment</h2>
+            <button type="button" onClick={closeForm} className="btn-secondary">
+              Close
+            </button>
+          </div>
+          <div className="grid gap-4 md:grid-cols-3">
+            <div className="input-group">
+              <label className="text-sm font-medium text-slate-700">Student</label>
+              <select className={inputClass} value={studentId} onChange={(e) => setStudentId(e.target.value)}>
+                {students.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.full_name} — {s.class}
+                  </option>
+                ))}
+              </select>
+              {fieldErrors.studentId && <p className="text-xs text-red-600">{fieldErrors.studentId}</p>}
+            </div>
+            <div className="input-group">
+              <label className="text-sm font-medium text-slate-700">Amount</label>
+              <input
+                type="text"
+                inputMode="numeric"
+                className={inputClass}
+                value={amount}
+                onChange={(e) => setAmount(e.target.value.replace(/\D/g, ''))}
+                placeholder="Numbers only"
+              />
+              {fieldErrors.amount && <p className="text-xs text-red-600">{fieldErrors.amount}</p>}
+            </div>
+            <div className="input-group">
+              <label className="text-sm font-medium text-slate-700">Payment date</label>
+              <input type="date" className={inputClass} value={paymentDate} onChange={(e) => setPaymentDate(e.target.value)} />
+              {fieldErrors.paymentDate && <p className="text-xs text-red-600">{fieldErrors.paymentDate}</p>}
+            </div>
+          </div>
+          <div className="form-actions">
+            <button type="submit" disabled={submitting} className="btn-primary">
+              {submitting ? 'Saving…' : 'Save'}
+            </button>
+            <button type="button" onClick={closeForm} className="btn-secondary">
+              Cancel
+            </button>
+          </div>
+        </form>
+      )}
+
+      <div className="table-shell">
+        <table className="min-w-full text-sm">
+          <thead className="table-head text-left">
+            <tr>
+              <th className="table-cell font-medium">Student</th>
+              <th className="table-cell font-medium">Amount</th>
+              <th className="table-cell font-medium">Date</th>
+              <th className="table-cell font-medium">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {list.map((p) => (
+              <tr key={p.id} className="table-row">
+                <td className="table-cell">
+                  {p.student?.full_name || '—'} <span className="text-slate-500">({p.student?.class || '—'})</span>
+                </td>
+                <td className="table-cell font-semibold">{Number(p.amount).toLocaleString()} FRW</td>
+                <td className="table-cell">{p.payment_date}</td>
+                <td className="table-cell space-x-2 whitespace-nowrap">
+                  <button type="button" className="btn-secondary" onClick={() => openEdit(p)}>
+                    Edit
+                  </button>
+                  <button type="button" className="btn-destructive" onClick={() => remove(p.id)}>
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {list.length === 0 && <p className="placeholder-card">No payments recorded.</p>}
+      </div>
+
+      {formTarget && formTarget !== 'new' && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50" onClick={(e) => e.target === e.currentTarget && closeForm()} role="presentation">
+          <div className="form-card max-w-md w-full" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
+            <div className="flex items-center justify-between gap-4 mb-4">
+              <h2 className="text-xl font-semibold text-slate-900">Edit payment</h2>
+              <button type="button" onClick={closeForm} className="btn-secondary">
+                Close
+              </button>
+            </div>
+            <form onSubmit={save} className="space-y-4">
+              <div className="input-group">
+                <label className="text-sm font-medium text-slate-700">Student</label>
+                <select className={inputClass} value={studentId} onChange={(e) => setStudentId(e.target.value)}>
+                  {students.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.full_name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="input-group">
+                <label className="text-sm font-medium text-slate-700">Amount</label>
+                <input
+                  type="text"
+                  inputMode="numeric"
+                  className={inputClass}
+                  value={amount}
+                  onChange={(e) => setAmount(e.target.value.replace(/\D/g, ''))}
+                  placeholder="Numbers only"
+                />
+                {fieldErrors.amount && <p className="text-xs text-red-600">{fieldErrors.amount}</p>}
+              </div>
+              <div className="input-group">
+                <label className="text-sm font-medium text-slate-700">Date</label>
+                <input type="date" className={inputClass} value={paymentDate} onChange={(e) => setPaymentDate(e.target.value)} />
+              </div>
+              <div className="form-actions">
+                <button type="submit" disabled={submitting} className="btn-primary w-full">
+                  Save
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/SFMS/frontend/src/pages/ReportsPage.jsx

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { apiRequest } from '../api/apiClient.js';
+
+export function ReportsPage() {
+  const [start, setStart] = useState('');
+  const [end, setEnd] = useState('');
+  const [report, setReport] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [fieldErrors, setFieldErrors] = useState({});
+
+  function validate() {
+    const err = {};
+    if (!start) err.start = 'Start date is required';
+    if (!end) err.end = 'End date is required';
+    if (start && end && start > end) err.end = 'End date must be on or after start date';
+    setFieldErrors(err);
+    return Object.keys(err).length === 0;
+  }
+
+  async function onSubmit(e) {
+    e.preventDefault();
+    if (!validate()) return;
+    setLoading(true);
+    setError('');
+    setReport(null);
+    try {
+      const q = new URLSearchParams({ start, end });
+      const data = await apiRequest(`/api/reports?${q}`);
+      setReport(data);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div>
+      <div className="app-header">
+        <p className="text-sm uppercase tracking-[0.3em] text-slate-500">Reports</p>
+        <h1 className="page-title">Payment summaries</h1>
+        <p className="page-subtitle">Choose a date range and get a neat report of collected fees.</p>
+      </div>
+
+      <form onSubmit={onSubmit} className="form-card grid gap-5 md:grid-cols-[1.1fr_1.1fr_auto] items-end">
+        <div className="input-group">
+          <label className="text-sm font-medium text-slate-700">Start date</label>
+          <input
+            type="date"
+            value={start}
+            onChange={(e) => setStart(e.target.value)}
+            className="input-field"
+          />
+          {fieldErrors.start && <p className="text-xs text-red-600">{fieldErrors.start}</p>}
+        </div>
+        <div className="input-group">
+          <label className="text-sm font-medium text-slate-700">End date</label>
+          <input
+            type="date"
+            value={end}
+            onChange={(e) => setEnd(e.target.value)}
+            className="input-field"
+          />
+          {fieldErrors.end && <p className="text-xs text-red-600">{fieldErrors.end}</p>}
+        </div>
+        <button type="submit" disabled={loading} className="btn-primary h-14 w-full md:w-auto">
+          {loading ? 'Loading…' : 'Run report'}
+        </button>
+      </form>
+
+      {error && (
+        <div className="mt-4 rounded-[26px] border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      {report && (
+        <div className="mt-8 space-y-6">
+          <div className="panel-card-alt flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-slate-600 text-sm">
+              Showing results from <strong>{report.start}</strong> to <strong>{report.end}</strong>
+            </p>
+            <p className="text-lg font-display font-bold text-sfms-ink">
+              Total: {Number(report.total_amount_paid).toLocaleString()} FRW
+            </p>
+          </div>
+          <div className="table-shell">
+            <table className="min-w-full text-sm">
+              <thead className="table-head text-left">
+                <tr>
+                  <th className="table-cell font-medium">Student</th>
+                  <th className="table-cell font-medium">Class</th>
+                  <th className="table-cell font-medium">Amount</th>
+                  <th className="table-cell font-medium">Payment date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {report.payments.map((p) => (
+                  <tr key={p.id} className="table-row">
+                    <td className="table-cell">{p.student?.full_name || '—'}</td>
+                    <td className="table-cell">{p.student?.class || '—'}</td>
+                    <td className="table-cell font-semibold">{Number(p.amount).toLocaleString()} FRW</td>
+                    <td className="table-cell">{p.payment_date}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}