diff --git a/.eslintrc.json b/.eslintrc.json
index 4bc70daad..7ea77ddbd 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -3,7 +3,7 @@
     "browser": true,
     "es2021": true
   },
-  "extends": ["plugin:react/recommended", "prettier"],
+  "extends": ["plugin:react/recommended"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
@@ -11,14 +11,9 @@
     "ecmaVersion": 12,
     "sourceType": "module"
   },
-  "plugins": ["react", "prettier"],
+  "plugins": ["react"],
   "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ],
+  
     "react/display-name": "off",
     "default-param-last": "off",
     "react/react-in-jsx-scope": "off",
diff --git a/README.md b/README.md
index 863724f8f..a126a9c85 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@ This free MUI & React Dashboard is coming with prebuilt design blocks, so the de
 switching from our pages to the real website is very easy to be done.
 
 Special thanks go to:
+
 - [Nepcha Analytics](https://nepcha.com?ref=readme) for the analytics tool. Nepcha is already integrated with Material Dashboard React. You can use it to gain insights into your sources of traffic.
 
 **Documentation built by Developers**
diff --git a/package.json b/package.json
index 01521c624..bc013fab9 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "@emotion/styled": "11.10.8",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.3",
+    "axios": "^1.6.0",
     "chart.js": "4.3.0",
     "chroma-js": "2.4.2",
+    "cross-env": "^7.0.3",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-chartjs-2": "5.2.0",
@@ -33,8 +35,10 @@
     "yup": "1.1.1"
   },
   "scripts": {
-    "start": "GENERATE_SOURCEMAP=false react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+
+    "start": "cross-env GENERATE_SOURCEMAP=false react-scripts start",
+    "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
+
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
@@ -70,4 +74,4 @@
   "overrides": {
     "svgo": "3.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 5ba40edb9..45fcd6d01 100644
--- a/src/App.js
+++ b/src/App.js
@@ -155,7 +155,7 @@ export default function App() {
             <Sidenav
               color={sidenavColor}
               brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
-              brandName="Material Dashboard 2"
+              brandName="Co-share"
               routes={routes}
               onMouseEnter={handleOnMouseEnter}
               onMouseLeave={handleOnMouseLeave}
@@ -167,7 +167,7 @@ export default function App() {
         {layout === "vr" && <Configurator />}
         <Routes>
           {getRoutes(routes)}
-          <Route path="*" element={<Navigate to="/dashboard" />} />
+          <Route path="*" element={<Navigate to="/reclamation" />} />
         </Routes>
       </ThemeProvider>
     </CacheProvider>
@@ -179,7 +179,7 @@ export default function App() {
           <Sidenav
             color={sidenavColor}
             brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
-            brandName="Material Dashboard 2"
+            brandName="Co-share"
             routes={routes}
             onMouseEnter={handleOnMouseEnter}
             onMouseLeave={handleOnMouseLeave}
@@ -191,7 +191,7 @@ export default function App() {
       {layout === "vr" && <Configurator />}
       <Routes>
         {getRoutes(routes)}
-        <Route path="*" element={<Navigate to="/dashboard" />} />
+        <Route path="*" element={<Navigate to="/reclamation" />} />
       </Routes>
     </ThemeProvider>
   );
diff --git a/src/assets/images/dd.png b/src/assets/images/dd.png
new file mode 100644
index 000000000..7e7c2739b
Binary files /dev/null and b/src/assets/images/dd.png differ
diff --git a/src/examples/Footer/index.js b/src/examples/Footer/index.js
index 7acc80d1a..d15628f97 100644
--- a/src/examples/Footer/index.js
+++ b/src/examples/Footer/index.js
@@ -63,13 +63,14 @@ function Footer({ company, links }) {
         &copy; {new Date().getFullYear()}, made with
         <MDBox fontSize={size.md} color="text" mb={-0.5} mx={0.25}>
           <Icon color="inherit" fontSize="inherit">
-            favorite
+            Co-lance
           </Icon>
         </MDBox>
         by
         <Link href={href} target="_blank">
           <MDTypography variant="button" fontWeight="medium">
-            &nbsp;{name}&nbsp;
+            {" "}
+            4Twin 2 Co-lance Team{" "}
           </MDTypography>
         </Link>
         for a better web.
@@ -90,9 +91,7 @@ function Footer({ company, links }) {
             mt: 0,
           },
         })}
-      >
-        {renderLinks()}
-      </MDBox>
+      ></MDBox>
     </MDBox>
   );
 }
diff --git a/src/examples/Sidenav/index.js b/src/examples/Sidenav/index.js
index 5efd2d2c7..ae2193d6e 100644
--- a/src/examples/Sidenav/index.js
+++ b/src/examples/Sidenav/index.js
@@ -179,19 +179,6 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
         }
       />
       <List>{renderRoutes}</List>
-      <MDBox p={2} mt="auto">
-        <MDButton
-          component="a"
-          href="https://www.creative-tim.com/product/material-dashboard-pro-react"
-          target="_blank"
-          rel="noreferrer"
-          variant="gradient"
-          color={sidenavColor}
-          fullWidth
-        >
-          upgrade to pro
-        </MDButton>
-      </MDBox>
     </SidenavRoot>
   );
 }
diff --git a/src/layouts/Forums/data/forumsTableData.js b/src/layouts/Forums/data/forumsTableData.js
new file mode 100644
index 000000000..e1bc45128
--- /dev/null
+++ b/src/layouts/Forums/data/forumsTableData.js
@@ -0,0 +1,54 @@
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import PropTypes from "prop-types";
+
+export default function forumsTableData(forums) {
+  const ForumInfo = ({ title, questions, user }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        {title}
+      </MDTypography>
+      <MDTypography variant="caption">User: {user}</MDTypography>
+    </MDBox>
+  );
+
+  ForumInfo.propTypes = {
+    title: PropTypes.string.isRequired,
+    questions: PropTypes.string.isRequired,
+    user: PropTypes.string.isRequired,
+  };
+
+  const QuestionInfo = ({ questions }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography variant="caption">Questions: {questions}</MDTypography>
+    </MDBox>
+  );
+
+  QuestionInfo.propTypes = {
+    questions: PropTypes.string.isRequired,
+  };
+
+  const formatRows = forums.map((forum) => ({
+    forumInfo: (
+      <ForumInfo
+        title={forum.title}
+        questions={forum.questions}
+        user={forum.user}
+      />
+    ),
+    questions: <QuestionInfo questions={forum.questions} />,
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+  }));
+
+  return {
+    columns: [
+      { Header: "forum", accessor: "forumInfo", width: "45%", align: "left" },
+      { Header: "questions", accessor: "questions", width: "20%", align: "left" },
+    ],
+    rows: formatRows,
+  };
+}
diff --git a/src/layouts/Forums/data/forumsTableDataRelations.js b/src/layouts/Forums/data/forumsTableDataRelations.js
new file mode 100644
index 000000000..a0681c844
--- /dev/null
+++ b/src/layouts/Forums/data/forumsTableDataRelations.js
@@ -0,0 +1,51 @@
+import React from "react";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from "prop-types";
+
+export default function forumsTableDataRelations(forums) {
+  const ForumInfo = ({ title, questions }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        {title}
+      </MDTypography>
+      <MDTypography variant="caption">{questions}</MDTypography>
+    </MDBox>
+  );
+  ForumInfo.propTypes = {
+    title: PropTypes.string.isRequired,
+    questions: PropTypes.string.isRequired,
+  };
+
+  const OwnerInfo = ({ userName, userEmail }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="caption" fontWeight="medium">
+        {userName}
+      </MDTypography>
+      <MDTypography variant="caption">{userEmail}</MDTypography>
+    </MDBox>
+  );
+  OwnerInfo.propTypes = {
+    userName: PropTypes.string.isRequired,
+    userEmail: PropTypes.string.isRequired,
+  };
+
+  const formatRows = forums.map((forum) => ({
+    forumInfo: <ForumInfo title={forum.title} questions={forum.questions} />,
+    owner: <OwnerInfo userName={forum.userName} userEmail={forum.userEmail} />,
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+  }));
+
+  return {
+    columns: [
+      { Header: "Forum", accessor: "forumInfo", width: "30%", align: "left" },
+      { Header: "Owner", accessor: "owner", width: "30%", align: "left" },
+    ],
+    rows: formatRows,
+  };
+}
diff --git a/src/layouts/Forums/index.js b/src/layouts/Forums/index.js
new file mode 100644
index 000000000..77410770f
--- /dev/null
+++ b/src/layouts/Forums/index.js
@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from "react";
+import { Select, MenuItem, FormControl, InputLabel, TextField } from "@mui/material";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Footer from "examples/Footer";
+import DataTable from "examples/Tables/DataTable";
+import { getForums, getForumByTitle, getForumsRelations } from "../../services/forumService";
+
+import forumsTableData from "./data/forumsTableData";
+import forumsTableDataRelations from "./data/forumsTableDataRelations";
+
+function Forums() {
+  const [tableData, setTableData] = useState({ columns: [], rows: [] });
+  const [tableDataRelations, setTableDataRelations] = useState({ columns: [], rows: [] });
+  const [forumType, setForumType] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  async function fetchDataByType(value) {
+    try {
+      const forumByType = await getForumByTitle(value);
+      setTableData(forumsTableData(forumByType));
+    } catch (error) {
+      console.error("Error fetching forum data:", error);
+    }
+  }
+
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+    fetchDataByType(event.target.value);
+  };
+
+  async function fetchDataByForumType(value) {
+    try {
+      setForumType(value);
+      const forums = await getForums(value);
+      setTableData(forumsTableData(forums));
+    } catch (error) {
+      console.error("Error fetching forum data:", error);
+    }
+  }
+
+  const handleForumTypeChange = (event) => {
+    setForumType(event.target.value);
+    fetchDataByForumType(event.target.value);
+  };
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const forums = await getForums();
+        const forumRelations = await getForumsRelations();
+        setTableData(forumsTableData(forums));
+        setTableDataRelations(forumsTableDataRelations(forumRelations));
+      } catch (error) {
+        console.error("Error fetching forum data:", error);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDBox display="flex" justifyContent="space-between" alignItems="center">
+                  <MDTypography variant="h6" color="white">
+                    Forums Table
+                  </MDTypography>
+                  <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+                    <TextField
+                      id="search-field"
+                      label="Search"
+                      variant="outlined"
+                      value={searchQuery}
+                      onChange={handleSearchChange}
+                      sx={{ width: 130, backgroundColor: "white", borderRadius: 1 }}
+                    />
+                    <FormControl
+                      variant="outlined"
+                      sx={{
+                        minWidth: 60,
+                        backgroundColor: "white",
+                        borderRadius: 1,
+                        marginRight: 3,
+                      }}
+                    >
+                    </FormControl>
+                  </div>
+                </MDBox>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableData}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+            <Card style={{ marginTop: "5%" }}>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                  Forums Relation Table
+                </MDTypography>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableDataRelations}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+
+export default Forums;
diff --git a/src/layouts/Inventory/data/inventoryTableData.js b/src/layouts/Inventory/data/inventoryTableData.js
new file mode 100644
index 000000000..22f4e40dc
--- /dev/null
+++ b/src/layouts/Inventory/data/inventoryTableData.js
@@ -0,0 +1,46 @@
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from "prop-types";
+
+export default function inventoryTableData(inventories) {
+  const InventoryInfo = ({ inventoryID }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        {inventoryID}
+      </MDTypography>
+    </MDBox>
+  );
+
+  InventoryInfo.propTypes = {
+    inventoryID: PropTypes.string.isRequired,
+  };
+
+  const randomStatus = () => {
+    const statuses = ["Available", "Pending", "Sold"];
+    return statuses[Math.floor(Math.random() * statuses.length)];
+  };
+
+  const formatRows = inventories.map((inventory) => ({
+    InventoryInfo: <InventoryInfo inventoryID={inventory.inventoryID} />,
+    status: (
+      <MDBox ml={-1}>
+        <MDBadge badgeContent={randomStatus()} color="success" variant="gradient" size="sm" />
+      </MDBox>
+    ),
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+  }));
+
+  return {
+    columns: [
+      { Header: "Inventory Info", accessor: "InventoryInfo", width: "45%", align: "left" },
+      { Header: "Status", accessor: "status", align: "center" },
+      { Header: "Action", accessor: "action", align: "center" },
+    ],
+    rows: formatRows,
+  };
+}
diff --git a/src/layouts/Inventory/data/invnetoryTableDataRelations.js b/src/layouts/Inventory/data/invnetoryTableDataRelations.js
new file mode 100644
index 000000000..9a320636b
--- /dev/null
+++ b/src/layouts/Inventory/data/invnetoryTableDataRelations.js
@@ -0,0 +1,42 @@
+import React from "react";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from "prop-types";
+
+export default function inventoryTableDataRelations(inventories) {
+  const InventoryInfo = ({ inventoryID }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        {inventoryID}
+      </MDTypography>
+    </MDBox>
+  );
+
+  InventoryInfo.propTypes = {
+    inventoryID: PropTypes.string.isRequired,
+  };
+
+  const formatRows = inventories.map((inventory) => ({
+    InventoryInfo: <InventoryInfo inventoryID={inventory.inventoryID} />,
+    status: (
+      <MDBox ml={-1}>
+        <MDBadge color="success" variant="gradient" size="sm" />
+      </MDBox>
+    ),
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+  }));
+
+  return {
+    columns: [
+      { Header: "Inventory Info", accessor: "InventoryInfo", width: "30%", align: "left" },
+      { Header: "Status", accessor: "status", width: "30%", align: "left" },
+      { Header: "Action", accessor: "action", align: "center" },
+    ],
+    rows: formatRows,
+  };
+}
diff --git a/src/layouts/Inventory/index.js b/src/layouts/Inventory/index.js
new file mode 100644
index 000000000..246982527
--- /dev/null
+++ b/src/layouts/Inventory/index.js
@@ -0,0 +1,119 @@
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Footer from "examples/Footer";
+import DataTable from "examples/Tables/DataTable";
+import { useEffect, useState } from "react";
+import inventoryTableData from "./data/inventoryTableData";
+import invnetoryTableDataRelations from "./data/invnetoryTableDataRelations";
+import { getInventories, getInventoriesByType } from "../../services/inventoryService";
+import { Select, MenuItem, FormControl, InputLabel } from "@mui/material";
+import inventoryTableDataRelations from "./data/invnetoryTableDataRelations";
+function Inventories() {
+  const [tableData, setTableData] = useState({ columns: [], rows: [] });
+  const [tableDataRelations, setTableDataRelations] = useState({ columns: [], rows: [] });
+  const [InventoryType, setInventoryType] = useState("");
+
+  async function fetchDataTypes(value) {
+    try {
+      setInventoryType(value);
+      const TypeInventories = await getInventoriesByType(value);
+      console.log(TypeInventories);
+      setTableData(inventoryTableData(TypeInventories));
+    } catch (error) {
+      console.error("Error fetching inventories data:", error);
+    }
+  }
+
+  const handleInventoryTypeChange = (event) => {
+    setInventoryType(event.target.value);
+    const Inventories = fetchDataTypes(event.target.value);
+  };
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const Inventories = await getInventories();
+        setTableData(invnetoryTableDataRelations(Inventories));
+      } catch (error) {
+        console.error("Error fetching inventory data:", error);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox mx={2} mt={-3} py={3} px={2} variant="gradient" bgColor="info" borderRadius="lg" coloredShadow="info">
+                <MDBox display="flex" justifyContent="space-between" alignItems="center">
+                  <MDTypography variant="h6" color="white">
+                    Inventories Table
+                  </MDTypography>
+                  <FormControl variant="outlined" sx={{ minWidth: 60, backgroundColor: 'white', borderRadius: 1 }}>
+                    <InputLabel id="inventory-type-label" style={{ color: 'white', marginTop: -10 }}>Type</InputLabel>
+                    <Select
+                      labelId="inventory-type-label"
+                      id="inventory-type-select"
+                      value={InventoryType}
+                      onChange={handleInventoryTypeChange}
+                      label="Type"
+
+                    >
+                      <MenuItem value="BusinessInventory">Business Inventory</MenuItem>
+                      <MenuItem value="PersonalInventory">Personal Inventory</MenuItem>
+                    </Select>
+                  </FormControl>
+                </MDBox>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableData}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+            <Card style={{ marginTop: "5% " }}>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                 Inventories Relation Table
+                </MDTypography>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableDataRelations}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+
+export default Inventories;
diff --git a/src/layouts/Messages/data/messagesTableData.js b/src/layouts/Messages/data/messagesTableData.js
new file mode 100644
index 000000000..ceeb7e1f5
--- /dev/null
+++ b/src/layouts/Messages/data/messagesTableData.js
@@ -0,0 +1,59 @@
+import React from "react";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import PropTypes from "prop-types";
+
+export default function messagesTableData(messages) {
+  const MessageInfo = ({ messageType, messageID, content, sentBy }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        Type: {messageType}
+      </MDTypography>
+      <MDTypography variant="caption">Message ID: {messageID}</MDTypography>
+      <MDTypography variant="caption">Content: {content}</MDTypography>
+      <MDTypography variant="caption">Sent By: {sentBy}</MDTypography>
+    </MDBox>
+  );
+
+  MessageInfo.propTypes = {
+    messageType: PropTypes.string.isRequired,
+    messageID: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    sentBy: PropTypes.string.isRequired,
+  };
+
+  const ContentInfo = ({ content }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography variant="caption"> {content}</MDTypography>
+    </MDBox>
+  );
+
+  ContentInfo.propTypes = {
+    content: PropTypes.string.isRequired,
+  };
+
+  const formatRows = messages.map((message) => ({
+    messageInfo: (
+      <MessageInfo
+        messageType={message.messageType}
+        messageID={message.messageID}
+        content={message.content}
+        sentBy={message.sentBy}
+      />
+    ),
+    content: <ContentInfo content={message.content} />,
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+  }));
+
+  return {
+    columns: [
+      { Header: "Message", accessor: "messageInfo", width: "45%", align: "left" },
+      { Header: "Content", accessor: "content", width: "20%", align: "left" },
+    ],
+    rows: formatRows,
+  };
+}
diff --git a/src/layouts/Messages/data/messagesTableDataRelations.js b/src/layouts/Messages/data/messagesTableDataRelations.js
new file mode 100644
index 000000000..fdf393146
--- /dev/null
+++ b/src/layouts/Messages/data/messagesTableDataRelations.js
@@ -0,0 +1,59 @@
+import React from "react";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from "prop-types";
+
+export default function messagesTableDataRelations(messages) {
+  const MessageInfo = ({ messageType, content, sentBy }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        {messageType}
+      </MDTypography>
+      <MDTypography variant="caption">{content}</MDTypography>
+      <MDTypography variant="caption">{sentBy}</MDTypography>
+    </MDBox>
+  );
+  MessageInfo.propTypes = {
+    messageType: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    sentBy: PropTypes.string.isRequired,
+  };
+
+  const OwnerInfo = ({ userName, userEmail }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="caption" fontWeight="medium">
+        {userName}
+      </MDTypography>
+      <MDTypography variant="caption">{userEmail}</MDTypography>
+    </MDBox>
+  );
+  OwnerInfo.propTypes = {
+    userName: PropTypes.string.isRequired,
+    userEmail: PropTypes.string.isRequired,
+  };
+
+  const messageRows = messages.map((message) => ({
+    messageInfo: (
+      <MessageInfo
+        messageType={message.messageType}
+        content={message.content}
+        sentBy={message.sentBy}
+      />
+    ),
+    owner: <OwnerInfo userName={message.userName} userEmail={message.userEmail} />,
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+  }));
+
+  return {
+    columns: [
+      { Header: "Message", accessor: "messageInfo", width: "30%", align: "left" },
+      { Header: "Owner", accessor: "owner", width: "30%", align: "left" },
+    ],
+    rows: messageRows,
+  };
+}
diff --git a/src/layouts/Messages/index.js b/src/layouts/Messages/index.js
new file mode 100644
index 000000000..4095d0558
--- /dev/null
+++ b/src/layouts/Messages/index.js
@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from "react";
+import { Select, MenuItem, FormControl, InputLabel, TextField } from "@mui/material";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Footer from "examples/Footer";
+import DataTable from "examples/Tables/DataTable";
+import { getMessages, getMessagesRelations } from "../../services/messagesService";
+
+import messagesTableData from "./data/messagesTableData";
+import messagesTableDataRelations from "./data/messagesTableDataRelations";
+
+function Messages() {
+  const [tableData, setTableData] = useState({ columns: [], rows: [] });
+  const [tableDataRelations, setTableDataRelations] = useState({ columns: [], rows: [] });
+  const [messageType, setMessageType] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  async function fetchDataByType(value) {
+    try {
+      const messagesByType = await getMessagesRelations(value);
+      setTableData(messagesTableData(messagesByType));
+    } catch (error) {
+      console.error("Error fetching message data:", error);
+    }
+  }
+
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+    fetchDataByType(event.target.value);
+  };
+
+  async function fetchDataByMessageType(value) {
+    try {
+      setMessageType(value);
+      const messages = await getMessages(value);
+      setTableData(messagesTableData(messages));
+    } catch (error) {
+      console.error("Error fetching message data:", error);
+    }
+  }
+
+  const handleMessageTypeChange = (event) => {
+    setMessageType(event.target.value);
+    fetchDataByMessageType(event.target.value);
+  };
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const messages = await getMessages();
+        const messageRelations = await getMessagesRelations();
+        setTableData(messagesTableData(messages));
+        setTableDataRelations(messagesTableDataRelations(messageRelations));
+      } catch (error) {
+        console.error("Error fetching message data:", error);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDBox display="flex" justifyContent="space-between" alignItems="center">
+                  <MDTypography variant="h6" color="white">
+                    Messages Table
+                  </MDTypography>
+                  <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+                    <TextField
+                      id="search-field"
+                      label="Search"
+                      variant="outlined"
+                      value={searchQuery}
+                      onChange={handleMessageTypeChange}
+                      sx={{ width: 130, backgroundColor: "white", borderRadius: 1 }}
+                    />
+                    <FormControl
+                      variant="outlined"
+                      sx={{
+                        minWidth: 60,
+                        backgroundColor: "white",
+                        borderRadius: 1,
+                        marginRight: 3,
+                      }}
+                    ></FormControl>
+                  </div>
+                </MDBox>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableData}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+            <Card style={{ marginTop: "5%" }}>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                  Messages Relation Table
+                </MDTypography>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableDataRelations}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+
+export default Messages;
diff --git a/src/layouts/contract/data/contractTableData.js b/src/layouts/contract/data/contractTableData.js
new file mode 100644
index 000000000..4b78a306d
--- /dev/null
+++ b/src/layouts/contract/data/contractTableData.js
@@ -0,0 +1,56 @@
+import React from "react";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from "prop-types";
+
+function ContractInfo({ terms }) {
+  return (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography variant="caption">Terms: {terms}</MDTypography>
+    </MDBox>
+  );
+}
+
+function ContractType({ type }) {
+  return (
+    <MDTypography display="block" variant="button" fontWeight="medium">
+      Type: {type}
+    </MDTypography>
+  );
+}
+
+ContractInfo.propTypes = {
+  terms: PropTypes.string.isRequired,
+};
+
+ContractType.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+function formatRows(contracts) {
+  const formatRow = (contract) => ({
+    ContractInfo: <ContractInfo terms={contract.terms} />,
+    ContractType: <ContractType type={contract.type} />,
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+    // Add more attributes as needed
+  });
+
+  const formattedRows = contracts.map(formatRow);
+
+  return {
+    columns: [
+      { Header: "Contract Info", accessor: "ContractInfo", width: "30%", align: "left" },
+      { Header: "Contract Type", accessor: "ContractType", width: "30%", align: "left" },
+      // Add more columns for other attributes
+      { Header: "Action", accessor: "action", align: "center" },
+    ],
+    rows: formattedRows,
+  };
+}
+
+export default formatRows;
diff --git a/src/layouts/contract/data/contractTableDataRelations.js b/src/layouts/contract/data/contractTableDataRelations.js
new file mode 100644
index 000000000..90d27aa6a
--- /dev/null
+++ b/src/layouts/contract/data/contractTableDataRelations.js
@@ -0,0 +1,65 @@
+import React from "react";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from "prop-types";
+
+function ContractInfo({  terms }) {
+  return (
+    <MDBox lineHeight={1} textAlign="left">
+
+      <MDTypography variant="caption">Terms: {terms}</MDTypography>
+    </MDBox>
+  );
+}
+
+function ContractType({ type }) {
+  return (
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        Type: {type}
+      </MDTypography>
+
+  );
+}
+
+ContractInfo.propTypes = {
+  terms: PropTypes.string.isRequired,
+};
+ContractType.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+function formatRows(contracts) {
+  const formatRow = (contract) => ({
+    ContractInfo: (
+      <ContractInfo  terms={contract.terms}  />
+    ),
+
+    ContractType: (
+      <ContractType type={contract.type} />
+    ),
+
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+          Edit
+      </MDTypography>
+  ),
+    // Add more attributes as needed
+  });
+
+  const formatRows = contracts.map(formatRow);
+
+  return {
+    columns: [
+      { Header: "Contract Info", accessor: "ContractInfo", width: "30%", align: "left" },
+      { Header: "Contract Type", accessor: "ContractType", width: "30%", align: "left" },
+
+      // Add more columns for other attributes
+
+      { Header: "action", accessor: "action", align: "center" },
+    ],
+    rows: formatRows,
+  };
+}
+
+export default formatRows;
diff --git a/src/layouts/contract/index.js b/src/layouts/contract/index.js
new file mode 100644
index 000000000..cce2c56b3
--- /dev/null
+++ b/src/layouts/contract/index.js
@@ -0,0 +1,120 @@
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Footer from "examples/Footer";
+import DataTable from "examples/Tables/DataTable";
+import { useEffect, useState } from "react";
+import contractTableData from "./data/contractTableData";
+import contractTableDataRelations from "./data/contractTableDataRelations";
+import { Select, MenuItem, FormControl, InputLabel } from "@mui/material";
+import { getContractsType } from "services/contractService";
+import { getContracts } from "services/contractService";
+function Contracts() {
+  const [tableData, setTableData] = useState({ columns: [], rows: [] });
+  const [tableDataRelations, setTableDataRelations] = useState({ columns: [], rows: [] });
+  const [contractType, setContractType] = useState("");
+
+  async function fetchDataTypes(value) {
+    try {
+      setContractType(value);
+      const TypeContracts = await getContractsType(value);
+      console.log(TypeContracts);
+      setTableData(contractTableData(TypeContracts));
+    } catch (error) {
+      console.error("Error fetching contracts data:", error);
+    }
+  }
+
+  const handleContractTypeChange = (event) => {
+    setContractType(event.target.value);
+    const Contracts = fetchDataTypes(event.target.value);
+  };
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const Contracts = await getContracts();
+        console.log(Contracts);
+        setTableData(contractTableDataRelations(Contracts));
+      } catch (error) {
+        console.error("Error fetching contracts data:", error);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox mx={2} mt={-3} py={3} px={2} variant="gradient" bgColor="info" borderRadius="lg" coloredShadow="info">
+                <MDBox display="flex" justifyContent="space-between" alignItems="center">
+                  <MDTypography variant="h6" color="white">
+                    Contracts Table
+                  </MDTypography>
+                  <FormControl variant="outlined" sx={{ minWidth: 60, backgroundColor: 'white', borderRadius: 1 }}>
+                    <InputLabel id="contract-type-label" style={{ color: 'white', marginTop: -10 }}>Type</InputLabel>
+                    <Select
+                      labelId="contract-type-label"
+                      id="contract-type-select"
+                      value={contractType}
+                      onChange={handleContractTypeChange}
+                      label="Type"
+
+                    >
+                      <MenuItem value="TradeContract">Trade Contract</MenuItem>
+                      <MenuItem value="OneWayContract">One Way Contract</MenuItem>
+                    </Select>
+                  </FormControl>
+                </MDBox>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableData}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+            <Card style={{ marginTop: "5% " }}>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                 Contracts Relation Table
+                </MDTypography>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableDataRelations}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+
+export default Contracts;
diff --git a/src/layouts/payment/data/reclamationTableData.js b/src/layouts/payment/data/reclamationTableData.js
new file mode 100644
index 000000000..3d3a9017e
--- /dev/null
+++ b/src/layouts/payment/data/reclamationTableData.js
@@ -0,0 +1,91 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/function-component-definition */
+/**
+=========================================================
+* Material Dashboard 2 React - v2.2.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-react
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 React components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDAvatar from "components/MDAvatar";
+import MDBadge from "components/MDBadge";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+// Images
+import dd from "assets/images/dd.png";
+import team3 from "assets/images/team-3.jpg";
+import team4 from "assets/images/team-4.jpg";
+import Reclamation from "..";
+
+export default function data() {
+  const [reclamations, setReclamations] = useState([]);
+
+  useEffect(() => {
+    // Utilisez useEffect pour effectuer la requête lorsque le composant est monté
+    axios
+      .get("http://localhost:8005/api/payment/getall")
+      .then((response) => {
+        // Mettez à jour l'état avec les données de la réponse de l'API
+        setReclamations(response.data);
+      })
+      .catch((error) => {
+        // Gérez les erreurs ici, par exemple, en les affichant à l'utilisateur
+        console.error("Erreur lors de la récupération des données de l'API", error);
+      });
+  }, []);
+  console.log(reclamations);
+  const ReclamationContent = ({ image, name, email }) => (
+    <MDBox display="flex" alignItems="center" lineHeight={1}>
+      <MDAvatar image={dd} name={name} size="sm" />
+      <MDBox ml={2} lineHeight={1}>
+        <MDTypography display="block" variant="button" fontWeight="medium">
+          {name}
+        </MDTypography>
+        <MDTypography variant="caption">{email}</MDTypography>
+      </MDBox>
+    </MDBox>
+  );
+  const formatRows = reclamations.map((reclamation) => ({
+    reclamationInfo: (
+      <ReclamationContent
+        image={dd}
+        name={reclamation.userName.value}
+        email={reclamation.userEmail.value}
+      />
+    ),
+    description: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        {reclamation.Price.value}
+      </MDTypography>
+    ),
+
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+  }));
+
+  console.log(reclamations);
+
+  return {
+    columns: [
+      { Header: "reclamationInfo", accessor: "reclamationInfo", width: "45%", align: "left" },
+      { Header: "Price", accessor: "description", align: "left" },
+      { Header: "action", accessor: "action", align: "center" },
+    ],
+
+    rows: formatRows,
+  };
+}
diff --git a/src/layouts/payment/index.js b/src/layouts/payment/index.js
new file mode 100644
index 000000000..95cf7bb28
--- /dev/null
+++ b/src/layouts/payment/index.js
@@ -0,0 +1,75 @@
+/**
+=========================================================
+* Material Dashboard 2 React - v2.2.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-react
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+
+// Material Dashboard 2 React components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 React example components
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Footer from "examples/Footer";
+import DataTable from "examples/Tables/DataTable";
+
+// Data
+import authorsTableData from "./data/reclamationTableData";
+
+function Payment() {
+  const { columns, rows } = authorsTableData();
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                  Reclamation Table
+                </MDTypography>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={{ columns, rows }}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+
+export default Payment;
diff --git a/src/layouts/products/data/productsTableData.js b/src/layouts/products/data/productsTableData.js
new file mode 100644
index 000000000..e945e1aea
--- /dev/null
+++ b/src/layouts/products/data/productsTableData.js
@@ -0,0 +1,56 @@
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from 'prop-types';
+
+export default function productsTableData(products) {
+  const ProductInfo = ({ name, category, description, user }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        {name}
+      </MDTypography>
+      <MDTypography variant="caption">{category}</MDTypography>
+      <MDTypography variant="caption">{description}</MDTypography>
+      <MDTypography variant="caption">{user}</MDTypography>
+    </MDBox>
+  );
+  ProductInfo.propTypes = {
+    name: PropTypes.string.isRequired,
+    category: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    user: PropTypes.string.isRequired,
+  };
+
+  const randomStatus = () => {
+    const statuses = ["Available", "Pending", "Sold"];
+    return statuses[Math.floor(Math.random() * statuses.length)];
+  };
+
+  const formatRows = products.map(product => ({
+    productInfo: <ProductInfo
+      name={product.name}
+      category={product.category}
+      description={product.description}
+      user={product.user}
+    />,
+    status: (
+      <MDBox ml={-1}>
+        <MDBadge badgeContent={randomStatus()} color="success" variant="gradient" size="sm" />
+      </MDBox>
+    ),
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+  }));
+
+  return {
+    columns: [
+      { Header: "product", accessor: "productInfo", width: "45%", align: "left" },
+      { Header: "status", accessor: "status", align: "center" },
+      { Header: "action", accessor: "action", align: "center" },
+    ],
+    rows: formatRows,
+  };
+}
\ No newline at end of file
diff --git a/src/layouts/products/data/productsTableDataRelations.js b/src/layouts/products/data/productsTableDataRelations.js
new file mode 100644
index 000000000..d0d1dfeea
--- /dev/null
+++ b/src/layouts/products/data/productsTableDataRelations.js
@@ -0,0 +1,71 @@
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from 'prop-types';
+
+export default function productsTableDataRelations(products) {
+    const ProductInfo = ({ name, category, description }) => (
+        <MDBox lineHeight={1} textAlign="left">
+            <MDTypography display="block" variant="button" fontWeight="medium">
+                {name}
+            </MDTypography>
+            <MDTypography variant="caption">{category}</MDTypography>
+            <MDTypography variant="caption">{description}</MDTypography>
+        </MDBox>
+    );
+    ProductInfo.propTypes = {
+        name: PropTypes.string.isRequired,
+        category: PropTypes.string.isRequired,
+        description: PropTypes.string.isRequired,
+    };
+
+    const OwnerInfo = ({ userName, userEmail }) => (
+        <MDBox lineHeight={1} textAlign="left">
+            <MDTypography display="block" variant="caption" fontWeight="medium">
+                {userName}
+            </MDTypography>
+            <MDTypography variant="caption">{userEmail}</MDTypography>
+        </MDBox>
+    );
+    OwnerInfo.propTypes = {
+        userName: PropTypes.string.isRequired,
+        userEmail: PropTypes.string.isRequired,
+    };
+
+    const randomStatus = () => {
+        const statuses = ["Available", "Pending", "Sold"];
+        return statuses[Math.floor(Math.random() * statuses.length)];
+    };
+
+    const formatRows = products.map(product => ({
+        productInfo: <ProductInfo
+            name={product.name}
+            category={product.category}
+            description={product.description}
+        />,
+        owner: <OwnerInfo
+            userName={product.userName}
+            userEmail={product.userEmail}
+        />,
+        status: (
+            <MDBox ml={-1}>
+                <MDBadge badgeContent={randomStatus()} color="success" variant="gradient" size="sm" />
+            </MDBox>
+        ),
+        action: (
+            <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+                Edit
+            </MDTypography>
+        ),
+    }));
+
+    return {
+        columns: [
+            { Header: "product", accessor: "productInfo", width: "30%", align: "left" },
+            { Header: "owner", accessor: "owner", width: "30%", align: "left" },
+            { Header: "status", accessor: "status", align: "center" },
+            { Header: "action", accessor: "action", align: "center" },
+        ],
+        rows: formatRows,
+    };
+}
diff --git a/src/layouts/products/index.js b/src/layouts/products/index.js
new file mode 100644
index 000000000..ed3f749d2
--- /dev/null
+++ b/src/layouts/products/index.js
@@ -0,0 +1,147 @@
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Footer from "examples/Footer";
+import DataTable from "examples/Tables/DataTable";
+import { useEffect, useState } from "react";
+import productsTableData from "./data/productsTableData";
+import productsTableDataRelations from "./data/productsTableDataRelations";
+import { getProducts, getTypeProducts, getCategoryProducts, getProductsRelations } from "../../services/productService";
+import { Select, MenuItem, FormControl, InputLabel, TextField } from "@mui/material";
+function Products() {
+  const [tableData, setTableData] = useState({ columns: [], rows: [] });
+  const [tableDataRelations, setTableDataRelations] = useState({ columns: [], rows: [] });
+  const [productType, setProductType] = useState("");
+  const [searchQuery, setSearchQuery] = useState('');
+
+  async function fetchDataCategory(value) {
+    try {
+
+      const categoryProducts = await getCategoryProducts(value);
+      setTableData(productsTableData(categoryProducts));
+    } catch (error) {
+      console.error("Error fetching products data:", error);
+    }
+  }
+
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+    fetchDataCategory(event.target.value)
+  };
+
+
+  async function fetchDataTypes(value) {
+    try {
+      setProductType(value);
+      const TypeProducts = await getTypeProducts(value);
+      setTableData(productsTableData(TypeProducts));
+    } catch (error) {
+      console.error("Error fetching products data:", error);
+    }
+  }
+
+  const handleProductTypeChange = (event) => {
+    setProductType(event.target.value);
+    fetchDataTypes(event.target.value);
+  };
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const Products = await getProducts();
+        const ProductsRelations = await getProductsRelations();
+        console.log(ProductsRelations);
+        setTableData(productsTableData(Products));
+        setTableDataRelations(productsTableDataRelations(ProductsRelations));
+      } catch (error) {
+        console.error("Error fetching products data:", error);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox mx={2} mt={-3} py={3} px={2} variant="gradient" bgColor="info" borderRadius="lg" coloredShadow="info">
+                <MDBox display="flex" justifyContent="space-between" alignItems="center">
+                  <MDTypography variant="h6" color="white">
+                    Products Table
+                  </MDTypography>
+                  <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+                    <TextField
+                      id="search-field"
+                      label="Search"
+
+                      variant="outlined"
+                      value={searchQuery}
+                      onChange={handleSearchChange}
+                      sx={{ width: 130, backgroundColor: 'white', borderRadius: 1 }}
+                    />
+                    <FormControl variant="outlined" sx={{ minWidth: 60, backgroundColor: 'white', borderRadius: 1, marginRight: 3 }}>
+                      <InputLabel id="product-type-label" style={{ color: 'white', marginTop: -10 }}>Type</InputLabel>
+                      <Select
+                        labelId="product-type-label"
+                        id="product-type-select"
+                        value={productType}
+                        onChange={handleProductTypeChange}
+                        label="Type"
+
+                      >
+                        <MenuItem value="Electronics">Electronics</MenuItem>
+                        <MenuItem value="Non_Electronics">Non Electronics</MenuItem>
+                      </Select>
+                    </FormControl></div>
+                </MDBox>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableData}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+            <Card style={{ marginTop: "5% " }}>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                  Products Relation Table
+                </MDTypography>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableDataRelations}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+
+export default Products;
diff --git a/src/layouts/reclamation/data/reclamationTableData.js b/src/layouts/reclamation/data/reclamationTableData.js
new file mode 100644
index 000000000..5d39c1060
--- /dev/null
+++ b/src/layouts/reclamation/data/reclamationTableData.js
@@ -0,0 +1,100 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/function-component-definition */
+/**
+=========================================================
+* Material Dashboard 2 React - v2.2.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-react
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 React components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDAvatar from "components/MDAvatar";
+import MDBadge from "components/MDBadge";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+// Images
+import dd from "assets/images/dd.png";
+import team3 from "assets/images/team-3.jpg";
+import team4 from "assets/images/team-4.jpg";
+import Reclamation from "..";
+
+export default function data() {
+  const [reclamations, setReclamations] = useState([]);
+
+  useEffect(() => {
+    // Utilisez useEffect pour effectuer la requête lorsque le composant est monté
+    axios
+      .get("http://localhost:8005/api/reclamation/all")
+      .then((response) => {
+        // Mettez à jour l'état avec les données de la réponse de l'API
+        setReclamations(response.data);
+      })
+      .catch((error) => {
+        // Gérez les erreurs ici, par exemple, en les affichant à l'utilisateur
+        console.error("Erreur lors de la récupération des données de l'API", error);
+      });
+  }, []);
+  const ReclamationContent = ({ image, name, email }) => (
+    <MDBox display="flex" alignItems="center" lineHeight={1}>
+      <MDAvatar image={dd} name={name} size="sm" />
+      <MDBox ml={2} lineHeight={1}>
+        <MDTypography display="block" variant="button" fontWeight="medium">
+          {name}
+        </MDTypography>
+        <MDTypography variant="caption">{email}</MDTypography>
+      </MDBox>
+    </MDBox>
+  );
+  const formatRows = reclamations.map((reclamation) => ({
+    reclamationInfo: (
+      <ReclamationContent
+        image={dd}
+        name={reclamation.userName.value}
+        email={reclamation.userEmail.value}
+      />
+    ),
+    description: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        {reclamation.description.value}
+      </MDTypography>
+    ),
+    status:
+      reclamation.type.value === "URGENT" ? (
+        <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+          done
+        </MDTypography>
+      ) : (
+        <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+          not urgent
+        </MDTypography>
+      ),
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+  }));
+
+  console.log(reclamations);
+
+  return {
+    columns: [
+      { Header: "reclamationInfo", accessor: "reclamationInfo", width: "45%", align: "left" },
+      { Header: "Description", accessor: "description", align: "left" },
+      { Header: "status", accessor: "status", align: "center" },
+      { Header: "action", accessor: "action", align: "center" },
+    ],
+
+    rows: formatRows,
+  };
+}
diff --git a/src/layouts/reclamation/index.js b/src/layouts/reclamation/index.js
new file mode 100644
index 000000000..4eb8ce957
--- /dev/null
+++ b/src/layouts/reclamation/index.js
@@ -0,0 +1,75 @@
+/**
+=========================================================
+* Material Dashboard 2 React - v2.2.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-react
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+
+// Material Dashboard 2 React components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 React example components
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Footer from "examples/Footer";
+import DataTable from "examples/Tables/DataTable";
+
+// Data
+import authorsTableData from "./data/reclamationTableData";
+
+function Reclamation() {
+  const { columns, rows } = authorsTableData();
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                  Reclamation Table
+                </MDTypography>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={{ columns, rows }}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+
+export default Reclamation;
diff --git a/src/layouts/request/data/requesttable.js b/src/layouts/request/data/requesttable.js
new file mode 100644
index 000000000..2e1962d93
--- /dev/null
+++ b/src/layouts/request/data/requesttable.js
@@ -0,0 +1,45 @@
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from "prop-types";
+
+export default function usertable(requests) {
+  const RequestInfo = ({ requestID, status }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        {requestID}
+      </MDTypography>
+    </MDBox>
+  );
+
+  RequestInfo.propTypes = {
+    requestID: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
+  };
+
+  const formatRows = requests.map((request) => {
+    const columns = [
+      { Header: "Request ID", accessor: "requestInfo", width: "45%", align: "left" },
+    ];
+
+    // Check if "status" is defined in the request object
+    if (request.status !== undefined) {
+      columns.push({ Header: "Status", accessor: "status", align: "center" });
+    }
+    
+    if(request.name!==undefined){
+        columns.push({ Header: "Name", accessor: "name", align: "center" });
+    }
+
+    return {
+      ...request,
+      requestInfo: <RequestInfo requestID={request.requestID} status={request.status} />,
+      columns: columns,
+    };
+  });
+
+  return {
+    columns: formatRows[0].columns, // Assuming all rows have the same columns
+    rows: formatRows,
+  };
+}
diff --git a/src/layouts/request/index.js b/src/layouts/request/index.js
new file mode 100644
index 000000000..64d7afdf0
--- /dev/null
+++ b/src/layouts/request/index.js
@@ -0,0 +1,143 @@
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Footer from "examples/Footer";
+import DataTable from "examples/Tables/DataTable";
+import { useEffect, useState } from "react";
+import requestTable from "./data/requesttable"; // Modify this to import your request table data
+import { getAllRequests, getRequestsByStatus, getusersbyrequestid } from "./requestservice"; // Modify this to match your request service functions
+import { FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+
+function Requests() {
+  const [tableData, setTableData] = useState({ columns: [], rows: [] });
+  const [searchQuery, setSearchQuery] = useState("");
+  const [requests, setrequets] = useState({ columns: [], rows: [] });
+
+  async function fetchAllRequests() {
+    try {
+      const allRequestsData = await getAllRequests();
+
+      const cleanedRequests = cleanRequestData(allRequestsData);
+      setTableData(requestTable(cleanedRequests));
+      setrequets(requestTable(cleanedRequests));
+    } catch (error) {
+      console.error("Error fetching all requests data:", error);
+    }
+  }
+  async function fetchDataCategory(value) {
+    try {
+      const categoryProducts = await getusersbyrequestid(value);
+      var cleanedusers = cleanRequestData(categoryProducts);
+      console.log(cleanedusers);
+      // setTableData(requestTable(cleanedusers));
+      setrequets(requestTable(cleanedusers));
+      
+    } catch (error) {
+      console.error("Error fetching products data:", error);
+    }
+  }
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+    fetchDataCategory(event.target.value);
+  };
+  function cleanRequestData(rawData) {
+    return rawData.map((request) => {
+      return {
+        requestID: request.requestID.value,
+        status: request.status.value,
+        name: request.name?.value,
+        // Add other request fields here
+      };
+    });
+  }
+
+  useEffect(() => {
+    async function fetchData() {
+      fetchAllRequests();
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                  Requests Table
+                </MDTypography>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableData}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                  Requests Table
+                </MDTypography>
+                <TextField
+                  id="search-field"
+                  label="Search"
+                  variant="outlined"
+                  sx={{ width: 130, backgroundColor: "white", borderRadius: 1 }}
+                  value={searchQuery}
+                  onChange={handleSearchChange}
+                />
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={requests}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+
+export default Requests;
diff --git a/src/layouts/request/requestservice.js b/src/layouts/request/requestservice.js
new file mode 100644
index 000000000..68b01d8bf
--- /dev/null
+++ b/src/layouts/request/requestservice.js
@@ -0,0 +1,27 @@
+import axios from "axios";
+
+const BASE_URL = "http://localhost:8005/api/Request";
+
+const getAllRequests = async () => {
+  try {
+    const response = await axios.get(`${BASE_URL}/getall`);
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching users", error);
+    return [];
+  }
+};
+
+const getusersbyrequestid = async (id) => {
+    
+  try {
+    const response = await axios.get(`${BASE_URL}/request/` + id);
+    console.log(response.data)
+    return response.data;
+  } catch (error) {
+    console.error(`Error fetching users of type ${type}`, error);
+    return [];
+  }
+};
+
+export { getAllRequests, getusersbyrequestid };
diff --git a/src/layouts/reviews/data/reviewsTableData.js b/src/layouts/reviews/data/reviewsTableData.js
new file mode 100644
index 000000000..d9aee4dcd
--- /dev/null
+++ b/src/layouts/reviews/data/reviewsTableData.js
@@ -0,0 +1,65 @@
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from 'prop-types';
+
+export default function ReviewsTableData(reviews) {
+  const ReviewInfo = ({ feedback, rating, user }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        {feedback}
+      </MDTypography>
+
+      <MDTypography variant="caption">User: {user}</MDTypography>
+    </MDBox>
+  );
+  const RatingInfo = ({ rating }) => (
+    <MDBox lineHeight={1} textAlign="left">
+
+      <MDTypography variant="caption">Rating: {rating}</MDTypography>
+    </MDBox>
+  );
+
+  RatingInfo.propTypes = {
+
+    rating: PropTypes.string.isRequired,
+
+  };
+  ReviewInfo.propTypes = {
+    feedback: PropTypes.string.isRequired,
+    rating: PropTypes.string.isRequired,
+    user: PropTypes.string.isRequired,
+  };
+
+  const formatRows = reviews.map(review => ({
+    reviewInfo: <ReviewInfo
+      feedback={review.feedback}
+      rating={review.rating}
+      user={review.user}
+    />,
+    rating: <RatingInfo
+
+      rating={review.rating}
+
+    />,
+    status: (
+      <MDBox ml={-1}>
+        <MDBadge badgeContent={review.status} color="success" variant="gradient" size="sm" />
+      </MDBox>
+    ),
+    action: (
+      <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+        Edit
+      </MDTypography>
+    ),
+  }));
+
+  return {
+    columns: [
+      { Header: "Review", accessor: "reviewInfo", width: "45%", align: "left" },
+      { Header: "Rating", accessor: "rating", align: "center" },
+      { Header: "Action", accessor: "action", align: "center" },
+    ],
+    rows: formatRows,
+  };
+}
diff --git a/src/layouts/reviews/data/reviewsTableDataRelations.js b/src/layouts/reviews/data/reviewsTableDataRelations.js
new file mode 100644
index 000000000..eeeabc8fc
--- /dev/null
+++ b/src/layouts/reviews/data/reviewsTableDataRelations.js
@@ -0,0 +1,57 @@
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from 'prop-types';
+
+export default function reviewsTableDataRelations(reviews) {
+    const ReviewInfo = ({ feedback, rating }) => (
+        <MDBox lineHeight={1} textAlign="left">
+            <MDTypography display="block" variant="button" fontWeight="medium">
+                {feedback}
+            </MDTypography>
+            <MDTypography variant="caption">Rating: {rating}</MDTypography>
+        </MDBox>
+    );
+    ReviewInfo.propTypes = {
+        feedback: PropTypes.string.isRequired,
+        rating: PropTypes.string.isRequired,
+    };
+
+    const UserInfo = ({ userName, userEmail }) => (
+        <MDBox lineHeight={1} textAlign="left">
+            <MDTypography display="block" variant="caption" fontWeight="medium">
+                {userName}
+            </MDTypography>
+            <MDTypography variant="caption">{userEmail}</MDTypography>
+        </MDBox>
+    );
+    UserInfo.propTypes = {
+        userName: PropTypes.string.isRequired,
+        userEmail: PropTypes.string.isRequired,
+    };
+
+    const formatRows = reviews.map(review => ({
+        reviewInfo: <ReviewInfo
+            feedback={review.feedback}
+            rating={review.rating}
+        />,
+        user: <UserInfo
+            userName={review.userName}
+            userEmail={review.userEmail}
+        />,
+        action: (
+            <MDTypography component="a" href="#" variant="caption" color="text" fontWeight="medium">
+                Edit
+            </MDTypography>
+        ),
+    }));
+
+    return {
+        columns: [
+            { Header: "Review", accessor: "reviewInfo", width: "40%", align: "left" },
+            { Header: "User", accessor: "user", width: "30%", align: "left" },
+            { Header: "Action", accessor: "action", align: "center" },
+        ],
+        rows: formatRows,
+    };
+}
diff --git a/src/layouts/reviews/index.js b/src/layouts/reviews/index.js
new file mode 100644
index 000000000..ad6d7ac86
--- /dev/null
+++ b/src/layouts/reviews/index.js
@@ -0,0 +1,146 @@
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Footer from "examples/Footer";
+import DataTable from "examples/Tables/DataTable";
+import { useEffect, useState } from "react";
+import reviewsTableData from "./data/reviewsTableData";
+import reviewsTableDataRelations from "./data/reviewsTableDataRelations";
+import { getReviews, getTypeReviews, getRatingReviews, getReviewsRelations } from "../../services/reviewsService";
+import { Select, MenuItem, FormControl, InputLabel, TextField } from "@mui/material";
+
+function Reviews() {
+  const [tableData, setTableData] = useState({ columns: [], rows: [] });
+  const [tableDataRelations, setTableDataRelations] = useState({ columns: [], rows: [] });
+  const [reviewType, setReviewType] = useState("");
+  const [searchQuery, setSearchQuery] = useState('');
+
+  async function fetchDataRating(value) {
+    try {
+      const ratingReviews = await getRatingReviews(value);
+      setTableData(reviewsTableData(ratingReviews));
+    } catch (error) {
+      console.error("Error fetching reviews data:", error);
+    }
+  }
+
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+    fetchDataRating(event.target.value)
+  };
+
+  async function fetchDataTypes(value) {
+    try {
+      setReviewType(value);
+      const typeReviews = await getTypeReviews(value);
+      setTableData(reviewsTableData(typeReviews));
+    } catch (error) {
+      console.error("Error fetching reviews data:", error);
+    }
+  }
+
+  const handleReviewTypeChange = (event) => {
+    setReviewType(event.target.value);
+    fetchDataTypes(event.target.value);
+  };
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const reviews = await getReviews();
+        const reviewsRelations = await getReviewsRelations();
+        console.log(reviewsRelations);
+        setTableData(reviewsTableData(reviews));
+        setTableDataRelations(reviewsTableDataRelations(reviewsRelations));
+      } catch (error) {
+        console.error("Error fetching reviews data:", error);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox mx={2} mt={-3} py={3} px={2} variant="gradient" bgColor="info" borderRadius="lg" coloredShadow="info">
+                <MDBox display="flex" justifyContent="space-between" alignItems="center">
+                  <MDTypography variant="h6" color="white">
+                    Reviews Table
+                  </MDTypography>
+                  <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+                    <TextField
+                      id="search-field"
+                      label="Search Rating"
+                      variant="outlined"
+                      value={searchQuery}
+                      onChange={handleSearchChange}
+                      sx={{ width: 130, backgroundColor: 'white', borderRadius: 1 }}
+                    />
+                    <FormControl variant="outlined" sx={{ minWidth: 120, backgroundColor: 'white', borderRadius: 1, marginRight: 3 }}>
+                      <InputLabel id="review-type-label" style={{ color: 'white', marginTop: -10 }}>Type</InputLabel>
+                      <Select
+                        labelId="review-type-label"
+                        id="review-type-select"
+                        value={reviewType}
+                        onChange={handleReviewTypeChange}
+                        label="Type"
+                      >
+                        <MenuItem value="PositiveReview">Positive</MenuItem>
+                        <MenuItem value="NegativeReview">Negative</MenuItem>
+                      </Select>
+                    </FormControl>
+                  </div>
+                </MDBox>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableData}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+            <Card style={{ marginTop: "5%" }}>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                  Reviews Relation Table
+                </MDTypography>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableDataRelations}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+
+export default Reviews;
diff --git a/src/layouts/user/data/usertable.js b/src/layouts/user/data/usertable.js
new file mode 100644
index 000000000..d62165950
--- /dev/null
+++ b/src/layouts/user/data/usertable.js
@@ -0,0 +1,46 @@
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDBadge from "components/MDBadge";
+import PropTypes from "prop-types";
+
+export default function usertable(users) {
+  const ProductInfo = ({ name }) => (
+    <MDBox lineHeight={1} textAlign="left">
+      <MDTypography display="block" variant="button" fontWeight="medium">
+        {name}
+      </MDTypography>
+    </MDBox>
+  );
+  ProductInfo.propTypes = {
+    name: PropTypes.string.isRequired,
+  };
+
+  const formatRows = users.map((product) => {
+    const columns = [
+      { Header: "Full Name", accessor: "productInfo", width: "45%", align: "left" },
+      { Header: "username", accessor: "username", align: "center" },
+      { Header: "Email", accessor: "email", align: "center" },
+      { Header: "Location", accessor: "location", align: "center" },
+    ];
+
+    // Check if "status" is defined in the user object
+    if (product.status !== undefined) {
+      columns.push({ Header: "status", accessor: "status", align: "center" });
+    }
+
+   
+    return {
+      ...product,
+      productInfo: <ProductInfo name={product.name} />,
+      username: <ProductInfo name={product.username} />,
+      email: <ProductInfo name={product.email} />,
+      location: <ProductInfo name={product.location} />,
+      columns: columns,
+    };
+  });
+
+  return {
+    columns: formatRows[0].columns, // Assuming all rows have the same columns
+    rows: formatRows,
+  };
+}
diff --git a/src/layouts/user/index.js b/src/layouts/user/index.js
new file mode 100644
index 000000000..c35ab119a
--- /dev/null
+++ b/src/layouts/user/index.js
@@ -0,0 +1,188 @@
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Footer from "examples/Footer";
+import DataTable from "examples/Tables/DataTable";
+import { useEffect, useState } from "react";
+import usertable from "./data/usertable";
+import { getallusers, gettypeusers, getusers, getusersbylocation } from "./userservice";
+import { FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+
+function Products() {
+  const [productType, setProductType] = useState("");
+  const [tableData, setTableData] = useState({ columns: [], rows: [] });
+  const [allusers, setallusers] = useState({ columns: [], rows: [] });
+  const [searchQuery, setSearchQuery] = useState("");
+
+  async function fetchDataCategory(value) {
+    try {
+      const categoryProducts = await getusersbylocation(value);
+      var cleanedusers = cleanProductData(categoryProducts);
+      setTableData(usertable(cleanedusers));
+    } catch (error) {
+      console.error("Error fetching products data:", error);
+    }
+  }
+
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+    fetchDataCategory(event.target.value);
+  };
+  async function fetchDataTypes(value) {
+    try {
+      setProductType(value);
+      const TypeProducts = await gettypeusers(value);
+      var cleanedusers = cleanProductData(TypeProducts);
+      setTableData(usertable(cleanedusers));
+    } catch (error) {
+      console.error("Error fetching products data:", error);
+    }
+  }
+  const handleProductTypeChange = (event) => {
+    setProductType(event.target.value);
+    fetchDataTypes(event.target.value);
+  };
+
+  function cleanProductData(rawData) {
+    return rawData.map((user) => {
+      return {
+        name: user.name.value,
+        username: user.username.value,
+        email: user.email.value,
+        userID: user.userID?.value,
+        location: user.location.value,
+        status: user.status?.value,
+      };
+    });
+  }
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const rawProducts = await getusers();
+        const rawallusers = await getallusers();
+        const cleanedrawsers = cleanProductData(rawallusers);
+        const cleanedProducts = cleanProductData(rawProducts);
+        setTableData(usertable(cleanedProducts));
+        setallusers(usertable(cleanedrawsers));
+      } catch (error) {
+        console.error("Error fetching products data:", error);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                  Users Table
+                </MDTypography>
+                <div
+                  style={{ display: "flex", alignItems: "center", justifyContent: "space-evenly" }}
+                >
+                  <FormControl
+                    variant="outlined"
+                    sx={{ minWidth: 80, backgroundColor: "white", borderRadius: 1, marginRight: 3 }}
+                  >
+                    <InputLabel id="product-type-label" style={{ color: "white", marginTop: -10 }}>
+                      Type
+                    </InputLabel>
+                    <Select
+                      labelId="product-type-label"
+                      id="product-type-select"
+                      value={productType}
+                      onChange={handleProductTypeChange}
+                      label="Type"
+                    >
+                      <MenuItem value="Admin">Admin</MenuItem>
+                      <MenuItem value="guest">Guest</MenuItem>
+                      <MenuItem value="IndividualUser">IndividualUser</MenuItem>
+                      <MenuItem value="BusinessUser">BusinessUser</MenuItem>
+                    </Select>
+                  </FormControl>
+                  <TextField
+                    id="search-field"
+                    label="Search"
+                    variant="outlined"
+                    sx={{ width: 130, backgroundColor: "white", borderRadius: 1 }}
+                    value={searchQuery}
+                    onChange={handleSearchChange}
+                  />
+                </div>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={tableData}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <MDBox pt={6} pb={3}>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <Card>
+              <MDBox
+                mx={2}
+                mt={-3}
+                py={3}
+                px={2}
+                variant="gradient"
+                bgColor="info"
+                borderRadius="lg"
+                coloredShadow="info"
+              >
+                <MDTypography variant="h6" color="white">
+                  users Table
+                </MDTypography>
+              </MDBox>
+              <MDBox pt={3}>
+                <DataTable
+                  table={allusers}
+                  isSorted={false}
+                  entriesPerPage={false}
+                  showTotalEntries={false}
+                  noEndBorder
+                />
+              </MDBox>
+            </Card>
+            <TextField
+              id="search-field"
+              label="Search"
+              variant="outlined"
+              sx={{ width: 130, backgroundColor: "white", borderRadius: 1 }}
+              value={searchQuery}
+              onChange={handleSearchChange}
+            />
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+
+export default Products;
diff --git a/src/layouts/user/userservice.js b/src/layouts/user/userservice.js
new file mode 100644
index 000000000..3dd3dc80b
--- /dev/null
+++ b/src/layouts/user/userservice.js
@@ -0,0 +1,46 @@
+// services/productService.js
+import axios from "axios";
+
+const BASE_URL = "http://localhost:8005/api/user";
+
+const getusers = async () => {
+  try {
+    const response = await axios.get(`${BASE_URL}/req`);
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching products", error);
+    return [];
+  }
+};
+const getallusers = async () => {
+    try {
+      const response = await axios.get(`${BASE_URL}/getallusers`);
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching products", error);
+      return [];
+    }
+  };
+
+const gettypeusers = async (type) => {
+  try {
+    const response = await axios.get(`${BASE_URL}/user/` + type);
+    return response.data;
+    console.log(response.data)
+  } catch (error) {
+    console.error(`Error fetching products of type ${type}`, error);
+    return [];
+  }
+};
+
+const getusersbylocation = async (location) => {
+  try {
+    const response = await axios.get(`${BASE_URL}/filteruser/`+ location) 
+        return response.data;
+  } catch (error) {
+    console.error(`Error fetching products of category ${category}`, error);
+    return [];
+  }
+};
+
+export { getusers, gettypeusers, getusersbylocation,getallusers };
diff --git a/src/routes.js b/src/routes.js
index a17b439ad..505816ef7 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -47,17 +47,105 @@ import SignUp from "layouts/authentication/sign-up";
 
 // @mui icons
 import Icon from "@mui/material/Icon";
+import Reclamation from "layouts/reclamation";
+
+import User from "layouts/user";
+
+import Products from "layouts/products";
+import Reviews from "layouts/reviews";
+import Forums from "layouts/Forums";
+import Messages from "layouts/Messages";
+import Request from "layouts/request";
+import Payment from "layouts/payment";import Contract from "layouts/contract";
+import Inventory from "layouts/Inventory";
+
+import ConfiguratorRoot from "examples/Configurator/ConfiguratorRoot";
 
 const routes = [
   {
     type: "collapse",
-    name: "Dashboard",
+    name: "Reclamation",
     key: "dashboard",
-    icon: <Icon fontSize="small">dashboard</Icon>,
-    route: "/dashboard",
-    component: <Dashboard />,
+    icon: <Icon fontSize="small">Reclamation</Icon>,
+    route: "/reclamation",
+    component: <Reclamation />,
+  },
+  {
+    type: "collapse",
+    name: "Payment",
+    key: "payment",
+    icon: <Icon fontSize="small">Reclamation</Icon>,
+    route: "/payment",
+    component: <Payment />,
+  },
+  {
+    type: "collapse",
+    name: "User",
+    key: "user",
+    icon: <Icon fontSize="small">User</Icon>,
+    route: "/user",
+    component: <User />,
+  },
+  {
+    type: "collapse",
+    name: "Request",
+    key: "request",
+    icon: <Icon fontSize="small">Request</Icon>,
+    route: "/request",
+    component: <Request />,
+  },
+  {
+    type: "collapse",
+    name: "Products",
+    key: "dashboard1",
+    icon: <Icon fontSize="small">Products</Icon>,
+    route: "/products",
+    component: <Products />,
+  },
+  {
+    type: "collapse",
+    name: "Reviews",
+    key: "Reviews",
+    icon: <Icon fontSize="small">Reviews</Icon>,
+    route: "/reviews",
+    component: <Reviews />,
   },
   {
+    type: "collapse",
+    name: "Forums",
+    key: "Forums",
+    icon: <Icon fontSize="small">Forums</Icon>,
+    route: "/forums",
+    component: <Forums />,
+  },
+  {
+    type: "collapse",
+    name: "Messages",
+    key: "Messages",
+    icon: <Icon fontSize="small">Messages</Icon>,
+    route: "/messages",
+    component: <Messages />,
+  },
+  {
+    type: "collapse",
+    name: "contracts",
+    key: "dashboard2",
+    icon: <Icon fontSize="small">Contracts</Icon>,
+    route: "/contracts",
+    component: <Contract />,
+  },
+  {
+    type: "collapse",
+    name: "inventories",
+    key: "dashboard3",
+    icon: <Icon fontSize="small">Inventory</Icon>,
+    route: "/inventories",
+    component: <Inventory />,
+  },
+];
+
+export default routes;
+/**{
     type: "collapse",
     name: "Tables",
     key: "tables",
@@ -112,7 +200,4 @@ const routes = [
     icon: <Icon fontSize="small">assignment</Icon>,
     route: "/authentication/sign-up",
     component: <SignUp />,
-  },
-];
-
-export default routes;
+  }, */
diff --git a/src/services/contractService.js b/src/services/contractService.js
new file mode 100644
index 000000000..9e253e65d
--- /dev/null
+++ b/src/services/contractService.js
@@ -0,0 +1,54 @@
+import axios from "axios";
+
+const BASE_URL = "http://localhost:8005/api/contracts";
+
+const cleanseData = (rawData, fields) => {
+    return rawData.map(item => {
+        const cleansedItem = {};
+        fields.forEach(field => {
+            if (item[field]) {
+                cleansedItem[field] = item[field].value;
+            }
+        });
+        return cleansedItem;
+    });
+};
+
+const getContracts = async () => {
+    try {
+        const response = await axios.get(`${BASE_URL}/AllContracts`);
+        const fields = ['contractID', 'type', 'user', 'terms'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error("Error fetching contracts", error);
+        return [];
+    }
+};
+
+const getContractsType = async (type) => {
+    try {
+        const response = await axios.get(`${BASE_URL}/getType`, { params: { type } });
+        const fields = ['contractID', 'type', 'user', 'terms'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error(`Error fetching contract of type ${type}`, error);
+        return [];
+    }
+};
+
+const getContractsByUser = async (user) => {
+    try {
+        const response = await axios.get(`${BASE_URL}/getByUser`, { params: { user } });
+        const fields = ['contractID', 'type', 'user', 'terms'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error(`Error fetching contract of user ${user}`, error);
+        return [];
+    }
+};
+
+
+export { getContracts, getContractsType, getContractsByUser };
\ No newline at end of file
diff --git a/src/services/forumService.js b/src/services/forumService.js
new file mode 100644
index 000000000..d472c1404
--- /dev/null
+++ b/src/services/forumService.js
@@ -0,0 +1,54 @@
+import axios from "axios";
+
+const BASE_URL = "http://localhost:8005/api/forum";
+
+const cleanseData = (rawData, fields) => {
+  return rawData.map((item) => {
+    const cleansedItem = {};
+    fields.forEach((field) => {
+      if (item[field]) {
+        cleansedItem[field] = item[field].value;
+      }
+    });
+    return cleansedItem;
+  });
+};
+
+const getForums = async () => {
+  try {
+    const response = await axios.get(`${BASE_URL}/forums`);
+    const fields = ["title", "forumID",  "user", "questions"];
+    const cleansedData = cleanseData(response.data, fields);
+    return cleansedData;
+  } catch (error) {
+    console.error("Error fetching forums", error);
+    return [];
+  }
+};
+
+const getForumByTitle = async (title) => {
+  try {
+    const response = await axios.get(`${BASE_URL}/getByTitle`, { params: { title } });
+    const fields = ["title", "forumID", "user", "questions"];
+    const cleansedData = cleanseData(response.data, fields);
+    return cleansedData;
+  } catch (error) {
+    console.error(`Error fetching forums of title ${title}`, error);
+    return [];
+  }
+};
+
+
+const getForumsRelations = async () => {
+  try {
+    const response = await axios.get(`${BASE_URL}/getForumsRelations`);
+    const fields = ["title", "forumID", "user", "questions", "userName", "userEmail"];
+    const cleansedData = cleanseData(response.data, fields);
+    return cleansedData;
+  } catch (error) {
+    console.error("Error fetching forum relations", error);
+    return [];
+  }
+};
+
+export { getForums, getForumByTitle, getForumsRelations };
diff --git a/src/services/inventoryService.js b/src/services/inventoryService.js
new file mode 100644
index 000000000..5be6b408c
--- /dev/null
+++ b/src/services/inventoryService.js
@@ -0,0 +1,43 @@
+import axios from "axios";
+
+const BASE_URL = "http://localhost:8005/api/inventories";
+
+const cleanseData = (rawData, fields) => {
+    return rawData.map(item => {
+        const cleansedItem = {};
+        fields.forEach(field => {
+            if (item[field]) {
+                cleansedItem[field] = item[field].value;
+            }
+        });
+        return cleansedItem;
+    });
+};
+
+const getInventories = async () => {
+    try {
+        const response = await axios.get(`${BASE_URL}/Getinventories`);
+        const fields = ['inventoryID', 'type'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error("Error fetching inventories", error);
+        return [];
+    }
+};
+
+const getInventoriesByType = async (type) => {
+    try {
+        const response = await axios.get(`${BASE_URL}/getInventoriesByType`, { params: { type } });
+        const fields = ['inventoryID', 'type'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error(`Error fetching inventory of type ${type}`, error);
+        return [];
+    }
+};
+
+
+
+export { getInventories, getInventoriesByType };
\ No newline at end of file
diff --git a/src/services/messagesService.js b/src/services/messagesService.js
new file mode 100644
index 000000000..b85a7b84e
--- /dev/null
+++ b/src/services/messagesService.js
@@ -0,0 +1,42 @@
+import axios from "axios";
+
+const BASE_URL = "http://localhost:8005/api/message";
+
+const cleanseData = (rawData, fields) => {
+  return rawData.map((item) => {
+    const cleansedItem = {};
+    fields.forEach((field) => {
+      if (item[field]) {
+        cleansedItem[field] = item[field].value;
+      }
+    });
+    return cleansedItem;
+  });
+};
+
+const getMessages = async () => {
+  try {
+    const response = await axios.get(`${BASE_URL}/messages`);
+    const fields = ["messageType", "messageID", "content", "sentBy"];
+    const cleansedData = cleanseData(response.data, fields);
+    return cleansedData;
+  } catch (error) {
+    console.error("Error fetching messages", error);
+    return [];
+  }
+};
+
+
+const getMessagesRelations = async () => {
+  try {
+    const response = await axios.get(`${BASE_URL}/getMessagesRelations`);
+    const fields = ["messageType", "messageID", "content", "sentBy", "userName", "userEmail"];
+    const cleansedData = cleanseData(response.data, fields);
+    return cleansedData;
+  } catch (error) {
+    console.error("Error fetching message relations", error);
+    return [];
+  }
+};
+
+export { getMessages, getMessagesRelations };
diff --git a/src/services/productService.js b/src/services/productService.js
new file mode 100644
index 000000000..bd10d5e48
--- /dev/null
+++ b/src/services/productService.js
@@ -0,0 +1,65 @@
+import axios from "axios";
+
+const BASE_URL = "http://localhost:8005/api/products";
+
+const cleanseData = (rawData, fields) => {
+    return rawData.map(item => {
+        const cleansedItem = {};
+        fields.forEach(field => {
+            if (item[field]) {
+                cleansedItem[field] = item[field].value;
+            }
+        });
+        return cleansedItem;
+    });
+};
+
+const getProducts = async () => {
+    try {
+        const response = await axios.get(`${BASE_URL}/list`);
+        const fields = ['name', 'productID', 'category', 'user', 'description'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error("Error fetching products", error);
+        return [];
+    }
+};
+
+const getTypeProducts = async (type) => {
+    try {
+        const response = await axios.get(`${BASE_URL}/getByType`, { params: { type } });
+        const fields = ['name', 'productID', 'category', 'user', 'description'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error(`Error fetching products of type ${type}`, error);
+        return [];
+    }
+};
+
+const getCategoryProducts = async (category) => {
+    try {
+        const response = await axios.get(`${BASE_URL}/getByCategory`, { params: { category } });
+        const fields = ['name', 'productID', 'category', 'user', 'description'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error(`Error fetching products of category ${category}`, error);
+        return [];
+    }
+};
+const getProductsRelations = async () => {
+    try {
+        const response = await axios.get(`${BASE_URL}/getProductsRelations`);
+        const fields = ['name', 'productID', 'category', 'description', 'userName', 'userEmail'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error("Error fetching product relations", error);
+        return [];
+    }
+};
+
+
+export { getProducts, getTypeProducts, getCategoryProducts, getProductsRelations };
\ No newline at end of file
diff --git a/src/services/reviewsService.js b/src/services/reviewsService.js
new file mode 100644
index 000000000..7773e46fd
--- /dev/null
+++ b/src/services/reviewsService.js
@@ -0,0 +1,65 @@
+import axios from "axios";
+
+const REVIEWS_BASE_URL = "http://localhost:8005/api/reviews";
+
+const cleanseData = (rawData, fields) => {
+    return rawData.map(item => {
+        const cleansedItem = {};
+        fields.forEach(field => {
+            if (item[field]) {
+                cleansedItem[field] = item[field].value;
+            }
+        });
+        return cleansedItem;
+    });
+};
+
+const getReviews = async () => {
+    try {
+        const response = await axios.get(`${REVIEWS_BASE_URL}/list`);
+        const fields = ['reviewID', 'rating', 'feedback', 'user'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error("Error fetching reviews", error);
+        return [];
+    }
+};
+
+const getTypeReviews = async (type) => {
+    try {
+        const response = await axios.get(`${REVIEWS_BASE_URL}/getByType`, { params: { type } });
+        const fields = ['reviewID', 'rating', 'feedback', 'user'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error(`Error fetching reviews of type ${type}`, error);
+        return [];
+    }
+};
+
+const getRatingReviews = async (rating) => {
+    try {
+        const response = await axios.get(`${REVIEWS_BASE_URL}/getByRating`, { params: { rating } });
+        const fields = ['reviewID', 'rating', 'feedback', 'user'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error(`Error fetching reviews with rating ${rating}`, error);
+        return [];
+    }
+};
+
+const getReviewsRelations = async () => {
+    try {
+        const response = await axios.get(`${REVIEWS_BASE_URL}/getReviewsRelations`);
+        const fields = ['reviewID', 'rating', 'feedback', 'userName', 'userEmail'];
+        const cleansedData = cleanseData(response.data, fields);
+        return cleansedData;
+    } catch (error) {
+        console.error("Error fetching review relations", error);
+        return [];
+    }
+};
+
+export { getReviews, getTypeReviews, getRatingReviews, getReviewsRelations };