From 650791914dbb31e23ea0924941ac0d2bcaa479ef Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Fri, 20 Sep 2024 17:16:20 +0330
Subject: [PATCH 1/5] back button, filter, page title, add vender

---
 .../assets/icons/left-arrow-long.svg          |   3 +
 .../containers/Dashboard/index.tsx            |   7 +-
 .../src/presentation/pages/Vendors/index.css  |   0
 .../src/presentation/pages/Vendors/index.tsx  | 103 +++++++++++++++++-
 4 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 Clients/src/presentation/assets/icons/left-arrow-long.svg
 create mode 100644 Clients/src/presentation/pages/Vendors/index.css

diff --git a/Clients/src/presentation/assets/icons/left-arrow-long.svg b/Clients/src/presentation/assets/icons/left-arrow-long.svg
new file mode 100644
index 00000000..db9b827e
--- /dev/null
+++ b/Clients/src/presentation/assets/icons/left-arrow-long.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Clients/src/presentation/containers/Dashboard/index.tsx b/Clients/src/presentation/containers/Dashboard/index.tsx
index 7587167c..ba6b2195 100644
--- a/Clients/src/presentation/containers/Dashboard/index.tsx
+++ b/Clients/src/presentation/containers/Dashboard/index.tsx
@@ -5,7 +5,12 @@ import { Outlet } from "react-router";
 
 const Dashboard = () => {
   return (
-    <Stack className="home-layout" flexDirection="row" gap={14}>
+    <Stack
+      className="home-layout"
+      flexDirection="row"
+      gap={14}
+      sx={{ backgroundColor: "#FCFCFD" }}
+    >
       <Sidebar />
       <Outlet />
     </Stack>
diff --git a/Clients/src/presentation/pages/Vendors/index.css b/Clients/src/presentation/pages/Vendors/index.css
new file mode 100644
index 00000000..e69de29b
diff --git a/Clients/src/presentation/pages/Vendors/index.tsx b/Clients/src/presentation/pages/Vendors/index.tsx
index cb1b6f58..c1b17615 100644
--- a/Clients/src/presentation/pages/Vendors/index.tsx
+++ b/Clients/src/presentation/pages/Vendors/index.tsx
@@ -1,5 +1,106 @@
+import { Button, Stack, Typography, useTheme } from "@mui/material";
+import { ReactComponent as Back } from "../../assets/icons/left-arrow-long.svg";
+import Select from "../../components/Inputs/Select";
+import "./index.css";
+
 const Vendors = () => {
-  return <div>Vendors</div>;
+  const theme = useTheme();
+
+  return (
+    <div className="vendors-page">
+      <Stack gap={theme.spacing(10)}>
+        <Stack
+          justifyContent={"space-between"}
+          display={"flex"}
+          flexDirection={"row"}
+          marginBottom={theme.spacing(10)}
+        >
+          <Button
+            disableRipple
+            focusRipple={false}
+            disableFocusRipple
+            disableTouchRipple
+            variant="contained"
+            color="inherit"
+            sx={{
+              width: 100,
+              height: 30,
+              gap: 6,
+              fontSize: 13,
+              boxShadow: "none",
+              backgroundColor: "#F5F5F5",
+              borderRadius: "4px",
+              border: "1px solid #EBEBEB",
+              alignItems: "center",
+              "&:hover": {
+                backgroundColor: "#F5F5F5",
+                boxShadow: "none",
+              },
+              textTransform: "capitalize",
+            }}
+          >
+            <Back />
+            Back
+          </Button>
+          <Stack
+            display={"flex"}
+            gap={8}
+            flexDirection={"row"}
+            alignItems={"center"}
+          >
+            <Typography fontSize={13} color="#344054">
+              Currently viewing project:
+            </Typography>
+            <Select
+              id="projects"
+              value={"1"}
+              items={[
+                { _id: "1", name: "ChatBot AI" },
+                { _id: "2", name: "Chat-GPT 4" },
+              ]}
+              onChange={() => {}}
+              sx={{ width: 150 }}
+            />
+          </Stack>
+        </Stack>
+        <Stack marginBottom={theme.spacing(10)}>
+          <Typography fontSize={16} color="#1A1919" fontWeight={600}>
+            Vendors list
+          </Typography>
+          <Typography fontSize={13} color="#344054">
+            This table includes a list of external entity that provides
+            AI-related products, services, or components. You can create and
+            manage all vendors here.
+          </Typography>
+        </Stack>
+        <Stack
+          sx={{
+            alignItems: "flex-end",
+          }}
+          marginBottom={theme.spacing(10)}
+        >
+          <Button
+            variant="contained"
+            sx={{
+              width: 150,
+              height: 34,
+              fontSize: 13,
+              textTransform: "capitalize",
+              backgroundColor: "#4C7DE7",
+              boxShadow: "none",
+              borderRadius: "4px",
+              border: "1px solid #175CD3",
+              "&:hover": {
+                boxShadow: "none",
+              },
+            }}
+          >
+            Add new vendor
+          </Button>
+        </Stack>
+      </Stack>
+    </div>
+  );
 };
 
 export default Vendors;

From 66e267639fe00c2c1d32f13ee30883550fb818cd Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Sat, 21 Sep 2024 13:34:44 +0330
Subject: [PATCH 2/5] Vendor page with empty table

---
 .../assets/imgs/table placeholder 1.png       | Bin 0 -> 12138 bytes
 .../Table/WithPlaceholder/index.tsx           |  65 ++++++++++++++++++
 .../presentation/components/Table/index.tsx   |   4 +-
 .../src/presentation/pages/Vendors/index.tsx  |  30 +++++++-
 4 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 Clients/src/presentation/assets/imgs/table placeholder 1.png
 create mode 100644 Clients/src/presentation/components/Table/WithPlaceholder/index.tsx

diff --git a/Clients/src/presentation/assets/imgs/table placeholder 1.png b/Clients/src/presentation/assets/imgs/table placeholder 1.png
new file mode 100644
index 0000000000000000000000000000000000000000..1da65dcd857a7521d0aaf6b0038932db8c207125
GIT binary patch
literal 12138
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
Qg~lT(zt@njma_=|UwpOm>;M1&

literal 0
HcmV?d00001

diff --git a/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx b/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx
new file mode 100644
index 00000000..6f742a47
--- /dev/null
+++ b/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx
@@ -0,0 +1,65 @@
+import {
+  Table,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  useTheme,
+} from "@mui/material";
+
+import Placeholder from "../../../assets/imgs/table placeholder 1.png";
+
+function TableWithPlaceholder() {
+  const theme = useTheme();
+
+  return (
+    <TableContainer style={{ marginBottom: theme.spacing(15) }}>
+      <Table
+        sx={{
+          border: "1px solid #EEEEEE",
+          borderRadius: "4px",
+          "& td, & th": {
+            border: 0,
+          },
+        }}
+      >
+        <TableHead
+          sx={{
+            backgroundColor: "#FAFAFA",
+          }}
+        >
+          <TableRow
+            sx={{
+              textTransform: "uppercase",
+              borderBottom: "1px solid #EEEEEE",
+            }}
+          >
+            {["name", "type", "assignee", "status", "risk", "review date"].map(
+              (cell, index) => (
+                <TableCell style={{ color: "#667085" }} key={index}>
+                  {cell}
+                </TableCell>
+              )
+            )}
+          </TableRow>
+        </TableHead>
+      </Table>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          border: "1px solid #EEEEEE",
+          borderRadius: "4px",
+          borderTop: "none",
+          padding: theme.spacing(5),
+          paddingBottom: theme.spacing(20),
+        }}
+      >
+        <img src={Placeholder} alt="Placeholder" />
+      </div>
+    </TableContainer>
+  );
+}
+
+export default TableWithPlaceholder;
diff --git a/Clients/src/presentation/components/Table/index.tsx b/Clients/src/presentation/components/Table/index.tsx
index 52c7362b..d02088b0 100644
--- a/Clients/src/presentation/components/Table/index.tsx
+++ b/Clients/src/presentation/components/Table/index.tsx
@@ -55,8 +55,8 @@ const BasicTable = ({
   table,
 }: {
   data: TableData;
-  paginated: any;
-  reversed: any;
+  paginated: boolean;
+  reversed: boolean;
   table: any;
 }) => {
   const DEFAULT_ROWS_PER_PAGE = 5;
diff --git a/Clients/src/presentation/pages/Vendors/index.tsx b/Clients/src/presentation/pages/Vendors/index.tsx
index c1b17615..dbfa211d 100644
--- a/Clients/src/presentation/pages/Vendors/index.tsx
+++ b/Clients/src/presentation/pages/Vendors/index.tsx
@@ -2,6 +2,7 @@ import { Button, Stack, Typography, useTheme } from "@mui/material";
 import { ReactComponent as Back } from "../../assets/icons/left-arrow-long.svg";
 import Select from "../../components/Inputs/Select";
 import "./index.css";
+import TableWithPlaceholder from "../../components/Table/WithPlaceholder";
 
 const Vendors = () => {
   const theme = useTheme();
@@ -38,6 +39,7 @@ const Vendors = () => {
               },
               textTransform: "capitalize",
             }}
+            onClick={() => console.log("Back button")}
           >
             <Back />
             Back
@@ -77,7 +79,6 @@ const Vendors = () => {
           sx={{
             alignItems: "flex-end",
           }}
-          marginBottom={theme.spacing(10)}
         >
           <Button
             variant="contained"
@@ -94,10 +95,37 @@ const Vendors = () => {
                 boxShadow: "none",
               },
             }}
+            onClick={() => console.log("Add new vendor button")}
           >
             Add new vendor
           </Button>
         </Stack>
+        <TableWithPlaceholder />
+        <Stack
+          sx={{
+            alignItems: "flex-end",
+          }}
+        >
+          <Button
+            variant="contained"
+            sx={{
+              width: 150,
+              height: 34,
+              fontSize: 13,
+              textTransform: "capitalize",
+              backgroundColor: "#4C7DE7",
+              boxShadow: "none",
+              borderRadius: "4px",
+              border: "1px solid #175CD3",
+              "&:hover": {
+                boxShadow: "none",
+              },
+            }}
+            onClick={() => console.log("Save button")}
+          >
+            Save
+          </Button>
+        </Stack>
       </Stack>
     </div>
   );

From 0041445a7a04d9152d2c5aa46ba2b5626919ad7c Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Sat, 21 Sep 2024 21:12:31 +0330
Subject: [PATCH 3/5] Table data, action button, dropdown, delete vendor modal

---
 .../components/IconButton/index.tsx           | 175 ++++++++++++++++++
 .../Table/WithPlaceholder/index.tsx           |  79 +++++---
 .../src/presentation/mocks/vendors.data.ts    | 108 +++++++++++
 3 files changed, 340 insertions(+), 22 deletions(-)
 create mode 100644 Clients/src/presentation/components/IconButton/index.tsx
 create mode 100644 Clients/src/presentation/mocks/vendors.data.ts

diff --git a/Clients/src/presentation/components/IconButton/index.tsx b/Clients/src/presentation/components/IconButton/index.tsx
new file mode 100644
index 00000000..aba5cbb6
--- /dev/null
+++ b/Clients/src/presentation/components/IconButton/index.tsx
@@ -0,0 +1,175 @@
+import {
+  Button,
+  Menu,
+  MenuItem,
+  Modal,
+  IconButton as MuiIconButton,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { ReactComponent as Setting } from "../../assets/icons/setting.svg";
+import { useState } from "react";
+
+const IconButton = () => {
+  const theme = useTheme();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [actions, setActions] = useState({});
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openMenu = (event: any, id: any, url: any) => {
+    console.log("open menu");
+    event.preventDefault();
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+    setActions({ id: id, url: url });
+    console.log(actions);
+  };
+
+  const openRemove = (e: any) => {
+    closeMenu(e);
+    setIsOpen(true);
+  };
+
+  const closeMenu = (e: any) => {
+    e.stopPropagation();
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <MuiIconButton
+        sx={{
+          "&:focus": {
+            outline: "none",
+          },
+          "& svg path": {
+            stroke: theme.palette.other.icon,
+          },
+        }}
+        onClick={(event) => {
+          event.stopPropagation();
+          openMenu(event, "someId", "someUrl");
+        }}
+      >
+        <Setting />
+      </MuiIconButton>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={(e) => closeMenu(e)}
+        slotProps={{
+          paper: {
+            sx: {
+              width: 190,
+              "& ul": { p: theme.spacing(2.5) },
+              "& li": { m: 0, fontSize: 13 },
+              "& li:hover": { borderRadius: 4 },
+              "& li:last-of-type": {
+                color: theme.palette.error.main,
+              },
+              boxShadow: theme.boxShadow,
+            },
+          },
+        }}
+      >
+        <MenuItem>Edit</MenuItem>
+        <MenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+            openRemove(e);
+          }}
+        >
+          Remove
+        </MenuItem>
+      </Menu>
+      <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+        <Stack
+          gap={theme.spacing(2)}
+          color={theme.palette.text.secondary}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 450,
+            bgcolor: theme.palette.background.main,
+            border: 1,
+            borderColor: theme.palette.border,
+            borderRadius: theme.shape.borderRadius,
+            boxShadow: 24,
+            p: theme.spacing(15),
+            "&:focus": {
+              outline: "none",
+            },
+          }}
+        >
+          <Typography id="modal-delete-vendor" fontSize={16} fontWeight={600}>
+            Delete this vendor?
+          </Typography>
+          <Typography
+            id="delete-monitor-confirmation"
+            fontSize={13}
+            textAlign={"justify"}
+          >
+            When you delete this vendor, all data related to this vendor will be
+            removed. This action is non-recoverable.
+          </Typography>
+          <Stack
+            direction="row"
+            gap={theme.spacing(4)}
+            mt={theme.spacing(12)}
+            justifyContent="flex-end"
+          >
+            <Button
+              disableRipple
+              disableFocusRipple
+              disableTouchRipple
+              variant="text"
+              color="inherit"
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsOpen(false);
+              }}
+              sx={{
+                width: 100,
+                textTransform: "capitalize",
+                fontSize: 13,
+                borderRadius: "4px",
+                "&:hover": {
+                  boxShadow: "none",
+                  backgroundColor: "transparent",
+                },
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              disableRipple
+              disableFocusRipple
+              disableTouchRipple
+              variant="contained"
+              color="error"
+              sx={{
+                width: 140,
+                textTransform: "capitalize",
+                fontSize: 13,
+                backgroundColor: theme.palette.error.main,
+                boxShadow: "none",
+                borderRadius: "4px",
+                "&:hover": {
+                  boxShadow: "none",
+                },
+              }}
+            >
+              Delete vendor
+            </Button>
+          </Stack>
+        </Stack>
+      </Modal>
+    </>
+  );
+};
+
+export default IconButton;
diff --git a/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx b/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx
index 6f742a47..36322ee9 100644
--- a/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx
+++ b/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx
@@ -1,5 +1,6 @@
 import {
   Table,
+  TableBody,
   TableCell,
   TableContainer,
   TableHead,
@@ -8,10 +9,14 @@ import {
 } from "@mui/material";
 
 import Placeholder from "../../../assets/imgs/table placeholder 1.png";
+import listOfVendors from "../../../mocks/vendors.data";
+import IconButton from "../../IconButton";
 
-function TableWithPlaceholder() {
+function TableWithPlaceholder({ data = listOfVendors }) {
   const theme = useTheme();
 
+  const cellStyle = { fontSize: 13, paddingY: theme.spacing(15) };
+
   return (
     <TableContainer style={{ marginBottom: theme.spacing(15) }}>
       <Table
@@ -34,30 +39,60 @@ function TableWithPlaceholder() {
               borderBottom: "1px solid #EEEEEE",
             }}
           >
-            {["name", "type", "assignee", "status", "risk", "review date"].map(
-              (cell, index) => (
-                <TableCell style={{ color: "#667085" }} key={index}>
-                  {cell}
-                </TableCell>
-              )
-            )}
+            {[
+              "name",
+              "type",
+              "assignee",
+              "status",
+              "risk",
+              "review date",
+              "",
+            ].map((cell, index) => (
+              <TableCell style={{ color: "#667085" }} key={index}>
+                {cell}
+              </TableCell>
+            ))}
           </TableRow>
         </TableHead>
+        <TableBody>
+          {data &&
+            data.map((row, index) => (
+              <TableRow
+                key={index}
+                sx={{
+                  textTransform: "capitalize",
+                  borderBottom: "1px solid #EEEEEE",
+                }}
+              >
+                <TableCell sx={cellStyle}>{row.name}</TableCell>
+                <TableCell sx={cellStyle}>{row.type}</TableCell>
+                <TableCell sx={cellStyle}>{row.assignee}</TableCell>
+                <TableCell sx={cellStyle}>{row.status}</TableCell>
+                <TableCell sx={cellStyle}>{row.risk}</TableCell>
+                <TableCell sx={cellStyle}>{row.review_date}</TableCell>
+                <TableCell sx={cellStyle}>
+                  <IconButton />
+                </TableCell>
+              </TableRow>
+            ))}
+        </TableBody>
       </Table>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          border: "1px solid #EEEEEE",
-          borderRadius: "4px",
-          borderTop: "none",
-          padding: theme.spacing(5),
-          paddingBottom: theme.spacing(20),
-        }}
-      >
-        <img src={Placeholder} alt="Placeholder" />
-      </div>
+      {!data && (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            border: "1px solid #EEEEEE",
+            borderRadius: "4px",
+            borderTop: "none",
+            padding: theme.spacing(5),
+            paddingBottom: theme.spacing(20),
+          }}
+        >
+          <img src={Placeholder} alt="Placeholder" />
+        </div>
+      )}
     </TableContainer>
   );
 }
diff --git a/Clients/src/presentation/mocks/vendors.data.ts b/Clients/src/presentation/mocks/vendors.data.ts
new file mode 100644
index 00000000..b3e5be93
--- /dev/null
+++ b/Clients/src/presentation/mocks/vendors.data.ts
@@ -0,0 +1,108 @@
+/**
+ * TYPE: 
+Contractor
+Partner
+Supplier
+Data source
+AI model provider
+ */
+
+/**
+ * STATUS: 
+Active
+Under review
+Not active
+ */
+
+/**
+ * RISKS
+Very high risk
+High risk
+Medium risk
+Low risk
+Very low risk
+ */
+const listOfVendors = [
+  {
+    name: "Apex",
+    type: "Contractor",
+    assignee: "John McAllen",
+    status: "Active",
+    risk: "High risk",
+    review_date: "12 January 2024",
+  },
+  {
+    name: "BuildCorp",
+    type: "Supplier",
+    assignee: "Jane Doe",
+    status: "Not active",
+    risk: "Medium risk",
+    review_date: "23 March 2023",
+  },
+  {
+    name: "ConstructCo",
+    type: "Contractor",
+    assignee: "Alice Johnson",
+    status: "Active",
+    risk: "Low risk",
+    review_date: "15 July 2023",
+  },
+  {
+    name: "DevPartners",
+    type: "Data source",
+    assignee: "Bob Smith",
+    status: "Active",
+    risk: "High risk",
+    review_date: "30 September 2023",
+  },
+  {
+    name: "EcoBuilders",
+    type: "Contractor",
+    assignee: "Carol White",
+    status: "Not active",
+    risk: "Medium risk",
+    review_date: "5 November 2023",
+  },
+  {
+    name: "FutureTech",
+    type: "AI model provider",
+    assignee: "David Brown",
+    status: "Under review",
+    risk: "Very high risk",
+    review_date: "20 December 2023",
+  },
+  {
+    name: "GreenEnergy",
+    type: "Partner",
+    assignee: "Eve Black",
+    status: "Active",
+    risk: "Low risk",
+    review_date: "10 February 2024",
+  },
+  {
+    name: "HomeBuilders",
+    type: "Contractor",
+    assignee: "Frank Green",
+    status: "Not active",
+    risk: "Very low risk",
+    review_date: "8 August 2023",
+  },
+  {
+    name: "InnovateCorp",
+    type: "Supplier",
+    assignee: "Grace Blue",
+    status: "Under review",
+    risk: "Medium risk",
+    review_date: "14 April 2023",
+  },
+  {
+    name: "JunctionWorks",
+    type: "Partner",
+    assignee: "Hank Red",
+    status: "Active",
+    risk: "Very low risk",
+    review_date: "25 May 2023",
+  },
+];
+
+export default listOfVendors;

From 69f81ce803aba36e0eb9ab5feff5fd5e6a369421 Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Tue, 24 Sep 2024 10:32:26 +0330
Subject: [PATCH 4/5] Vendor details

---
 Clients/package-lock.json                     | 372 ++++++++++++++++--
 Clients/package.json                          |   5 +-
 .../src/presentation/assets/icons/close.svg   |   3 +
 .../components/IconButton/index.tsx           |  90 +----
 .../components/Inputs/Datepicker/index.css    |  16 +
 .../components/Inputs/Datepicker/index.tsx    |  81 ++++
 .../components/Inputs/Field/index.tsx         |   3 +
 .../components/Modals/Basic/index.tsx         | 112 ++++++
 .../components/Modals/NewVendor/index.tsx     | 236 +++++++++++
 .../src/presentation/pages/Vendors/index.tsx  |  25 +-
 10 files changed, 816 insertions(+), 127 deletions(-)
 create mode 100644 Clients/src/presentation/assets/icons/close.svg
 create mode 100644 Clients/src/presentation/components/Inputs/Datepicker/index.css
 create mode 100644 Clients/src/presentation/components/Inputs/Datepicker/index.tsx
 create mode 100644 Clients/src/presentation/components/Modals/Basic/index.tsx
 create mode 100644 Clients/src/presentation/components/Modals/NewVendor/index.tsx

diff --git a/Clients/package-lock.json b/Clients/package-lock.json
index 0917f541..d520bc56 100644
--- a/Clients/package-lock.json
+++ b/Clients/package-lock.json
@@ -12,10 +12,13 @@
         "@emotion/styled": "^11.13.0",
         "@fontsource/roboto": "^5.1.0",
         "@mui/icons-material": "^6.1.0",
-        "@mui/material": "^6.1.0",
+        "@mui/lab": "^6.0.0-beta.10",
+        "@mui/material": "^6.1.1",
         "@mui/styled-engine-sc": "^6.1.0",
+        "@mui/x-date-pickers": "^7.18.0",
         "@reduxjs/toolkit": "^2.2.7",
         "@svgr/rollup": "^8.1.0",
+        "dayjs": "^1.11.13",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-redux": "^9.1.2",
@@ -2679,6 +2682,44 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+      "license": "MIT"
+    },
     "node_modules/@fontsource/roboto": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.0.tgz",
@@ -2773,10 +2814,72 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.58",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.58.tgz",
+      "integrity": "sha512-P0E7ZrxOuyYqBvVv9w8k7wm+Xzx/KRu+BGgFcR2htTsGCpJNQJCSUXNUZ50MUmSU9hzqhwbQWNXhV1MBTl6F7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "@floating-ui/react-dom": "^2.1.1",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "6.0.0-rc.0",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/base/node_modules/@mui/utils": {
+      "version": "6.0.0-rc.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.0-rc.0.tgz",
+      "integrity": "sha512-tBp0ILEXDL0bbDDT8PnZOjCqSm5Dfk2N0Z45uzRw+wVl6fVvloC9zw8avl+OdX1Bg3ubs/ttKn8nRNv17bpM5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.0.tgz",
-      "integrity": "sha512-covEnIn/2er5YdtuukDRA52kmARhKrHjOvPsyTFMQApZdrTBI4h8jbEy2mxZqwMwcAFS9coonQXnEZKL1rUNdQ==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.1.tgz",
+      "integrity": "sha512-VdQC1tPIIcZAnf62L2M1eQif0x2vlKg3YK4kGYbtijSH4niEgI21GnstykW1vQIs+Bc6L+Hua2GATYVjilJ22A==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -2809,17 +2912,62 @@
         }
       }
     },
+    "node_modules/@mui/lab": {
+      "version": "6.0.0-beta.10",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-6.0.0-beta.10.tgz",
+      "integrity": "sha512-eqCBz5SZS8Un9To3UcjH01AxkOOgvme/g0ZstFC8Nz1Kg5/EJMA0ByhKS5AvUMzUKrv0FXMdbuPqbBvF3bVrXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.6",
+        "@mui/base": "5.0.0-beta.58",
+        "@mui/system": "^6.1.1",
+        "@mui/types": "^7.2.17",
+        "@mui/utils": "^6.1.1",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": "^6.1.1",
+        "@mui/material-pigment-css": "^6.1.1",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.0.tgz",
-      "integrity": "sha512-4MJ46vmy1xbm8x+ZdRcWm8jEMMowdS8pYlhKQzg/qoKhOcLhImZvf2Jn6z9Dj6gl+lY+C/0MxaHF/avAAGys3Q==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.1.tgz",
+      "integrity": "sha512-b+eULldTqtqTCbN++2BtBWCir/1LwEYw+2mIlOt2GiEUh1EBBw4/wIukGKKNt3xrCZqRA80yLLkV6tF61Lq3cA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.25.6",
-        "@mui/core-downloads-tracker": "^6.1.0",
-        "@mui/system": "^6.1.0",
-        "@mui/types": "^7.2.16",
-        "@mui/utils": "^6.1.0",
+        "@mui/core-downloads-tracker": "^6.1.1",
+        "@mui/system": "^6.1.1",
+        "@mui/types": "^7.2.17",
+        "@mui/utils": "^6.1.1",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
@@ -2838,7 +2986,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.1.0",
+        "@mui/material-pigment-css": "^6.1.1",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -2859,13 +3007,13 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.0.tgz",
-      "integrity": "sha512-+L5qccs4gwsR0r1dgjqhN24QEQRkqIbfOdxILyMbMkuI50x6wNyt9XrV+J3WtjtZTMGJCrUa5VmZBE6OEPGPWA==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.1.tgz",
+      "integrity": "sha512-JlrjIdhyZUtewtdAuUsvi3ZnO0YS49IW4Mfz19ZWTlQ0sDGga6LNPVwHClWr2/zJK2we2BQx9/i8M32rgKuzrg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.25.6",
-        "@mui/utils": "^6.1.0",
+        "@mui/utils": "^6.1.1",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -2886,9 +3034,9 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.0.tgz",
-      "integrity": "sha512-MZ+vtaCkjamrT41+b0Er9OMenjAtP/32+L6fARL9/+BZKuV2QbR3q3TmavT2x0NhDu35IM03s4yKqj32Ziqnyg==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.1.tgz",
+      "integrity": "sha512-HJyIoMpFb11fnHuRtUILOXgq6vj4LhIlE8maG4SwP/W+E5sa7HFexhnB3vOMT7bKys4UKNxhobC8jwWxYilGsA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.25.6",
@@ -2941,16 +3089,16 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.0.tgz",
-      "integrity": "sha512-NumkGDqT6EdXfcoFLYQ+M4XlTW5hH3+aK48xAbRqKPXJfxl36CBt4DLduw/Voa5dcayGus9T6jm1AwU2hoJ5hQ==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.1.tgz",
+      "integrity": "sha512-PaYsCz2tUOcpu3T0okDEsSuP/yCDIj9JZ4Tox1JovRSKIjltHpXPsXZSGr3RiWdtM1MTQMFMCZzu0+CKbyy+Kw==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.25.6",
-        "@mui/private-theming": "^6.1.0",
-        "@mui/styled-engine": "^6.1.0",
-        "@mui/types": "^7.2.16",
-        "@mui/utils": "^6.1.0",
+        "@mui/private-theming": "^6.1.1",
+        "@mui/styled-engine": "^6.1.1",
+        "@mui/types": "^7.2.17",
+        "@mui/utils": "^6.1.1",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -2981,9 +3129,9 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.16",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.16.tgz",
-      "integrity": "sha512-qI8TV3M7ShITEEc8Ih15A2vLzZGLhD+/UPNwck/hcls2gwg7dyRjNGXcQYHKLB5Q7PuTRfrTkAoPa2VV1s67Ag==",
+      "version": "7.2.17",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.17.tgz",
+      "integrity": "sha512-oyumoJgB6jDV8JFzRqjBo2daUuHpzDjoO/e3IrRhhHo/FxJlaVhET6mcNrKHUq2E+R+q3ql0qAtvQ4rfWHhAeQ==",
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -2995,13 +3143,13 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.0.tgz",
-      "integrity": "sha512-oT8ZzMISRUhTVpdbYzY0CgrCBb3t/YEdcaM13tUnuTjZ15pdA6g5lx15ZJUdgYXV6PbJdw7tDQgMEr4uXK5TXQ==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.1.tgz",
+      "integrity": "sha512-HlRrgdJSPbYDXPpoVMWZV8AE7WcFtAk13rWNWAEVWKSanzBBkymjz3km+Th/Srowsh4pf1fTSP1B0L116wQBYw==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.25.6",
-        "@mui/types": "^7.2.16",
+        "@mui/types": "^7.2.17",
         "@types/prop-types": "^15.7.12",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
@@ -3024,6 +3172,152 @@
         }
       }
     },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.18.0.tgz",
+      "integrity": "sha512-12tXIoMj9vpS8fS/bS3kWPCoVrH38vNGCxgplI0vOnUrN9rJuYJz3agLPJe1S0xciTw+9W8ZSe3soaW+owoz1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.6",
+        "@mui/utils": "^5.16.6",
+        "@mui/x-internals": "7.18.0",
+        "@types/react-transition-group": "^4.4.11",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0",
+        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
+        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers/node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-internals": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.18.0.tgz",
+      "integrity": "sha512-lzCHOWIR0cAIY1bGrWSprYerahbnH5C31ql/2OWCEjcngL2NAV1M6oKI2Vp4HheqzJ822c60UyWyapvyjSzY/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.6",
+        "@mui/utils": "^5.16.6"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@mui/x-internals/node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4947,6 +5241,12 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -7263,9 +7563,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.5.tgz",
-      "integrity": "sha512-pXqR0qtb2bTwLkev4SE3r4abCNioP3GkjvIDLlzziPpXtHgiJIjuKl+1GN6ESOT3wMjG3JTeARopj2SwYaHTOA==",
+      "version": "5.4.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz",
+      "integrity": "sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/Clients/package.json b/Clients/package.json
index 07732d5f..3f7d72fc 100644
--- a/Clients/package.json
+++ b/Clients/package.json
@@ -14,10 +14,13 @@
     "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^5.1.0",
     "@mui/icons-material": "^6.1.0",
-    "@mui/material": "^6.1.0",
+    "@mui/lab": "^6.0.0-beta.10",
+    "@mui/material": "^6.1.1",
     "@mui/styled-engine-sc": "^6.1.0",
+    "@mui/x-date-pickers": "^7.18.0",
     "@reduxjs/toolkit": "^2.2.7",
     "@svgr/rollup": "^8.1.0",
+    "dayjs": "^1.11.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
diff --git a/Clients/src/presentation/assets/icons/close.svg b/Clients/src/presentation/assets/icons/close.svg
new file mode 100644
index 00000000..d21dff44
--- /dev/null
+++ b/Clients/src/presentation/assets/icons/close.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 1L1 11M1 1L11 11" stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Clients/src/presentation/components/IconButton/index.tsx b/Clients/src/presentation/components/IconButton/index.tsx
index aba5cbb6..d4bf8839 100644
--- a/Clients/src/presentation/components/IconButton/index.tsx
+++ b/Clients/src/presentation/components/IconButton/index.tsx
@@ -1,15 +1,12 @@
 import {
-  Button,
   Menu,
   MenuItem,
-  Modal,
   IconButton as MuiIconButton,
-  Stack,
-  Typography,
   useTheme,
 } from "@mui/material";
 import { ReactComponent as Setting } from "../../assets/icons/setting.svg";
 import { useState } from "react";
+import BasicModal from "../Modals/Basic";
 
 const IconButton = () => {
   const theme = useTheme();
@@ -84,90 +81,7 @@ const IconButton = () => {
           Remove
         </MenuItem>
       </Menu>
-      <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-        <Stack
-          gap={theme.spacing(2)}
-          color={theme.palette.text.secondary}
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 450,
-            bgcolor: theme.palette.background.main,
-            border: 1,
-            borderColor: theme.palette.border,
-            borderRadius: theme.shape.borderRadius,
-            boxShadow: 24,
-            p: theme.spacing(15),
-            "&:focus": {
-              outline: "none",
-            },
-          }}
-        >
-          <Typography id="modal-delete-vendor" fontSize={16} fontWeight={600}>
-            Delete this vendor?
-          </Typography>
-          <Typography
-            id="delete-monitor-confirmation"
-            fontSize={13}
-            textAlign={"justify"}
-          >
-            When you delete this vendor, all data related to this vendor will be
-            removed. This action is non-recoverable.
-          </Typography>
-          <Stack
-            direction="row"
-            gap={theme.spacing(4)}
-            mt={theme.spacing(12)}
-            justifyContent="flex-end"
-          >
-            <Button
-              disableRipple
-              disableFocusRipple
-              disableTouchRipple
-              variant="text"
-              color="inherit"
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsOpen(false);
-              }}
-              sx={{
-                width: 100,
-                textTransform: "capitalize",
-                fontSize: 13,
-                borderRadius: "4px",
-                "&:hover": {
-                  boxShadow: "none",
-                  backgroundColor: "transparent",
-                },
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              disableRipple
-              disableFocusRipple
-              disableTouchRipple
-              variant="contained"
-              color="error"
-              sx={{
-                width: 140,
-                textTransform: "capitalize",
-                fontSize: 13,
-                backgroundColor: theme.palette.error.main,
-                boxShadow: "none",
-                borderRadius: "4px",
-                "&:hover": {
-                  boxShadow: "none",
-                },
-              }}
-            >
-              Delete vendor
-            </Button>
-          </Stack>
-        </Stack>
-      </Modal>
+      <BasicModal isOpen={isOpen} setIsOpen={() => setIsOpen(false)} />
     </>
   );
 };
diff --git a/Clients/src/presentation/components/Inputs/Datepicker/index.css b/Clients/src/presentation/components/Inputs/Datepicker/index.css
new file mode 100644
index 00000000..d9afc951
--- /dev/null
+++ b/Clients/src/presentation/components/Inputs/Datepicker/index.css
@@ -0,0 +1,16 @@
+.mui-date-picker {
+  height: 34px;
+}
+
+.mui-date-picker .MuiInputBase-root {
+  height: 34px;
+}
+
+.mui-date-picker .MuiInputBase-root input {
+  padding: 5px;
+  font-size: 13px;
+}
+
+.mui-date-picker > .MuiFormLabel-root {
+  font-size: 13px;
+}
diff --git a/Clients/src/presentation/components/Inputs/Datepicker/index.tsx b/Clients/src/presentation/components/Inputs/Datepicker/index.tsx
new file mode 100644
index 00000000..1c41a756
--- /dev/null
+++ b/Clients/src/presentation/components/Inputs/Datepicker/index.tsx
@@ -0,0 +1,81 @@
+import { Stack, SxProps, Theme, Typography, useTheme } from "@mui/material";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
+import "./index.css";
+
+interface DatePickerProps {
+  label?: string;
+  isRequired?: boolean;
+  isOptional?: boolean;
+  optionalLabel?: string;
+  sx?: SxProps<Theme> | undefined;
+}
+
+const DatePicker = ({
+  label,
+  isRequired,
+  isOptional,
+  optionalLabel,
+  sx,
+}: DatePickerProps) => {
+  const theme = useTheme();
+  return (
+    <Stack
+      sx={{
+        "& fieldset": {
+          borderColor: theme.palette.border,
+          borderRadius: theme.shape.borderRadius,
+        },
+        "&:not(:has(.Mui-disabled)):not(:has(.input-error)) .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus)) fieldset":
+          {
+            borderColor: theme.palette.border,
+          },
+        "&:has(.input-error) .MuiOutlinedInput-root fieldset": {
+          borderColor: theme.palette.error.text,
+        },
+      }}
+    >
+      {label && (
+        <Typography
+          component="h3"
+          color={theme.palette.text.secondary}
+          fontSize={13}
+          fontWeight={500}
+          marginBottom={theme.spacing(3)}
+        >
+          {label}
+          {isRequired ? (
+            <Typography
+              component="span"
+              ml={theme.spacing(1)}
+              color={theme.palette.error.text}
+            >
+              *
+            </Typography>
+          ) : (
+            ""
+          )}
+          {isOptional ? (
+            <Typography
+              component="span"
+              fontSize="inherit"
+              fontWeight={400}
+              ml={theme.spacing(2)}
+              sx={{ opacity: 0.6 }}
+            >
+              {optionalLabel || "(optional)"}
+            </Typography>
+          ) : (
+            ""
+          )}
+        </Typography>
+      )}
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <MuiDatePicker className="mui-date-picker" sx={sx} />
+      </LocalizationProvider>
+    </Stack>
+  );
+};
+
+export default DatePicker;
diff --git a/Clients/src/presentation/components/Inputs/Field/index.tsx b/Clients/src/presentation/components/Inputs/Field/index.tsx
index be9114f7..b70a6d2a 100644
--- a/Clients/src/presentation/components/Inputs/Field/index.tsx
+++ b/Clients/src/presentation/components/Inputs/Field/index.tsx
@@ -52,6 +52,7 @@ interface FieldProps {
   onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
   error?: string;
   disabled?: boolean;
+  width?: number | string;
 }
 
 const Field = forwardRef(
@@ -71,6 +72,7 @@ const Field = forwardRef(
       onInput,
       error,
       disabled,
+      width,
     }: FieldProps,
     ref: ForwardedRef<HTMLInputElement>
   ) => {
@@ -94,6 +96,7 @@ const Field = forwardRef(
           "&:has(.input-error) .MuiOutlinedInput-root fieldset": {
             borderColor: theme.palette.error.text,
           },
+          width: width,
         }}
       >
         {label && (
diff --git a/Clients/src/presentation/components/Modals/Basic/index.tsx b/Clients/src/presentation/components/Modals/Basic/index.tsx
new file mode 100644
index 00000000..e2f6561f
--- /dev/null
+++ b/Clients/src/presentation/components/Modals/Basic/index.tsx
@@ -0,0 +1,112 @@
+/**
+ * A modal component that displays a confirmation dialog for deleting a vendor.
+ *
+ * @component
+ * @param {BasicModalProps} props - The properties for the BasicModal component.
+ * @param {boolean} props.isOpen - A boolean indicating whether the modal is open.
+ * @param {function} props.setIsOpen - A function to set the modal's open state.
+ *
+ * @returns {JSX.Element} The rendered modal component.
+ *
+ * @example
+ * <BasicModal isOpen={isOpen} setIsOpen={setIsOpen} />
+ */
+
+import { Button, Modal, Stack, Typography, useTheme } from "@mui/material";
+
+interface BasicModalProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+const BasicModal: React.FC<BasicModalProps> = ({ isOpen, setIsOpen }) => {
+  const theme = useTheme();
+  return (
+    <Modal open={isOpen} onClose={setIsOpen}>
+      <Stack
+        gap={theme.spacing(2)}
+        color={theme.palette.text.secondary}
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: 450,
+          bgcolor: theme.palette.background.main,
+          border: 1,
+          borderColor: theme.palette.border,
+          borderRadius: theme.shape.borderRadius,
+          boxShadow: 24,
+          p: theme.spacing(15),
+          "&:focus": {
+            outline: "none",
+          },
+        }}
+      >
+        <Typography id="modal-delete-vendor" fontSize={16} fontWeight={600}>
+          Delete this vendor?
+        </Typography>
+        <Typography
+          id="delete-monitor-confirmation"
+          fontSize={13}
+          textAlign={"justify"}
+        >
+          When you delete this vendor, all data related to this vendor will be
+          removed. This action is non-recoverable.
+        </Typography>
+        <Stack
+          direction="row"
+          gap={theme.spacing(4)}
+          mt={theme.spacing(12)}
+          justifyContent="flex-end"
+        >
+          <Button
+            disableRipple
+            disableFocusRipple
+            disableTouchRipple
+            variant="text"
+            color="inherit"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsOpen(false);
+            }}
+            sx={{
+              width: 100,
+              textTransform: "capitalize",
+              fontSize: 13,
+              borderRadius: "4px",
+              "&:hover": {
+                boxShadow: "none",
+                backgroundColor: "transparent",
+              },
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            disableRipple
+            disableFocusRipple
+            disableTouchRipple
+            variant="contained"
+            color="error"
+            sx={{
+              width: 140,
+              textTransform: "capitalize",
+              fontSize: 13,
+              backgroundColor: theme.palette.error.main,
+              boxShadow: "none",
+              borderRadius: "4px",
+              "&:hover": {
+                boxShadow: "none",
+              },
+            }}
+          >
+            Delete vendor
+          </Button>
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default BasicModal;
diff --git a/Clients/src/presentation/components/Modals/NewVendor/index.tsx b/Clients/src/presentation/components/Modals/NewVendor/index.tsx
new file mode 100644
index 00000000..6eb9725e
--- /dev/null
+++ b/Clients/src/presentation/components/Modals/NewVendor/index.tsx
@@ -0,0 +1,236 @@
+/**
+ * Component for adding a new vendor through a modal interface.
+ *
+ * @component
+ * @param {AddNewVendorProps} props - The properties for the AddNewVendor component.
+ * @param {boolean} props.isOpen - Determines if the modal is open.
+ * @param {() => void} props.setIsOpen - Function to set the modal open state.
+ * @param {string} props.value - The current value of the selected tab.
+ * @param {(event: React.SyntheticEvent, newValue: string) => void} props.handleChange - Function to handle tab change events.
+ *
+ * @returns {JSX.Element} The rendered AddNewVendor component.
+ */
+
+import TabContext from "@mui/lab/TabContext";
+import TabList from "@mui/lab/TabList";
+import TabPanel from "@mui/lab/TabPanel";
+import {
+  Box,
+  Button,
+  Modal,
+  Stack,
+  Tab,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import Field from "../../Inputs/Field";
+import Select from "../../Inputs/Select";
+import DatePicker from "../../Inputs/Datepicker";
+import { ReactComponent as Close } from "../../../assets/icons/close.svg";
+
+interface AddNewVendorProps {
+  isOpen: boolean;
+  setIsOpen: () => void;
+  value: string;
+  handleChange: (event: React.SyntheticEvent, newValue: string) => void;
+}
+
+const AddNewVendor: React.FC<AddNewVendorProps> = ({
+  isOpen,
+  setIsOpen,
+  value,
+  handleChange,
+}) => {
+  const theme = useTheme();
+  return (
+    <Modal open={isOpen} onClose={setIsOpen} sx={{ overflowY: "scroll" }}>
+      <Stack
+        gap={theme.spacing(2)}
+        color={theme.palette.text.secondary}
+        sx={{
+          backgroundColor: "#D9D9D9",
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: 800,
+          bgcolor: theme.palette.background.main,
+          border: 1,
+          borderColor: theme.palette.border,
+          borderRadius: theme.shape.borderRadius,
+          boxShadow: 24,
+          p: theme.spacing(15),
+          "&:focus": {
+            outline: "none",
+          },
+        }}
+      >
+        <Stack
+          display={"flex"}
+          flexDirection={"row"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+        >
+          <Typography
+            fontSize={16}
+            fontWeight={600}
+            marginBottom={theme.spacing(5)}
+          >
+            Add new vendor
+          </Typography>
+          <Close style={{ cursor: "pointer" }} />
+        </Stack>
+        <TabContext value={value}>
+          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+            <TabList onChange={handleChange}>
+              <Tab
+                sx={{
+                  width: 90,
+                  paddingX: 0,
+                  textTransform: "capitalize",
+                  fontSize: 13,
+                }}
+                label="Vendor details"
+                value="1"
+              />
+              <Tab
+                sx={{
+                  width: 90,
+                  paddingX: 0,
+                  textTransform: "capitalize",
+                  fontSize: 13,
+                }}
+                label="Risks"
+                value="2"
+              />
+            </TabList>
+          </Box>
+          <TabPanel
+            value="1"
+            sx={{ paddingTop: theme.spacing(15), paddingX: 0 }}
+          >
+            <Stack
+              direction={"row"}
+              justifyContent={"space-between"}
+              marginBottom={theme.spacing(10)}
+            >
+              <Field label="Vendor name" width={350} />
+              <Field label="Project the vendor is connected to" width={350} />
+            </Stack>
+            <Stack marginBottom={theme.spacing(10)}>
+              <Field
+                label="What does the vendor provide?"
+                width={"100%"}
+                type="description"
+              />
+            </Stack>
+            <Stack
+              direction={"row"}
+              justifyContent={"space-between"}
+              marginBottom={theme.spacing(10)}
+            >
+              <Field label="Website" width={350} />
+              <Field label="Vendor contact person" width={350} />
+            </Stack>
+            <Stack
+              display={"flex"}
+              justifyContent={"space-between"}
+              marginBottom={theme.spacing(10)}
+              flexDirection={"row"}
+            >
+              <Field label="Review result" width={350} type="description" />
+              <Box justifyContent={"space-between"} display={"grid"}>
+                <Select
+                  items={[
+                    { _id: 1, name: "Select review status" },
+                    { _id: 2, name: "Select review status" },
+                  ]}
+                  label="Review status"
+                  placeholder="Select review status"
+                  isHidden={false}
+                  id=""
+                  onChange={() => {}}
+                  value={"Select review status"}
+                  sx={{
+                    width: 350,
+                  }}
+                />
+                <Select
+                  items={[
+                    { _id: 1, name: "Select reviewer" },
+                    { _id: 2, name: "Select reviewer" },
+                  ]}
+                  label="Reviewer"
+                  placeholder="Select reviewer"
+                  isHidden={false}
+                  id=""
+                  onChange={() => {}}
+                  value={"Select reviewer"}
+                  sx={{
+                    width: 350,
+                  }}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              display={"flex"}
+              justifyContent={"space-between"}
+              marginBottom={theme.spacing(10)}
+              flexDirection={"row"}
+            >
+              <Select
+                items={[
+                  { _id: 1, name: "Select risk status" },
+                  { _id: 2, name: "Select risk status" },
+                ]}
+                label="Risk status"
+                placeholder="Select risk status"
+                isHidden={false}
+                id=""
+                onChange={() => {}}
+                value={"Select risk status"}
+                sx={{
+                  width: 350,
+                }}
+              />
+              <DatePicker
+                label="Review date"
+                sx={{
+                  width: 350,
+                }}
+              />
+            </Stack>
+          </TabPanel>
+          <Stack
+            sx={{
+              alignItems: "flex-end",
+            }}
+          >
+            <Button
+              variant="contained"
+              sx={{
+                width: 70,
+                height: 34,
+                fontSize: 13,
+                textTransform: "capitalize",
+                backgroundColor: "#4C7DE7",
+                boxShadow: "none",
+                borderRadius: "4px",
+                border: "1px solid #175CD3",
+                "&:hover": {
+                  boxShadow: "none",
+                },
+              }}
+              onClick={() => console.log("Save button")}
+            >
+              Save
+            </Button>
+          </Stack>
+          <TabPanel value="2">Item Two</TabPanel>
+        </TabContext>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default AddNewVendor;
diff --git a/Clients/src/presentation/pages/Vendors/index.tsx b/Clients/src/presentation/pages/Vendors/index.tsx
index dbfa211d..9d1f697e 100644
--- a/Clients/src/presentation/pages/Vendors/index.tsx
+++ b/Clients/src/presentation/pages/Vendors/index.tsx
@@ -3,9 +3,22 @@ import { ReactComponent as Back } from "../../assets/icons/left-arrow-long.svg";
 import Select from "../../components/Inputs/Select";
 import "./index.css";
 import TableWithPlaceholder from "../../components/Table/WithPlaceholder";
+import { useState } from "react";
+
+import AddNewVendor from "../../components/Modals/NewVendor";
 
 const Vendors = () => {
   const theme = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const [value, setValue] = useState("1");
+
+  const openAddNewVendor = () => {
+    setIsOpen(true);
+  };
+
+  const handleChange = (_: React.SyntheticEvent, newValue: string) => {
+    setValue(newValue);
+  };
 
   return (
     <div className="vendors-page">
@@ -14,7 +27,7 @@ const Vendors = () => {
           justifyContent={"space-between"}
           display={"flex"}
           flexDirection={"row"}
-          marginBottom={theme.spacing(10)}
+          marginBottom={theme.spacing(6)}
         >
           <Button
             disableRipple
@@ -95,7 +108,9 @@ const Vendors = () => {
                 boxShadow: "none",
               },
             }}
-            onClick={() => console.log("Add new vendor button")}
+            onClick={() => {
+              openAddNewVendor();
+            }}
           >
             Add new vendor
           </Button>
@@ -127,6 +142,12 @@ const Vendors = () => {
           </Button>
         </Stack>
       </Stack>
+      <AddNewVendor
+        isOpen={isOpen}
+        handleChange={handleChange}
+        setIsOpen={() => setIsOpen(false)}
+        value={value}
+      />
     </div>
   );
 };

From ab0fca1e047f16cba502dad8d732228ebae8d1d0 Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Tue, 24 Sep 2024 11:54:45 +0330
Subject: [PATCH 5/5] Vendor view design

---
 .../components/Modals/NewVendor/index.tsx     | 360 +++++++++++++-----
 .../Table/WithPlaceholder/index.tsx           |  22 ++
 .../src/presentation/mocks/vendors.data.ts    |  48 ---
 3 files changed, 280 insertions(+), 150 deletions(-)

diff --git a/Clients/src/presentation/components/Modals/NewVendor/index.tsx b/Clients/src/presentation/components/Modals/NewVendor/index.tsx
index 6eb9725e..cfaca25a 100644
--- a/Clients/src/presentation/components/Modals/NewVendor/index.tsx
+++ b/Clients/src/presentation/components/Modals/NewVendor/index.tsx
@@ -42,8 +42,259 @@ const AddNewVendor: React.FC<AddNewVendorProps> = ({
   handleChange,
 }) => {
   const theme = useTheme();
+
+  const vendorDetailsPanel = (
+    <TabPanel value="1" sx={{ paddingTop: theme.spacing(15), paddingX: 0 }}>
+      <Stack
+        direction={"row"}
+        justifyContent={"space-between"}
+        marginBottom={theme.spacing(10)}
+      >
+        <Field label="Vendor name" width={350} />
+        <Field label="Project the vendor is connected to" width={350} />
+      </Stack>
+      <Stack marginBottom={theme.spacing(10)}>
+        <Field
+          label="What does the vendor provide?"
+          width={"100%"}
+          type="description"
+        />
+      </Stack>
+      <Stack
+        direction={"row"}
+        justifyContent={"space-between"}
+        marginBottom={theme.spacing(10)}
+      >
+        <Field label="Website" width={350} />
+        <Field label="Vendor contact person" width={350} />
+      </Stack>
+      <Stack
+        display={"flex"}
+        justifyContent={"space-between"}
+        marginBottom={theme.spacing(10)}
+        flexDirection={"row"}
+      >
+        <Field label="Review result" width={350} type="description" />
+        <Box
+          justifyContent={"space-between"}
+          display={"grid"}
+          gap={theme.spacing(10)}
+        >
+          <Select
+            items={[
+              { _id: 1, name: "Select review status" },
+              { _id: 2, name: "Select review status" },
+            ]}
+            label="Review status"
+            placeholder="Select review status"
+            isHidden={false}
+            id=""
+            onChange={() => {}}
+            value={"Select review status"}
+            sx={{
+              width: 350,
+            }}
+          />
+          <Select
+            items={[
+              { _id: 1, name: "Select reviewer" },
+              { _id: 2, name: "Select reviewer" },
+            ]}
+            label="Reviewer"
+            placeholder="Select reviewer"
+            isHidden={false}
+            id=""
+            onChange={() => {}}
+            value={"Select reviewer"}
+            sx={{
+              width: 350,
+            }}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        display={"flex"}
+        justifyContent={"space-between"}
+        marginBottom={theme.spacing(10)}
+        flexDirection={"row"}
+      >
+        <Select
+          items={[
+            { _id: 1, name: "Select risk status" },
+            { _id: 2, name: "Select risk status" },
+          ]}
+          label="Risk status"
+          placeholder="Select risk status"
+          isHidden={false}
+          id=""
+          onChange={() => {}}
+          value={"Select risk status"}
+          sx={{
+            width: 350,
+          }}
+        />
+        <DatePicker
+          label="Review date"
+          sx={{
+            width: 350,
+          }}
+        />
+      </Stack>
+    </TabPanel>
+  );
+
+  const risksPanel = (
+    <TabPanel value="2" sx={{ paddingTop: theme.spacing(15), paddingX: 0 }}>
+      <Stack
+        direction={"row"}
+        justifyContent={"space-between"}
+        marginBottom={theme.spacing(10)}
+      >
+        <Field label="Risk description" width={350} />
+        <Field label="Impact description" width={350} />
+      </Stack>
+      <Stack
+        direction={"row"}
+        justifyContent={"space-between"}
+        marginBottom={theme.spacing(10)}
+      >
+        <Select
+          items={[
+            { _id: 1, name: "Select project" },
+            { _id: 2, name: "Select project" },
+          ]}
+          label="Project name"
+          placeholder="Select project"
+          isHidden={false}
+          id=""
+          onChange={() => {}}
+          value={"Select project"}
+          sx={{
+            width: 350,
+          }}
+        />
+        <Select
+          items={[
+            { _id: 1, name: "Select probability" },
+            { _id: 2, name: "Select probability" },
+          ]}
+          label="Probability"
+          placeholder="Select probability"
+          isHidden={false}
+          id=""
+          onChange={() => {}}
+          value={"Select probability"}
+          sx={{
+            width: 350,
+          }}
+        />
+      </Stack>
+      <Stack
+        display={"flex"}
+        justifyContent={"space-between"}
+        marginBottom={theme.spacing(10)}
+        flexDirection={"row"}
+      >
+        <Box justifyContent={"space-between"} display={"grid"}>
+          <Select
+            items={[
+              { _id: 1, name: "Select impact" },
+              { _id: 2, name: "Select impact" },
+            ]}
+            label="Impact"
+            placeholder="Select impact"
+            isHidden={false}
+            id=""
+            onChange={() => {}}
+            value={"Select impact"}
+            sx={{
+              width: 350,
+            }}
+          />
+          <Select
+            items={[
+              { _id: 1, name: "Select owner" },
+              { _id: 2, name: "Select owner" },
+            ]}
+            label="Action owner"
+            placeholder="Select owner"
+            isHidden={false}
+            id=""
+            onChange={() => {}}
+            value={"Select owner"}
+            sx={{
+              width: 350,
+            }}
+          />
+        </Box>
+        <Field label="Review result" width={350} type="description" />
+      </Stack>
+
+      <Stack
+        direction={"row"}
+        justifyContent={"space-between"}
+        marginBottom={theme.spacing(10)}
+      >
+        <Select
+          items={[
+            { _id: 1, name: "Select risk severity" },
+            { _id: 2, name: "Select risk severity" },
+          ]}
+          label="Risk severity"
+          placeholder="Select risk severity"
+          isHidden={false}
+          id=""
+          onChange={() => {}}
+          value={"Select risk severity"}
+          sx={{
+            width: 350,
+          }}
+        />
+        <Select
+          items={[
+            { _id: 1, name: "Select risk severity" },
+            { _id: 2, name: "Select risk severity" },
+          ]}
+          label="Likelihood"
+          placeholder="Select risk severity"
+          isHidden={false}
+          id=""
+          onChange={() => {}}
+          value={"Select risk severity"}
+          sx={{
+            width: 350,
+          }}
+        />
+      </Stack>
+      <Stack
+        direction={"row"}
+        justifyContent={"flex-start"}
+        marginBottom={theme.spacing(10)}
+      >
+        <Select
+          items={[
+            { _id: 1, name: "Select risk level" },
+            { _id: 2, name: "Select risk level" },
+          ]}
+          label="Risk level"
+          placeholder="Select risk level"
+          isHidden={false}
+          id=""
+          onChange={() => {}}
+          value={"Select risk level"}
+          sx={{
+            width: 350,
+          }}
+        />
+      </Stack>
+    </TabPanel>
+  );
   return (
-    <Modal open={isOpen} onClose={setIsOpen} sx={{ overflowY: "scroll" }}>
+    <Modal
+      open={isOpen}
+      onClose={() => setIsOpen()}
+      sx={{ overflowY: "scroll" }}
+    >
       <Stack
         gap={theme.spacing(2)}
         color={theme.palette.text.secondary}
@@ -78,16 +329,16 @@ const AddNewVendor: React.FC<AddNewVendorProps> = ({
           >
             Add new vendor
           </Typography>
-          <Close style={{ cursor: "pointer" }} />
+          <Close style={{ cursor: "pointer" }} onClick={setIsOpen} />
         </Stack>
         <TabContext value={value}>
           <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
             <TabList onChange={handleChange}>
               <Tab
                 sx={{
-                  width: 90,
+                  width: 120,
                   paddingX: 0,
-                  textTransform: "capitalize",
+                  textTransform: "inherit",
                   fontSize: 13,
                 }}
                 label="Vendor details"
@@ -95,7 +346,7 @@ const AddNewVendor: React.FC<AddNewVendorProps> = ({
               />
               <Tab
                 sx={{
-                  width: 90,
+                  width: 60,
                   paddingX: 0,
                   textTransform: "capitalize",
                   fontSize: 13,
@@ -105,102 +356,8 @@ const AddNewVendor: React.FC<AddNewVendorProps> = ({
               />
             </TabList>
           </Box>
-          <TabPanel
-            value="1"
-            sx={{ paddingTop: theme.spacing(15), paddingX: 0 }}
-          >
-            <Stack
-              direction={"row"}
-              justifyContent={"space-between"}
-              marginBottom={theme.spacing(10)}
-            >
-              <Field label="Vendor name" width={350} />
-              <Field label="Project the vendor is connected to" width={350} />
-            </Stack>
-            <Stack marginBottom={theme.spacing(10)}>
-              <Field
-                label="What does the vendor provide?"
-                width={"100%"}
-                type="description"
-              />
-            </Stack>
-            <Stack
-              direction={"row"}
-              justifyContent={"space-between"}
-              marginBottom={theme.spacing(10)}
-            >
-              <Field label="Website" width={350} />
-              <Field label="Vendor contact person" width={350} />
-            </Stack>
-            <Stack
-              display={"flex"}
-              justifyContent={"space-between"}
-              marginBottom={theme.spacing(10)}
-              flexDirection={"row"}
-            >
-              <Field label="Review result" width={350} type="description" />
-              <Box justifyContent={"space-between"} display={"grid"}>
-                <Select
-                  items={[
-                    { _id: 1, name: "Select review status" },
-                    { _id: 2, name: "Select review status" },
-                  ]}
-                  label="Review status"
-                  placeholder="Select review status"
-                  isHidden={false}
-                  id=""
-                  onChange={() => {}}
-                  value={"Select review status"}
-                  sx={{
-                    width: 350,
-                  }}
-                />
-                <Select
-                  items={[
-                    { _id: 1, name: "Select reviewer" },
-                    { _id: 2, name: "Select reviewer" },
-                  ]}
-                  label="Reviewer"
-                  placeholder="Select reviewer"
-                  isHidden={false}
-                  id=""
-                  onChange={() => {}}
-                  value={"Select reviewer"}
-                  sx={{
-                    width: 350,
-                  }}
-                />
-              </Box>
-            </Stack>
-            <Stack
-              display={"flex"}
-              justifyContent={"space-between"}
-              marginBottom={theme.spacing(10)}
-              flexDirection={"row"}
-            >
-              <Select
-                items={[
-                  { _id: 1, name: "Select risk status" },
-                  { _id: 2, name: "Select risk status" },
-                ]}
-                label="Risk status"
-                placeholder="Select risk status"
-                isHidden={false}
-                id=""
-                onChange={() => {}}
-                value={"Select risk status"}
-                sx={{
-                  width: 350,
-                }}
-              />
-              <DatePicker
-                label="Review date"
-                sx={{
-                  width: 350,
-                }}
-              />
-            </Stack>
-          </TabPanel>
+          {vendorDetailsPanel}
+          {risksPanel}
           <Stack
             sx={{
               alignItems: "flex-end",
@@ -226,7 +383,6 @@ const AddNewVendor: React.FC<AddNewVendorProps> = ({
               Save
             </Button>
           </Stack>
-          <TabPanel value="2">Item Two</TabPanel>
         </TabContext>
       </Stack>
     </Modal>
diff --git a/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx b/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx
index 36322ee9..75a12511 100644
--- a/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx
+++ b/Clients/src/presentation/components/Table/WithPlaceholder/index.tsx
@@ -11,10 +11,22 @@ import {
 import Placeholder from "../../../assets/imgs/table placeholder 1.png";
 import listOfVendors from "../../../mocks/vendors.data";
 import IconButton from "../../IconButton";
+import AddNewVendor from "../../Modals/NewVendor";
+import { useState } from "react";
 
 function TableWithPlaceholder({ data = listOfVendors }) {
   const theme = useTheme();
 
+  const [isOpen, setIsOpen] = useState(false);
+  const [value, setValue] = useState("1");
+
+  const handleChange = (_: React.SyntheticEvent, newValue: string) => {
+    setValue(newValue);
+  };
+  const openAddNewVendor = () => {
+    setIsOpen(true);
+  };
+
   const cellStyle = { fontSize: 13, paddingY: theme.spacing(15) };
 
   return (
@@ -62,6 +74,10 @@ function TableWithPlaceholder({ data = listOfVendors }) {
                 sx={{
                   textTransform: "capitalize",
                   borderBottom: "1px solid #EEEEEE",
+                  cursor: "pointer",
+                }}
+                onClick={() => {
+                  openAddNewVendor();
                 }}
               >
                 <TableCell sx={cellStyle}>{row.name}</TableCell>
@@ -93,6 +109,12 @@ function TableWithPlaceholder({ data = listOfVendors }) {
           <img src={Placeholder} alt="Placeholder" />
         </div>
       )}
+      <AddNewVendor
+        isOpen={isOpen}
+        handleChange={handleChange}
+        setIsOpen={() => setIsOpen(false)}
+        value={value}
+      />
     </TableContainer>
   );
 }
diff --git a/Clients/src/presentation/mocks/vendors.data.ts b/Clients/src/presentation/mocks/vendors.data.ts
index b3e5be93..f53060e1 100644
--- a/Clients/src/presentation/mocks/vendors.data.ts
+++ b/Clients/src/presentation/mocks/vendors.data.ts
@@ -55,54 +55,6 @@ const listOfVendors = [
     risk: "High risk",
     review_date: "30 September 2023",
   },
-  {
-    name: "EcoBuilders",
-    type: "Contractor",
-    assignee: "Carol White",
-    status: "Not active",
-    risk: "Medium risk",
-    review_date: "5 November 2023",
-  },
-  {
-    name: "FutureTech",
-    type: "AI model provider",
-    assignee: "David Brown",
-    status: "Under review",
-    risk: "Very high risk",
-    review_date: "20 December 2023",
-  },
-  {
-    name: "GreenEnergy",
-    type: "Partner",
-    assignee: "Eve Black",
-    status: "Active",
-    risk: "Low risk",
-    review_date: "10 February 2024",
-  },
-  {
-    name: "HomeBuilders",
-    type: "Contractor",
-    assignee: "Frank Green",
-    status: "Not active",
-    risk: "Very low risk",
-    review_date: "8 August 2023",
-  },
-  {
-    name: "InnovateCorp",
-    type: "Supplier",
-    assignee: "Grace Blue",
-    status: "Under review",
-    risk: "Medium risk",
-    review_date: "14 April 2023",
-  },
-  {
-    name: "JunctionWorks",
-    type: "Partner",
-    assignee: "Hank Red",
-    status: "Active",
-    risk: "Very low risk",
-    review_date: "25 May 2023",
-  },
 ];
 
 export default listOfVendors;