add stepper

src/pages/ContactPage.tsx

@@ -9,20 +9,17 @@ import { Breadcrumbs } from "../ui/Breadcrumbs.tsx";
 import { ContactInfosTab } from "./Contact/ContactInfosTab.tsx";
 import { PageTab } from "../ui/PageTab.tsx";
 import { ContactSurveysContent } from "../ui/Contact/ContactSurveys.tsx";
-import { IdsManagement } from "../ui/Contact/IdsManagement.tsx";
 import { RightsManagement } from "../ui/Contact/RightsManagement.tsx";
 
 enum Tab {
   Infos = "Infos",
   Surveys = "Surveys",
-  Ids = "Ids",
   Permissions = "Permissions",
 }
 
 const TabNames = {
   [Tab.Infos]: "Infos contact",
   [Tab.Surveys]: "Questionnaire(s)",
-  [Tab.Ids]: "Gestion des identifiants",
   [Tab.Permissions]: "Gestion des droits",
 };
 
@@ -78,11 +75,10 @@ export function ContactPage() {
         ))}
       </Tabs>
 
-      <Stack px={3} py={3}>
+      <Stack p={3}>
         <Breadcrumbs items={breadcrumbs} />
         {currentTab === Tab.Infos && <ContactInfosTab contact={contact} onSave={refetch} />}
         {currentTab === Tab.Surveys && <ContactSurveysContent contact={contact} />}
-        {currentTab === Tab.Ids && <IdsManagement contact={contact} />}
         {currentTab === Tab.Permissions && <RightsManagement contact={contact} />}
       </Stack>
     </>

src/pages/CreateContactPage.tsx

@@ -1,3 +1,115 @@
+import Stack from "@mui/material/Stack";
+import { useState } from "react";
+import { Row } from "../ui/Row";
+import PersonAddAltOutlinedIcon from "@mui/icons-material/PersonAddAltOutlined";
+import Typography from "@mui/material/Typography";
+import { Step, StepLabel, Stepper, Divider, Card, CircularProgress } from "@mui/material";
+import { InformationsForm } from "../ui/Contact/CreateContact/InformationsForm";
+import { RightsManagementForm } from "../ui/Contact/CreateContact/RightsManagementForm";
+import { Breadcrumbs } from "../ui/Breadcrumbs";
+import { useLocation } from "react-router-dom";
+import { useFetchQuery } from "../hooks/useFetchQuery";
+const steps = ["Informations du contact", "Gestion des droits"];
+
 export const CreateContactPage = () => {
-  return <>Page create contact</>;
+  const { state: surveyUnitId } = useLocation();
+  const [activeStep, setActiveStep] = useState(0);
+  const [contactData, setContactData] = useState();
+
+  const [rights, setRights] = useState<{
+    idSource?: string;
+    year?: string;
+    periodicity?: string;
+  }>({
+    idSource: undefined,
+    year: undefined,
+    periodicity: undefined,
+  });
+
+  const {
+    data: surveyUnit,
+    isLoading,
+    isSuccess,
+  } = useFetchQuery("/api/survey-units/{id}", {
+    urlParams: {
+      id: surveyUnitId,
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <Row justifyContent="center" py={10}>
+        <CircularProgress />
+      </Row>
+    );
+  }
+
+  const handleNext = () => {
+    setActiveStep(prevActiveStep => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep(prevActiveStep => prevActiveStep - 1);
+  };
+
+  const handleSubmitStep = async (data: any) => {
+    if (activeStep === 0) {
+      setContactData(data);
+    }
+
+    if (activeStep === 1) {
+      setRights(data);
+    }
+
+    handleNext();
+  };
+
+  const breadcrumbs = [
+    { href: "/", title: "Accueil" },
+    { href: "/search", title: "Recherche" },
+    "Nouveau contact",
+  ];
+
+  return (
+    <Stack pb={5}>
+      <Divider variant="fullWidth" />
+      <Stack>
+        <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} sx={{ width: "500px" }}>
+            {steps.map(label => {
+              return (
+                <Step key={label} sx={{ ".Mui-completed": { color: "#2E7D32 !important" } }}>
+                  <StepLabel>{label}</StepLabel>
+                </Step>
+              );
+            })}
+          </Stepper>
+        </Row>
+        <Breadcrumbs items={breadcrumbs} />
+        <Card sx={{ mt: 5, px: 6, py: 3, maxWidth: "1160px", alignSelf: "center" }} elevation={2}>
+          {activeStep === 0 && (
+            <InformationsForm
+              handleSubmitStep={handleSubmitStep}
+              contact={contactData}
+              surveyUnit={isSuccess ? surveyUnit : undefined}
+            />
+          )}
+
+          {activeStep === 1 && (
+            <RightsManagementForm
+              handleSubmitStep={handleSubmitStep}
+              handleBack={handleBack}
+              rights={rights}
+            />
+          )}
+        </Card>
+      </Stack>
+    </Stack>
+  );
 };

src/routes.tsx

@@ -13,6 +13,7 @@ import { SurveyUnitPage } from "./pages/SurveyUnitPage.tsx";
 import { CreateContactPage } from "./pages/CreateContactPage.tsx";
 import { UnauthorizedPage } from "./pages/UnauthorizedPage.tsx";
 import { LogoutPage } from "./pages/Logout.tsx";
+import { AddRightsManagement } from "./ui/Contact/AddRightsManagement.tsx";
 
 export const routes: RouteObject[] = [
   {
@@ -43,10 +44,14 @@ export const routes: RouteObject[] = [
         ],
       },
       { path: "surveys/:id", element: <SurveyPage /> },
-      { path: "contacts/:id", element: <ContactPage /> },
+      {
+        path: "contacts/:id",
+        element: <ContactPage />,
+      },
+      { path: "contacts/:id/rights-management", element: <AddRightsManagement /> },
+      { path: "contacts/create-contact", element: <CreateContactPage /> },
       { path: "survey-units/:id", element: <SurveyUnitPage /> },
       { path: "reglages", element: <Settings /> },
-      { path: "contacts/createContact", element: <CreateContactPage /> },
       { path: "", element: <Home /> },
     ],
   },

src/theme.tsx

@@ -100,6 +100,7 @@ declare module "@mui/material/InputBase" {
 declare module "@mui/material/SvgIcon" {
   interface SvgIconPropsSizeOverrides {
     cardMedia: true;
+    headerNewContact: true;
     tabTitle: true;
     headerSinglePage: true;
     cardTitle: true;
@@ -281,6 +282,12 @@ export const theme = createTheme({
             fontSize: 60,
           },
         },
+        {
+          props: { fontSize: "headerNewContact" },
+          style: {
+            fontSize: 40,
+          },
+        },
         {
           props: { fontSize: "tabTitle" },
           style: {

src/ui/Contact/AddRightsManagement.tsx

@@ -0,0 +1,69 @@
+import Card from "@mui/material/Card";
+import { TitleWithIconAndDivider } from "../TitleWithIconAndDivider";
+import { BinocularIcon } from "../Icon/BinocularIcon";
+import { Row } from "../Row";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { CircularProgress, Divider, Typography } from "@mui/material";
+import { Stack } from "@mui/system";
+import GroupAddOutlinedIcon from "@mui/icons-material/GroupAddOutlined";
+import { AssociateSurveysTable } from "./AssociateSurveysTable";
+import LibraryAddOutlinedIcon from "@mui/icons-material/LibraryAddOutlined";
+import { useParams } from "react-router-dom";
+import { useFetchQuery } from "../../hooks/useFetchQuery";
+import { ContactHeader } from "./ContactHeader";
+import { AssociateAnotherAccount } from "./AssociateAnotherAccount";
+import { AddRightsForm } from "./AddRightsForm";
+
+export const AddRightsManagement = () => {
+  const { id } = useParams();
+  const { data: contact } = useFetchQuery("/api/contacts/{id}", {
+    urlParams: {
+      id: id!,
+    },
+  });
+
+  if (!contact) {
+    return (
+      <Row justifyContent="center" py={10}>
+        <CircularProgress />
+      </Row>
+    );
+  }
+  return (
+    <>
+      <ContactHeader contact={contact} />
+      <Divider variant="fullWidth" />
+      <Stack p={3} spacing={3}>
+        <Card sx={{ mx: 2, px: 6, py: 3 }} elevation={2}>
+          <TitleWithIconAndDivider
+            title={`Ajouter d’autres questionnaires liées au compte “${id}” `}
+            IconComponent={BinocularIcon}
+          />
+          <Row spacing={1}>
+            <InfoOutlinedIcon fontSize="smallIcon" />
+            <Typography variant="bodyMedium">
+              La liste des questionnaires auxquelles le répondant peut accéder avec son identifiant{" "}
+              <strong>{id}</strong> peut être élargie à des questionnaires rattachés à son adresse
+              courriel et figurant dans la liste ci-dessous
+            </Typography>
+          </Row>
+          <AssociateSurveysTable />
+        </Card>
+        <Card sx={{ mx: 2, px: 6, py: 3 }} elevation={2}>
+          <TitleWithIconAndDivider
+            title={`Associer un autre compte au compte ${id}`}
+            IconComponent={GroupAddOutlinedIcon}
+          />
+          <AssociateAnotherAccount contact={contact} />
+        </Card>
+        <Card sx={{ mx: 2, px: 6, py: 3 }} elevation={2}>
+          <TitleWithIconAndDivider
+            title={`Ajouter d'autres questionnaires au compte ${id} à partir de leurs caractéristiques`}
+            IconComponent={LibraryAddOutlinedIcon}
+          />
+          <AddRightsForm contact={contact} />
+        </Card>
+      </Stack>
+    </>
+  );
+};

src/ui/Contact/AssociateSurveysTable.tsx

@@ -7,7 +7,6 @@ import TableCell from "@mui/material/TableCell";
 import TableBody from "@mui/material/TableBody";
 import Checkbox from "@mui/material/Checkbox";
 import { useState } from "react";
-import Box from "@mui/system/Box";
 import Button from "@mui/material/Button";
 import TableFooter from "@mui/material/TableFooter";
 import { LoadingCell } from "./ContactSurveysTable";
@@ -60,60 +59,58 @@ export const AssociateSurveysTable = () => {
     console.log(selectedIds);
   };
   return (
-    <Box>
-      <TableContainer sx={{ py: 3 }}>
-        <Table>
-          <TableHeader columns={columns} />
-          <TableBody>
-            {surveysMock.map(survey => {
-              return (
-                <TableRow
-                  hover
-                  tabIndex={-1}
-                  key={`row-${survey.id}`}
-                  sx={{ borderBottom: `solid 1px ${theme.palette.text.hint}` }}
-                >
-                  {columns.map(column => {
-                    const value = survey[column.id as keyof typeof survey];
+    <TableContainer sx={{ pt: 3 }}>
+      <Table>
+        <TableHeader columns={columns} />
+        <TableBody>
+          {surveysMock.map(survey => {
+            return (
+              <TableRow
+                hover
+                tabIndex={-1}
+                key={`row-${survey.id}`}
+                sx={{ borderBottom: `solid 1px ${theme.palette.text.hint}` }}
+              >
+                {columns.map(column => {
+                  const value = survey[column.id as keyof typeof survey];
 
-                    if (column.id === "action") {
-                      return (
-                        <TableCell key={`action-${survey.id}`} align="center">
-                          <Checkbox
-                            aria-label={`checkbox-${survey.id}`}
-                            onChange={() => onChange(survey.id)}
-                          />
-                        </TableCell>
-                      );
-                    }
+                  if (column.id === "action") {
+                    return (
+                      <TableCell key={`action-${survey.id}`} align="center">
+                        <Checkbox
+                          aria-label={`checkbox-${survey.id}`}
+                          onChange={() => onChange(survey.id)}
+                        />
+                      </TableCell>
+                    );
+                  }
 
-                    if (column.id === "role") {
-                      return (
-                        <TableCell key={`role-${survey.id}`} sx={{ fontWeight: 600 }}>
-                          {value}
-                        </TableCell>
-                      );
-                    }
+                  if (column.id === "role") {
+                    return (
+                      <TableCell key={`role-${survey.id}`} sx={{ fontWeight: 600 }}>
+                        {value}
+                      </TableCell>
+                    );
+                  }
 
-                    return <TableCell key={column.id}>{value ?? "NO DATA"}</TableCell>;
-                  })}
-                </TableRow>
-              );
-            })}
-            {isLoading && <LoadingCell columnLength={columns.length} />}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell align="right" colSpan={columns.length} sx={{ py: 4 }}>
-                <Button variant="contained" disabled={selectedIds.length === 0} onClick={onClick}>
-                  Associer
-                </Button>
-              </TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </Box>
+                  return <TableCell key={column.id}>{value ?? "NO DATA"}</TableCell>;
+                })}
+              </TableRow>
+            );
+          })}
+          {isLoading && <LoadingCell columnLength={columns.length} />}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell align="right" colSpan={columns.length} sx={{ py: 4 }}>
+              <Button variant="contained" disabled={selectedIds.length === 0} onClick={onClick}>
+                Associer
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 };