diff --git a/.eslintrc.json b/.eslintrc.json index 4bc70daad..7ea77ddbd 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -3,7 +3,7 @@ "browser": true, "es2021": true }, - "extends": ["plugin:react/recommended", "prettier"], + "extends": ["plugin:react/recommended"], "parserOptions": { "ecmaFeatures": { "jsx": true @@ -11,14 +11,9 @@ "ecmaVersion": 12, "sourceType": "module" }, - "plugins": ["react", "prettier"], + "plugins": ["react"], "rules": { - "prettier/prettier": [ - "error", - { - "endOfLine": "auto" - } - ], + "react/display-name": "off", "default-param-last": "off", "react/react-in-jsx-scope": "off", diff --git a/README.md b/README.md index 863724f8f..a126a9c85 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ This free MUI & React Dashboard is coming with prebuilt design blocks, so the de switching from our pages to the real website is very easy to be done. Special thanks go to: + - [Nepcha Analytics](https://nepcha.com?ref=readme) for the analytics tool. Nepcha is already integrated with Material Dashboard React. You can use it to gain insights into your sources of traffic. **Documentation built by Developers** diff --git a/package.json b/package.json index 01521c624..7ed533e6c 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,10 @@ "@emotion/styled": "11.10.8", "@mui/icons-material": "5.11.16", "@mui/material": "5.12.3", + "axios": "^1.6.0", "chart.js": "4.3.0", "chroma-js": "2.4.2", + "cross-env": "^7.0.3", "prop-types": "15.8.1", "react": "18.2.0", "react-chartjs-2": "5.2.0", @@ -33,8 +35,10 @@ "yup": "1.1.1" }, "scripts": { - "start": "GENERATE_SOURCEMAP=false react-scripts start", - "build": "GENERATE_SOURCEMAP=false react-scripts build", + + "start": "cross-env GENERATE_SOURCEMAP=false react-scripts start", + "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build", + "test": "react-scripts test", "eject": "react-scripts eject", "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" diff --git a/src/App.js b/src/App.js index 5ba40edb9..45fcd6d01 100644 --- a/src/App.js +++ b/src/App.js @@ -155,7 +155,7 @@ export default function App() { } {getRoutes(routes)} - } /> + } /> @@ -179,7 +179,7 @@ export default function App() { } {getRoutes(routes)} - } /> + } /> ); diff --git a/src/assets/images/dd.png b/src/assets/images/dd.png new file mode 100644 index 000000000..7e7c2739b Binary files /dev/null and b/src/assets/images/dd.png differ diff --git a/src/examples/Footer/index.js b/src/examples/Footer/index.js index 7acc80d1a..d15628f97 100644 --- a/src/examples/Footer/index.js +++ b/src/examples/Footer/index.js @@ -63,13 +63,14 @@ function Footer({ company, links }) { © {new Date().getFullYear()}, made with - favorite + Co-lance by -  {name}  + {" "} + 4Twin 2 Co-lance Team{" "} for a better web. @@ -90,9 +91,7 @@ function Footer({ company, links }) { mt: 0, }, })} - > - {renderLinks()} - + > ); } diff --git a/src/examples/Sidenav/index.js b/src/examples/Sidenav/index.js index 5efd2d2c7..ae2193d6e 100644 --- a/src/examples/Sidenav/index.js +++ b/src/examples/Sidenav/index.js @@ -179,19 +179,6 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) { } /> {renderRoutes} - - - upgrade to pro - - ); } diff --git a/src/layouts/products/data/productsTableData.js b/src/layouts/products/data/productsTableData.js new file mode 100644 index 000000000..e945e1aea --- /dev/null +++ b/src/layouts/products/data/productsTableData.js @@ -0,0 +1,56 @@ +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDBadge from "components/MDBadge"; +import PropTypes from 'prop-types'; + +export default function productsTableData(products) { + const ProductInfo = ({ name, category, description, user }) => ( + + + {name} + + {category} + {description} + {user} + + ); + ProductInfo.propTypes = { + name: PropTypes.string.isRequired, + category: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + user: PropTypes.string.isRequired, + }; + + const randomStatus = () => { + const statuses = ["Available", "Pending", "Sold"]; + return statuses[Math.floor(Math.random() * statuses.length)]; + }; + + const formatRows = products.map(product => ({ + productInfo: , + status: ( + + + + ), + action: ( + + Edit + + ), + })); + + return { + columns: [ + { Header: "product", accessor: "productInfo", width: "45%", align: "left" }, + { Header: "status", accessor: "status", align: "center" }, + { Header: "action", accessor: "action", align: "center" }, + ], + rows: formatRows, + }; +} \ No newline at end of file diff --git a/src/layouts/products/data/productsTableDataRelations.js b/src/layouts/products/data/productsTableDataRelations.js new file mode 100644 index 000000000..d0d1dfeea --- /dev/null +++ b/src/layouts/products/data/productsTableDataRelations.js @@ -0,0 +1,71 @@ +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDBadge from "components/MDBadge"; +import PropTypes from 'prop-types'; + +export default function productsTableDataRelations(products) { + const ProductInfo = ({ name, category, description }) => ( + + + {name} + + {category} + {description} + + ); + ProductInfo.propTypes = { + name: PropTypes.string.isRequired, + category: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + }; + + const OwnerInfo = ({ userName, userEmail }) => ( + + + {userName} + + {userEmail} + + ); + OwnerInfo.propTypes = { + userName: PropTypes.string.isRequired, + userEmail: PropTypes.string.isRequired, + }; + + const randomStatus = () => { + const statuses = ["Available", "Pending", "Sold"]; + return statuses[Math.floor(Math.random() * statuses.length)]; + }; + + const formatRows = products.map(product => ({ + productInfo: , + owner: , + status: ( + + + + ), + action: ( + + Edit + + ), + })); + + return { + columns: [ + { Header: "product", accessor: "productInfo", width: "30%", align: "left" }, + { Header: "owner", accessor: "owner", width: "30%", align: "left" }, + { Header: "status", accessor: "status", align: "center" }, + { Header: "action", accessor: "action", align: "center" }, + ], + rows: formatRows, + }; +} diff --git a/src/layouts/products/index.js b/src/layouts/products/index.js new file mode 100644 index 000000000..ed3f749d2 --- /dev/null +++ b/src/layouts/products/index.js @@ -0,0 +1,147 @@ +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import DashboardLayout from "examples/LayoutContainers/DashboardLayout"; +import DashboardNavbar from "examples/Navbars/DashboardNavbar"; +import Footer from "examples/Footer"; +import DataTable from "examples/Tables/DataTable"; +import { useEffect, useState } from "react"; +import productsTableData from "./data/productsTableData"; +import productsTableDataRelations from "./data/productsTableDataRelations"; +import { getProducts, getTypeProducts, getCategoryProducts, getProductsRelations } from "../../services/productService"; +import { Select, MenuItem, FormControl, InputLabel, TextField } from "@mui/material"; +function Products() { + const [tableData, setTableData] = useState({ columns: [], rows: [] }); + const [tableDataRelations, setTableDataRelations] = useState({ columns: [], rows: [] }); + const [productType, setProductType] = useState(""); + const [searchQuery, setSearchQuery] = useState(''); + + async function fetchDataCategory(value) { + try { + + const categoryProducts = await getCategoryProducts(value); + setTableData(productsTableData(categoryProducts)); + } catch (error) { + console.error("Error fetching products data:", error); + } + } + + const handleSearchChange = (event) => { + setSearchQuery(event.target.value); + fetchDataCategory(event.target.value) + }; + + + async function fetchDataTypes(value) { + try { + setProductType(value); + const TypeProducts = await getTypeProducts(value); + setTableData(productsTableData(TypeProducts)); + } catch (error) { + console.error("Error fetching products data:", error); + } + } + + const handleProductTypeChange = (event) => { + setProductType(event.target.value); + fetchDataTypes(event.target.value); + }; + useEffect(() => { + async function fetchData() { + try { + const Products = await getProducts(); + const ProductsRelations = await getProductsRelations(); + console.log(ProductsRelations); + setTableData(productsTableData(Products)); + setTableDataRelations(productsTableDataRelations(ProductsRelations)); + } catch (error) { + console.error("Error fetching products data:", error); + } + } + + fetchData(); + }, []); + + return ( + + + + + + + + + + Products Table + +
+ + + Type + +
+ + + + + + + + + + Products Relation Table + + + + + + + + + +