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

README.md

@@ -1,8 +1,33 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Project Name
+
+TEST DEMO
+
+This is a Demo project Developed in NextJS with Tanstack React Table.
+
+## Features
+
+1. **Login**: User authentication functionality.
+2. **Signup**: User registration functionality.
+3. **Table Data**: Data loaded from [Dummy JSON](https://dummyjson.com/products) and displayed on the home page.
+4. **Review Modal**: A modal that opens from the "View Reviews" button in each table row to display product reviews.
 
 ## Getting Started
 
-First, run the development server:
+### Installation
+
+First, install the dependencies:
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+### Running the Development Server:
 
 ```bash
 npm run dev
@@ -14,23 +39,30 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open http://localhost:3000 with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+Project Structure
+Login: Navigate to the login page to authenticate users.
+Signup: Navigate to the signup page to register new users.
+Table Data: The home page fetches and displays product data from Dummy JSON.
+Review Modal: Click the "View Reviews" button in any table row to open a modal displaying the product reviews.
+API
+This project uses the Dummy JSON API to fetch product data. The data is displayed in a table on the home page.
 
-## Learn More
+Components
+Login Component: Handles user login functionality.
+Signup Component: Handles user registration functionality.
+Table Component: Displays product data in a table format.
+Review Modal Component: Displays product reviews in a modal when the "View Reviews" button is clicked.
+Contributing
+If you would like to contribute to this project, please fork the repository and submit a pull request.
 
-To learn more about Next.js, take a look at the following resources:
+License
+This project is licensed under the MIT License.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+This README includes more details about the project structure, components, and API usage.
+```

src/app/(auth)/log-in/loginPage.module.scss

@@ -1,6 +1,6 @@
 .loginPage {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   .images {
     width: 100%;
     max-width: 500px;

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

@@ -3,16 +3,24 @@ import { Box, Card, Typography } from "@mui/material";
 import React from "react";
 import CardHeader from "@mui/material/CardHeader";
 import CardContent from "@mui/material/CardContent";
+import TitleHeader from "@/components/titleHeader/titleHeader";
+import homeServices from "@/services/home.services";
 
-const HomePage = () => {
+const HomePage = async () => {
+  const data = await homeServices.getProducts();
   return (
     <Box>
-      <Card>
-        <CardHeader>
-          <Typography variant="h4">Projects</Typography>
-        </CardHeader>
+      <TitleHeader />
+      <Card
+        sx={{ boxShadow: "none", borderRadius: "12px", marginBlockStart: 2 }}
+      >
+        <CardHeader
+          title="Projects"
+          fontWeight={"bold"}
+          sx={{ borderBlockEnd: "1px solid var(--primary_light)" }}
+        />
         <CardContent>
-          <TanStackTable />
+          <TanStackTable data={data} />
         </CardContent>
       </Card>
     </Box>

src/app/globals.scss

@@ -73,7 +73,7 @@
 /* Body */
 html,
 body {
-  height: 100%;
+  min-height: 100vh;
   padding: 0;
   margin: 0;
 }

src/components/table/TanStackTable.module.scss

@@ -0,0 +1,27 @@
+@use "@/theme/sass/helper" as *;
+.responsive_table {
+  width: 100%;
+  .table {
+    width: 100%;
+    thead {
+      tr {
+        th {
+          text-align: start;
+          padding-inline: rem(10);
+          padding-block: rem(4);
+          min-height: rem(40);
+        }
+      }
+    }
+    tbody {
+      tr {
+        td {
+          text-align: start;
+          padding-inline: rem(10);
+          padding-block: rem(4);
+          min-height: rem(40);
+        }
+      }
+    }
+  }
+}

src/components/table/TanStackTable.tsx

@@ -5,20 +5,39 @@ import {
   getCoreRowModel,
   flexRender,
 } from "@tanstack/react-table";
+import global from "../../../src/theme/global/global.module.scss";
 import styles from "./TanStackTable.module.scss";
-import axios from "axios";
 import { useEffect, useState } from "react";
 import ReviewModal from "../reviewModal/ReviewModal";
 
-const TanStackTable = () => {
+const TanStackTable = ({ data }: any) => {
   const [tableData, setTableData] = useState([]);
   const [open, setOpen] = useState(false);
   const [reviewModalData, setReviewModalData] = useState([]);
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc" | null>(null);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+
+  const handleSort = (key: string) => {
+    let sortedData;
+    if (sortOrder === "asc") {
+      sortedData = [...tableData].sort((a, b) => (a[key] > b[key] ? -1 : 1));
+      setSortOrder("desc");
+    } else {
+      sortedData = [...tableData].sort((a, b) => (a[key] > b[key] ? 1 : -1));
+      setSortOrder("asc");
+    }
+    setTableData(sortedData);
+  };
+
+  /** Set Title and api data object key for the Table title and data */
   const columns: any = [
     {
-      header: "ID",
+      header: (
+        <div onClick={() => handleSort("id")}>
+          ID {sortOrder === "asc" ? "↑" : sortOrder === "desc" ? "↓" : ""}
+        </div>
+      ),
       accessorKey: "id",
     },
     {
@@ -71,6 +90,7 @@ const TanStackTable = () => {
     },
   ];
 
+  /** Send Review array to Review Modal before openning */
   const handleButtonClick = (rowData: any) => {
     setReviewModalData(rowData?.reviews);
     handleOpen();
@@ -84,22 +104,19 @@ const TanStackTable = () => {
   });
 
   useEffect(() => {
-    (async () => {
-      const tableData = await axios.get("https://dummyjson.com/products");
-      console.log("tableData", tableData);
-      setTableData(tableData?.data?.products);
-    })();
-  }, []);
+    setTableData(data?.products);
+    console.log("Server data", data);
+  }, [data]);
 
   return (
     <>
-      <div className="w3-container">
-        <table className="w3-table-all">
+      <div className={styles.responsive_table}>
+        <table className={styles.table}>
           <thead>
             {table.getHeaderGroups().map((headerGroup: any) => (
               <tr key={headerGroup?.id}>
                 {headerGroup.headers.map((header: any) => (
-                  <th key={header?.id}>
+                  <th key={header?.id} className={global.body2}>
                     {flexRender(
                       header.column.columnDef.header,
                       header.getContext()

src/components/titleHeader/titleHeader.tsx

@@ -0,0 +1,63 @@
+import { Box, Card, CardContent, Typography } from "@mui/material";
+import React from "react";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import HomeIcon from "@mui/icons-material/Home";
+
+// function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+//   event.preventDefault();
+//   console.info('You clicked a breadcrumb.');
+// }
+
+const TitleHeader = () => {
+  return (
+    <Box width={"100%"}>
+      <Card sx={{ boxShadow: "none", borderRadius: "12px" }}>
+        <CardContent
+          sx={{
+            paddingBlock: 1,
+            paddingInline: 2,
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            "&:last-child": {
+              paddingBottom: 1,
+            },
+          }}
+        >
+          <Typography variant="h6" color="text.primary" fontWeight={"bold"}>
+            Projects
+          </Typography>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link
+              fontSize={"small"}
+              fontWeight={"medium"}
+              underline="hover"
+              color="inherit"
+              href="/"
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+              }}
+            >
+              <HomeIcon fontSize="small" />
+              Page
+            </Link>
+            <Link
+              fontSize={"small"}
+              fontWeight={"medium"}
+              underline="hover"
+              color="inherit"
+              href="/material-ui/getting-started/installation/"
+            >
+              Project Table
+            </Link>
+          </Breadcrumbs>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+};
+
+export default TitleHeader;

src/components/wrapper/DashboardWrapper.module.scss

@@ -7,4 +7,5 @@
 }
 .dashboard_main {
   background: var(--dashboard-bg);
+  min-height: 100vh;
 }

src/services/home.services.ts

@@ -0,0 +1,17 @@
+import axios, { isAxiosError } from "axios";
+
+const homeServices = {
+  getProducts: async () => {
+    try {
+      const res = await axios.get("https://dummyjson.com/products");
+      return res.data;
+    } catch (error: any) {
+      if (isAxiosError(error)) {
+        throw new Error(error.response?.data.message);
+      }
+      throw new Error("Something went wrong. Please try again.");
+    }
+  },
+};
+
+export default homeServices;

src/theme.ts

@@ -22,6 +22,17 @@ const theme = createTheme({
       light: getCssVariableValue("--primary_light").trim() || "#dae7f9", // Fallback to default color
     },
   },
+  components: {
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          "&:last-child": {
+            paddingBottom: "16px", // Override the padding for the last child
+          },
+        },
+      },
+    },
+  },
 });
 
 export default theme;

src/utilities/svgConstant.tsx

@@ -1,6 +1,6 @@
 // Import necessary functions and types
+import { createSvgIcon } from "@mui/material";
 import React from "react";
-import { createSvgIcon } from "@mui/material/utils";
 
 // Define the SVG component using createSvgIcon
 export const BUILDING = createSvgIcon(