recupération des années disponibles pour les charges

frontend/src/pages/Charges.jsx

@@ -4,7 +4,6 @@ import toast from 'react-hot-toast'
 import { useAuth } from '../context/AuthContext'
 
 const CURRENT_YEAR = new Date().getFullYear()
-const YEARS = Array.from({ length: 6 }, (_, i) => CURRENT_YEAR - i)
 
 function Modal({ title, onClose, children }) {
   return (
@@ -43,6 +42,7 @@ export default function Charges() {
   const [deductibleSummary, setDeductibleSummary] = useState(null)
   const [showDeductible, setShowDeductible] = useState(false)
   const [categories, setCategories] = useState([])
+  const [availableYears, setAvailableYears] = useState([CURRENT_YEAR])
 
   const emptyForm = {
     property_id: '',
@@ -79,8 +79,20 @@ export default function Charges() {
     } catch { setDeductibleSummary(null) }
   }
 
+  // Load all distinct years from charges (unfiltered by year) to populate year selectors
+  const loadAvailableYears = async () => {
+    const params = new URLSearchParams()
+    if (filterProperty) params.append('property_id', filterProperty)
+    try {
+      const { data } = await api.get(`/charges?${params}`)
+      const yearsFromData = [...new Set(data.map(c => c.year).filter(Boolean))]
+      const merged = [...new Set([CURRENT_YEAR, ...yearsFromData])].sort((a, b) => b - a)
+      setAvailableYears(merged)
+    } catch {}
+  }
+
   useEffect(() => { loadProperties(); api.get('/categories').then(r => setCategories(r.data)) }, [])
-  useEffect(() => { if (filterProperty) { loadCharges(); loadDeductibleSummary() } }, [filterProperty, filterYear])
+  useEffect(() => { if (filterProperty) { loadCharges(); loadDeductibleSummary(); loadAvailableYears() } }, [filterProperty, filterYear])
 
   const openAdd = () => {
     setEditCharge(null)
@@ -401,7 +413,7 @@ export default function Charges() {
         <div className="w-36">
           <label className="label">Année</label>
           <select className="input" value={filterYear} onChange={e => setFilterYear(e.target.value)}>
-            {YEARS.map(y => <option key={y} value={y}>{y}</option>)}
+            {availableYears.map(y => <option key={y} value={y}>{y}</option>)}
           </select>
         </div>
         {filterProperty && filterYear && (
@@ -596,7 +608,7 @@ export default function Charges() {
                 <label className="label">Année *</label>
                 <select className="input" value={form.year}
                   onChange={e => setForm(f => ({ ...f, year: e.target.value }))}>
-                  {YEARS.map(y => <option key={y} value={y}>{y}</option>)}
+                  {availableYears.map(y => <option key={y} value={y}>{y}</option>)}
                 </select>
               </div>
             </div>