ed-roh · hichem-bouzourine · Apr 23, 2023 · Apr 23, 2023 · Apr 23, 2023 · Apr 23, 2023
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,8 @@
 /.pnp
 .pnp.js
 
+*.env
+
 # testing
 /coverage
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,9 @@
     "@fullcalendar/timegrid": "^5.11.3",
     "@mui/icons-material": "^5.10.3",
     "@mui/material": "^5.10.5",
+    "@mui/styles": "^5.12.3",
     "@mui/x-data-grid": "^5.17.2",
+    "@mui/x-date-pickers": "^6.3.0",
     "@nivo/bar": "^0.80.0",
     "@nivo/core": "^0.79.0",
     "@nivo/geo": "^0.80.0",
@@ -23,15 +25,19 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.3.5",
     "chart.js": "^3.9.1",
+    "dayjs": "^1.11.7",
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",
+    "react-material-ui-carousel": "^3.4.2",
     "react-pro-sidebar": "^0.7.1",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.9",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
   },

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Tableau de bord</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,47 +1,101 @@
-import { useState } from "react";
-import { Routes, Route } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Routes, Route, Navigate } from "react-router-dom";
 import Topbar from "./scenes/global/Topbar";
 import Sidebar from "./scenes/global/Sidebar";
 import Dashboard from "./scenes/dashboard";
-import Team from "./scenes/team";
-import Invoices from "./scenes/invoices";
-import Contacts from "./scenes/contacts";
+import Users from "./scenes/users";
+import Categories from "./scenes/categories";
 import Bar from "./scenes/bar";
-import Form from "./scenes/form";
 import Line from "./scenes/line";
 import Pie from "./scenes/pie";
 import FAQ from "./scenes/faq";
 import Geography from "./scenes/geography";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { ColorModeContext, useMode } from "./theme";
 import Calendar from "./scenes/calendar/calendar";
+import CreateCategorie from "./components/CreateCategorie";
+import Login from "./scenes/login/Login";
+import CreateUser from "./components/CreateUser";
+import SignalementProfile from "./scenes/signalementProfile/index";
+import Oeuvres from "./scenes/oeuvres";
+import SignalementOeuvre from "./scenes/signalementOeuvre";
+import SignalementAvis from "./scenes/signalementAvis";
+import Techniques from "./scenes/technique";
+import CreateTechnique from "./components/CreateTechnique";
+import Materiaux from "./scenes/materiaux";
+import CreateMateriau from "./components/CreateMateriau";
+import Settings from "./scenes/settings/index";
+
+function AuthenticatedRoutes() {
+  const [isSidebar, setIsSidebar] = useState(true);
+  return (
+    <>
+      <Sidebar isSidebar={isSidebar} />
+      <main className="content">
+        <Topbar setIsSidebar={setIsSidebar} />
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/users">
+            <Route index element={<Users />} />
+            <Route path="create" element={<CreateUser />} />
+          </Route>
+          <Route path="/categories">
+            <Route index element={<Categories />} />
+            <Route path="create" element={<CreateCategorie />} />
+            <Route path=":id" element={<CreateCategorie />} />
+          </Route>
+          <Route path="/oeuvres" element={<Oeuvres />} />
+          <Route path="/signalement-profile" element={<SignalementProfile />} />
+          <Route path="/signalement-oeuvre" element={<SignalementOeuvre />} />
+          <Route path="/signalement-avis" element={<SignalementAvis />} />
+          <Route path="/techniques">
+            <Route index element={<Techniques />} />
+            <Route path="create" element={<CreateTechnique />} />
+            <Route path=":id" element={<CreateTechnique />} />
+          </Route>
+          <Route path="/materiaux">
+            <Route index element={<Materiaux />} />
+            <Route path="create" element={<CreateMateriau />} />
+            <Route path=":id" element={<CreateMateriau />} />
+          </Route>
+          <Route path="/bar" element={<Bar />} />
+          <Route path="/pie" element={<Pie />} />
+          <Route path="/line" element={<Line />} />
+          <Route path="/faq" element={<FAQ />} />
+          <Route path="/calendar" element={<Calendar />} />
+          <Route path="/geography" element={<Geography />} />
+          <Route path="/settings" element={<Settings />} />
+          <Route path="/*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </main>
+    </>
+  );
+}
 
 function App() {
   const [theme, colorMode] = useMode();
-  const [isSidebar, setIsSidebar] = useState(true);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    setIsAuthenticated(token ? true : false);
+  }, []);
 
   return (
     <ColorModeContext.Provider value={colorMode}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <div className="app">
-          <Sidebar isSidebar={isSidebar} />
-          <main className="content">
-            <Topbar setIsSidebar={setIsSidebar} />
-            <Routes>
-              <Route path="/" element={<Dashboard />} />
-              <Route path="/team" element={<Team />} />
-              <Route path="/contacts" element={<Contacts />} />
-              <Route path="/invoices" element={<Invoices />} />
-              <Route path="/form" element={<Form />} />
-              <Route path="/bar" element={<Bar />} />
-              <Route path="/pie" element={<Pie />} />
-              <Route path="/line" element={<Line />} />
-              <Route path="/faq" element={<FAQ />} />
-              <Route path="/calendar" element={<Calendar />} />
-              <Route path="/geography" element={<Geography />} />
-            </Routes>
-          </main>
+          <Routes>
+            {isAuthenticated ? (
+              <Route path="/*" element={<AuthenticatedRoutes />} />
+            ) : (
+              <>
+                <Route path="/login" element={<Login />} />
+                <Route path="*" element={<Navigate to="/login" replace />} />
+              </>
+            )}
+          </Routes>
         </div>
       </ThemeProvider>
     </ColorModeContext.Provider>

diff --git a/src/axios/axios.js b/src/axios/axios.js
@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const instance = axios.create({
+  baseURL: process.env.REACT_APP_API_URL,
+});
+
+instance.interceptors.request.use((config) => {
+  const token = localStorage.getItem("token");
+  if (token) config.headers.Authorization = `Bearer ${token}`;
+
+  return config;
+});
+
+export default instance;
diff --git a/src/common.js b/src/common.js
@@ -0,0 +1,12 @@
+export const isValidEmail = (email) => {
+  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return regex.test(email);
+};
+
+export const isValidPassword = (password) => {
+  return password?.length < 4 ? false : true;
+};
+
+export const isValidDate = (date) => {
+  return date < new Date();
+};
diff --git a/src/components/AvisCard.jsx b/src/components/AvisCard.jsx
@@ -0,0 +1,113 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CircularProgress,
+  Grid,
+  IconButton,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import axios from "../axios/axios";
+import { tokens } from "../theme";
+import { useEffect, useState } from "react";
+
+const AvisCard = ({ avis, onClose }) => {
+  const theme = useTheme();
+  const colors = tokens(theme.palette.mode);
+
+  const [user, setUser] = useState(null);
+  const { id_avis, id_utilisateur, id_oeuvre, contenu, date_avis } = avis;
+
+  const deleteAvis = async (id_avis) => {
+    await axios.delete(`/avis/${id_avis}`).catch((err) => {
+      console.log(err);
+    });
+  };
+
+  const deleteUser = async (id) => {
+    await axios.delete(`/admin/users/${id}`).catch((err) => {
+      console.log(err);
+    });
+  };
+
+  const getSelectedUser = async (id) => {
+    await axios.get(`admin/userById/${id}`).then((res) => {
+      setUser(res.data);
+    });
+  };
+
+  useEffect(() => {
+    getSelectedUser(id_utilisateur);
+  }, []);
+
+  return (
+    <Card>
+      <CardHeader
+        title={
+          user ? ` Signalement de l'avis de ${user.nom} ${user.prenom}` : ""
+        }
+        action={
+          <IconButton onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        }
+      />
+      <CardContent>
+        {!user?.photo && <CircularProgress color="success" />}
+        {user?.photo && (
+          <img
+            src={user?.photo}
+            alt={`${user?.nom} ${user?.prenom}`}
+            style={{ maxWidth: "100%", marginBottom: "16px" }}
+          />
+        )}
+        <Typography variant="subtitle1" gutterBottom>
+          <strong>Type:</strong> {user?.type}
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          <strong>Email:</strong> {user?.email}
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          <strong>Téléphone:</strong> {user?.telephone}
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          <strong>Date de naissance:</strong>{" "}
+          {new Date(user?.date_de_naissance)?.toLocaleDateString("fr-FR")}
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          <strong>Sexe:</strong> {user?.sexe}
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          <strong>Date écriture avis:</strong>{" "}
+          {new Date(date_avis)?.toLocaleDateString("fr-FR")}
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          <strong>L'avis:</strong>
+        </Typography>{" "}
+        <h1>{contenu}</h1>
+        <Box display={"flex"} flexDirection={"column"} width="30%">
+          <Button
+            variant="contained"
+            sx={{ mt: 5, color: colors.redAccent[500] }}
+            onClick={() => deleteAvis(id_avis)}
+          >
+            Supprimer l'avis
+          </Button>
+          <Button
+            variant="contained"
+            sx={{ mt: 5, color: colors.redAccent[500] }}
+            onClick={() => deleteUser(user?.id_utilisateur)}
+          >
+            Sanctionner Utilisateur
+          </Button>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AvisCard;
diff --git a/src/components/BarChart.jsx b/src/components/BarChart.jsx
@@ -1,9 +1,15 @@
 import { useTheme } from "@mui/material";
 import { ResponsiveBar } from "@nivo/bar";
 import { tokens } from "../theme";
-import { mockBarData as data } from "../data/mockData";
 
-const BarChart = ({ isDashboard = false }) => {
+const BarChart = ({
+  isDashboard = false,
+  data,
+  keys,
+  indexBy,
+  axisBottomLegend,
+  axisLeftLegend,
+}) => {
   const theme = useTheme();
   const colors = tokens(theme.palette.mode);
 
@@ -39,8 +45,8 @@ const BarChart = ({ isDashboard = false }) => {
           },
         },
       }}
-      keys={["hot dog", "burger", "sandwich", "kebab", "fries", "donut"]}
-      indexBy="country"
+      keys={keys}
+      indexBy={indexBy}
       margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
       padding={0.3}
       valueScale={{ type: "linear" }}
@@ -76,17 +82,19 @@ const BarChart = ({ isDashboard = false }) => {
         tickSize: 5,
         tickPadding: 5,
         tickRotation: 0,
-        legend: isDashboard ? undefined : "country", // changed
+        legend: isDashboard ? undefined : axisBottomLegend, // changed
         legendPosition: "middle",
         legendOffset: 32,
       }}
       axisLeft={{
         tickSize: 5,
         tickPadding: 5,
         tickRotation: 0,
-        legend: isDashboard ? undefined : "food", // changed
+        legend: isDashboard ? undefined : axisLeftLegend, // changed
         legendPosition: "middle",
         legendOffset: -40,
+        // tickValues: data.reduce((set, { y }) => set.add(y), new Set()).size,
+        format: (e) => Math.floor(e) === e && e,
       }}
       enableLabel={false}
       labelSkipWidth={12}
@@ -121,7 +129,7 @@ const BarChart = ({ isDashboard = false }) => {
       ]}
       role="application"
       barAriaLabel={function (e) {
-        return e.id + ": " + e.formattedValue + " in country: " + e.indexValue;
+        return e.id + ": " + e.formattedValue + " par type: " + e.indexValue;
       }}
     />
   );

diff --git a/src/components/Copyright.jsx b/src/components/Copyright.jsx
@@ -0,0 +1,23 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Copyright = (props) => {
+  return (
+    <Typography
+      variant="body2"
+      color="text.secondary"
+      align="center"
+      {...props}
+    >
+      {"Copyright © "}
+      <Link style={{ color: "inherit" }} to="/">
+        Artisanat
+      </Link>{" "}
+      {new Date().getFullYear()}
+      {"."}
+    </Typography>
+  );
+};
+
+export default Copyright;
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,8 @@ @@
     /.pnp
     .pnp.js
+    *.env
     # testing
     /coverage
@@ Expand Down @@