Add date picker and dependencies

Client/package-lock.json

@@ -14,6 +14,8 @@
         "@mui/icons-material": "^5.15.16",
         "@mui/material": "^5.15.16",
         "@mui/x-data-grid": "7.3.2",
+        "@mui/x-date-pickers": "7.3.2",
+        "dayjs": "1.11.11",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.23.0",
@@ -1364,6 +1366,71 @@
         "react-dom": "^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.3.2.tgz",
+      "integrity": "sha512-i7JaDs1eXSZWyJihfszUHVV0t/C2HvtdMv5tHwv3E3enMx5Hup1vkJ64vZAH2fgGrTHQH8mjxvVsmI6jhDXIUg==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.0",
+        "@mui/base": "^5.0.0-beta.40",
+        "@mui/system": "^5.15.14",
+        "@mui/utils": "^5.15.14",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "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",
+        "date-fns": "^2.25.0 || ^3.2.0",
+        "date-fns-jalali": "^2.13.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/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2205,6 +2272,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
+      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

Client/package.json

@@ -16,6 +16,8 @@
     "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.15.16",
     "@mui/x-data-grid": "7.3.2",
+    "@mui/x-date-pickers": "7.3.2",
+    "dayjs": "1.11.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.23.0",

Client/src/Pages/Demo/Demo.jsx

@@ -19,6 +19,10 @@ import Avatar from "../../Components/Avatar/Avatar";
 import avatarImage from "../../assets/Images/avatar_placeholder.png";
 import { DataGrid } from "@mui/x-data-grid";
 
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+
 const cols = [
   {
     field: "name",
@@ -75,6 +79,7 @@ const rows = ((count) => {
 const Demo = () => {
   const [radio, setRadio] = React.useState(1);
   const [tab, setTab] = React.useState("departments");
+  const [date, setDate] = React.useState("Pick a date!");
 
   const handleRadio = (event) => {
     setRadio(event.target.value);
@@ -84,6 +89,10 @@ const Demo = () => {
     setTab(newValue);
   };
 
+  const handleDate = (newValue) => {
+    setDate(newValue.toString());
+  };
+
   const change = (event, type) => {
     alert(event.target.checked ? `${type} checked` : `${type} unchecked`);
   };
@@ -184,12 +193,23 @@ const Demo = () => {
         />
       </div>
       <h4>Tabs</h4>
-      <Tabs value={tab} onChange={handleTab}>
-        <Tab label="My details" value="details" />
-        <Tab label="My team" value="team" />
-        <Tab label="Departments" value="departments" />
-        <Tab label="Approvals" value="approvals" />
-      </Tabs>
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        {" "}
+        <Tabs value={tab} onChange={handleTab}>
+          <Tab label="My details" value="details" />
+          <Tab label="My team" value="team" />
+          <Tab label="Departments" value="departments" />
+          <Tab label="Approvals" value="approvals" />
+        </Tabs>
+      </div>
+
+      <h4>Date Picker</h4>
+      <div>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <DatePicker onChange={handleDate} />
+        </LocalizationProvider>
+        <h4>{date}</h4>
+      </div>
     </div>
   );
 };