geneit_app/src/routes/family/accommodations/AccommodationsReservationsRoute.tsx

@@ -6,6 +6,7 @@ import listPlugin from "@fullcalendar/list";
 import FullCalendar from "@fullcalendar/react";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
+import RuleIcon from "@mui/icons-material/Rule";
 import {
   Alert,
   Avatar,
@@ -173,6 +174,10 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
     });
   };
 
+  const validateReservation = async (r: AccommodationReservation) => {
+    // TODO
+  };
+
   const changeReservation = async (r: AccommodationReservation) => {
     try {
       const ac = accommodations.accommodations.get(r.accommodation_id);
@@ -466,9 +471,24 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                   </Typography>
                 </CardContent>
                 <CardActions disableSpacing>
+                  {activeEvent?.accommodation.need_validation &&
+                    family.family.is_admin && (
+                      <Tooltip
+                        title="Valider (ou rejeter) la réservation"
+                        arrow
+                      >
+                        <IconButton
+                          onClick={() =>
+                            validateReservation(activeEvent?.reservation)
+                          }
+                        >
+                          <RuleIcon />
+                        </IconButton>
+                      </Tooltip>
+                    )}
                   {user.user.id === activeEvent?.reservation.user_id && (
                     <>
-                      <Tooltip title="Modifer les dates de réservation" arrow>
+                      <Tooltip title="Modifier les dates de réservation" arrow>
                         <IconButton
                           onClick={() =>
                             changeReservation(activeEvent?.reservation)