add school year model

src/pages/attendance/TeacherAttendanceFormPage.tsx

@@ -1,5 +1,6 @@
 import { type FormEvent, useEffect, useMemo, useState } from 'react'
 import { Link, useSearchParams } from 'react-router-dom'
+import { useSchoolYearOptions } from '../../hooks/useSchoolYearOptions'
 import { fetchTeacherStaffAttendance, saveTeacherStaffAttendance } from '../../api/session'
 import { TEACHER_ATTENDANCE_MONTH_PATH } from './attendancePaths'
 import type { TeacherStaffAttendanceRow } from '../../api/types'
@@ -26,6 +27,9 @@ export function TeacherAttendanceFormPage() {
   const [saving, setSaving] = useState(false)
   const [message, setMessage] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
+  const { options, selectedYear } = useSchoolYearOptions({
+    preferredYear: schoolYear,
+  })
 
   useEffect(() => {
     let cancelled = false
@@ -136,13 +140,13 @@ export function TeacherAttendanceFormPage() {
       <form className="row gy-2 gx-3 align-items-end mb-3" onSubmit={applyFilters}>
         <div className="col-sm-3">
           <label className="form-label">School Year</label>
-          <input
-            type="text"
-            name="school_year"
-            className="form-control"
-            defaultValue={schoolYear}
-            placeholder="e.g. 2025-2026"
-          />
+          <select name="school_year" className="form-select" defaultValue={schoolYear || selectedYear}>
+            {(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-sm-2">
           <label className="form-label">Semester</label>