Merge branch 'master' of https://git.sentientgeeks.us/Amit/mui-demo-project

package-lock.json

@@ -12,7 +12,11 @@
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^5.16.6",
+        "@mui/material": "^5.16.6",
         "@mui/material-nextjs": "^5.16.6",
+        "@tanstack/react-table": "^8.20.1",
+        "axios": "^1.7.3",
+        "moment": "^2.30.1",
         "next": "14.2.5",
         "react": "^18",
         "react-dom": "^18",
@@ -550,7 +554,6 @@
       "version": "5.16.6",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.6.tgz",
       "integrity": "sha512-kytg6LheUG42V8H/o/Ptz3olSO5kUXW9zF0ox18VnblX6bO2yif1FPItgc3ey1t5ansb1+gbe7SatntqusQupg==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
@@ -585,7 +588,6 @@
       "version": "5.16.6",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.6.tgz",
       "integrity": "sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/core-downloads-tracker": "^5.16.6",
@@ -663,14 +665,12 @@
     "node_modules/@mui/material/node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "peer": true
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
     "node_modules/@mui/private-theming": {
       "version": "5.16.6",
       "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz",
       "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/utils": "^5.16.6",
@@ -697,7 +697,6 @@
       "version": "5.16.6",
       "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz",
       "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@emotion/cache": "^11.11.0",
@@ -729,7 +728,6 @@
       "version": "5.16.6",
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.6.tgz",
       "integrity": "sha512-5xgyJjBIMPw8HIaZpfbGAaFYPwImQn7Nyh+wwKWhvkoIeDosQ1ZMVrbTclefi7G8hNmqhip04duYwYpbBFnBgw==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/private-theming": "^5.16.6",
@@ -769,7 +767,6 @@
       "version": "7.2.15",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.15.tgz",
       "integrity": "sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0"
       },
@@ -783,7 +780,6 @@
       "version": "5.16.6",
       "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
       "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/types": "^7.2.15",
@@ -812,8 +808,7 @@
     "node_modules/@mui/utils/node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "peer": true
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
     "node_modules/@next/env": {
       "version": "14.2.5",
@@ -1013,7 +1008,6 @@
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -1039,6 +1033,37 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.20.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.1.tgz",
+      "integrity": "sha512-PJK+07qbengObe5l7c8vCdtefXm8cyR4i078acWrHbdm8JKw1ES7YpmOtVt9ALUVEEFAHscdVpGRhRgikgFMbQ==",
+      "dependencies": {
+        "@tanstack/table-core": "8.20.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.20.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.1.tgz",
+      "integrity": "sha512-5Ly5TIRHnWH7vSDell9B/OVyV380qqIJVg7H7R7jU4fPEmOD4smqAX7VRflpYI09srWR8aj5OLD2Ccs1pI5mTg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1086,7 +1111,6 @@
       "version": "4.4.10",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
       "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
-      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1477,6 +1501,11 @@
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1501,6 +1530,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
+      "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -1678,7 +1717,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -1701,6 +1739,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1891,6 +1940,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -1919,7 +1976,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
       "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.8.7",
         "csstype": "^3.0.2"
@@ -2678,6 +2734,25 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2703,6 +2778,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3706,6 +3794,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3736,6 +3843,15 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -4158,6 +4274,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4219,7 +4340,6 @@
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
       "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.5.5",
         "dom-helpers": "^5.0.1",

package.json

@@ -14,7 +14,11 @@
     "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.9.0",
     "@mui/icons-material": "^5.16.6",
+    "@mui/material": "^5.16.6",
     "@mui/material-nextjs": "^5.16.6",
+    "@tanstack/react-table": "^8.20.1",
+    "axios": "^1.7.3",
+    "moment": "^2.30.1",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",

src/app/(dashboard)/home/page.tsx

@@ -1,7 +1,12 @@
+import TanStackTable from "@/components/table/TanStackTable";
 import React from "react";
 
 const HomePage = () => {
-  return <div>Home page 1</div>;
+  return (
+    <div>
+      <TanStackTable />
+    </div>
+  );
 };
 
 export default HomePage;

src/app/(dashboard)/review/page.tsx

@@ -2,45 +2,40 @@
 import React, { useState } from "react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
 import Modal from "@mui/material/Modal";
-
+import Stack from "@mui/material/Stack";
+import ReviewModalContent from "../../../components/reviewModal/components/reviewModalContent/ReviewModalContent";
+import { Typography } from "@mui/material";
+import TanStackTable from "@/components/table/TanStackTable";
 const style = {
   position: "absolute" as "absolute",
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)",
-  width: 400,
+  width: "90%",
+  maxWidth: 400,
   bgcolor: "background.paper",
   border: "none",
   boxShadow: 24,
-  p: 4,
+  borderRadius: 4,
+  paddingInline: 2,
+  paddingBlock: 4,
+};
+const labels: { [index: string]: string } = {
+  0.5: "Useless",
+  1: "Useless+",
+  1.5: "Poor",
+  2: "Poor+",
+  2.5: "Ok",
+  3: "Ok+",
+  3.5: "Good",
+  4: "Good+",
+  4.5: "Excellent",
+  5: "Excellent+",
 };
 
 const HomePage = () => {
-  const [open, setOpen] = useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-  return (
-    <Box>
-      <Button onClick={handleOpen}>Open modal</Button>
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={style}>
-          <Typography id="modal-modal-title" variant="h6" component="h2">
-            Text in a modal
-          </Typography>
-          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          </Typography>
-        </Box>
-      </Modal>
-    </Box>
-  );
+  return <Box>{/* <Button onClick={handleOpen}>Open modal</Button> */}</Box>;
 };
 
 export default HomePage;

src/components/reviewModal/ReviewModal.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Stack from "@mui/material/Stack";
+import ReviewModalContent from "./components/reviewModalContent/ReviewModalContent";
+import { Typography } from "@mui/material";
+
+const style = {
+  position: "absolute" as "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90%",
+  maxWidth: 400,
+  bgcolor: "background.paper",
+  border: "none",
+  boxShadow: 24,
+  borderRadius: 4,
+  paddingInline: 2,
+  paddingBlock: 4,
+};
+
+const labels: { [index: string]: string } = {
+  0.5: "Useless",
+  1: "Useless+",
+  1.5: "Poor",
+  2: "Poor+",
+  2.5: "Ok",
+  3: "Ok+",
+  3.5: "Good",
+  4: "Good+",
+  4.5: "Excellent",
+  5: "Excellent+",
+};
+
+interface ReviewModalProps {
+  open: boolean;
+  handleClose: () => void;
+  reviewModalData: ReviewModalData[];
+}
+
+export interface ReviewModalData {
+  reviewerName: string;
+  reviewerEmail: string;
+  date: string;
+  comment: string;
+  rating: number;
+}
+
+const ReviewModal = ({
+  open,
+  handleClose,
+  reviewModalData,
+}: ReviewModalProps) => {
+  console.log("reviewModalData", reviewModalData);
+
+  return (
+    <Box>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography
+            variant="h5"
+            sx={{ lineHeight: 1, marginBlockEnd: "20px" }}
+          >
+            Reviews
+          </Typography>
+          <Stack
+            spacing={2}
+            direction={"column"}
+            sx={{ maxHeight: "350px", overflow: "auto" }}
+          >
+            {reviewModalData.map((review: ReviewModalData, index: number) => (
+              <ReviewModalContent key={index} data={review} />
+            ))}
+          </Stack>
+        </Box>
+      </Modal>
+    </Box>
+  );
+};
+
+export default ReviewModal;

src/components/reviewModal/components/reviewModalContent/ReviewModalContent.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Rating from "@mui/material/Rating";
+import StarIcon from "@mui/icons-material/Star";
+import moment from "moment";
+import { ReviewModalData } from "../../ReviewModal";
+
+interface ReviewModalContentProps {
+  data: ReviewModalData;
+}
+
+const ReviewModalContent = ({ data }: ReviewModalContentProps) => {
+  // const [value, setValue] = React.useState<number | null>(data?.rating);
+  // const [hover, setHover] = React.useState(-1);
+  return (
+    <>
+      <Box
+        border={"1px solid var(--primary_light)"}
+        borderRadius={2}
+        padding={2}
+      >
+        <Box display={"flex"} alignItems={"flex-start"} gap={2}>
+          <Box
+            flex={1}
+            textAlign={"start"}
+            display={"flex"}
+            flexDirection={"row"}
+            alignItems={"flex-start"}
+            justifyContent={"space-between"}
+            flexWrap={"wrap"}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "flex-start",
+                flexDirection: "column",
+              }}
+            >
+              <Typography variant="body1" sx={{ m: 0, lineHeight: 1 }}>
+                {data?.reviewerName}
+              </Typography>
+              <Typography variant="caption" sx={{ m: 0 }}>
+                {data?.reviewerEmail}
+              </Typography>
+            </Box>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column",
+              }}
+            >
+              <Rating
+                name="hover-feedback"
+                value={data?.rating}
+                size="small"
+                precision={0.5}
+                readOnly
+                // onChange={(event, newValue) => {
+                //   setValue(newValue);
+                // }}
+                // onChangeActive={(event, newHover) => {
+                //   setHover(newHover);
+                // }}
+                emptyIcon={
+                  <StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />
+                }
+              />
+              {data?.date && (
+                <Typography
+                  variant="caption"
+                  display="block"
+                  gutterBottom
+                  sx={{ textAlign: "center", m: 0 }}
+                >
+                  {moment(data?.date).format("MMMM D, hh:mmA")}
+                </Typography>
+              )}
+            </Box>
+          </Box>
+        </Box>
+
+        <Typography variant="body2" id="modal-modal-description" sx={{ mt: 2 }}>
+          {data?.comment}
+        </Typography>
+      </Box>
+    </>
+  );
+};
+
+export default ReviewModalContent;

src/components/table/TanStackTable.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+} from "@tanstack/react-table";
+import styles from "./TanStackTable.module.scss";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import ReviewModal from "../reviewModal/ReviewModal";
+
+const TanStackTable = () => {
+  const [tableData, setTableData] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [reviewModalData, setReviewModalData] = useState([]);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  const columns: any = [
+    {
+      header: "ID",
+      accessorKey: "id",
+    },
+    {
+      header: "Title",
+      accessorKey: "title",
+    },
+    {
+      header: "Description",
+      accessorKey: "description",
+    },
+    {
+      header: "Category",
+      accessorKey: "category",
+    },
+    {
+      header: "Price",
+      accessorKey: "price",
+    },
+    {
+      header: "Discount Percentage",
+      accessorKey: "discountPercentage",
+    },
+    {
+      header: "Rating",
+      accessorKey: "rating",
+    },
+    {
+      header: "Stock",
+      accessorKey: "stock",
+    },
+    {
+      header: "Tags",
+      accessorKey: "tags",
+    },
+    {
+      header: "Brand",
+      accessorKey: "brand",
+    },
+    {
+      header: "Reviews",
+      accessorKey: "reviews",
+      cell: ({ row }: any) => (
+        <>
+          {/* {row.original.reviews.length} Reviews */}
+          <button onClick={() => handleButtonClick(row.original)}>
+            View Reviews ({row.original.reviews.length})
+          </button>
+        </>
+      ),
+    },
+  ];
+
+  const handleButtonClick = (rowData: any) => {
+    setReviewModalData(rowData?.reviews);
+    handleOpen();
+    // console.log("Button clicked for row:", rowData?.reviews);
+  };
+
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  useEffect(() => {
+    (async () => {
+      const tableData = await axios.get("https://dummyjson.com/products");
+      console.log("tableData", tableData);
+      setTableData(tableData?.data?.products);
+    })();
+  }, []);
+
+  return (
+    <>
+      <div className="w3-container">
+        <table className="w3-table-all">
+          <thead>
+            {table.getHeaderGroups().map((headerGroup: any) => (
+              <tr key={headerGroup?.id}>
+                {headerGroup.headers.map((header: any) => (
+                  <th key={header?.id}>
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.map((row: any) => (
+              <tr key={row.id}>
+                {row.getVisibleCells().map((cell: any) => (
+                  <td key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <ReviewModal
+        open={open}
+        handleClose={handleClose}
+        reviewModalData={reviewModalData}
+      />
+    </>
+  );
+};
+
+export default TanStackTable;

src/utilities/svgConstant.tsx

@@ -79,20 +79,20 @@ export const GEAR = createSvgIcon(
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clip-path="url(#clip0_700_1370)">
+    <g clipPath="url(#clip0_700_1370)">
       <path
         d="M11.198 5.62532C11.6334 3.72906 14.1861 3.72906 14.6215 5.62532C14.6868 5.91019 14.8149 6.17474 14.9952 6.39743C15.1756 6.62012 15.4032 6.79467 15.6594 6.90686C15.9157 7.01905 16.1934 7.06571 16.4699 7.04305C16.7465 7.0204 17.0141 6.92906 17.2509 6.77647C18.8277 5.76138 20.6335 7.66844 19.6729 9.33577C19.5287 9.58593 19.4424 9.86851 19.421 10.1606C19.3996 10.4526 19.4437 10.7458 19.5498 11.0165C19.6558 11.2871 19.8208 11.5275 20.0313 11.718C20.2418 11.9086 20.4919 12.044 20.7612 12.1132C22.5557 12.5732 22.5557 15.2708 20.7612 15.7308C20.4917 15.7998 20.2413 15.9351 20.0306 16.1257C19.8198 16.3163 19.6546 16.5568 19.5485 16.8276C19.4423 17.0984 19.3981 17.3918 19.4196 17.6841C19.441 17.9763 19.5275 18.259 19.6719 18.5093C20.6325 20.1756 18.8277 22.0837 17.2499 21.0686C17.0132 20.9162 16.7457 20.825 16.4694 20.8024C16.193 20.7798 15.9155 20.8265 15.6594 20.9385C15.4033 21.0506 15.1758 21.2249 14.9955 21.4474C14.8151 21.6698 14.687 21.9341 14.6215 22.2187C14.1861 24.1149 11.6334 24.1149 11.198 22.2187C11.1327 21.9338 11.0047 21.6693 10.8243 21.4466C10.6439 21.2239 10.4164 21.0493 10.1601 20.9371C9.90384 20.825 9.62613 20.7783 9.34958 20.8009C9.07302 20.8236 8.80544 20.9149 8.56861 21.0675C6.99177 22.0826 5.18602 20.1756 6.14664 18.5082C6.29083 18.2581 6.37713 17.9755 6.39852 17.6834C6.41992 17.3914 6.3758 17.0982 6.26975 16.8275C6.1637 16.5569 5.99872 16.3165 5.78822 16.126C5.57771 15.9354 5.32763 15.8 5.05828 15.7308C3.26378 15.2708 3.26378 12.5732 5.05828 12.1132C5.32787 12.0442 5.57822 11.9089 5.78896 11.7183C5.9997 11.5277 6.16488 11.2872 6.27105 11.0164C6.37722 10.7456 6.42138 10.4522 6.39994 10.1599C6.3785 9.86771 6.29206 9.58495 6.14766 9.33469C5.18705 7.66844 6.99177 5.7603 8.56963 6.77539C9.59156 7.43195 10.916 6.85098 11.198 5.62532Z"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12.9097 17.159C14.6029 17.159 15.9755 15.7086 15.9755 13.9194C15.9755 12.1302 14.6029 10.6797 12.9097 10.6797C11.2165 10.6797 9.84393 12.1302 9.84393 13.9194C9.84393 15.7086 11.2165 17.159 12.9097 17.159Z"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </g>
     <defs>