Feat impl settings page

package.json

@@ -1,7 +1,7 @@
 {
   "name": "platine-management",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/pages/SettingsPage.tsx

@@ -0,0 +1,72 @@
+import { Box, Divider, Tabs } from "@mui/material";
+import { PageTab } from "../ui/PageTab";
+import { useState, SyntheticEvent } from "react";
+import { SettingsHeader } from "../ui/Settings/SettingsHeader";
+import { SettingsHabilitationsCard } from "../ui/Settings/SettingsHabilitationsCard";
+import { Breadcrumbs } from "../ui/Breadcrumbs.tsx";
+
+enum Tab {
+  Habilitations = "Habilitations",
+  Communications = "Communications",
+  NewSource = "NewSource",
+}
+
+const TabNames = {
+  [Tab.Habilitations]: "Gestion des habilitations",
+  [Tab.Communications]: "Communications",
+  [Tab.NewSource]: "Nouvelle Source",
+};
+
+export function SettingsPage() {
+  const [currentTab, setCurrentTab] = useState(Tab.Habilitations);
+  const handleChange = (_: SyntheticEvent, newValue: Tab) => {
+    setCurrentTab(newValue);
+  };
+  const breadcrumbs = [
+    { href: "/", title: "Accueil" },
+    { href: "/settings", title: "Réglages" },
+    TabNames[currentTab],
+  ];
+  return (
+    <>
+      <SettingsHeader />
+      <Divider variant="fullWidth" />
+      <Tabs
+        value={currentTab}
+        onChange={handleChange}
+        sx={{
+          px: 5,
+          backgroundColor: "white",
+        }}
+      >
+        {Object.keys(Tab).map(k => (
+          <PageTab
+            sx={{
+              paddingX: 4,
+              paddingY: 3,
+              typography: "titleSmall",
+              letterSpacing: 0.4,
+            }}
+            key={k}
+            value={k}
+            label={TabNames[k]}
+          />
+        ))}
+      </Tabs>
+
+      <Breadcrumbs items={breadcrumbs} />
+
+      <Box px={4}>
+        <SettingsTab tab={currentTab} />
+      </Box>
+    </>
+  );
+}
+
+function SettingsTab({ tab }: { tab: Tab }) {
+  if (tab === Tab.Habilitations) {
+    return <SettingsHabilitationsCard />;
+  }
+
+  return;
+}

src/pages/SurveyPage.tsx

@@ -93,13 +93,13 @@ export function SurveyPage() {
       <Breadcrumbs items={breadcrumbs} />
 
       <Box px={4}>
-        <SurveyUnitTab tab={currentTab} survey={survey} onSave={refetch} />
+        <SurveyTab tab={currentTab} survey={survey} onSave={refetch} />
       </Box>
     </>
   );
 }
 
-function SurveyUnitTab({
+function SurveyTab({
   survey,
   onSave,
   tab,

src/routes.tsx

@@ -5,7 +5,7 @@ import { Layout } from "./ui/Layout";
 import { PageError } from "./ui/PageError";
 import { SurveyPage } from "./pages/SurveyPage";
 import { ContactPage } from "./pages/ContactPage";
-import { Settings } from "./pages/Settings";
+import { SettingsPage } from "./pages/SettingsPage.tsx";
 import { SearchContacts } from "./pages/Search/SearchContacts.tsx";
 import { SearchSurveys } from "./pages/Search/SearchSurveys.tsx";
 import { SearchSurveyUnits } from "./pages/Search/SearchSurveyUnits.tsx";
@@ -32,7 +32,7 @@ export const routes: RouteObject[] = [
       },
       { path: "surveys/:id", element: <SurveyPage /> },
       { path: "contacts/:id", element: <ContactPage /> },
-      { path: "reglages", element: <Settings /> },
+      { path: "settings", element: <SettingsPage /> },
       { path: "", element: <Home /> },
     ],
   },

src/theme.tsx

@@ -114,6 +114,11 @@ declare module "@mui/material/Paper" {
     disabled: true;
   }
 }
+declare module "@mui/material/Chip" {
+  interface ChipPropsVariantOverrides {
+    role: true;
+  }
+}
 
 declare module "@mui/material/Tab" {
   interface TabPropsClassesOverrides {
@@ -382,11 +387,27 @@ export const theme = createTheme({
     },
     MuiInputLabel: {
       styleOverrides: {
-        sizeSmall: {
-          ...typography.bodyMedium,
+        root: {
+          ...typography.bodyLarge,
         },
       },
     },
+    MuiChip: {
+      variants: [
+        {
+          props: { variant: "role" },
+          style: {
+            fontWeight: 600,
+            lineHeight: "18px",
+            letterSpacing: "0.1px",
+            fontSize: "14px",
+            textTransform: "capitalize",
+            backgroundColor: "#EBEBEB",
+            height: "34px",
+          },
+        },
+      ],
+    },
     MuiInputBase: {
       styleOverrides: {
         root: {

src/types/api.ts

@@ -7,7 +7,17 @@ export type APISchemas = {
     /* Format: date-time */
     timestamp?: string
   }
-  UserDto: { identifier: string; role?: string }
+  UserDto: {
+    identifier: string
+    role?: string
+    name?: string
+    firstName?: string
+    organization?: string
+    accreditedSources?: Array<string>
+    /* Format: date-time */
+    creationDate?: string
+    creationAuthor?: string
+  }
   SurveyDto: {
     id: string
     sourceId: string
@@ -340,17 +350,17 @@ export type APISchemas = {
   }
   OnGoingDto: { ongoing?: boolean }
   PageableObject: {
-    /* Format: int64 */
-    offset?: number
-    sort?: APISchemas["SortObject"]
     /* Format: int32 */
     pageNumber?: number
     /* Format: int32 */
     pageSize?: number
-    unpaged?: boolean
+    /* Format: int64 */
+    offset?: number
+    sort?: APISchemas["SortObject"]
     paged?: boolean
+    unpaged?: boolean
   }
-  SortObject: { empty?: boolean; sorted?: boolean; unsorted?: boolean }
+  SortObject: { sorted?: boolean; empty?: boolean; unsorted?: boolean }
   UserPage: {
     content?: Array<APISchemas["UserDto"]>
     pageable?: APISchemas["PageableObject"]
@@ -608,7 +618,7 @@ export type APISchemas = {
     empty?: boolean
   }
   PeriodDto: { value?: string; label?: string; period?: string }
-  PeriodicityDto: { value: string; label: string }
+  PeriodicityDto: { value?: string; label?: string }
   EligibleDto: { eligible?: string }
   OwnerPage: {
     content?: Array<APISchemas["OwnerDto"]>
@@ -748,6 +758,7 @@ export type APISchemas = {
     totalPages?: number
     first?: boolean
     last?: boolean
+    pageable?: APISchemas["PageableObject"]
     /* Format: int32 */
     size?: number
     content?: Array<APISchemas["MoogSearchDto"]>
@@ -756,7 +767,6 @@ export type APISchemas = {
     sort?: APISchemas["SortObject"]
     /* Format: int32 */
     numberOfElements?: number
-    pageable?: APISchemas["PageableObject"]
     empty?: boolean
   }
   HealthcheckDto: { status?: string }
@@ -779,7 +789,7 @@ export type APISchemas = {
     empty?: boolean
   }
   ContactFirstLoginDto: {
-    identifier: string
+    identifier?: string
     externalId?: string
     civility?: "Female" | "Male" | "Undefined"
     lastName?: string
@@ -1107,7 +1117,7 @@ export type APIEndpoints = {
         }
   }
   "/api/contacts/{id}": {
-    responses: { get: APISchemas["ContactFirstLoginDto"]; put: APISchemas["ContactDto"]; delete: null }
+    responses: { get: null; put: APISchemas["ContactDto"]; delete: null }
     requests:
       | { method?: "get"; urlParams: { id: string } }
       | {

src/ui/Header.tsx

@@ -29,7 +29,7 @@ export function Header() {
       </Row>
       <Box>
         {preferred_username}
-        <IconButton component={RouterLink} to="/reglages">
+        <IconButton component={RouterLink} to="/settings">
           <SettingsOutlinedIcon />
         </IconButton>
         <IconButton

src/ui/Settings/RoleChip.tsx

@@ -0,0 +1,27 @@
+import { Chip } from "@mui/material";
+
+type Props = {
+  role: string;
+};
+
+export const roleColorsWidth = [
+  { role: "administrateur", color: "#442F99", width: "145px" },
+  { role: "responsable", color: "#0C8C87", width: "127px" },
+  { role: "gestionnaire", color: "#3C75A2", width: "129px" },
+  { role: "assistance", color: "#5A1741", width: "113px" },
+];
+
+export const RoleChip = ({ role }: Props) => {
+  const color = role ? roleColorsWidth.find(r => r.role === role.toLowerCase())?.color : "black";
+  const width = role ? roleColorsWidth.find(r => r.role === role.toLowerCase())?.width : undefined;
+  return (
+    <Chip
+      label={role}
+      variant={"role"}
+      style={{
+        color: color,
+        width: width,
+      }}
+    />
+  );
+};