fix teacher, parent and admin pages

2026-04-25 00:00:10 -04:00
parent 7fe34dde0d
commit 3e77fc92c7
275 changed files with 46412 additions and 3325 deletions
@@ -0,0 +1,113 @@
+import { type FormEvent, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { createStaff, fetchStaffFormOptions, type RoleOption } from '../../api/staff'
+
+export function StaffCreatePage() {
+  const navigate = useNavigate()
+  const [roles, setRoles] = useState<RoleOption[]>([])
+  const [firstname, setFirstname] = useState('')
+  const [lastname, setLastname] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [roleId, setRoleId] = useState<number>(0)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const data = await fetchStaffFormOptions()
+        if (cancelled) return
+        const list = data.roles ?? []
+        setRoles(list)
+        if (list[0]?.id) setRoleId(Number(list[0].id))
+      } catch {
+        if (!cancelled) setRoles([])
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    if (!roleId) {
+      setError('Please select a role.')
+      return
+    }
+    try {
+      await createStaff({ firstname, lastname, email, password, role_id: roleId })
+      navigate('/app/staff')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to create staff.')
+    }
+  }
+
+  return (
+    <div className="container mt-4">
+      <h2>Add Staff Member</h2>
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      <form onSubmit={(e) => void onSubmit(e)}>
+        <div className="mb-3">
+          <label className="form-label">First Name</label>
+          <input
+            type="text"
+            className="form-control"
+            value={firstname}
+            onChange={(e) => setFirstname(e.target.value)}
+            required
+          />
+        </div>
+        <div className="mb-3">
+          <label className="form-label">Last Name</label>
+          <input
+            type="text"
+            className="form-control"
+            value={lastname}
+            onChange={(e) => setLastname(e.target.value)}
+            required
+          />
+        </div>
+        <div className="mb-3">
+          <label className="form-label">Email</label>
+          <input
+            type="email"
+            className="form-control"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+        <div className="mb-3">
+          <label className="form-label">Password</label>
+          <input
+            type="password"
+            className="form-control"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+        <div className="mb-3">
+          <label className="form-label">Role</label>
+          <select
+            className="form-control"
+            value={roleId || ''}
+            onChange={(e) => setRoleId(Number(e.target.value))}
+            required
+          >
+            {roles.map((role) => (
+              <option key={role.id} value={role.id}>
+                {role.name}
+              </option>
+            ))}
+          </select>
+        </div>
+        <button type="submit" className="btn btn-success">
+          Create
+        </button>
+      </form>
+    </div>
+  )
+}