add style and rightsManagement fields

src/pages/CreateContactPage.tsx

@@ -6,12 +6,14 @@ import { Row } from "../ui/Row";
 import Button from "@mui/material/Button";
 import PersonAddAltOutlinedIcon from "@mui/icons-material/PersonAddAltOutlined";
 import Typography from "@mui/material/Typography";
-import { Step, StepLabel, Stepper, Divider } from "@mui/material";
+import { Step, StepLabel, Stepper, Divider, Card } from "@mui/material";
 import { InformationsForm } from "../ui/Contact/CreateContact/InformationsForm";
-import { AddressForm } from "../ui/Contact/CreateContact/AddressForm";
 import { RightsManagementForm } from "../ui/Contact/CreateContact/RightsManagementForm";
+import { Breadcrumbs } from "../ui/Breadcrumbs";
 
-const steps = ["Informations du contact", "Adresse du contact", "Gestion des droits"];
+// const steps = ["Informations du contact", "Adresse du contact", "Gestion des droits"];
+
+const steps = ["Informations du contact", "Gestion des droits"];
 
 export const CreateContactPage = () => {
   const { register, control, errors } = useForm(schema);
@@ -41,44 +43,57 @@ export const CreateContactPage = () => {
     handleNext();
   };
 
+  const breadcrumbs = [
+    { href: "/", title: "Accueil" },
+    { href: "/search", title: "Recherche" },
+    "Nouveau contact",
+  ];
+
   return (
     <Stack>
       <Divider variant="fullWidth" />
       <Stack>
-        <Row spacing={1} px={6} py={4} bgcolor={"white"}>
+        <Row spacing={1} px={6} py={4} bgcolor={"white"} justifyContent={"space-between"}>
           <Row spacing={2} color={"black.main"}>
             <PersonAddAltOutlinedIcon fontSize="headerNewContact" />
             <Typography typography={"titleLarge"} fontWeight={700}>
               Nouveau contact
             </Typography>
           </Row>
-          <Stepper activeStep={activeStep}>
+          <Stepper activeStep={activeStep} sx={{ width: "500px" }}>
             {steps.map(label => {
               return (
-                <Step key={label}>
+                <Step key={label} sx={{ ".Mui-completed": { color: "#2E7D32 !important" } }}>
                   <StepLabel>{label}</StepLabel>
                 </Step>
               );
             })}
           </Stepper>
         </Row>
-
-        <Stack>
+        <Breadcrumbs items={breadcrumbs} />
+        <Card sx={{ mt: 5, px: 6, py: 3, maxWidth: "1160px", alignSelf: "center" }} elevation={2}>
           <form action="#" onSubmit={handleSubmitStep}>
             {activeStep === 0 && (
               <InformationsForm errors={errors} register={register} control={control} />
             )}
-            {activeStep === 1 && <AddressForm errors={errors} register={register} />}
-            {activeStep === 2 && <RightsManagementForm />}
-            <Row>
-              <Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
+            {/* {activeStep === 1 && <AddressForm errors={errors} register={register} />} */}
+            {activeStep === 1 && <RightsManagementForm />}
+            <Row p={4} justifyContent={"flex-end"}>
+              <Button
+                disabled={activeStep === 0}
+                variant={"outlined"}
+                onClick={handleBack}
+                sx={{ mr: 1 }}
+              >
                 Annuler
               </Button>
 
-              <Button type="submit">Suivant</Button>
+              <Button type="submit" variant="contained">
+                Suivant
+              </Button>
             </Row>
           </form>
-        </Stack>
+        </Card>
       </Stack>
     </Stack>
   );

src/ui/Contact/ContactFormDialog.tsx

@@ -1,5 +1,15 @@
-import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider } from "@mui/material";
-import { z } from "zod";
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  FormControlLabel,
+} from "@mui/material";
+import { Schema, z } from "zod";
 import { useForm } from "../../hooks/useForm.ts";
 import { APISchemas } from "../../types/api.ts";
 import { Field } from "../Form/Field.tsx";
@@ -8,6 +18,7 @@ import { Row } from "../Row.tsx";
 import StarIcon from "@mui/icons-material/Star";
 import { useFetchMutation } from "../../hooks/useFetchQuery.ts";
 import { AddressFormFields } from "../Form/AddressFormFields.tsx";
+import { UseFormRegister, UseFormReturn } from "react-hook-form";
 
 type Props = {
   open: boolean;
@@ -234,3 +245,66 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
     </Dialog>
   );
 };
+
+type FormContentProps = {
+  errors: any;
+  register: UseFormRegister<z.TypeOf<Schema>>;
+  control?: UseFormReturn<any, any, any>["control"];
+  contact?: APISchemas["ContactFirstLoginDto"];
+};
+
+export const FormContent = ({ errors, register, control, contact }: FormContentProps) => {
+  return (
+    <Box sx={styles.Grid}>
+      <Stack gap={4} pt={1}>
+        <Field
+          control={control}
+          label="Civilité"
+          name="civility"
+          type="radios"
+          error={errors?.civility?.message}
+          options={civilities}
+        />
+        <Field label="Nom" error={errors.lastName?.message} {...register("lastName")} />
+        <Field label="Prénom" error={errors.firstName?.message} {...register("firstName")} />
+        <Field label="Fonction" error={errors.function?.message} {...register("function")} />
+        <Field label="Adresse courriel" error={errors.email?.message} {...register("email")} />
+        <Row gap={3}>
+          <Field
+            sx={{ width: "150px" }}
+            label="Téléphone 1"
+            error={errors.phone?.message}
+            {...register("phone")}
+          />
+          <StarIcon fontSize="small" color="yellow" />
+        </Row>
+        <Row gap={3}>
+          <Field
+            sx={{ width: "150px" }}
+            label="Téléphone 2"
+            error={errors.secondPhone?.message}
+            {...register("secondPhone")}
+          />
+          <StarIcon fontSize="small" color="text.hint" />
+        </Row>
+      </Stack>
+      <Divider orientation="vertical" variant="middle" />
+      <Box component={"div"} pt={contact === undefined ? 0 : 6}>
+        {contact === undefined && (
+          <FormControlLabel
+            sx={{ pb: 2, ".MuiFormControlLabel-label": { typography: "titleSmall" } }}
+            control={<Checkbox size="small" />}
+            label="L’adresse du contact est identique à l’adresse de l’unité enquêtée"
+          />
+        )}
+        <AddressFormFields
+          errors={errors}
+          register={register}
+          repetitionIndexValue={contact?.address?.repetitionIndex ?? ""}
+          streetTypeValue={contact?.address?.streetType ?? ""}
+          countryValue={contact?.address?.countryName ?? ""}
+        />
+      </Box>
+    </Box>
+  );
+};

src/ui/Contact/CreateContact/InformationsForm.tsx

@@ -1,44 +1,22 @@
-import { FormGroup, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import Typography from "@mui/material/Typography";
-import { Field } from "../../Form/Field";
 import { UseFormRegister, UseFormReturn } from "react-hook-form";
 import { Schema, z } from "zod";
+import { FormContent } from "../ContactFormDialog";
 
 type Props = {
   errors: any;
   register: UseFormRegister<z.TypeOf<Schema>>;
   control?: UseFormReturn<any, any, any>["control"];
 };
 
-const civilities = [
-  { label: "Madame", value: "Female" },
-  { label: "Monsieur", value: "Male" },
-];
-
 export const InformationsForm = ({ errors, register, control }: Props) => {
   return (
     <Stack>
-      <Typography sx={{ mt: 2, mb: 1 }}>Informations du contact</Typography>
-      <FormGroup>
-        <Field
-          control={control}
-          label="Civilité"
-          name="civility"
-          type="radios"
-          error={errors?.civility?.message}
-          options={civilities}
-        />
-        <Field label="Nom" error={errors.lastName?.message} {...register("lastName")} />
-        <Field label="Prénom" error={errors.firstName?.message} {...register("firstName")} />
-        <Field label="Fonction" error={errors.function?.message} {...register("function")} />
-        <Field label="Adresse courriel" error={errors.email?.message} {...register("email")} />
-        <Field
-          sx={{ width: "150px" }}
-          label="Téléphone 1"
-          error={errors.phone?.message}
-          {...register("phone")}
-        />
-      </FormGroup>
+      <Typography sx={{ pb: 3 }} variant="titleMedium" fontSize={18}>
+        Informations du contact
+      </Typography>
+      <FormContent errors={errors} register={register} control={control} />
     </Stack>
   );
 };

src/ui/Contact/CreateContact/RightsManagementForm.tsx

@@ -1,5 +1,71 @@
+import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { Row } from "../../Row";
+import { InputLabel, TextField } from "@mui/material";
 
 export const RightsManagementForm = () => {
-  return <Typography sx={{ mt: 2, mb: 1 }}>Ajouter des droits</Typography>;
+  return (
+    <Stack>
+      <Typography sx={{ pb: 3 }} variant="titleMedium" fontSize={18}>
+        Ajouter des droits
+      </Typography>
+      <Row spacing={1} alignItems={"flex-start"}>
+        <InfoOutlinedIcon fontSize="smallIcon" />
+        <Typography variant="bodyMedium">
+          La sélection de l’identifiant de l’unité enquêtée, d’une source, d’un millésime <br /> et d’une
+          période est nécessaire pour l’ajout de droits
+        </Typography>
+      </Row>
+      <form action="#">
+        <Stack gap={2} pt={5}>
+          <Row gap={3}>
+            <InputLabel
+              id="id"
+              sx={{ typography: "bodyMedium", fontWeight: "700", color: "black.main" }}
+            >
+              Identifiant du compte
+            </InputLabel>
+            <TextField sx={{ width: "300px" }} id="id" variant="outlined" size="small" />
+          </Row>
+          <Row gap={3} justifyContent={"space-between"}>
+            <InputLabel
+              id="idSu"
+              sx={{ typography: "bodyMedium", fontWeight: "700", color: "black.main" }}
+            >
+              Identifiant de l’unité enquêtée
+            </InputLabel>
+            <TextField sx={{ width: "300px" }} id="idSu" variant="outlined" size="small" />
+          </Row>
+          <Row gap={3} justifyContent={"space-between"}>
+            <InputLabel
+              id="idSource"
+              sx={{ typography: "bodyMedium", fontWeight: "700", color: "black.main" }}
+            >
+              Source
+            </InputLabel>
+            <TextField sx={{ width: "300px" }} id="idSource" variant="outlined" size="small" />
+          </Row>
+          <Row gap={3} justifyContent={"space-between"}>
+            <InputLabel
+              id="year"
+              sx={{ typography: "bodyMedium", fontWeight: "700", color: "black.main" }}
+            >
+              Millésime
+            </InputLabel>
+            <TextField sx={{ width: "300px" }} id="year" variant="outlined" size="small" />
+          </Row>
+          <Row gap={3} justifyContent={"space-between"}>
+            <InputLabel
+              id="period"
+              sx={{ typography: "bodyMedium", fontWeight: "700", color: "black.main" }}
+            >
+              Période
+            </InputLabel>
+            <TextField sx={{ width: "300px" }} id="period" variant="outlined" size="small" />
+          </Row>
+        </Stack>
+      </form>
+    </Stack>
+  );
 };