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,178 @@
+import { useEffect, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { ApiHttpError } from '../../api/http'
+import { fetchDiscountApplyContext, reverseDiscountApplication } from '../../api/session'
+import type { DiscountApplyParentRow, DiscountVoucherRow } from '../../api/types'
+import { AcademicFilterBar } from './AcademicFilterBar'
+
+/**
+ * Parity for a legacy `reverse_discount` admin view (not present in the CI tree we inspected).
+ * Uses the same parent/voucher context as “apply voucher”; backend should filter rows as needed.
+ */
+export function ReverseDiscountPage() {
+  const [searchParams] = useSearchParams()
+  const schoolYear = searchParams.get('school_year') ?? undefined
+  const semester = searchParams.get('semester') ?? undefined
+
+  const [vouchers, setVouchers] = useState<DiscountVoucherRow[]>([])
+  const [parents, setParents] = useState<DiscountApplyParentRow[]>([])
+  const [voucherId, setVoucherId] = useState('')
+  const [reason, setReason] = useState('')
+  const [selected, setSelected] = useState<Record<string, boolean>>({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [msg, setMsg] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    fetchDiscountApplyContext({ school_year: schoolYear, semester })
+      .then((d) => {
+        if (cancelled) return
+        setVouchers(d.vouchers ?? [])
+        setParents(d.parents ?? [])
+      })
+      .catch((e: unknown) => {
+        if (!cancelled)
+          setError(e instanceof ApiHttpError ? e.message : 'Could not load data.')
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [schoolYear, semester])
+
+  function toggle(id: string) {
+    setSelected((s) => ({ ...s, [id]: !s[id] }))
+  }
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    const ids = Object.entries(selected)
+      .filter(([, on]) => on)
+      .map(([id]) => id)
+    if (ids.length === 0) {
+      setMsg('Select at least one parent.')
+      return
+    }
+    setBusy(true)
+    setMsg(null)
+    try {
+      await reverseDiscountApplication({
+        voucher_id: voucherId || undefined,
+        parent_ids: ids,
+        reason: reason.trim() || undefined,
+        school_year: schoolYear,
+        semester,
+      })
+      setMsg('Reverse request submitted.')
+    } catch (err: unknown) {
+      setMsg(err instanceof ApiHttpError ? err.message : 'Request failed.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="container mt-4">
+      <h1 className="h2">Reverse Discount</h1>
+      <p className="text-muted">
+        Remove or roll back a voucher application for selected parents. The API route is{' '}
+        <code>/api/v1/discounts/reverse</code>.
+      </p>
+
+      <AcademicFilterBar />
+
+      {loading ? <p className="text-muted">Loading…</p> : null}
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {msg ? (
+        <div
+          className={`alert ${msg.includes('fail') || msg.includes('Select') ? 'alert-warning' : 'alert-success'}`}
+        >
+          {msg}
+        </div>
+      ) : null}
+
+      <form onSubmit={onSubmit}>
+        <div className="mb-3">
+          <label className="form-label" htmlFor="reverse_voucher">
+            Voucher (optional filter)
+          </label>
+          <select
+            id="reverse_voucher"
+            className="form-select"
+            value={voucherId}
+            onChange={(ev) => setVoucherId(ev.target.value)}
+          >
+            <option value="">— Any / not specified —</option>
+            {vouchers.map((v) => (
+              <option key={String(v.id)} value={String(v.id)}>
+                {v.code}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="mb-3">
+          <label className="form-label" htmlFor="reverse_reason">
+            Reason (optional)
+          </label>
+          <textarea
+            id="reverse_reason"
+            className="form-control"
+            rows={2}
+            value={reason}
+            onChange={(ev) => setReason(ev.target.value)}
+          />
+        </div>
+
+        <div className="d-flex gap-2 mb-3 justify-content-end">
+          <button type="submit" className="btn btn-warning" disabled={busy || loading}>
+            Reverse discount
+          </button>
+          <Link to="/app/administrator/discounts" className="btn btn-outline-secondary">
+            Back to list
+          </Link>
+        </div>
+
+        <div className="table-responsive">
+          <table className="table table-bordered">
+            <thead>
+              <tr>
+                <th>Select</th>
+                <th>Parent ID</th>
+                <th>Name</th>
+                <th>Email</th>
+                <th>Has discount?</th>
+              </tr>
+            </thead>
+            <tbody>
+              {parents.map((parent) => {
+                const id = String(parent.id)
+                return (
+                  <tr key={id}>
+                    <td>
+                      <input
+                        type="checkbox"
+                        className="form-check-input"
+                        checked={Boolean(selected[id])}
+                        onChange={() => toggle(id)}
+                      />
+                    </td>
+                    <td>{parent.school_id ?? 'N/A'}</td>
+                    <td>{[parent.firstname, parent.lastname].filter(Boolean).join(' ') || '—'}</td>
+                    <td>{parent.email ?? '—'}</td>
+                    <td>{parent.has_discount ? 'Yes' : 'No'}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </form>
+    </div>
+  )
+}