Add calendar interactions

geneit_app/package-lock.json

@@ -12,6 +12,11 @@
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
         "@fontsource/roboto": "^5.0.13",
+        "@fullcalendar/core": "^6.1.14",
+        "@fullcalendar/daygrid": "^6.1.14",
+        "@fullcalendar/interaction": "^6.1.14",
+        "@fullcalendar/list": "^6.1.14",
+        "@fullcalendar/react": "^6.1.14",
         "@mdi/js": "^7.2.96",
         "@mdi/react": "^1.6.1",
         "@mui/icons-material": "^5.15.17",
@@ -24,7 +29,6 @@
         "@testing-library/user-event": "^14.0.0",
         "@types/jest": "^29.0.0",
         "@types/react": "^18.3.2",
-        "@types/react-big-calendar": "^1.8.9",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.2.1",
         "date-and-time": "^3.2.0",
@@ -32,7 +36,6 @@
         "filesize": "^10.1.2",
         "jspdf": "^2.5.1",
         "react": "^18.3.1",
-        "react-big-calendar": "^1.13.0",
         "react-dom": "^18.3.1",
         "react-easy-crop": "^5.0.7",
         "react-qr-code": "^2.0.14",
@@ -1059,6 +1062,48 @@
       "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.13.tgz",
       "integrity": "sha512-j61DHjsdUCKMXSdNLTOxcG701FWnF0jcqNNQi2iPCDxU8seN/sMxeh62dC++UiagCWq9ghTypX+Pcy7kX+QOeQ=="
     },
+    "node_modules/@fullcalendar/core": {
+      "version": "6.1.14",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.14.tgz",
+      "integrity": "sha512-hIPRBevm0aMc2aHy1hRIJgXmI1QTvQM1neQa9oxtuqUmF1+ApYC3oAdwcQMTuI7lHHw3pKJDyJFkKLPPnL6HXA==",
+      "dependencies": {
+        "preact": "~10.12.1"
+      }
+    },
+    "node_modules/@fullcalendar/daygrid": {
+      "version": "6.1.14",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.14.tgz",
+      "integrity": "sha512-DSyjiA1dEM8k3bOCrZpZOmAOZu71KGtH02ze+4QKuhxkmn/zQghmmLRdfzpOrcyJg6xGKkoB4pBcO+2lXar8XQ==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.14"
+      }
+    },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "6.1.14",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.14.tgz",
+      "integrity": "sha512-rXum5XCjq+WEPNctFeYL/JKZGeU2rlxrElygocdMegcrIBJQW5hnWWVE+i4/1dOmUKF80CbGVlXUyYXoqK2eFg==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.14"
+      }
+    },
+    "node_modules/@fullcalendar/list": {
+      "version": "6.1.14",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.14.tgz",
+      "integrity": "sha512-eV0/6iCumYfvlPzIUTAONWH17/JlQCyCChUz8m06L4E/sOiNjkHGz8vlVTmZKqXzx9oWOOyV/Nm3pCtHmVZh+Q==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.14"
+      }
+    },
+    "node_modules/@fullcalendar/react": {
+      "version": "6.1.14",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-6.1.14.tgz",
+      "integrity": "sha512-sXLn2D8aPYLuDH3fy2ZhHTOz5WNSU1NhoECsGBzjUtz2IYHy6m5Y9TqlyqeAqVqFLDRSJAlKAr5LyrIvnD/IMA==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.14",
+        "react": "^16.7.0 || ^17 || ^18 || ^19",
+        "react-dom": "^16.7.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/@jest/expect-utils": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz",
@@ -1581,17 +1626,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/@restart/hooks": {
-      "version": "0.4.16",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
-      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.17.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
@@ -2078,11 +2112,6 @@
         "@babel/types": "^7.20.7"
       }
     },
-    "node_modules/@types/date-arithmetic": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@types/date-arithmetic/-/date-arithmetic-4.1.4.tgz",
-      "integrity": "sha512-p9eZ2X9B80iKiTW4ukVj8B4K6q9/+xFtQ5MGYA5HWToY9nL4EkhV9+6ftT2VHpVMEZb5Tv00Iel516bVdO+yRw=="
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -2175,16 +2204,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-big-calendar": {
-      "version": "1.8.9",
-      "resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-1.8.9.tgz",
-      "integrity": "sha512-HIHLUxR3PzWHrFdZ00VnCMvDjAh5uzlL0vMC2b7tL3bKaAJsqq9T8h+x0GVeDbZfMfHAd1cs5tZBhVvourNJXQ==",
-      "dependencies": {
-        "@types/date-arithmetic": "*",
-        "@types/prop-types": "*",
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-dom": {
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
@@ -2206,11 +2225,6 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
-    "node_modules/@types/warning": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
-      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
-    },
     "node_modules/@types/yargs": {
       "version": "17.0.32",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
@@ -2538,16 +2552,6 @@
       "integrity": "sha512-UguWfh9LkUecVrGSE0B7SpAnGRMPATmpwSoSij24/lDnwET3A641abfDBD/TdL0T+E04f8NWlbMkD9BscVvIZg==",
       "license": "MIT"
     },
-    "node_modules/date-arithmetic": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz",
-      "integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg=="
-    },
-    "node_modules/dayjs": {
-      "version": "1.11.11",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
-      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2757,11 +2761,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/globalize": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/globalize/-/globalize-0.1.1.tgz",
-      "integrity": "sha512-5e01v8eLGfuQSOvx2MsDMOWS0GFtCx1wPzQSmcHw4hkxFzrQDBO3Xwg/m8Hr/7qXMrHeOIE29qWVzyv06u1TZA=="
-    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -2849,14 +2848,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -3339,11 +3330,6 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3363,14 +3349,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/luxon": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
-      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -3380,11 +3358,6 @@
         "lz-string": "bin/bin.js"
       }
     },
-    "node_modules/memoize-one": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
-      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
-    },
     "node_modules/micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -3405,25 +3378,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/moment": {
-      "version": "2.30.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
-      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/moment-timezone": {
-      "version": "0.5.45",
-      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.45.tgz",
-      "integrity": "sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==",
-      "dependencies": {
-        "moment": "^2.29.4"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3554,6 +3508,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/preact": {
+      "version": "10.12.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
+      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -3626,41 +3589,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-big-calendar": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-1.13.0.tgz",
-      "integrity": "sha512-3ewolEKeBC5CjuxxDbo+IfQXjcd6jIBLSOoMzn1/lVMf+BYhPneifuOjMseXCIIaA4UlGZcy625BIdYgtAx+cA==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.7",
-        "clsx": "^1.2.1",
-        "date-arithmetic": "^4.1.0",
-        "dayjs": "^1.11.7",
-        "dom-helpers": "^5.2.1",
-        "globalize": "^0.1.1",
-        "invariant": "^2.2.4",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "luxon": "^3.2.1",
-        "memoize-one": "^6.0.0",
-        "moment": "^2.29.4",
-        "moment-timezone": "^0.5.40",
-        "prop-types": "^15.8.1",
-        "react-overlays": "^5.2.1",
-        "uncontrollable": "^7.2.1"
-      },
-      "peerDependencies": {
-        "react": "^16.14.0 || ^17 || ^18",
-        "react-dom": "^16.14.0 || ^17 || ^18"
-      }
-    },
-    "node_modules/react-big-calendar/node_modules/clsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -3691,30 +3619,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
-    "node_modules/react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "node_modules/react-overlays": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.2.1.tgz",
-      "integrity": "sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.8",
-        "@popperjs/core": "^2.11.6",
-        "@restart/hooks": "^0.4.7",
-        "@types/warning": "^3.0.0",
-        "dom-helpers": "^5.2.0",
-        "prop-types": "^15.7.2",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.3.0",
-        "react-dom": ">=16.3.0"
-      }
-    },
     "node_modules/react-qr-code": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.14.tgz",
@@ -4098,20 +4002,6 @@
         "node": ">=14.17"
       }
     },
-    "node_modules/uncontrollable": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
-      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.6.3",
-        "@types/react": ">=16.9.11",
-        "invariant": "^2.2.4",
-        "react-lifecycles-compat": "^3.0.4"
-      },
-      "peerDependencies": {
-        "react": ">=15.0.0"
-      }
-    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@@ -4228,14 +4118,6 @@
         }
       }
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/web-vitals": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz",

geneit_app/package.json

@@ -8,6 +8,11 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.13",
+    "@fullcalendar/core": "^6.1.14",
+    "@fullcalendar/daygrid": "^6.1.14",
+    "@fullcalendar/interaction": "^6.1.14",
+    "@fullcalendar/list": "^6.1.14",
+    "@fullcalendar/react": "^6.1.14",
     "@mdi/js": "^7.2.96",
     "@mdi/react": "^1.6.1",
     "@mui/icons-material": "^5.15.17",
@@ -20,7 +25,6 @@
     "@testing-library/user-event": "^14.0.0",
     "@types/jest": "^29.0.0",
     "@types/react": "^18.3.2",
-    "@types/react-big-calendar": "^1.8.9",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "date-and-time": "^3.2.0",
@@ -28,7 +32,6 @@
     "filesize": "^10.1.2",
     "jspdf": "^2.5.1",
     "react": "^18.3.1",
-    "react-big-calendar": "^1.13.0",
     "react-dom": "^18.3.1",
     "react-easy-crop": "^5.0.7",
     "react-qr-code": "^2.0.14",

geneit_app/src/api/accommodations/AccommodationsReservationsApi.tsx

@@ -0,0 +1,75 @@
+import { APIClient } from "../ApiClient";
+import { Family } from "../FamilyApi";
+import moment from "moment";
+
+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 class AccommodationsReservationsApi {
+  /**
+   * 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);
+  }
+}

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

@@ -1,3 +1,190 @@
+import { DateSelectArg } 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 {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+} from "@mui/material";
+import React from "react";
+import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
+import {
+  AccommodationsReservationsApi,
+  AccommodationsReservationsList,
+} from "../../../api/accommodations/AccommodationsReservationsApi";
+import { AsyncWidget } from "../../../widgets/AsyncWidget";
+import { useFamily } from "../../../widgets/BaseFamilyRoute";
+import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
+import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
+
 export function AccommodationsReservationsRoute(): React.ReactElement {
-  return <>TODO</>;
+  const loadKey = React.useRef(1);
+
+  const family = useFamily();
+  const accommodations = useAccommodations();
+
+  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 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 onSelect = (d: DateSelectArg) => {
+    console.info(d);
+  };
+
+  return (
+    <>
+      <FamilyPageTitle title="Réservation" />
+      <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" }}>
+              {/* 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)}
+                      />
+                    }
+                    label="Validé"
+                  />
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={showRejected}
+                        onChange={(_ev, v) => setShowRejected(v)}
+                      />
+                    }
+                    label="Rejetés"
+                  />
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={showPending}
+                        onChange={(_ev, v) => setShowPending(v)}
+                      />
+                    }
+                    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
+                          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,listWeek",
+                }}
+                select={onSelect}
+              />
+            </div>
+          </div>
+        )}
+      />
+    </>
+  );
 }