Can set date of birth and date of death

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -2,7 +2,7 @@ import ClearIcon from "@mui/icons-material/Clear";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import SaveIcon from "@mui/icons-material/Save";
-import { Button, Grid, Stack } from "@mui/material";
+import { Button, Checkbox, FormControlLabel, Grid, Stack } from "@mui/material";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Member, MemberApi } from "../../api/MemberApi";
@@ -14,9 +14,11 @@ import { AsyncWidget } from "../../widgets/AsyncWidget";
 import { useFamily } from "../../widgets/BaseFamilyRoute";
 import { ConfirmLeaveWithoutSaveDialog } from "../../widgets/ConfirmLeaveWithoutSaveDialog";
 import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
-import { PropEdit } from "../../widgets/PropEdit";
+import { PropEdit } from "../../widgets/forms/PropEdit";
 import { PropertiesBox } from "../../widgets/PropertiesBox";
-import { SexSelection } from "../../widgets/SexSelection";
+import { SexSelection } from "../../widgets/forms/SexSelection";
+import { DateInput } from "../../widgets/forms/DateInput";
+import { PropCheckbox } from "../../widgets/forms/PropCheckbox";
 
 /**
  * Create a new member route
@@ -321,6 +323,8 @@ export function MemberPage(p: {
               }}
               size={ServerApi.Config.constraints.member_last_name}
             />
+
+            {/* Birth last name */}
             <PropEdit
               label="Nom de naissance"
               editable={p.editing}
@@ -331,6 +335,53 @@ export function MemberPage(p: {
               }}
               size={ServerApi.Config.constraints.member_birth_last_name}
             />
+
+            {/* Birth day */}
+            <DateInput
+              label="Date de naissance"
+              editable={p.editing}
+              id="dob"
+              value={{
+                year: member.birth_year,
+                month: member.birth_month,
+                day: member.birth_day,
+              }}
+              onValueChange={(d) => {
+                member.birth_year = d.year;
+                member.birth_month = d.month;
+                member.birth_day = d.day;
+                updatedMember();
+              }}
+            />
+
+            {/* Is dead */}
+            <PropCheckbox
+              checked={member.dead}
+              editable={p.editing}
+              label="Décédé"
+              onValueChange={(v) => {
+                member.dead = v;
+                updatedMember();
+              }}
+            />
+
+            {/* Death day */}
+            <DateInput
+              label="Date de décès"
+              editable={p.editing}
+              id="dod"
+              value={{
+                year: member.death_year,
+                month: member.death_month,
+                day: member.death_day,
+              }}
+              onValueChange={(d) => {
+                member.death_year = d.year;
+                member.death_month = d.month;
+                member.death_day = d.day;
+                updatedMember();
+              }}
+            />
           </PropertiesBox>
         </Grid>
         <Grid item sm={12} md={6}>
@@ -343,7 +394,9 @@ export function MemberPage(p: {
           <PropertiesBox title="Biographie"></PropertiesBox>
         </Grid>
         <Grid item sm={12} md={6}>
-          <PropertiesBox title="Époux / Épouse">TODO</PropertiesBox>
+          <PropertiesBox title={member.sex === "F" ? "Époux" : "Épouse"}>
+            TODO
+          </PropertiesBox>
         </Grid>
         <Grid item sm={12} md={6}>
           <PropertiesBox title="Enfants">TODO</PropertiesBox>