Can set date of birth and date of death

geneit_app/src/widgets/forms/DateInput.tsx

@@ -0,0 +1,131 @@
+import { Stack, TextField, Typography } from "@mui/material";
+import { NumberConstraint, ServerApi } from "../../api/ServerApi";
+
+export interface DateValue {
+  year?: number;
+  month?: number;
+  day?: number;
+}
+
+export function DateInput(p: {
+  id: string;
+  label: string;
+  editable: boolean;
+  value: DateValue;
+  onValueChange: (newVal: DateValue) => void;
+}): React.ReactElement {
+  if (!p.editable) {
+    if (!p.value.year && !p.value.month && !p.value.day) return <></>;
+
+    return (
+      <Typography
+        variant="body2"
+        display="block"
+        style={{ marginBottom: "15px" }}
+      >
+        {p.label} : {p.value.day ?? "__"} / {p.value.month ?? "__"} /{" "}
+        {p.value.year ?? "__"}
+      </Typography>
+    );
+  }
+
+  return (
+    <Stack direction={"row"}>
+      <Typography
+        variant="caption"
+        style={{ display: "flex", alignItems: "center", flex: 10 }}
+      >
+        {p.label}
+      </Typography>
+      <TextField
+        required
+        id={`${p.id}-day`}
+        label="Jour"
+        value={p.value.day}
+        error={isValErr(p.value.day, ServerApi.Config.constraints.date_day)}
+        variant="filled"
+        style={{ flex: 20 }}
+        type="number"
+        onChange={(e) => {
+          const val = Number(e.target.value);
+          p.onValueChange({
+            day: val > 0 ? val : undefined,
+            month: p.value.month,
+            year: p.value.year,
+          });
+        }}
+        inputProps={{
+          min: ServerApi.Config.constraints.date_day.min,
+          max: ServerApi.Config.constraints.date_day.max,
+        }}
+      />
+      <Separator />
+      <TextField
+        required
+        id={`${p.id}-month`}
+        label="Mois"
+        value={p.value.month}
+        error={isValErr(p.value.month, ServerApi.Config.constraints.date_month)}
+        variant="filled"
+        style={{ flex: 20 }}
+        type="number"
+        onChange={(e) => {
+          const val = Number(e.target.value);
+          p.onValueChange({
+            day: p.value.day,
+            month: val > 0 ? val : undefined,
+            year: p.value.year,
+          });
+        }}
+        inputProps={{
+          min: ServerApi.Config.constraints.date_month.min,
+          max: ServerApi.Config.constraints.date_month.max,
+        }}
+      />
+      <Separator />
+      <TextField
+        required
+        id={`${p.id}-year`}
+        label="Année"
+        value={p.value.year}
+        onChange={(e) => {
+          const val = Number(e.target.value);
+          p.onValueChange({
+            day: p.value.day,
+            month: p.value.month,
+            year: val > 0 ? val : undefined,
+          });
+        }}
+        error={isValErr(p.value.year, ServerApi.Config.constraints.date_year)}
+        variant="filled"
+        style={{ flex: 30 }}
+        type="number"
+        inputProps={{
+          min: ServerApi.Config.constraints.date_year.min,
+          max: ServerApi.Config.constraints.date_year.max,
+        }}
+      />
+    </Stack>
+  );
+}
+
+function Separator(): React.ReactElement {
+  return (
+    <Typography
+      variant="body2"
+      style={{
+        margin: "2px",
+        display: "flex",
+        alignItems: "center",
+        flex: 2,
+        justifyContent: "center",
+      }}
+    >
+      /
+    </Typography>
+  );
+}
+
+function isValErr(val: number | undefined, c: NumberConstraint): boolean {
+  return (val && (val < c.min || val > c.max)) || false;
+}

geneit_app/src/widgets/forms/PropCheckbox.tsx

@@ -0,0 +1,25 @@
+import { Checkbox, FormControlLabel, Typography } from "@mui/material";
+
+export function PropCheckbox(p: {
+  editable: boolean;
+  label: string;
+  checked: boolean | undefined;
+  onValueChange: (v: boolean) => void;
+}): React.ReactElement {
+  if (!p.editable && p.checked)
+    return <Typography variant="body2">{p.label}</Typography>;
+
+  if (!p.editable) return <></>;
+
+  return (
+    <FormControlLabel
+      control={
+        <Checkbox
+          checked={p.checked}
+          onChange={(e) => p.onValueChange(e.target.checked)}
+        />
+      }
+      label={p.label}
+    />
+  );
+}

geneit_app/src/widgets/forms/PropEdit.tsx

@@ -1,5 +1,5 @@
 import { TextField } from "@mui/material";
-import { LenConstraint } from "../api/ServerApi";
+import { LenConstraint } from "../../api/ServerApi";
 
 /**
  * Couple / Member property edition

geneit_app/src/widgets/forms/SexSelection.tsx

@@ -6,7 +6,7 @@ import {
   Radio,
   Typography,
 } from "@mui/material";
-import { Sex } from "../api/MemberApi";
+import { Sex } from "../../api/MemberApi";
 
 export function SexSelection(p: {
   readonly?: boolean;