add school year model

src/pages/slips/SlipPreviewListPage.tsx

@@ -1,6 +1,7 @@
 import { type FormEvent, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { ApiHttpError } from '../../api/http'
+import { useSchoolYearOptions } from '../../hooks/useSchoolYearOptions'
 import { fetchSlipPreviewList, type SlipPreviewRow } from '../../api/slips'
 import { displaySemester, formatPreviewDateKey } from './slipFormatting'
 import { SLIPS_PRINT_PATH } from './slipPaths'
@@ -60,6 +61,9 @@ export function SlipPreviewListPage() {
     key: 'student_name',
     direction: 'asc',
   })
+  const { options, selectedYear } = useSchoolYearOptions({
+    preferredYear: schoolYear,
+  })
 
   useEffect(() => {
     setError(null)
@@ -159,13 +163,13 @@ export function SlipPreviewListPage() {
       <form className="row gy-2 gx-3 align-items-end mb-4" onSubmit={applyFilter}>
         <div className="col-md-4">
           <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-md-3">
           <label className="form-label">Semester</label>