002 sep 20 vendor view design

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",

Clients/src/presentation/components/IconButton/index.tsx

@@ -0,0 +1,89 @@
+import {
+  Menu,
+  MenuItem,
+  IconButton as MuiIconButton,
+  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();
+  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>
+      <BasicModal isOpen={isOpen} setIsOpen={() => setIsOpen(false)} />
+    </>
+  );
+};
+
+export default IconButton;

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;
+}

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;

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 && (

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;