add school year model

src/pages/payment/ExtraChargesPage.tsx

@@ -1,6 +1,7 @@
 import { type FormEvent, useCallback, useEffect, useState } from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { ApiHttpError } from '../../api/http'
+import { useSchoolYearOptions } from '../../hooks/useSchoolYearOptions'
 import {
   fetchChargeInvoicesForParent,
   fetchExtraChargesPage,
@@ -33,6 +34,10 @@ export function ExtraChargesPage() {
   const [invoiceOptions, setInvoiceOptions] = useState<Array<{ id?: number; invoice_number?: string }>>([])
   const [modalOpen, setModalOpen] = useState(false)
   const [selectedParentId, setSelectedParentId] = useState<string>('')
+  const { options, selectedYear: defaultYear } = useSchoolYearOptions({
+    legacyYears: schoolYears,
+    preferredYear: activeYear || schoolYear,
+  })
 
   useEffect(() => {
     setActiveYear(schoolYear)
@@ -101,15 +106,6 @@ export function ExtraChargesPage() {
   let pageTotal = 0
   for (const r of rows) pageTotal += Number(r.amount ?? 0)
 
-  const years =
-    schoolYears.length > 0
-      ? schoolYears
-      : (() => {
-          const out: string[] = []
-          for (let y = new Date().getFullYear(); y >= 2020; y--) out.push(`${y}-${y + 1}`)
-          return out
-        })()
-
   return (
     <div className="container-fluid py-4">
       {msg ? <div className="alert alert-info">{msg}</div> : null}
@@ -130,12 +126,12 @@ export function ExtraChargesPage() {
             id="schoolYearSel"
             className="form-select form-select-sm rounded-pill px-3"
             style={{ minWidth: 180 }}
-            value={activeYear || years[0] || ''}
+            value={activeYear || defaultYear}
             onChange={onYearChange}
           >
-            {years.map((y) => (
-              <option key={y} value={y}>
-                {y}
+            {options.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
               </option>
             ))}
           </select>