Add an accommodations reservations module (#188)

Add a new module to enable accommodations reservation

![](https://gitea.communiquons.org/attachments/de1f5b12-0a93-40f8-b29d-97665daa6fd5)

Reviewed-on: #188

geneit_app/src/App.tsx

@@ -16,29 +16,33 @@ import { NewAccountRoute } from "./routes/auth/NewAccountRoute";
 import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
 import { PasswordForgottenRoute } from "./routes/auth/PasswordForgottenRoute";
 import { ResetPasswordRoute } from "./routes/auth/ResetPasswordRoute";
-import { FamilyHomeRoute } from "./routes/family/genealogy/FamilyHomeRoute";
-import {
-  FamilyCreateMemberRoute,
-  FamilyEditMemberRoute,
-  FamilyMemberRoute,
-} from "./routes/family/genealogy/FamilyMemberRoute";
 import { FamilySettingsRoute } from "./routes/family/FamilySettingsRoute";
 import { FamilyUsersListRoute } from "./routes/family/FamilyUsersListRoute";
-import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
-import { BaseFamilyRoute } from "./widgets/BaseFamilyRoute";
-import { BaseLoginPage } from "./widgets/BaseLoginpage";
-import { FamilyMembersListRoute } from "./routes/family/genealogy/FamilyMembersListRoute";
+import { AccommodationsHomeRoute } from "./routes/family/accommodations/AccommodationsHomeRoute";
+import { AccommodationsReservationsRoute } from "./routes/family/accommodations/AccommodationsReservationsRoute";
+import { AccommodationsSettingsRoute } from "./routes/family/accommodations/AccommodationsSettingsRoute";
 import {
   FamilyCoupleRoute,
   FamilyCreateCoupleRoute,
   FamilyEditCoupleRoute,
 } from "./routes/family/genealogy/FamilyCoupleRoute";
 import { FamilyCouplesListRoute } from "./routes/family/genealogy/FamilyCouplesListRoute";
-import { FamilyTreeRoute } from "./routes/family/genealogy/FamilyTreeRoute";
+import { FamilyHomeRoute } from "./routes/family/genealogy/FamilyHomeRoute";
+import {
+  FamilyCreateMemberRoute,
+  FamilyEditMemberRoute,
+  FamilyMemberRoute,
+} from "./routes/family/genealogy/FamilyMemberRoute";
 import { FamilyMemberTreeRoute } from "./routes/family/genealogy/FamilyMemberTreeRoute";
-import { GenealogyHomeRoute } from "./routes/family/genealogy/GenealogyHomeRoute";
-import { BaseGenealogyRoute } from "./widgets/genealogy/BaseGenealogyRoute";
+import { FamilyMembersListRoute } from "./routes/family/genealogy/FamilyMembersListRoute";
+import { FamilyTreeRoute } from "./routes/family/genealogy/FamilyTreeRoute";
 import { GenalogySettingsRoute } from "./routes/family/genealogy/GenalogySettingsRoute";
+import { GenealogyHomeRoute } from "./routes/family/genealogy/GenealogyHomeRoute";
+import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
+import { BaseFamilyRoute } from "./widgets/BaseFamilyRoute";
+import { BaseLoginPage } from "./widgets/BaseLoginpage";
+import { BaseAccommodationsRoute } from "./widgets/accommodations/BaseAccommodationsRoute";
+import { BaseGenealogyRoute } from "./widgets/genealogy/BaseGenealogyRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -110,6 +114,22 @@ export function App(): React.ReactElement {
                 <Route path="*" element={<NotFoundRoute />} />
               </Route>
 
+              <Route
+                path="accommodations/*"
+                element={<BaseAccommodationsRoute />}
+              >
+                <Route path="" element={<AccommodationsHomeRoute />} />
+                <Route
+                  path="reservations"
+                  element={<AccommodationsReservationsRoute />}
+                />
+                <Route
+                  path="settings"
+                  element={<AccommodationsSettingsRoute />}
+                />
+                <Route path="*" element={<NotFoundRoute />} />
+              </Route>
+
               <Route path="settings" element={<FamilySettingsRoute />} />
               <Route path="users" element={<FamilyUsersListRoute />} />
               <Route path="*" element={<NotFoundRoute />} />

geneit_app/src/api/FamilyApi.ts

@@ -88,10 +88,12 @@ export class Family implements FamilyAPI {
 export class ExtendedFamilyInfo extends Family {
   public disable_couple_photos: boolean;
   public enable_genealogy: boolean;
+  public enable_accommodations: boolean;
   constructor(p: any) {
     super(p);
     this.disable_couple_photos = p.disable_couple_photos;
     this.enable_genealogy = p.enable_genealogy;
+    this.enable_accommodations = p.enable_accommodations;
   }
 }
 
@@ -235,6 +237,7 @@ export class FamilyApi {
     id: number;
     name?: string;
     enable_genealogy?: boolean;
+    enable_accommodations?: boolean;
     disable_couple_photos?: boolean;
   }): Promise<void> {
     await APIClient.exec({
@@ -243,6 +246,7 @@ export class FamilyApi {
       jsonData: {
         name: settings.name,
         enable_genealogy: settings.enable_genealogy,
+        enable_accommodations: settings.enable_accommodations,
         disable_couple_photos: settings.disable_couple_photos,
       },
     });

geneit_app/src/api/ServerApi.ts

@@ -32,6 +32,9 @@ interface Constraints {
   member_country: LenConstraint;
   member_sex: LenConstraint;
   member_note: LenConstraint;
+  accommodation_name_len: LenConstraint;
+  accommodation_description_len: LenConstraint;
+  accommodation_calendar_name_len: LenConstraint;
 }
 
 interface OIDCProvider {

geneit_app/src/api/accommodations/AccommodationListApi.tsx

@@ -0,0 +1,124 @@
+import { APIClient } from "../ApiClient";
+import { Family } from "../FamilyApi";
+
+export interface Accommodation {
+  id: number;
+  family_id: number;
+  time_create: number;
+  time_update: number;
+  name: string;
+  need_validation: boolean;
+  description?: string;
+  color?: string;
+  open_to_reservations: boolean;
+}
+
+export class AccommodationsList {
+  private list: Accommodation[];
+  private map: Map<number, Accommodation>;
+
+  constructor(list: Accommodation[]) {
+    this.list = list;
+    this.map = new Map();
+
+    for (const m of list) {
+      this.map.set(m.id, m);
+    }
+
+    this.list.sort((a, b) =>
+      a.name.toLowerCase().localeCompare(b.name.toLocaleLowerCase())
+    );
+  }
+
+  public get isEmpty(): boolean {
+    return this.list.length === 0;
+  }
+
+  public get size(): number {
+    return this.list.length;
+  }
+
+  public get fullList(): Accommodation[] {
+    return this.list;
+  }
+
+  filter(predicate: (m: Accommodation) => boolean): Accommodation[] {
+    return this.list.filter(predicate);
+  }
+
+  get openToReservationList(): Accommodation[] {
+    return this.filter((a) => a.open_to_reservations);
+  }
+
+  get(id: number): Accommodation | undefined {
+    return this.map.get(id);
+  }
+}
+
+export interface UpdateAccommodation {
+  name: string;
+  need_validation: boolean;
+  description?: string;
+  color?: string;
+  open_to_reservations: boolean;
+}
+
+export class AccommodationListApi {
+  /**
+   * Get the list of accommodation of a family
+   */
+  static async GetListOfFamily(family: Family): Promise<AccommodationsList> {
+    const data = (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/family/${family.family_id}/accommodations/list/list`,
+      })
+    ).data;
+
+    return new AccommodationsList(data);
+  }
+
+  /**
+   * Create a new accommodation
+   */
+  static async Create(
+    family: Family,
+    accommodation: UpdateAccommodation
+  ): Promise<Accommodation> {
+    return (
+      await APIClient.exec({
+        method: "POST",
+        uri: `/family/${family.family_id}/accommodations/list/create`,
+        jsonData: accommodation,
+      })
+    ).data;
+  }
+
+  /**
+   * Update an accommodation
+   */
+  static async Update(
+    accommodation: Accommodation,
+    update: UpdateAccommodation
+  ): Promise<Accommodation> {
+    return (
+      await APIClient.exec({
+        method: "PUT",
+        uri: `/family/${accommodation.family_id}/accommodations/list/${accommodation.id}`,
+        jsonData: update,
+      })
+    ).data;
+  }
+
+  /**
+   * Delete an accommodation
+   */
+  static async Delete(accommodation: Accommodation): Promise<Accommodation> {
+    return (
+      await APIClient.exec({
+        method: "DELETE",
+        uri: `/family/${accommodation.family_id}/accommodations/list/${accommodation.id}`,
+      })
+    ).data;
+  }
+}

geneit_app/src/api/accommodations/AccommodationsCalendarURLApi.tsx

@@ -0,0 +1,69 @@
+import { APIClient } from "../ApiClient";
+import { Family } from "../FamilyApi";
+
+export interface NewCalendarURL {
+  accommodation_id?: number;
+  name: string;
+}
+
+export interface AccommodationCalendarURL {
+  id: number;
+  family_id: number;
+  accommodation_id: number;
+  user_id: number;
+  name: string;
+  token: string;
+  time_create: number;
+  time_used: number;
+}
+
+export class AccommodationsCalendarURLApi {
+  /**
+   * Create a new accommodation calendar URL
+   */
+  static async Create(
+    family: Family,
+    calendar: NewCalendarURL
+  ): Promise<AccommodationCalendarURL> {
+    return (
+      await APIClient.exec({
+        method: "POST",
+        uri: `/family/${family.family_id}/accommodations/reservations_calendars/create`,
+        jsonData: calendar,
+      })
+    ).data;
+  }
+
+  /**
+   * Get accommodation calendar URL route
+   */
+  static CalendarURL(c: AccommodationCalendarURL): string {
+    return `${APIClient.backendURL()}/acccommodations_calendar/${c.token}`;
+  }
+
+  /**
+   * Get accommodations calendars list
+   */
+  static async GetList(family: Family): Promise<AccommodationCalendarURL[]> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/family/${family.family_id}/accommodations/reservations_calendars/list`,
+      })
+    ).data;
+  }
+
+  /**
+   * Delete an accommodation calendar
+   */
+  static async Delete(
+    calendar: AccommodationCalendarURL
+  ): Promise<AccommodationCalendarURL> {
+    return (
+      await APIClient.exec({
+        method: "DELETE",
+        uri: `/family/${calendar.family_id}/accommodations/reservations_calendars/${calendar.id}`,
+      })
+    ).data;
+  }
+}

geneit_app/src/api/accommodations/AccommodationsReservationsApi.tsx

@@ -0,0 +1,175 @@
+import { APIClient } from "../ApiClient";
+import { Family } from "../FamilyApi";
+import { Accommodation } from "./AccommodationListApi";
+
+export enum ValidateResaResult {
+  Success,
+  Error,
+  Conflict,
+}
+
+export interface AccommodationReservation {
+  id: number;
+  family_id: number;
+  accommodation_id: number;
+  user_id: number;
+  time_create: number;
+  time_update: number;
+  reservation_start: number;
+  reservation_end: number;
+  validated?: boolean;
+}
+
+export class AccommodationsReservationsList {
+  private list: AccommodationReservation[];
+  private map: Map<number, AccommodationReservation>;
+
+  constructor(list: AccommodationReservation[]) {
+    this.list = list;
+    this.map = new Map();
+
+    for (const m of list) {
+      this.map.set(m.id, m);
+    }
+
+    this.list.sort((a, b) => a.reservation_start - b.reservation_start);
+  }
+
+  public get isEmpty(): boolean {
+    return this.list.length === 0;
+  }
+
+  public get size(): number {
+    return this.list.length;
+  }
+
+  public get fullList(): AccommodationReservation[] {
+    return this.list;
+  }
+
+  filter(
+    predicate: (m: AccommodationReservation) => boolean
+  ): AccommodationReservation[] {
+    return this.list.filter(predicate);
+  }
+
+  forAccommodation(id: number): AccommodationReservation[] {
+    return this.filter((a) => a.accommodation_id === id);
+  }
+
+  get(id: number): AccommodationReservation | undefined {
+    return this.map.get(id);
+  }
+}
+
+export interface UpdateAccommodationReservation {
+  start: number;
+  end: number;
+  accommodation_id: number;
+  reservation_id?: number;
+}
+
+export class AccommodationsReservationsApi {
+  /**
+   * Create a new reservation
+   */
+  static async Create(
+    family: Family,
+    reservation: UpdateAccommodationReservation
+  ): Promise<AccommodationReservation> {
+    return (
+      await APIClient.exec({
+        method: "POST",
+        uri: `/family/${family.family_id}/accommodations/reservations/accommodation/${reservation.accommodation_id}/create`,
+        jsonData: {
+          start: reservation.start,
+          end: reservation.end,
+        },
+      })
+    ).data;
+  }
+
+  /**
+   * Get the entire list of accommodations of a family
+   */
+  static async FullListOfFamily(
+    family: Family
+  ): Promise<AccommodationsReservationsList> {
+    const data = (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/family/${family.family_id}/accommodations/reservations/full_list`,
+      })
+    ).data;
+
+    return new AccommodationsReservationsList(data);
+  }
+
+  /**
+   * Get the reservations of a given time interval for an accommodation
+   */
+  static async ReservationsForInterval(
+    family: Family,
+    accommodation: Accommodation,
+    start: number,
+    end: number
+  ): Promise<AccommodationsReservationsList> {
+    const data = (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/family/${family.family_id}/accommodations/reservations/accommodation/${accommodation.id}/for_interval?start=${start}&end=${end}`,
+      })
+    ).data;
+
+    return new AccommodationsReservationsList(data);
+  }
+
+  /**
+   * Update a reservation
+   */
+  static async Update(
+    family: Family,
+    r: UpdateAccommodationReservation
+  ): Promise<void> {
+    await APIClient.exec({
+      method: "PATCH",
+      uri: `/family/${family.family_id}/accommodations/reservation/${r.reservation_id}`,
+      jsonData: {
+        start: r.start,
+        end: r.end,
+      },
+    });
+  }
+
+  /**
+   * Delete a reservation
+   */
+  static async Delete(r: AccommodationReservation): Promise<void> {
+    await APIClient.exec({
+      method: "DELETE",
+      uri: `/family/${r.family_id}/accommodations/reservation/${r.id}`,
+    });
+  }
+
+  /**
+   * Validate or reject a reservation request
+   */
+  static async Validate(
+    r: AccommodationReservation,
+    accept: boolean
+  ): Promise<ValidateResaResult> {
+    const res = await APIClient.exec({
+      method: "POST",
+      uri: `/family/${r.family_id}/accommodations/reservation/${r.id}/validate`,
+      jsonData: {
+        validate: accept,
+      },
+      allowFail: true,
+    });
+
+    if (res.status >= 200 && res.status <= 299)
+      return ValidateResaResult.Success;
+    if (res.status === 409) return ValidateResaResult.Conflict;
+    return ValidateResaResult.Error;
+  }
+}

geneit_app/src/dialogs/accommodations/CreateAccommodationCalendarURLDialog.tsx

@@ -0,0 +1,92 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import React from "react";
+import { ServerApi } from "../../api/ServerApi";
+import { NewCalendarURL } from "../../api/accommodations/AccommodationsCalendarURLApi";
+import { checkConstraint } from "../../utils/form_utils";
+import { useAccommodations } from "../../widgets/accommodations/BaseAccommodationsRoute";
+import { PropEdit } from "../../widgets/forms/PropEdit";
+import { PropSelect } from "../../widgets/forms/PropSelect";
+
+export function CreateAccommodationCalendarURLDialog(p: {
+  open: boolean;
+  onClose: () => void;
+  onSubmitted: (c: NewCalendarURL) => void;
+}): React.ReactElement {
+  const [calendar, setCalendar] = React.useState<NewCalendarURL>({ name: "" });
+
+  const accommodations = useAccommodations();
+
+  const nameErr = checkConstraint(
+    ServerApi.Config.constraints.accommodation_calendar_name_len,
+    calendar?.name
+  );
+
+  const clearForm = () => {
+    setCalendar({ name: "" });
+  };
+
+  const cancel = () => {
+    clearForm();
+    p.onClose();
+  };
+
+  const submit = async () => {
+    clearForm();
+    p.onSubmitted(calendar!);
+  };
+
+  return (
+    <Dialog open={p.open} onClose={cancel}>
+      <DialogTitle>Création d'un calendrier</DialogTitle>
+      <DialogContent style={{ display: "flex", flexDirection: "column" }}>
+        <PropEdit
+          editable
+          label="Nom"
+          value={calendar?.name}
+          onValueChange={(s) =>
+            setCalendar((a) => {
+              return {
+                ...a!,
+                name: s!,
+              };
+            })
+          }
+          size={ServerApi.Config.constraints.accommodation_calendar_name_len}
+          helperText={nameErr}
+        />
+
+        <PropSelect
+          editing
+          label="Logement ciblé"
+          onValueChange={(v) => {
+            setCalendar((a) => {
+              return {
+                ...a!,
+                accommodation_id: v !== "A" && v ? Number(v) : undefined,
+              };
+            });
+          }}
+          options={[
+            { label: "Tous les logements", value: "A" },
+            ...accommodations.accommodations.fullList.map((a) => {
+              return { label: a.name, value: a.id.toString() };
+            }),
+          ]}
+          value={calendar.accommodation_id?.toString() ?? "A"}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={cancel}>Annuler</Button>
+        <Button onClick={submit} disabled={!!nameErr}>
+          Créer
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

geneit_app/src/dialogs/accommodations/InstallCalendarDialog.tsx

@@ -0,0 +1,72 @@
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  OutlinedInput,
+  Typography,
+} from "@mui/material";
+import QRCode from "react-qr-code";
+import {
+  AccommodationCalendarURL,
+  AccommodationsCalendarURLApi,
+} from "../../api/accommodations/AccommodationsCalendarURLApi";
+import { CopyToClipboard } from "../../widgets/CopyToClipboard";
+
+export function InstallCalendarDialog(p: {
+  cal?: AccommodationCalendarURL;
+  onClose: () => void;
+}): React.ReactElement {
+  if (!p.cal) return <></>;
+
+  return (
+    <Dialog open={true} onClose={p.onClose}>
+      <DialogTitle>Installation du calendrier</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          <Typography>
+            Afin d'installer le calendrier <i>{p.cal.name}</i> sur votre
+            appareil, veuillez utiliser l'URL suivante :
+          </Typography>
+          <br />
+          <FormControl fullWidth variant="outlined">
+            <OutlinedInput
+              value={AccommodationsCalendarURLApi.CalendarURL(p.cal!)}
+              endAdornment={
+                <InputAdornment position="end">
+                  <CopyToClipboard
+                    content={AccommodationsCalendarURLApi.CalendarURL(p.cal!)}
+                  >
+                    <IconButton>
+                      <ContentCopyIcon />
+                    </IconButton>
+                  </CopyToClipboard>
+                </InputAdornment>
+              }
+            />
+            <div
+              style={{
+                margin: "20px auto",
+                padding: "20px",
+                backgroundColor: "white",
+              }}
+            >
+              <QRCode
+                value={AccommodationsCalendarURLApi.CalendarURL(p.cal!)}
+              />
+            </div>
+          </FormControl>
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={p.onClose}>Fermer</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

geneit_app/src/dialogs/accommodations/UpdateAccommodationDialog.tsx

@@ -0,0 +1,155 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Tooltip,
+} from "@mui/material";
+import React from "react";
+import { ServerApi } from "../../api/ServerApi";
+import { UpdateAccommodation } from "../../api/accommodations/AccommodationListApi";
+import { checkConstraint } from "../../utils/form_utils";
+import { PropCheckbox } from "../../widgets/forms/PropCheckbox";
+import { PropEdit } from "../../widgets/forms/PropEdit";
+import { PropColorPicker } from "../../widgets/forms/PropColorPicker";
+
+export function UpdateAccommodationDialog(p: {
+  open: boolean;
+  create: boolean;
+  onClose: () => void;
+  onSubmitted: (c: UpdateAccommodation) => void;
+  accommodation: UpdateAccommodation | undefined;
+}): React.ReactElement {
+  const [accommodation, setAccommodation] = React.useState<
+    UpdateAccommodation | undefined
+  >();
+
+  const nameErr = checkConstraint(
+    ServerApi.Config.constraints.accommodation_name_len,
+    accommodation?.name
+  );
+  const descriptionErr = checkConstraint(
+    ServerApi.Config.constraints.accommodation_description_len,
+    accommodation?.description
+  );
+
+  const clearForm = () => {
+    setAccommodation(undefined);
+  };
+
+  const cancel = () => {
+    clearForm();
+    p.onClose();
+  };
+
+  const submit = async () => {
+    clearForm();
+    p.onSubmitted(accommodation!);
+  };
+
+  React.useEffect(() => {
+    if (!accommodation) setAccommodation(p.accommodation);
+  }, [p.open, p.accommodation]);
+
+  return (
+    <Dialog open={p.open} onClose={cancel}>
+      <DialogTitle>
+        {p.create ? "Création" : "Mise à jour"} d'un logement
+      </DialogTitle>
+      <DialogContent style={{ display: "flex", flexDirection: "column" }}>
+        <PropEdit
+          editable
+          label="Nom"
+          value={accommodation?.name}
+          onValueChange={(s) =>
+            setAccommodation((a) => {
+              return {
+                ...a!,
+                name: s!,
+              };
+            })
+          }
+          size={ServerApi.Config.constraints.accommodation_name_len}
+          helperText={nameErr}
+        />
+
+        <PropEdit
+          editable
+          label="Description"
+          value={accommodation?.description}
+          onValueChange={(s) =>
+            setAccommodation((a) => {
+              return {
+                ...a!,
+                description: s!,
+              };
+            })
+          }
+          size={ServerApi.Config.constraints.accommodation_description_len}
+          helperText={descriptionErr}
+        />
+
+        <PropColorPicker
+          editable
+          label="Couleur"
+          value={accommodation?.color}
+          onChange={(s) =>
+            setAccommodation((a) => {
+              return {
+                ...a!,
+                color: s!,
+              };
+            })
+          }
+        />
+
+        <PropCheckbox
+          editable
+          label="Ouvert aux réservations"
+          checked={accommodation?.open_to_reservations === true}
+          onValueChange={(c) =>
+            setAccommodation((a) => {
+              return {
+                ...a!,
+                open_to_reservations: c,
+              };
+            })
+          }
+        />
+
+        <Tooltip
+          title={
+            "Permet de spécifier si un administrateur de la famille doit valider manuellement les demandes de réservation pour qu'elles soient validées"
+          }
+        >
+          <PropCheckbox
+            checkboxAlwaysVisible
+            editable={accommodation?.open_to_reservations === true}
+            label="Validation des réservations par un administrateur requise"
+            checked={accommodation?.need_validation === true}
+            onValueChange={(c) =>
+              setAccommodation((a) => {
+                return {
+                  ...a!,
+                  need_validation: c,
+                };
+              })
+            }
+          />
+        </Tooltip>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={cancel}>Annuler</Button>
+        <Button
+          onClick={submit}
+          disabled={
+            !!nameErr || (!!accommodation?.description && !!descriptionErr)
+          }
+        >
+          {p.create ? "Créer" : "Mettre à jour"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

geneit_app/src/dialogs/accommodations/UpdateReservationDialog.tsx

@@ -0,0 +1,192 @@
+import {
+  Alert,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import React from "react";
+import {
+  AccommodationReservation,
+  AccommodationsReservationsApi,
+  UpdateAccommodationReservation,
+} from "../../api/accommodations/AccommodationsReservationsApi";
+import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
+import { fmtUnixDate } from "../../utils/time_utils";
+import { useFamily } from "../../widgets/BaseFamilyRoute";
+import { useAccommodations } from "../../widgets/accommodations/BaseAccommodationsRoute";
+import { PropDateInput } from "../../widgets/forms/PropDateInput";
+import { PropSelect } from "../../widgets/forms/PropSelect";
+
+export function UpdateReservationDialog(p: {
+  open: boolean;
+  create: boolean;
+  reservation?: UpdateAccommodationReservation;
+  onClose: () => void;
+  onSubmitted: (c: UpdateAccommodationReservation) => void;
+}): React.ReactElement {
+  const alert = useAlert();
+
+  const family = useFamily();
+  const accommodations = useAccommodations();
+
+  const [reservation, setReservation] = React.useState<
+    UpdateAccommodationReservation | undefined
+  >();
+
+  const [conflicts, setConflicts] = React.useState<
+    AccommodationReservation[] | undefined
+  >(undefined);
+
+  const clearForm = () => {
+    setReservation(undefined);
+  };
+
+  const cancel = () => {
+    clearForm();
+    p.onClose();
+  };
+
+  const submit = async () => {
+    clearForm();
+    p.onSubmitted(reservation!);
+  };
+
+  React.useEffect(() => {
+    if (!reservation) setReservation(p.reservation);
+  }, [p.open, p.reservation]);
+
+  React.useEffect(() => {
+    setConflicts(undefined);
+    (async () => {
+      try {
+        if (
+          !reservation ||
+          reservation.accommodation_id < 1 ||
+          reservation.start < 1 ||
+          reservation.start > reservation.end
+        ) {
+          setConflicts([]);
+          return;
+        }
+
+        setConflicts(
+          (
+            await AccommodationsReservationsApi.ReservationsForInterval(
+              family.family,
+              accommodations.accommodations.get(reservation.accommodation_id)!,
+              reservation.start,
+              reservation.end
+            )
+          ).filter(
+            (r) =>
+              r.id !== p.reservation?.reservation_id && r.validated !== false
+          )
+        );
+      } catch (e) {
+        console.error(e);
+        alert(
+          "Echec de la vérification de la présence de conflits de calendrier !"
+        );
+      }
+    })();
+  }, [
+    p.open,
+    reservation?.accommodation_id,
+    reservation?.start,
+    reservation?.end,
+  ]);
+
+  return (
+    <Dialog open={p.open} onClose={cancel}>
+      <DialogTitle>
+        {p.create ? "Création" : "Mise à jour"} d'une réservation
+      </DialogTitle>
+      <DialogContent style={{ display: "flex", flexDirection: "column" }}>
+        <PropSelect
+          editing={p.create}
+          label="Logement ciblé"
+          onValueChange={(v) => {
+            setReservation((a) => {
+              return {
+                ...a!,
+                accommodation_id: Number(v),
+              };
+            });
+          }}
+          options={accommodations.accommodations.openToReservationList.map(
+            (a) => {
+              return { label: a.name, value: a.id.toString() };
+            }
+          )}
+          value={
+            reservation?.accommodation_id === -1
+              ? ""
+              : reservation?.accommodation_id?.toString()
+          }
+        />
+
+        <PropDateInput
+          editable
+          label="Date de début"
+          value={reservation?.start}
+          onChange={(s) => {
+            setReservation((r) => {
+              return { ...r!, start: s ?? -1 };
+            });
+          }}
+          minDate={Math.floor(new Date().getTime() / 1000) - 3600 * 24 * 60}
+          canSetMiddleDay
+        />
+
+        <PropDateInput
+          editable
+          label="Date de fin"
+          value={reservation?.end}
+          lastSecOfDay={true}
+          onChange={(s) => {
+            setReservation((r) => {
+              return { ...r!, end: s ?? -1 };
+            });
+          }}
+          minDate={reservation?.start}
+          canSetMiddleDay
+        />
+
+        {conflicts && conflicts.length > 0 && (
+          <Alert severity="error">
+            <p>
+              Cette réservation est en conflit avec d'autres réservations sur
+              les intervalles suivants :
+            </p>
+            <ul>
+              {conflicts.map((c, num) => (
+                <li key={num}>
+                  Réservation du {fmtUnixDate(c.reservation_start)} au{" "}
+                  {fmtUnixDate(c.reservation_end)}
+                </li>
+              ))}
+            </ul>
+          </Alert>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={cancel}>Annuler</Button>
+        <Button
+          onClick={submit}
+          disabled={
+            !(
+              (reservation?.accommodation_id ?? -1) > 0 &&
+              (reservation?.start ?? -1) > 0 &&
+              (reservation?.end ?? -1) > (reservation?.start ?? 0) &&
+              (conflicts?.length ?? 0) === 0
+            )
+          }
+        >
+          {p.create ? "Créer" : "Mettre à jour"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

geneit_app/src/hooks/context_providers/accommodations/CreateAccommodationCalendarURLDialogProvider.tsx

@@ -0,0 +1,52 @@
+import React, { PropsWithChildren } from "react";
+import { NewCalendarURL } from "../../../api/accommodations/AccommodationsCalendarURLApi";
+import { CreateAccommodationCalendarURLDialog } from "../../../dialogs/accommodations/CreateAccommodationCalendarURLDialog";
+
+type DialogContext = () => Promise<NewCalendarURL | undefined>;
+
+const DialogContextK = React.createContext<DialogContext | null>(null);
+
+export function CreateAccommodationCalendarURLDialogProvider(
+  p: PropsWithChildren
+): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
+
+  const cb = React.useRef<null | ((a: NewCalendarURL | undefined) => void)>(
+    null
+  );
+
+  const handleClose = (res?: NewCalendarURL) => {
+    setOpen(false);
+
+    if (cb.current !== null) cb.current(res);
+    cb.current = null;
+  };
+
+  const hook: DialogContext = () => {
+    setOpen(true);
+
+    return new Promise((res) => {
+      cb.current = res;
+    });
+  };
+
+  return (
+    <>
+      <DialogContextK.Provider value={hook}>
+        {p.children}
+      </DialogContextK.Provider>
+
+      {open && (
+        <CreateAccommodationCalendarURLDialog
+          open={open}
+          onClose={handleClose}
+          onSubmitted={handleClose}
+        />
+      )}
+    </>
+  );
+}
+
+export function useCreateAccommodationCalendarURL(): DialogContext {
+  return React.useContext(DialogContextK)!;
+}

geneit_app/src/hooks/context_providers/accommodations/InstallCalendarDialogProvider.tsx

@@ -0,0 +1,44 @@
+import React, { PropsWithChildren } from "react";
+import { AccommodationCalendarURL } from "../../../api/accommodations/AccommodationsCalendarURLApi";
+import { InstallCalendarDialog } from "../../../dialogs/accommodations/InstallCalendarDialog";
+
+type DialogContext = (cal: AccommodationCalendarURL) => Promise<void>;
+
+const DialogContextK = React.createContext<DialogContext | null>(null);
+
+export function InstallCalendarDialogProvider(
+  p: PropsWithChildren
+): React.ReactElement {
+  const [cal, setCal] = React.useState<AccommodationCalendarURL | undefined>();
+
+  const cb = React.useRef<null | (() => void)>(null);
+
+  const handleClose = () => {
+    setCal(undefined);
+
+    if (cb.current !== null) cb.current();
+    cb.current = null;
+  };
+
+  const hook: DialogContext = (c) => {
+    setCal(c);
+
+    return new Promise((res) => {
+      cb.current = res;
+    });
+  };
+
+  return (
+    <>
+      <DialogContextK.Provider value={hook}>
+        {p.children}
+      </DialogContextK.Provider>
+
+      {cal && <InstallCalendarDialog cal={cal} onClose={handleClose} />}
+    </>
+  );
+}
+
+export function useInstallCalendarDialog(): DialogContext {
+  return React.useContext(DialogContextK)!;
+}

geneit_app/src/hooks/context_providers/accommodations/UpdateAccommodationDialogProvider.tsx

@@ -0,0 +1,64 @@
+import React, { PropsWithChildren } from "react";
+import { UpdateAccommodation } from "../../../api/accommodations/AccommodationListApi";
+import { UpdateAccommodationDialog } from "../../../dialogs/accommodations/UpdateAccommodationDialog";
+
+type DialogContext = (
+  accommodation: UpdateAccommodation,
+  create: boolean
+) => Promise<UpdateAccommodation | undefined>;
+
+const DialogContextK = React.createContext<DialogContext | null>(null);
+
+export function UpdateAccommodationDialogProvider(
+  p: PropsWithChildren
+): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
+
+  const [accommodation, setAccommodation] = React.useState<
+    UpdateAccommodation | undefined
+  >(undefined);
+  const [create, setCreate] = React.useState(false);
+
+  const cb = React.useRef<
+    null | ((a: UpdateAccommodation | undefined) => void)
+  >(null);
+
+  const handleClose = (res?: UpdateAccommodation) => {
+    setOpen(false);
+
+    if (cb.current !== null) cb.current(res);
+    cb.current = null;
+  };
+
+  const hook: DialogContext = (accommodation, create) => {
+    setAccommodation(accommodation);
+    setCreate(create);
+    setOpen(true);
+
+    return new Promise((res) => {
+      cb.current = res;
+    });
+  };
+
+  return (
+    <>
+      <DialogContextK.Provider value={hook}>
+        {p.children}
+      </DialogContextK.Provider>
+
+      {open && (
+        <UpdateAccommodationDialog
+          open={open}
+          accommodation={accommodation}
+          create={create}
+          onClose={handleClose}
+          onSubmitted={handleClose}
+        />
+      )}
+    </>
+  );
+}
+
+export function useUpdateAccommodation(): DialogContext {
+  return React.useContext(DialogContextK)!;
+}

geneit_app/src/hooks/context_providers/accommodations/UpdateReservationDialogProvider.tsx

@@ -0,0 +1,64 @@
+import React, { PropsWithChildren } from "react";
+import { UpdateAccommodationReservation } from "../../../api/accommodations/AccommodationsReservationsApi";
+import { UpdateReservationDialog } from "../../../dialogs/accommodations/UpdateReservationDialog";
+
+type DialogContext = (
+  reservation: UpdateAccommodationReservation,
+  create: boolean
+) => Promise<UpdateAccommodationReservation | undefined>;
+
+const DialogContextK = React.createContext<DialogContext | null>(null);
+
+export function UpdateReservationDialogProvider(
+  p: PropsWithChildren
+): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
+
+  const [reservation, setReservation] = React.useState<
+    UpdateAccommodationReservation | undefined
+  >(undefined);
+  const [create, setCreate] = React.useState(false);
+
+  const cb = React.useRef<
+    null | ((a: UpdateAccommodationReservation | undefined) => void)
+  >(null);
+
+  const handleClose = (res?: UpdateAccommodationReservation) => {
+    setOpen(false);
+
+    if (cb.current !== null) cb.current(res);
+    cb.current = null;
+  };
+
+  const hook: DialogContext = (accommodation, create) => {
+    setReservation(accommodation);
+    setCreate(create);
+    setOpen(true);
+
+    return new Promise((res) => {
+      cb.current = res;
+    });
+  };
+
+  return (
+    <>
+      <DialogContextK.Provider value={hook}>
+        {p.children}
+      </DialogContextK.Provider>
+
+      {open && (
+        <UpdateReservationDialog
+          open={open}
+          reservation={reservation}
+          create={create}
+          onClose={handleClose}
+          onSubmitted={handleClose}
+        />
+      )}
+    </>
+  );
+}
+
+export function useUpdateAccommodationReservation(): DialogContext {
+  return React.useContext(DialogContextK)!;
+}

geneit_app/src/routes/family/FamilySettingsRoute.tsx

@@ -71,6 +71,9 @@ function FamilySettingsCard(): React.ReactElement {
   const [enableGenealogy, setEnableGenealogy] = React.useState(
     family.family.enable_genealogy
   );
+  const [enableAccommodations, setEnableAccommodations] = React.useState(
+    family.family.enable_accommodations
+  );
 
   const canEdit = family.family.is_admin;
 
@@ -86,6 +89,7 @@ function FamilySettingsCard(): React.ReactElement {
         id: family.family.family_id,
         name: newName,
         enable_genealogy: enableGenealogy,
+        enable_accommodations: enableAccommodations,
       });
 
       family.reloadFamilyInfo();
@@ -118,14 +122,12 @@ function FamilySettingsCard(): React.ReactElement {
             label="Identifiant"
             value={family.family.family_id}
           />
-
           <TextField
             disabled
             fullWidth
             label="Création de la famille"
             value={formatDate(family.family.time_create)}
           />
-
           <TextField
             fullWidth
             label="Nom de la famille"
@@ -136,7 +138,6 @@ function FamilySettingsCard(): React.ReactElement {
               maxLength: ServerApi.Config.constraints.family_name_len.max,
             }}
           />
-
           <FormControlLabel
             disabled={!canEdit}
             control={
@@ -147,6 +148,16 @@ function FamilySettingsCard(): React.ReactElement {
             }
             label="Activer le module de généalogie"
           />
+          <FormControlLabel
+            disabled={!canEdit}
+            control={
+              <Switch
+                checked={enableAccommodations}
+                onChange={(_e, c) => setEnableAccommodations(c)}
+              />
+            }
+            label="Activer le module de réservation de logements"
+          />
         </Box>
       </CardContent>
       <CardActions>

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

@@ -0,0 +1,21 @@
+import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
+import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
+
+export function AccommodationsHomeRoute(): React.ReactElement {
+  const accommodations = useAccommodations();
+  return (
+    <>
+      <FamilyPageTitle title="Réservation de logements" />
+      <div style={{ margin: "20px" }}>
+        <p>
+          Depuis cette section de l'application, vous pouvez effectuer des
+          réservations de logements.
+        </p>
+        <p>&nbsp;</p>
+        <p>
+          Nombre de logements définis : {accommodations.accommodations.size}
+        </p>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,598 @@
+import { DateSelectArg, EventClickArg } from "@fullcalendar/core";
+import frLocale from "@fullcalendar/core/locales/fr";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+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,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  IconButton,
+  Menu,
+  MenuItem,
+  Popover,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import { red } from "@mui/material/colors";
+import React from "react";
+import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
+import { Accommodation } from "../../../api/accommodations/AccommodationListApi";
+import {
+  AccommodationReservation,
+  AccommodationsReservationsApi,
+  AccommodationsReservationsList,
+  ValidateResaResult,
+} from "../../../api/accommodations/AccommodationsReservationsApi";
+import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
+import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
+import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
+import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
+import { useUpdateAccommodationReservation } from "../../../hooks/context_providers/accommodations/UpdateReservationDialogProvider";
+import {
+  fmtUnixDate,
+  fmtUnixDateFullCalendar,
+} from "../../../utils/time_utils";
+import { AsyncWidget } from "../../../widgets/AsyncWidget";
+import { useUser } from "../../../widgets/BaseAuthenticatedPage";
+import { useFamily } from "../../../widgets/BaseFamilyRoute";
+import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
+import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
+
+export function AccommodationsReservationsRoute(): React.ReactElement {
+  const snackbar = useSnackbar();
+  const alert = useAlert();
+  const confirm = useConfirm();
+  const loadingMessage = useLoadingMessage();
+
+  const loadKey = React.useRef(1);
+
+  const user = useUser();
+  const family = useFamily();
+  const accommodations = useAccommodations();
+  const updateReservation = useUpdateAccommodationReservation();
+
+  const [reservations, setReservations] = React.useState<
+    AccommodationsReservationsList | undefined
+  >();
+  const [users, setUsers] = React.useState<FamilyUser[] | null>(null);
+
+  const [showValidated, setShowValidated] = React.useState(true);
+  const [showRejected, setShowRejected] = React.useState(true);
+  const [showPending, setShowPending] = React.useState(true);
+
+  const [hiddenPeople, setHiddenPeople] = React.useState<Set<number>>(
+    new Set()
+  );
+  const [hiddenAccommodations, setHiddenAccommodations] = React.useState<
+    Set<number>
+  >(new Set());
+
+  const eventPopupAnchor = React.useRef<HTMLDivElement>(null);
+  const [activeEvent, setActiveEvent] = React.useState<
+    | undefined
+    | {
+        user: FamilyUser;
+        accommodation: Accommodation;
+        reservation: AccommodationReservation;
+
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+      }
+  >();
+
+  const [validateResaAnchorEl, setValidateResaAnchorEl] =
+    React.useState<null | HTMLElement>(null);
+
+  const load = async () => {
+    setReservations(
+      await AccommodationsReservationsApi.FullListOfFamily(family.family)
+    );
+    setUsers(await FamilyApi.GetUsersList(family.family.family_id));
+  };
+
+  const reload = async () => {
+    loadKey.current += 1;
+    setUsers(null);
+  };
+
+  const visibleReservations = React.useMemo(() => {
+    return reservations?.filter((r) => {
+      if (!showValidated && r.validated === true) return false;
+      if (!showPending && r.validated === null) return false;
+      if (!showRejected && r.validated === false) return false;
+      if (hiddenPeople.has(r.user_id)) return false;
+      if (hiddenAccommodations.has(r.accommodation_id)) return false;
+      return true;
+    });
+  }, [
+    showValidated,
+    showRejected,
+    showPending,
+    hiddenPeople,
+    hiddenAccommodations,
+    reservations,
+  ]);
+
+  const onSelect = async (d: DateSelectArg) => {
+    try {
+      const resa = await updateReservation(
+        {
+          accommodation_id: -1,
+          start: Math.floor(d.start.getTime() / 1000),
+          end: Math.floor(d.end.getTime() / 1000),
+        },
+        true
+      );
+
+      if (!resa) return;
+
+      loadingMessage.show("Création de la réservation en cours...");
+
+      await AccommodationsReservationsApi.Create(family.family, resa);
+
+      reload();
+      snackbar("La réservation a été créée avec succès !");
+    } catch (e) {
+      console.error("Failed to create a reservation!", e);
+      alert("Échec de la création de la réservation!");
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
+  const onEventClick = (ev: EventClickArg) => {
+    const id: number = ev.event.extendedProps.id;
+    const resa = reservations?.get(id)!;
+    const acc = accommodations.accommodations.get(resa.accommodation_id)!;
+
+    const user = users?.find((u) => u.user_id === resa.user_id);
+
+    if (!user) {
+      console.error(`User ${resa.user_id} not found!`);
+      return;
+    }
+
+    const loc = ev.el.getBoundingClientRect();
+    setActiveEvent({
+      reservation: resa,
+      accommodation: acc,
+      user: user,
+
+      x: loc.left,
+      y: loc.top,
+      w: loc.width,
+      h: loc.height,
+    });
+  };
+
+  const respondToResaRequest = async (
+    r: AccommodationReservation,
+    validate: boolean
+  ) => {
+    try {
+      loadingMessage.show("Validation de la réservation en cours...");
+
+      setValidateResaAnchorEl(null);
+      setActiveEvent(undefined);
+
+      const res = await AccommodationsReservationsApi.Validate(r, validate);
+
+      if (res === ValidateResaResult.Conflict) {
+        throw new Error(
+          "The reservation is in conflict with other reservations!"
+        );
+      } else if (res === ValidateResaResult.Error) {
+        throw new Error("Failed to validate the reservation!");
+      }
+
+      reload();
+      snackbar("La réservation a été mise à jour avec succès !");
+    } catch (e) {
+      console.error("Failed to respond to reservation request!", e);
+      alert(`Echec de l'enregistrement de la réponse à la réservation ! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
+  const validateReservation = async (r: AccommodationReservation) => {
+    respondToResaRequest(r, true);
+  };
+
+  const rejectReservation = async (r: AccommodationReservation) => {
+    if (
+      !(await confirm(
+        "Voulez-vous vraiment rejeter cette demande de réservation ?"
+      ))
+    )
+      return;
+    respondToResaRequest(r, false);
+  };
+
+  const changeReservation = async (r: AccommodationReservation) => {
+    try {
+      const ac = accommodations.accommodations.get(r.accommodation_id);
+      if (
+        ac?.need_validation &&
+        !(await confirm(
+          "Voulez-vous vraiment changer cette réservation ? Celle-ci devra être de nouveau validée !"
+        ))
+      )
+        return;
+
+      const newResa = await updateReservation(
+        {
+          reservation_id: r.id,
+          accommodation_id: r.accommodation_id,
+          start: r.reservation_start,
+          end: r.reservation_end,
+        },
+        false
+      );
+
+      if (!newResa) return;
+
+      setActiveEvent(undefined);
+      loadingMessage.show("Mise à jour de la réservation en cours...");
+
+      await AccommodationsReservationsApi.Update(family.family, newResa);
+
+      reload();
+      snackbar("La réservation a été mise à jour avec succès !");
+    } catch (e) {
+      console.error("Failed to update a reservation!", e);
+      alert("Échec de la mise à jour de la réservation!");
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
+  const deleteReservation = async (r: AccommodationReservation) => {
+    try {
+      if (
+        !(await confirm(
+          "Voulez-vous vraiment supprimer cette réservation ? L'opération n'est pas réversible !"
+        ))
+      )
+        return;
+
+      setActiveEvent(undefined);
+      loadingMessage.show("Suppression de la réservation en cours...");
+
+      await AccommodationsReservationsApi.Delete(r);
+
+      reload();
+      snackbar("La réservation a été supprimée avec succès !");
+    } catch (e) {
+      console.error("Failed to delete a reservation!", e);
+      alert("Échec de la suppression de la réservation!");
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
+  return (
+    <>
+      <FamilyPageTitle title="Réservations" />
+      <AsyncWidget
+        loadKey={loadKey.current}
+        load={load}
+        errMsg="Echec du chargement de la liste des réservations !"
+        build={() => (
+          <div style={{ display: "flex", flexDirection: "row" }}>
+            <div style={{ flex: 1, maxWidth: "250px", marginRight: "20px" }}>
+              <Alert severity="info">
+                Cliquez sur le calendrier pour créer une réservation.
+              </Alert>
+
+              {/* Invitation status */}
+              <FormControl
+                sx={{ m: 3 }}
+                component="fieldset"
+                variant="standard"
+              >
+                <FormLabel component="legend">Status</FormLabel>
+                <FormGroup>
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={showValidated}
+                        onChange={(_ev, v) => setShowValidated(v)}
+                        color="success"
+                      />
+                    }
+                    label="Validées"
+                  />
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={showRejected}
+                        onChange={(_ev, v) => setShowRejected(v)}
+                        color="error"
+                      />
+                    }
+                    label="Rejetées"
+                  />
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={showPending}
+                        onChange={(_ev, v) => setShowPending(v)}
+                        color="info"
+                      />
+                    }
+                    label="En attente de validation"
+                  />
+                </FormGroup>
+              </FormControl>
+
+              {/* Accommodations */}
+              <FormControl
+                sx={{ m: 3 }}
+                component="fieldset"
+                variant="standard"
+              >
+                <FormLabel component="legend">Logements</FormLabel>
+                <FormGroup>
+                  {accommodations.accommodations.fullList.map((a) => (
+                    <FormControlLabel
+                      key={a.id}
+                      control={
+                        <Checkbox
+                          sx={{
+                            color: "#" + a.color,
+                            "&.Mui-checked": {
+                              color: "#" + a.color,
+                            },
+                          }}
+                          checked={!hiddenAccommodations.has(a.id)}
+                          onChange={(_ev, v) => {
+                            if (v) hiddenAccommodations.delete(a.id);
+                            else hiddenAccommodations.add(a.id);
+                            setHiddenAccommodations(
+                              new Set(hiddenAccommodations)
+                            );
+                          }}
+                        />
+                      }
+                      label={a.name}
+                    />
+                  ))}
+                </FormGroup>
+              </FormControl>
+
+              {/* People */}
+              <FormControl
+                sx={{ m: 3 }}
+                component="fieldset"
+                variant="standard"
+              >
+                <FormLabel component="legend">Personnes</FormLabel>
+                <FormGroup>
+                  {users?.map((u) => (
+                    <FormControlLabel
+                      key={u.user_id}
+                      control={
+                        <Checkbox
+                          checked={!hiddenPeople.has(u.user_id)}
+                          onChange={(_ev, v) => {
+                            if (v) hiddenPeople.delete(u.user_id);
+                            else hiddenPeople.add(u.user_id);
+                            setHiddenPeople(new Set(hiddenPeople));
+                          }}
+                        />
+                      }
+                      label={u.user_name}
+                    />
+                  ))}
+                </FormGroup>
+              </FormControl>
+            </div>
+
+            {/* The calendar */}
+            <div style={{ flex: 5 }}>
+              <FullCalendar
+                editable={true}
+                selectable={true}
+                plugins={[dayGridPlugin, listPlugin, interactionPlugin]}
+                initialView="dayGridMonth"
+                height="700px"
+                locale={frLocale}
+                headerToolbar={{
+                  left: "prev,next today",
+                  center: "title",
+                  right: "dayGridMonth,dayGridWeek,dayGridDay,listWeek",
+                }}
+                select={onSelect}
+                eventClick={onEventClick}
+                events={visibleReservations?.map((r) => {
+                  const a = accommodations.accommodations.get(
+                    r.accommodation_id
+                  )!;
+                  const u = users?.find((u) => u.user_id === r.user_id);
+                  return {
+                    title: `${u?.user_name} - ${a.name}`,
+                    start: fmtUnixDateFullCalendar(r.reservation_start, false),
+                    end: fmtUnixDateFullCalendar(r.reservation_end, true),
+                    allDay: true,
+                    color: a.color ? "#" + a.color : undefined,
+                    borderColor:
+                      r.validated === true
+                        ? "green"
+                        : r.validated === false
+                        ? "red"
+                        : "grey ",
+                    extendedProps: {
+                      id: r.id,
+                    },
+                  };
+                })}
+              />
+            </div>
+
+            {/* Calendar event popover */}
+            <div
+              ref={eventPopupAnchor}
+              id="active-event-anchor"
+              style={{
+                position: "fixed",
+                top: activeEvent?.y + "px",
+                left: activeEvent?.x + "px",
+                width: activeEvent?.w + "px",
+                height: activeEvent?.h + "px",
+                backgroundColor: "pink",
+                zIndex: 0,
+              }}
+            ></div>
+            <Popover
+              open={activeEvent !== undefined}
+              anchorEl={eventPopupAnchor.current}
+              onClose={() => {
+                setActiveEvent(undefined);
+              }}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+            >
+              <Card sx={{ maxWidth: 345 }} elevation={6}>
+                <CardHeader
+                  avatar={
+                    <Avatar sx={{ bgcolor: red[500] }}>
+                      {activeEvent?.user.user_name
+                        .substring(0, 1)
+                        .toLocaleUpperCase()}
+                    </Avatar>
+                  }
+                  title={activeEvent?.user.user_name}
+                  subheader={activeEvent?.user.user_mail}
+                />
+
+                <CardContent>
+                  <Typography variant="body2" color="text.secondary">
+                    <p>
+                      Réservation de {activeEvent?.accommodation.name}
+                      <br />
+                      <em>{activeEvent?.accommodation.description}</em>
+                    </p>
+                    <p>
+                      Du{" "}
+                      {fmtUnixDate(
+                        activeEvent?.reservation.reservation_start ?? 0
+                      )}{" "}
+                      <br />
+                      Au{" "}
+                      {fmtUnixDate(
+                        activeEvent?.reservation.reservation_end ?? 0
+                      )}
+                    </p>
+                    <p>
+                      <strong>
+                        {activeEvent?.reservation.validated === false ? (
+                          <span style={{ color: "#f44336" }}>Refusée</span>
+                        ) : activeEvent?.reservation.validated === true ? (
+                          <span style={{ color: "#66bb6a" }}>Validée</span>
+                        ) : (
+                          <span style={{ color: "#29b6f6" }}>
+                            En attente de validation
+                          </span>
+                        )}
+                      </strong>
+                    </p>
+                  </Typography>
+                </CardContent>
+                <CardActions disableSpacing>
+                  {activeEvent?.accommodation.need_validation &&
+                    family.family.is_admin && (
+                      <>
+                        <Tooltip
+                          title="Valider (ou rejeter) la réservation"
+                          arrow
+                        >
+                          <IconButton
+                            onClick={(e) =>
+                              setValidateResaAnchorEl(e.currentTarget)
+                            }
+                          >
+                            <RuleIcon />
+                          </IconButton>
+                        </Tooltip>
+                        <Menu
+                          anchorEl={validateResaAnchorEl}
+                          open={!!validateResaAnchorEl && !!activeEvent}
+                          onClose={() => setValidateResaAnchorEl(null)}
+                        >
+                          <MenuItem
+                            disabled={
+                              activeEvent.reservation.validated === true
+                            }
+                            onClick={() =>
+                              validateReservation(activeEvent.reservation)
+                            }
+                          >
+                            Valider
+                          </MenuItem>
+                          <MenuItem
+                            disabled={
+                              activeEvent.reservation.validated === false
+                            }
+                            onClick={() =>
+                              rejectReservation(activeEvent.reservation)
+                            }
+                          >
+                            Rejeter
+                          </MenuItem>
+                        </Menu>
+                      </>
+                    )}
+
+                  {user.user.id === activeEvent?.reservation.user_id && (
+                    <>
+                      <Tooltip title="Modifier les dates de réservation" arrow>
+                        <IconButton
+                          disabled={
+                            !activeEvent.accommodation.open_to_reservations
+                          }
+                          onClick={() =>
+                            changeReservation(activeEvent?.reservation)
+                          }
+                        >
+                          <EditIcon />
+                        </IconButton>
+                      </Tooltip>
+                      <Tooltip title="Supprimer la réservation" arrow>
+                        <IconButton
+                          color="error"
+                          onClick={() =>
+                            deleteReservation(activeEvent?.reservation)
+                          }
+                        >
+                          <DeleteIcon />
+                        </IconButton>
+                      </Tooltip>
+                    </>
+                  )}
+                </CardActions>
+              </Card>
+            </Popover>
+          </div>
+        )}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,410 @@
+import AddIcon from "@mui/icons-material/Add";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import HouseIcon from "@mui/icons-material/House";
+import {
+  Alert,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import {
+  Accommodation,
+  AccommodationListApi,
+} from "../../../api/accommodations/AccommodationListApi";
+import {
+  AccommodationCalendarURL,
+  AccommodationsCalendarURLApi,
+} from "../../../api/accommodations/AccommodationsCalendarURLApi";
+import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
+import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
+import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
+import { useCreateAccommodationCalendarURL } from "../../../hooks/context_providers/accommodations/CreateAccommodationCalendarURLDialogProvider";
+import { useInstallCalendarDialog } from "../../../hooks/context_providers/accommodations/InstallCalendarDialogProvider";
+import { useUpdateAccommodation } from "../../../hooks/context_providers/accommodations/UpdateAccommodationDialogProvider";
+import { AsyncWidget } from "../../../widgets/AsyncWidget";
+import { useFamily } from "../../../widgets/BaseFamilyRoute";
+import { FamilyCard } from "../../../widgets/FamilyCard";
+import { TimeWidget } from "../../../widgets/TimeWidget";
+import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
+
+const CARDS_WIDTH = "500px";
+
+export function AccommodationsSettingsRoute(): React.ReactElement {
+  return (
+    <>
+      <AccommodationsListCard />
+      <AccommodationsCalURLsCard />
+    </>
+  );
+}
+
+function AccommodationsListCard(): React.ReactElement {
+  const loading = useLoadingMessage();
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+
+  const family = useFamily();
+  const accommodations = useAccommodations();
+
+  const [error, setError] = React.useState<string>();
+  const [success, setSuccess] = React.useState<string>();
+
+  const updateAccommodation = useUpdateAccommodation();
+
+  const createAccommodation = async () => {
+    setError(undefined);
+    setSuccess(undefined);
+    try {
+      const accommodation = await updateAccommodation(
+        {
+          name: "",
+          open_to_reservations: true,
+          need_validation: false,
+          color: "2196f3",
+        },
+        true
+      );
+
+      if (!accommodation) return;
+
+      loading.show("Création du logement en cours...");
+
+      await AccommodationListApi.Create(family.family, accommodation);
+
+      snackbar("Le logement a été créé avec succès !");
+      await accommodations.reloadAccommodationsList();
+    } catch (e) {
+      console.error("Failed to create accommodation!", e);
+      setError(`Échec de la création du logement! ${e}`);
+    } finally {
+      loading.hide();
+    }
+  };
+
+  const requestUpdateAccommodation = async (a: Accommodation) => {
+    setError(undefined);
+    setSuccess(undefined);
+    try {
+      const update = await updateAccommodation(a, false);
+      if (!update) return;
+
+      loading.show("Mise à jour du logement en cours...");
+
+      await AccommodationListApi.Update(a, update);
+
+      snackbar("Le logement a été créé avec succès !");
+      await accommodations.reloadAccommodationsList();
+    } catch (e) {
+      console.error("Failed to update accommodation!", e);
+      setError(`Échec de la mise à jour du logement! ${e}`);
+    } finally {
+      loading.hide();
+    }
+  };
+
+  const deleteAccommodation = async (a: Accommodation) => {
+    setError(undefined);
+    setSuccess(undefined);
+    try {
+      if (
+        !(await confirm(
+          `Voulez-vous vraiment supprimer le logement '${a.name}' ? Cette opération est définitive !`
+        ))
+      )
+        return;
+      loading.show("Suppression du logement en cours...");
+
+      await AccommodationListApi.Delete(a);
+
+      snackbar("Le logement a été supprimé avec succès !");
+      await accommodations.reloadAccommodationsList();
+    } catch (e) {
+      console.error("Failed to delete accommodation!", e);
+      setError(`Échec de la suppression du logement! ${e}`);
+    } finally {
+      loading.hide();
+    }
+  };
+
+  return (
+    <FamilyCard error={error} success={success} style={{ width: CARDS_WIDTH }}>
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Logements
+        </Typography>
+
+        {/* Display the list of accommodations */}
+        {accommodations.accommodations.isEmpty && (
+          <div style={{ textAlign: "center", margin: "25px" }}>
+            Aucun logement enregistré pour le moment !
+          </div>
+        )}
+        {accommodations.accommodations.fullList.map((a) => (
+          <AccommodationCard
+            accommodation={a}
+            onRequestUpdate={requestUpdateAccommodation}
+            onRequestDelete={deleteAccommodation}
+          />
+        ))}
+
+        {family.family.is_admin && (
+          <Button
+            startIcon={<AddIcon />}
+            variant="outlined"
+            color="info"
+            fullWidth
+            onClick={createAccommodation}
+            size={"large"}
+          >
+            Ajouter un logement
+          </Button>
+        )}
+      </CardContent>
+    </FamilyCard>
+  );
+}
+
+function AccommodationCard(p: {
+  accommodation: Accommodation;
+  onRequestUpdate: (a: Accommodation) => void;
+  onRequestDelete: (a: Accommodation) => void;
+}): React.ReactElement {
+  const family = useFamily();
+  return (
+    <Card sx={{ minWidth: 275, margin: "10px 0px" }} variant="outlined">
+      <CardContent>
+        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+          Mis à jour il y a <TimeWidget time={p.accommodation.time_update} />
+        </Typography>
+        <Typography variant="h5" component="div">
+          <HouseIcon sx={{ color: "#" + p.accommodation.color }} />{" "}
+          {p.accommodation.name}
+        </Typography>
+        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+          {p.accommodation.description}
+        </Typography>
+        <Typography variant="body2">
+          <BoolIcon checked={p.accommodation.open_to_reservations} /> Ouvert aux
+          réservations
+          <br />
+          <BoolIcon checked={!p.accommodation.need_validation} /> Réservation
+          sans validation d'un administrateur
+        </Typography>
+      </CardContent>
+      {family.family.is_admin && (
+        <CardActions>
+          <span style={{ flex: 1 }}></span>
+          <Button
+            size="small"
+            onClick={() => p.onRequestUpdate(p.accommodation)}
+          >
+            Modifier
+          </Button>
+          <Button
+            size="small"
+            color="error"
+            onClick={() => p.onRequestDelete(p.accommodation)}
+          >
+            Supprimer
+          </Button>
+        </CardActions>
+      )}
+    </Card>
+  );
+}
+
+function BoolIcon(p: { checked?: boolean }): React.ReactElement {
+  return p.checked ? (
+    <CheckIcon color="success" />
+  ) : (
+    <CloseIcon color="error" />
+  );
+}
+
+function AccommodationsCalURLsCard(): React.ReactElement {
+  const key = React.useRef(0);
+
+  const confirm = useConfirm();
+  const loading = useLoadingMessage();
+
+  const [error, setError] = React.useState<string>();
+  const [success, setSuccess] = React.useState<string>();
+
+  const [list, setList] = React.useState<
+    AccommodationCalendarURL[] | undefined
+  >();
+
+  const family = useFamily();
+
+  const createCalendarURLDialog = useCreateAccommodationCalendarURL();
+  const calendarURLDialog = useInstallCalendarDialog();
+
+  const load = async () => {
+    setList(await AccommodationsCalendarURLApi.GetList(family.family));
+  };
+
+  const reload = () => {
+    key.current += 1;
+    setList(undefined);
+  };
+
+  const onRequestDelete = async (c: AccommodationCalendarURL) => {
+    setError(undefined);
+    setSuccess(undefined);
+    try {
+      if (
+        !(await confirm(
+          `Voulez-vous vraiment supprimer le calendrier '${c.name}' ? Cette opération est définitive !`
+        ))
+      )
+        return;
+
+      loading.show("Suppression du calendrier en cours...");
+
+      await AccommodationsCalendarURLApi.Delete(c);
+
+      setSuccess("Le calendrier a été supprimé avec succès !");
+      reload();
+    } catch (e) {
+      console.error("Failed to delete accommodation!", e);
+      setError(`Échec de la suppression du logement! ${e}`);
+    } finally {
+      loading.hide();
+    }
+  };
+
+  const createCalendarURL = async () => {
+    try {
+      const newCal = await createCalendarURLDialog();
+
+      if (!newCal) return;
+
+      loading.show("Création du calendrier en cours...");
+
+      const cal = await AccommodationsCalendarURLApi.Create(
+        family.family,
+        newCal
+      );
+
+      setSuccess("Le calendrier a été créé avec succès !");
+
+      reload();
+
+      calendarURLDialog(cal);
+    } catch (e) {
+      console.error("Failed to create new accommodation calendar URL!", e);
+      setError(`Échec de la création du calendrier! ${e}`);
+    } finally {
+      loading.hide();
+    }
+  };
+
+  return (
+    <FamilyCard error={error} success={success} style={{ width: CARDS_WIDTH }}>
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          URL de calendriers
+        </Typography>
+        <Typography>
+          Vous pouvez, si vous le souhaitez, importer dans votre application de
+          calendrier le planning de réservation des logements. Pour ce faire, il
+          vous suffit de créer une URL de calendrier.
+        </Typography>
+
+        <Alert severity="info">
+          Les calendriers créés ici ne sont visible que par vous. Vous ne pouvez
+          pas manipuler les calendriers créés par les autres membres de la
+          famille.
+        </Alert>
+
+        <Button
+          startIcon={<AddIcon />}
+          variant="outlined"
+          color="info"
+          fullWidth
+          onClick={createCalendarURL}
+          size={"large"}
+        >
+          Créer un calendrier
+        </Button>
+
+        <br />
+        <br />
+
+        <AsyncWidget
+          ready={list !== undefined}
+          loadKey={key.current}
+          load={load}
+          errMsg="Echec du chargement de la liste des calendriers !"
+          build={() =>
+            list?.length === 0 ? (
+              <>
+                <p style={{ textAlign: "center" }}>
+                  Vous n'avez créé aucun calendrier pour le moment !
+                </p>
+              </>
+            ) : (
+              <>
+                {list?.map((c) => (
+                  <CalendarItem c={c} onRequestDelete={onRequestDelete} />
+                ))}
+              </>
+            )
+          }
+        />
+      </CardContent>
+    </FamilyCard>
+  );
+}
+
+function CalendarItem(p: {
+  c: AccommodationCalendarURL;
+  onRequestDelete: (c: AccommodationCalendarURL) => void;
+}): React.ReactElement {
+  const accommodations = useAccommodations();
+
+  const installCal = useInstallCalendarDialog();
+
+  return (
+    <Card sx={{ minWidth: 275, margin: "10px 0px" }} variant="outlined">
+      <CardContent>
+        <Typography
+          sx={{ fontSize: 14 }}
+          color="text.secondary"
+          gutterBottom
+        ></Typography>
+        <Typography variant="h5" component="div">
+          {p.c.name}
+        </Typography>
+        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+          {p.c.accommodation_id
+            ? accommodations.accommodations.get(p.c.accommodation_id)?.name
+            : "Tous les logements"}
+        </Typography>
+        <Typography variant="body2">
+          Créé il y a <TimeWidget time={p.c.time_create} />
+          <br />
+          Utilisé il y a <TimeWidget time={p.c.time_used} />
+        </Typography>
+      </CardContent>
+
+      <CardActions>
+        <span style={{ flex: 1 }}></span>
+        <Button size="small" onClick={() => installCal(p.c)}>
+          Installer
+        </Button>
+        <Button
+          size="small"
+          color="error"
+          onClick={() => p.onRequestDelete(p.c)}
+        >
+          Supprimer
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}

geneit_app/src/utils/form_utils.ts

@@ -0,0 +1,21 @@
+import { LenConstraint } from "../api/ServerApi";
+
+/**
+ * Check if a constraint was respected or not
+ *
+ * @returns An error message appropriate for the constraint
+ * violation, if any, or undefined otherwise
+ */
+export function checkConstraint(
+  constraint: LenConstraint,
+  value: string | undefined
+): string | undefined {
+  value = value ?? "";
+  if (value.length < constraint.min)
+    return `Veuillez indiquer au moins ${constraint.min} caractères !`;
+
+  if (value.length > constraint.max)
+    return `Veuillez indiquer au maximum ${constraint.max} caractères !`;
+
+  return undefined;
+}

geneit_app/src/utils/time_utils.ts

@@ -0,0 +1,31 @@
+/**
+ * Get formatted UNIX date
+ */
+export function fmtUnixDate(time: number): string {
+  return new Date(time * 1000).toLocaleString("fr-FR");
+}
+
+/**
+ * Get formatted UNIX date for Full Calendar
+ */
+export function fmtUnixDateFullCalendar(
+  time: number,
+  correctEnd: boolean
+): string {
+  let d = new Date(time * 1000);
+
+  if (d.getHours() > 0 && correctEnd)
+    d = new Date(time * 1000 + 3600 * 24 * 1000);
+
+  const s = `${d.getFullYear()}-${(d.getMonth() + 1)
+    .toString(10)
+    .padStart(2, "0")}-${d.getDate().toString(10).padStart(2, "0")}`; /*T${d
+    .getHours()
+    .toString(10)
+    .padStart(2, "0")}:${d.getMinutes().toString(10).padStart(2, "0")}:${d
+    .getSeconds()
+    .toString(10)
+    .padStart(2, "0")}`*/
+
+  return s;
+}

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -5,12 +5,14 @@ import {
   mdiCrowd,
   mdiFamilyTree,
   mdiFileTree,
+  mdiHomeGroup,
   mdiHumanMaleFemale,
   mdiLockCheck,
   mdiPlus,
   mdiRefresh,
 } from "@mdi/js";
 import Icon from "@mdi/react";
+import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
 import HomeIcon from "@mui/icons-material/Home";
 import {
   Box,
@@ -184,6 +186,24 @@ export function BaseFamilyRoute(): React.ReactElement {
                   </>
                 )}
 
+                {family?.enable_accommodations && (
+                  <>
+                    <Divider sx={{ my: 1 }} />
+                    <ListSubheader component="div">Logements</ListSubheader>
+
+                    <FamilyLink
+                      icon={<HomeIcon />}
+                      label="Accueil"
+                      uri="accommodations"
+                    />
+                    <FamilyLink
+                      icon={<CalendarMonthIcon />}
+                      label="Réservations"
+                      uri="accommodations/reservations"
+                    />
+                  </>
+                )}
+
                 <Divider sx={{ my: 1 }} />
                 <ListSubheader component="div">Administration</ListSubheader>
 
@@ -207,6 +227,14 @@ export function BaseFamilyRoute(): React.ReactElement {
                   />
                 )}
 
+                {family?.enable_accommodations && (
+                  <FamilyLink
+                    icon={<Icon path={mdiHomeGroup} size={1} />}
+                    label="Logements"
+                    uri="accommodations/settings"
+                  />
+                )}
+
                 {/* Invitation code */}
 
                 <ListItem

geneit_app/src/widgets/CopyToClipboard.tsx

@@ -0,0 +1,30 @@
+import { ButtonBase } from "@mui/material";
+import { PropsWithChildren } from "react";
+import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
+
+export function CopyToClipboard(
+  p: PropsWithChildren<{ content: string }>
+): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const copy = () => {
+    navigator.clipboard.writeText(p.content);
+    snackbar(`${p.content} a été copié dans le presse papier.`);
+  };
+
+  return (
+    <ButtonBase
+      onClick={copy}
+      style={{
+        display: "inline-block",
+        alignItems: "unset",
+        textAlign: "unset",
+        position: "relative",
+        padding: "0px",
+      }}
+      disableRipple
+    >
+      {p.children}
+    </ButtonBase>
+  );
+}

geneit_app/src/widgets/FamilyCard.tsx

@@ -2,10 +2,14 @@ import { Alert, Card } from "@mui/material";
 import { PropsWithChildren } from "react";
 
 export function FamilyCard(
-  p: PropsWithChildren<{ error?: string; success?: string }>
+  p: PropsWithChildren<{
+    error?: string;
+    success?: string;
+    style?: React.CSSProperties | undefined;
+  }>
 ): React.ReactElement {
   return (
-    <Card style={{ margin: "10px auto", maxWidth: "450px" }}>
+    <Card style={{ ...p.style, margin: "10px auto", maxWidth: "450px" }}>
       {p.error && <Alert severity="error">{p.error}</Alert>}
       {p.success && <Alert severity="success">{p.success}</Alert>}
 

geneit_app/src/widgets/accommodations/BaseAccommodationsRoute.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import {
+  AccommodationListApi,
+  AccommodationsList,
+} from "../../api/accommodations/AccommodationListApi";
+import { CreateAccommodationCalendarURLDialogProvider } from "../../hooks/context_providers/accommodations/CreateAccommodationCalendarURLDialogProvider";
+import { InstallCalendarDialogProvider } from "../../hooks/context_providers/accommodations/InstallCalendarDialogProvider";
+import { UpdateAccommodationDialogProvider } from "../../hooks/context_providers/accommodations/UpdateAccommodationDialogProvider";
+import { UpdateReservationDialogProvider } from "../../hooks/context_providers/accommodations/UpdateReservationDialogProvider";
+import { AsyncWidget } from "../AsyncWidget";
+import { useFamily } from "../BaseFamilyRoute";
+
+interface AccommodationsContext {
+  accommodations: AccommodationsList;
+  reloadAccommodationsList: () => Promise<void>;
+}
+
+const AccommodationsContextK =
+  React.createContext<AccommodationsContext | null>(null);
+
+export function BaseAccommodationsRoute(): React.ReactElement {
+  const family = useFamily();
+
+  const [accommodations, setAccommodations] =
+    React.useState<null | AccommodationsList>(null);
+
+  const loadKey = React.useRef(1);
+
+  const loadPromise = React.useRef<() => void>();
+
+  const load = async () => {
+    setAccommodations(
+      await AccommodationListApi.GetListOfFamily(family.family)
+    );
+  };
+
+  const onReload = async () => {
+    loadKey.current += 1;
+    setAccommodations(null);
+
+    return new Promise<void>((res, _rej) => {
+      loadPromise.current = () => res();
+    });
+  };
+
+  return (
+    <AsyncWidget
+      ready={accommodations !== null}
+      loadKey={`${family.familyId}-${loadKey.current}`}
+      load={load}
+      errMsg="Échec du chargement des informations sur les logements de la famille !"
+      build={() => {
+        if (loadPromise.current != null) {
+          loadPromise.current?.();
+          loadPromise.current = undefined;
+        }
+
+        return (
+          <AccommodationsContextK.Provider
+            value={{
+              accommodations: accommodations!,
+              reloadAccommodationsList: onReload,
+            }}
+          >
+            <UpdateAccommodationDialogProvider>
+              <CreateAccommodationCalendarURLDialogProvider>
+                <InstallCalendarDialogProvider>
+                  <UpdateReservationDialogProvider>
+                    <Outlet />
+                  </UpdateReservationDialogProvider>
+                </InstallCalendarDialogProvider>
+              </CreateAccommodationCalendarURLDialogProvider>
+            </UpdateAccommodationDialogProvider>
+          </AccommodationsContextK.Provider>
+        );
+      }}
+    />
+  );
+}
+
+export function useAccommodations(): AccommodationsContext {
+  return React.useContext(AccommodationsContextK)!;
+}

geneit_app/src/widgets/forms/PropCheckbox.tsx

@@ -5,16 +5,20 @@ export function PropCheckbox(p: {
   label: string;
   checked: boolean | undefined;
   onValueChange: (v: boolean) => void;
+  checkboxAlwaysVisible?: boolean;
 }): React.ReactElement {
-  if (!p.editable && p.checked)
-    return <Typography variant="body2">{p.label}</Typography>;
+  if (!p.checkboxAlwaysVisible) {
+    if (!p.editable && p.checked)
+      return <Typography variant="body2">{p.label}</Typography>;
 
-  if (!p.editable) return <></>;
+    if (!p.editable) return <></>;
+  }
 
   return (
     <FormControlLabel
       control={
         <Checkbox
+          disabled={!p.editable}
           checked={p.checked}
           onChange={(e) => p.onValueChange(e.target.checked)}
         />

geneit_app/src/widgets/forms/PropColorPicker.tsx

@@ -0,0 +1,24 @@
+import { MuiColorInput } from "mui-color-input";
+import { PropEdit } from "./PropEdit";
+
+export function PropColorPicker(p: {
+  editable: boolean;
+  label: string;
+  value?: string;
+  onChange: (v: string | undefined) => void;
+}): React.ReactElement {
+  if (!p.editable) {
+    if (!p.value) return <></>;
+
+    return <PropEdit editable={false} label={p.label} value={`#${p.value}`} />;
+  }
+
+  return (
+    <MuiColorInput
+      value={"#" + (p.value ?? "")}
+      fallbackValue="#ffffff"
+      format="hex"
+      onChange={(_v, c) => p.onChange(c.hex.substring(1))}
+    />
+  );
+}

geneit_app/src/widgets/forms/PropDateInput.tsx

@@ -0,0 +1,103 @@
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+import { fmtUnixDate } from "../../utils/time_utils";
+import { PropEdit } from "./PropEdit";
+import { Checkbox, FormControlLabel } from "@mui/material";
+
+export function PropDateInput(p: {
+  editable: boolean;
+  label: string;
+  value: number | undefined;
+  onChange: (v: number | undefined) => void;
+  lastSecOfDay?: boolean;
+  minDate?: number;
+  maxDate?: number;
+  canSetMiddleDay?: boolean;
+}): React.ReactElement {
+  // Check for mid-day value
+  let isMidDay = false;
+  if (p.value) {
+    const d = new Date(p.value * 1000);
+    isMidDay =
+      d.getHours() === 12 && d.getMinutes() === 0 && d.getSeconds() === 0;
+  }
+
+  // Shift value
+  let shiftV = p.value;
+  if (shiftV && p.lastSecOfDay) {
+    const d = new Date(shiftV * 1000);
+    if (d.getHours() === 0) {
+      shiftV -= 1;
+    }
+  }
+
+  if (!p.editable) {
+    if (!shiftV) return <></>;
+
+    return (
+      <PropEdit editable={false} label={p.label} value={fmtUnixDate(shiftV)} />
+    );
+  }
+
+  const value = dayjs(
+    shiftV && p.value! > 0 ? new Date(shiftV * 1000) : undefined
+  );
+
+  const minDate = p.minDate ? dayjs(new Date(p.minDate * 1000)) : undefined;
+  const maxDate = p.maxDate ? dayjs(new Date(p.maxDate * 1000)) : undefined;
+
+  return (
+    <>
+      <div style={{ height: "10px" }}></div>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
+        <DatePicker
+          label={p.label}
+          value={value}
+          onChange={(v) => {
+            if (v && p.lastSecOfDay) {
+              v = v.set("hours", 23);
+              v = v.set("minutes", 59);
+              v = v.set("seconds", 59);
+            }
+            p.onChange?.(v ? v.unix() : undefined);
+          }}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </LocalizationProvider>
+      {p.canSetMiddleDay && (
+        <FormControlLabel
+          disabled={!p.value}
+          control={
+            <Checkbox
+              checked={isMidDay}
+              onChange={(_ev, midDay) => {
+                let v = value;
+                if (midDay) {
+                  v = v.set("hours", 12);
+                  v = v.set("minutes", 0);
+                  v = v.set("seconds", 0);
+                } else if (p.lastSecOfDay) {
+                  v = v.set("hours", 23);
+                  v = v.set("minutes", 59);
+                  v = v.set("seconds", 59);
+                } else {
+                  v = v.set("hours", 0);
+                  v = v.set("minutes", 0);
+                  v = v.set("seconds", 0);
+                }
+
+                p.onChange(v.unix());
+              }}
+            />
+          }
+          label="Mi-journée"
+        />
+      )}
+      <div style={{ height: "30px" }}></div>
+    </>
+  );
+}

geneit_app/src/widgets/forms/PropEdit.tsx

@@ -14,6 +14,7 @@ export function PropEdit(p: {
   multiline?: boolean;
   minRows?: number;
   maxRows?: number;
+  helperText?: string;
 }): React.ReactElement {
   if (((!p.editable && p.value) ?? "") === "") return <></>;
 
@@ -44,6 +45,7 @@ export function PropEdit(p: {
           !p.checkValue(p.value)) ||
         false
       }
+      helperText={p.helperText}
     />
   );
 }

geneit_app/src/widgets/forms/PropSelect.tsx

@@ -2,7 +2,7 @@ import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
 import { PropEdit } from "./PropEdit";
 
 export interface SelectOption {
-  value: string;
+  value: string | undefined;
   label: string;
 }
 
@@ -19,6 +19,7 @@ export function PropSelect(p: {
     const value = p.options.find((o) => o.value === p.value)?.label;
     return <PropEdit label={p.label} editable={p.editing} value={value} />;
   }
+
   return (
     <FormControl fullWidth variant="filled" style={{ marginBottom: "15px" }}>
       <InputLabel>{p.label}</InputLabel>

geneit_app/src/widgets/genealogy/BaseGenealogyRoute.tsx

@@ -5,14 +5,14 @@ import { MemberApi, MembersList } from "../../api/genealogy/MemberApi";
 import { AsyncWidget } from "../AsyncWidget";
 import { useFamily } from "../BaseFamilyRoute";
 
-interface FamilyContext {
+interface GenealogyContext {
   members: MembersList;
   couples: CouplesList;
   reloadMembersList: () => Promise<void>;
   reloadCouplesList: () => Promise<void>;
 }
 
-const GenealogyContextK = React.createContext<FamilyContext | null>(null);
+const GenealogyContextK = React.createContext<GenealogyContext | null>(null);
 
 export function BaseGenealogyRoute(): React.ReactElement {
   const family = useFamily();
@@ -68,6 +68,6 @@ export function BaseGenealogyRoute(): React.ReactElement {
   );
 }
 
-export function useGenealogy(): FamilyContext {
+export function useGenealogy(): GenealogyContext {
   return React.useContext(GenealogyContextK)!;
 }