diff --git a/package-lock.json b/package-lock.json index 3a9773b..769b57d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@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", @@ -3842,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", diff --git a/package.json b/package.json index 108e461..fa553e2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@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", diff --git a/src/app/(dashboard)/review/page.tsx b/src/app/(dashboard)/review/page.tsx index 9df692e..41a75c2 100644 --- a/src/app/(dashboard)/review/page.tsx +++ b/src/app/(dashboard)/review/page.tsx @@ -4,8 +4,9 @@ import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import Modal from "@mui/material/Modal"; import Stack from "@mui/material/Stack"; -import ReviewModalContent from "./reviewModalContent/ReviewModalContent"; +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%", @@ -34,37 +35,7 @@ const labels: { [index: string]: string } = { }; const HomePage = () => { - const [open, setOpen] = useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - return ( - - - - - - Reviews - - - - - - - - - ); + return {/* */}; }; export default HomePage; diff --git a/src/components/reviewModal/ReviewModal.tsx b/src/components/reviewModal/ReviewModal.tsx new file mode 100644 index 0000000..13b47ad --- /dev/null +++ b/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 ( + + + + + Reviews + + + {reviewModalData.map((review: ReviewModalData, index: number) => ( + + ))} + + + + + ); +}; + +export default ReviewModal; diff --git a/src/app/(dashboard)/review/reviewModalContent/ReviewModalContent.tsx b/src/components/reviewModal/components/reviewModalContent/ReviewModalContent.tsx similarity index 61% rename from src/app/(dashboard)/review/reviewModalContent/ReviewModalContent.tsx rename to src/components/reviewModal/components/reviewModalContent/ReviewModalContent.tsx index faa4f74..ef9f192 100644 --- a/src/app/(dashboard)/review/reviewModalContent/ReviewModalContent.tsx +++ b/src/components/reviewModal/components/reviewModalContent/ReviewModalContent.tsx @@ -3,11 +3,16 @@ 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 { Avatar } from "@mui/material"; +import moment from "moment"; +import { ReviewModalData } from "../../ReviewModal"; -const ReviewModalContent = () => { - const [value, setValue] = React.useState(2); - const [hover, setHover] = React.useState(-1); +interface ReviewModalContentProps { + data: ReviewModalData; +} + +const ReviewModalContent = ({ data }: ReviewModalContentProps) => { + // const [value, setValue] = React.useState(data?.rating); + // const [hover, setHover] = React.useState(-1); return ( <> { }} > - Amit Roy + {data?.reviewerName} - amit.roy@sentientgeeks.com + {data?.reviewerEmail} { > { - setValue(newValue); - }} - onChangeActive={(event, newHover) => { - setHover(newHover); - }} + readOnly + // onChange={(event, newValue) => { + // setValue(newValue); + // }} + // onChangeActive={(event, newHover) => { + // setHover(newHover); + // }} emptyIcon={ } /> - - April 17, 03:30PM - + {data?.date && ( + + {moment(data?.date).format("MMMM D, hh:mmA")} + + )} - "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus - Dolorem." + {data?.comment} diff --git a/src/components/table/TanStackTable.tsx b/src/components/table/TanStackTable.tsx index 7a46449..7e5f24e 100644 --- a/src/components/table/TanStackTable.tsx +++ b/src/components/table/TanStackTable.tsx @@ -8,9 +8,14 @@ import { 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", @@ -67,7 +72,9 @@ const TanStackTable = () => { ]; const handleButtonClick = (rowData: any) => { - console.log("Button clicked for row:", rowData?.reviews); + setReviewModalData(rowData?.reviews); + handleOpen(); + // console.log("Button clicked for row:", rowData?.reviews); }; const table = useReactTable({ @@ -85,35 +92,42 @@ const TanStackTable = () => { }, []); return ( -
- - - {table.getHeaderGroups().map((headerGroup: any) => ( - - {headerGroup.headers.map((header: any) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((row: any) => ( - - {row.getVisibleCells().map((cell: any) => ( - - ))} - - ))} - -
- {flexRender( - header.column.columnDef.header, - header.getContext() - )} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
-
+ <> +
+ + + {table.getHeaderGroups().map((headerGroup: any) => ( + + {headerGroup.headers.map((header: any) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row: any) => ( + + {row.getVisibleCells().map((cell: any) => ( + + ))} + + ))} + +
+ {flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+
+ + ); }; diff --git a/yarn.lock b/yarn.lock index 8831ad9..16113e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2176,6 +2176,11 @@ minimist@^1.2.0, minimist@^1.2.6: resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz" integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw== +moment@^2.30.1: + version "2.30.1" + resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz" + integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how== + ms@^2.1.1, ms@2.1.2: version "2.1.2" resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"