0N0K0 · Noemie-Koelblen · Apr 3, 2026 · Apr 3, 2026 · Apr 3, 2026 · Apr 3, 2026
diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <link
+      rel="icon"
+      type="image/webp"
+      href="/src/assets/favicon/favicon.webp"
+    />
+    <title>Onoko</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -11,6 +11,9 @@
   },
   "dependencies": {
     "@apollo/client": "^4.1.6",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fontsource/roboto": "^5.2.10",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,23 +1,24 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import Home from "./pages/public/homePage";
-import PublicLayout from "./layout/public/publicLayout";
-import AdminLayout from "./layout/admin/adminLayout";
-import Dashboard from "./pages/admin/dashboardPage";
-import Account from "./pages/admin/accountPage";
-import Login from "./pages/auth/loginPage";
-import RequestResetPassword from "./pages/auth/requestResetPasswordPage";
-import ResetPassword from "./pages/auth/resetPasswordPage";
-import LogoutPage from "./pages/auth/logoutPage";
-import RequireAuth from "./pages/admin/requireAuth";
+import Home from "./pages/public/HomePage";
+import PublicLayout from "./layout/public/PublicLayout";
+import AdminLayout from "./layout/admin/AdminLayout";
+import Dashboard from "./pages/admin/DashboardPage";
+import Account from "./pages/admin/AccountPage";
+import Login from "./pages/auth/LoginPage";
+import RequestResetPassword from "./pages/auth/RequestResetPasswordPage";
+import ResetPassword from "./pages/auth/ResetPasswordPage";
+import LogoutPage from "./pages/auth/LogoutPage";
+import RequireAuth from "./pages/admin/RequireAuth";
 import { LOGIN_ROUTE } from "./constants/apiConstants";
 import { AuthProvider } from "./context/AuthContext";
-import Categories from "./pages/admin/categoriesPage";
+import Categories from "./pages/admin/CategoriesPage";
 import { GlobalStyles, useTheme } from "@mui/material";
-import { CategoryProvider } from "./context/CategoryContext";
-import Stacks from "./pages/admin/stackPage";
-import Coworkers from "./pages/admin/coworkerPage";
-import Roles from "./pages/admin/rolePage";
-import { RoleProvider } from "./context/RoleContext";
+import Stacks from "./pages/admin/StackPage";
+import Coworkers from "./pages/admin/CoworkerPage";
+import Roles from "./pages/admin/RolePage";
+import Media from "./pages/admin/MediaPage";
+import { ApolloProvider } from "@apollo/client/react";
+import apolloClient from "./services/appolloClient";
 
 export default function App() {
   const theme = useTheme();
@@ -38,64 +39,69 @@ export default function App() {
           },
           "::-webkit-scrollbar-thumb:hover": {
             background: theme.palette.text.secondary,
+            backgroundClip: "content-box",
           },
           "::-webkit-scrollbar-corner": {
-            background: theme.palette.background.paper,
+            background: "transparent",
           },
         }}
       />
       <Router>
-        <AuthProvider>
-          <CategoryProvider>
-            <RoleProvider>
-              <Routes>
-                {/* Routes publiques */}
-                <Route
-                  path="/*"
-                  element={
-                    <PublicLayout>
-                      <Routes>
-                        <Route path="/" element={<Home />} />
-                      </Routes>
-                    </PublicLayout>
-                  }
-                />
+        <ApolloProvider client={apolloClient}>
+          <AuthProvider>
+            <Routes>
+              {/* Routes publiques */}
+              <Route
+                path="/*"
+                element={
+                  <PublicLayout>
+                    <Routes>
+                      <Route path="/" element={<Home />} />
+                    </Routes>
+                  </PublicLayout>
+                }
+              />
 
-                {/* Routes d'authentification */}
-                <Route path={`/${LOGIN_ROUTE}`} element={<Login />} />
-                <Route path="/logout" element={<LogoutPage />} />
-                <Route
-                  path="/request-reset-password"
-                  element={<RequestResetPassword />}
-                />
-                <Route
-                  path="/request-reset-password"
-                  element={<RequestResetPassword />}
-                />
-                <Route path="/reset-password" element={<ResetPassword />} />
+              {/* Routes d'authentification */}
+              <Route path={`/${LOGIN_ROUTE}`} element={<Login />} />
+              <Route path="/logout" element={<LogoutPage />} />
+              <Route
+                path="/request-reset-password"
+                element={<RequestResetPassword />}
+              />
+              <Route
+                path="/request-reset-password"
+                element={<RequestResetPassword />}
+              />
+              <Route path="/reset-password" element={<ResetPassword />} />
 
-                {/* Routes admin */}
-                <Route
-                  path="/admin/*"
-                  element={
-                    <RequireAuth>
-                      <AdminLayout>
-                        <Routes>
-                          <Route path="/" element={<Dashboard />} />
-                          <Route path="/account" element={<Account />} />
-                          <Route path="/categories" element={<Categories />} />
-                          <Route path="/stacks" element={<Stacks />} />
-                          <Route path="/roles" element={<Roles />} />
-                          <Route path="/coworkers" element={<Coworkers />} />
-                        </Routes>
-                      </AdminLayout>
-                    </RequireAuth>
-                  }
-                />
-              </Routes>
-            </RoleProvider>
-          </CategoryProvider>
-        </AuthProvider>
+              {/* Routes admin */}
+              <Route
+                path="/admin/*"
+                element={
+                  <RequireAuth>
+                    <AdminLayout>
+                      <Routes>
+                        <Route path="/" element={<Dashboard />} />
+                        <Route path="/account" element={<Account />} />
+                        <Route path="/categories" element={<Categories />} />
+                        <Route path="/stacks" element={<Stacks />} />
+                        <Route path="/roles" element={<Roles />} />
+                        <Route path="/coworkers" element={<Coworkers />} />
+                        <Route path="/medias" element={<Media />} />
+                        {/* <Route path="/projects" element={<Projects />} />
+                              <Route
+                                path="/project"
+                                element={<ProjectForm />}
+                              /> */}
+                      </Routes>
+                    </AdminLayout>
+                  </RequireAuth>
+                }
+              />
+            </Routes>
+          </AuthProvider>
+        </ApolloProvider>
       </Router>
     </>
   );

diff --git a/src/assets/favicon/favicon.webp b/src/assets/favicon/favicon.webp
diff --git a/src/components/account/accountMenu.tsx → src/components/account/AccountMenu.tsx b/src/components/account/accountMenu.tsx → src/components/account/AccountMenu.tsx
@@ -1,14 +1,14 @@
 import { mdiAccount, mdiAccountCog, mdiLogout } from "@mdi/js";
 import Icon from "@mdi/react";
 import { Button, ListItemIcon, ListItemText, MenuItem } from "@mui/material";
-import CustomDialog from "../custom/customDialog";
+import CustomDialog from "../custom/CustomDialog";
 import { Link, useLocation } from "react-router";
 import { useState } from "react";
-import CustomMenu from "../custom/customMenu";
-import ResponsiveBodyTypography from "../custom/responsiveBodyTypography";
+import CustomMenu from "../custom/CustomMenu";
+import ResponsiveBodyTypography from "../custom/ResponsiveBodyTypography";
 import { useAuth } from "../../hooks/useAuth";
-import { ResponsiveStack } from "../custom/responsiveLayout";
-import CustomIconButton from "../custom/customIconButton";
+import { ResponsiveStack } from "../custom/ResponsiveLayout";
+import CustomIconButton from "../custom/CustomIconButton";
 
 export default function AccountMenu() {
   const [logoutConfirm, setLogoutConfirm] = useState(false);

diff --git a/src/components/account/newPasswordFields.tsx → src/components/account/NewPasswordFields.tsx b/src/components/account/newPasswordFields.tsx → src/components/account/NewPasswordFields.tsx
@@ -1,5 +1,5 @@
-import type { NewPasswordFieldsProps } from "../../types/baseComponent";
-import PasswordField from "../custom/passwordField";
+import type { NewPasswordFieldsProps } from "../../types/components/baseComponentTypes";
+import PasswordField from "../custom/PasswordField";
 
 /**
  * Composant pour les champs de saisie du nouveau mot de passe et de sa confirmation.

diff --git a/src/components/account/resetPasswordLink.tsx → src/components/account/ResetPasswordLink.tsx b/src/components/account/resetPasswordLink.tsx → src/components/account/ResetPasswordLink.tsx
@@ -1,5 +1,5 @@
 import { Link } from "@mui/material";
-import ResponsiveBodyTypography from "../custom/responsiveBodyTypography";
+import ResponsiveBodyTypography from "../custom/ResponsiveBodyTypography";
 
 /**
  * Composant de lien pour la réinitialisation du mot de passe.

diff --git a/src/components/admin/homeMenu.tsx → src/components/admin/HomeMenu.tsx b/src/components/admin/homeMenu.tsx → src/components/admin/HomeMenu.tsx
@@ -1,9 +1,9 @@
 import { mdiHome } from "@mdi/js";
 import { MenuItem } from "@mui/material";
-import CustomMenu from "../custom/customMenu";
+import CustomMenu from "../custom/CustomMenu";
 import { Link } from "react-router";
 import { useState } from "react";
-import CustomIconButton from "../custom/customIconButton";
+import CustomIconButton from "../custom/CustomIconButton";
 
 export default function HomeMenu() {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

diff --git a/...mponents/custom/closableSnackbarAlert.tsx → ...mponents/custom/ClosableSnackbarAlert.tsx b/...mponents/custom/closableSnackbarAlert.tsx → ...mponents/custom/ClosableSnackbarAlert.tsx
@@ -1,6 +1,6 @@
 import { type SnackbarCloseReason } from "@mui/material";
-import SnackbarAlert from "./snackbarAlert";
-import type { ClosableSnackbarAlertProps } from "../../types/baseComponent";
+import SnackbarAlert from "./SnackbarAlert";
+import type { ClosableSnackbarAlertProps } from "../../types/components/baseComponentTypes";
 
 /**
  * Composant de snackbar personnalisée avec possibilité de fermeture manuelle ou automatique.

diff --git a/src/components/custom/customDialog.tsx → src/components/custom/CustomDialog.tsx b/src/components/custom/customDialog.tsx → src/components/custom/CustomDialog.tsx
@@ -4,9 +4,12 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
+  IconButton,
 } from "@mui/material";
 import { useResponsiveWidth } from "../../hooks/layout/useResponsiveWidth";
-import type { CustomDialogProps } from "../../types/baseComponent";
+import type { CustomDialogProps } from "../../types/components/baseComponentTypes";
+import Icon from "@mdi/react";
+import { mdiClose } from "@mdi/js";
 
 /**
  * Composant générique de dialogue personnalisé utilisant MUI Dialog
@@ -24,8 +27,11 @@ export default function CustomDialog({
   titlePaddingBottom,
   content,
   actions,
+  width = 4,
+  height,
+  closeButton = false,
 }: CustomDialogProps) {
-  const dialogWidth = useResponsiveWidth(4);
+  const dialogWidth = useResponsiveWidth(width);
   return (
     <Dialog
       open={open}
@@ -34,9 +40,25 @@ export default function CustomDialog({
       sx={{
         "& .MuiDialog-paper": {
           width: dialogWidth,
+          height: height,
+          paddingTop: closeButton ? "3rem" : undefined,
+          paddingX: closeButton ? "3rem" : undefined,
         },
       }}
     >
+      {closeButton && (
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: "absolute",
+            right: 0,
+            top: 0,
+          }}
+        >
+          <Icon path={mdiClose} size={1} />
+        </IconButton>
+      )}
       {title && (
         <DialogTitle
           sx={
@@ -48,7 +70,7 @@ export default function CustomDialog({
           {title}
         </DialogTitle>
       )}
-      <DialogContent>
+      <DialogContent sx={{ overflowX: "hidden" }}>
         {typeof content === "string" ? (
           <DialogContentText>{content}</DialogContentText>
         ) : (

diff --git a/src/components/custom/customIconButton.tsx → src/components/custom/CustomIconButton.tsx b/src/components/custom/customIconButton.tsx → src/components/custom/CustomIconButton.tsx
diff --git a/src/components/custom/customMenu.tsx → src/components/custom/CustomMenu.tsx b/src/components/custom/customMenu.tsx → src/components/custom/CustomMenu.tsx
diff --git a/src/components/custom/customSelect.tsx → src/components/custom/CustomSelect.tsx b/src/components/custom/customSelect.tsx → src/components/custom/CustomSelect.tsx
@@ -3,9 +3,9 @@ import {
   InputLabel,
   MenuItem,
   Select,
-  type SelectProps,
+  type FormControlProps,
 } from "@mui/material";
-import type { CustomSelectProps } from "../../types/baseComponent";
+import type { CustomSelectProps } from "../../types/components/baseComponentTypes";
 
 export default function CustomSelect({
   label,
@@ -14,16 +14,16 @@ export default function CustomSelect({
   onChange,
   options,
   ...props
-}: CustomSelectProps & SelectProps) {
+}: CustomSelectProps & FormControlProps) {
   return (
-    <FormControl>
+    <FormControl fullWidth {...props}>
       <InputLabel id={labelId}>{label}</InputLabel>
       <Select
         labelId={labelId}
         label={label}
         value={value}
         onChange={onChange}
-        {...props}
+        multiple={Array.isArray(value) ? true : false}
       >
         <MenuItem value="">Aucune</MenuItem>
         {options?.map((o: { id: string; label: string }) => (