create-steve-rogers 1.0.1 → 1.0.2

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

@@ -0,0 +1,257 @@
+import { useEffect, useState } from 'react';
+import { apiRequest } from '../api/apiClient.js';
+
+const inputClass = 'input-field';
+
+export function StudentsPage() {
+  const [list, setList] = useState([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [formTarget, setFormTarget] = useState(null);
+
+  const [fullName, setFullName] = useState('');
+  const [className, setClassName] = useState('');
+  const [parentPhone, setParentPhone] = useState('');
+  const [fieldErrors, setFieldErrors] = useState({});
+
+  async function load() {
+    setError('');
+    try {
+      const data = await apiRequest('/api/students');
+      setList(data);
+    } catch (e) {
+      setError(e.message);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  function validate() {
+    const err = {};
+    if (!fullName.trim()) err.fullName = 'Required';
+    if (!className.trim()) err.className = 'Required';
+    if (!parentPhone.trim()) {
+      err.parentPhone = 'Required';
+    } else if (!/^[0-9]{1,10}$/.test(parentPhone)) {
+      err.parentPhone = 'Phone must be digits and no more than 10 characters';
+    }
+    setFieldErrors(err);
+    return Object.keys(err).length === 0;
+  }
+
+  function openNew() {
+    setFormTarget('new');
+    setFullName('');
+    setClassName('');
+    setParentPhone('');
+    setFieldErrors({});
+  }
+
+  function openEdit(row) {
+    setFormTarget(row);
+    setFullName(row.full_name || '');
+    setClassName(row.class || '');
+    setParentPhone(row.parent_phone || '');
+    setFieldErrors({});
+  }
+
+  function closeForm() {
+    setFormTarget(null);
+    setFieldErrors({});
+  }
+
+  async function save(e) {
+    e.preventDefault();
+    if (!validate()) return;
+    setSubmitting(true);
+    setError('');
+    try {
+      const payload = {
+        full_name: fullName.trim(),
+        class: className.trim(),
+        parent_phone: parentPhone.trim(),
+      };
+      if (formTarget !== 'new' && formTarget?.id) {
+        await apiRequest(`/api/students/${formTarget.id}`, {
+          method: 'PUT',
+          body: JSON.stringify(payload),
+        });
+      } else {
+        await apiRequest('/api/students', { 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 student?')) return;
+    setError('');
+    try {
+      await apiRequest(`/api/students/${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">Students</p>
+        <h1 className="page-title">Student roster</h1>
+        <p className="page-subtitle">Add, edit, and keep track of each student record from a sleek panel.</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">Manage student details</p>
+          <p className="text-sm text-slate-500">Everything is organized in one clean table.</p>
+        </div>
+        <button type="button" onClick={openNew} className="btn-primary w-full sm:w-auto">
+          + New student
+        </button>
+      </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 student</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">Full name</label>
+              <input className={inputClass} value={fullName} onChange={(e) => setFullName(e.target.value)} />
+              {fieldErrors.fullName && <p className="text-xs text-red-600">{fieldErrors.fullName}</p>}
+            </div>
+            <div className="input-group">
+              <label className="text-sm font-medium text-slate-700">Class</label>
+              <input className={inputClass} value={className} onChange={(e) => setClassName(e.target.value)} />
+              {fieldErrors.className && <p className="text-xs text-red-600">{fieldErrors.className}</p>}
+            </div>
+            <div className="input-group">
+              <label className="text-sm font-medium text-slate-700">Parent phone</label>
+              <input
+                type="tel"
+                inputMode="numeric"
+                maxLength="10"
+                className={inputClass}
+                value={parentPhone}
+                onChange={(e) => setParentPhone(e.target.value.replace(/\D/g, '').slice(0, 10))}
+                placeholder="Digits only"
+              />
+              {fieldErrors.parentPhone && <p className="text-xs text-red-600">{fieldErrors.parentPhone}</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">Name</th>
+              <th className="table-cell font-medium">Class</th>
+              <th className="table-cell font-medium">Parent phone</th>
+              <th className="table-cell font-medium">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {list.map((u) => (
+              <tr key={u.id} className="table-row">
+                <td className="table-cell font-semibold text-slate-900">{u.full_name}</td>
+                <td className="table-cell">{u.class}</td>
+                <td className="table-cell">{u.parent_phone}</td>
+                <td className="table-cell space-x-2 whitespace-nowrap">
+                  <button type="button" className="btn-secondary" onClick={() => openEdit(u)}>
+                    Edit
+                  </button>
+                  <button type="button" className="btn-destructive" onClick={() => remove(u.id)}>
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {list.length === 0 && <p className="placeholder-card">No students yet.</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 student</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">Name</label>
+                <input className={inputClass} value={fullName} onChange={(e) => setFullName(e.target.value)} />
+                {fieldErrors.fullName && <p className="text-xs text-red-600">{fieldErrors.fullName}</p>}
+              </div>
+              <div className="input-group">
+                <label className="text-sm font-medium text-slate-700">Class</label>
+                <input className={inputClass} value={className} onChange={(e) => setClassName(e.target.value)} />
+              </div>
+              <div className="input-group">
+                <label className="text-sm font-medium text-slate-700">Parent phone</label>
+                <input
+                  type="tel"
+                  inputMode="numeric"
+                  maxLength="10"
+                  className={inputClass}
+                  value={parentPhone}
+                  onChange={(e) => setParentPhone(e.target.value.replace(/\D/g, '').slice(0, 10))}
+                  placeholder="Digits only"
+                />
+                {fieldErrors.parentPhone && <p className="text-xs text-red-600">{fieldErrors.parentPhone}</p>}
+              </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/tailwind.config.js

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['DM Sans', 'system-ui', 'sans-serif'],
+        display: ['Outfit', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        sfms: {
+          ink: '#0f172a',
+          mist: '#f1f5f9',
+          accent: '#0d9488',
+          accentDark: '#0f766e',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/apps/SFMS/frontend/vite.config.js

@@ -0,0 +1,35 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const DEFAULT_DEV_PORT = 5173;
+const DEFAULT_API_PROXY = 'http://localhost:5000';
+
+export default defineConfig(({ mode }) => {
+  const rootEnv = loadEnv(mode, process.cwd(), '');
+
+  const port =
+    Number(
+      rootEnv.VITE_DEV_SERVER_PORT ||
+        rootEnv.SFMS_FRONTEND_PORT ||
+        `${DEFAULT_DEV_PORT}`
+    ) || DEFAULT_DEV_PORT;
+
+  const proxyTarget =
+    rootEnv.VITE_API_PROXY_TARGET ||
+    rootEnv.VITE_BACKEND_URL ||
+    DEFAULT_API_PROXY;
+
+  return {
+    plugins: [react()],
+    server: {
+      port,
+      strictPort: true,
+      proxy: {
+        '/api': {
+          target: proxyTarget,
+          changeOrigin: true,
+        },
+      },
+    },
+  };
+});

package/apps/config.js

@@ -11,4 +11,11 @@ export const apps = [
     description: "Stock inventory management by Steve Rogers",
     folder: "SIMS",
   },
+  {
+    title: "SFMS - Student Fee Management System",
+    value: "sfms",
+    description: "Student Fee Management System by steve rogers",
+    folder: "SFMS"
+
+  }
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-steve-rogers",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Steve Rogers personal app installer",
   "bin": {
     "create-steve-rogers": "index.js"