update the new school year model

src/pages/attendance/BadgeScanningListPage.tsx

@@ -4,6 +4,7 @@ import {
   type AttendanceManagementDashboard,
 } from '../../api/attendanceManagement'
 import { ApiHttpError } from '../../api/http'
+import { useSchoolYearOptions } from '../../hooks/useSchoolYearOptions'
 
 const today = new Date().toISOString().slice(0, 10)
 
@@ -13,6 +14,8 @@ function nice(value: string | null | undefined): string {
 }
 
 export function BadgeScanningListPage() {
+  const { options, selectedYear } = useSchoolYearOptions({})
+  const [schoolYear, setSchoolYear] = useState(selectedYear)
   const [date, setDate] = useState(today)
   const [status, setStatus] = useState('')
   const [q, setQ] = useState('')
@@ -22,13 +25,18 @@ export function BadgeScanningListPage() {
 
   const params = useMemo(
     () => ({
+      school_year: schoolYear,
       date,
       attendance_status: status,
       q,
     }),
-    [date, status, q],
+    [schoolYear, date, status, q],
   )
 
+  useEffect(() => {
+    if (!schoolYear && selectedYear) setSchoolYear(selectedYear)
+  }, [schoolYear, selectedYear])
+
   async function load() {
     setLoading(true)
     setError(null)
@@ -73,6 +81,15 @@ export function BadgeScanningListPage() {
       <div className="card shadow-sm mb-4">
         <div className="card-body">
           <div className="row g-3 align-items-end">
+            <div className="col-md-3">
+              <label className="form-label">School Year</label>
+              <select className="form-select" value={schoolYear} onChange={(e) => setSchoolYear(e.target.value)}>
+                {(options.length > 0 ? options : [{ value: selectedYear, label: selectedYear }]).map((option) => (
+                  <option key={option.value} value={option.value}>{option.label}</option>
+                ))}
+              </select>
+            </div>
+
             <div className="col-md-3">
               <label className="form-label">Date</label>
               <input
@@ -83,7 +100,7 @@ export function BadgeScanningListPage() {
               />
             </div>
 
-            <div className="col-md-3">
+            <div className="col-md-2">
               <label className="form-label">Status</label>
               <select
                 className="form-select"
@@ -97,7 +114,7 @@ export function BadgeScanningListPage() {
               </select>
             </div>
 
-            <div className="col-md-4">
+            <div className="col-md-3">
               <label className="form-label">Search</label>
               <input
                 className="form-control"
@@ -107,7 +124,7 @@ export function BadgeScanningListPage() {
               />
             </div>
 
-            <div className="col-md-2">
+            <div className="col-md-1">
               <button
                 className="btn btn-primary w-100"
                 type="button"