update

bvaibhav23 · May 30, 2023 · d8d60be · d8d60be
1 parent c550503
commit d8d60be
Show file tree

Hide file tree

Showing 31 changed files with 1,550 additions and 147 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,11 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "chart.js": "^4.3.0",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="./pie_statistics_icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+      content="Web site created using create-react-app" />
+    <title>React | Chart</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/pie_statistics_icon.png b/public/pie_statistics_icon.png
diff --git a/src/App.css b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,30 @@
-import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { Container } from '@mui/material';
+
+import MiniDrawer from './components/SideBar';
+import Dashboard from './Pages/Dashboard/index';
+import Inventory from './Pages/Inventory/index';
+import Orders from './Pages/Orders/index';
+import Customers from './Pages/Customers';
+import DataContext from "./Dynamic Data/dataContext";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <DataContext>
+      <Container sx={{ backgroundColor: "rgb(214, 233, 248)" }} maxWidth="ls">
+        <Router>
+          <MiniDrawer />
+          <Routes>
+            <Route exact path="/" element={<Dashboard />} />
+            <Route path="/Dashboard" element={<Dashboard />} />
+            <Route path="/Inventory" element={<Inventory />} />
+            <Route path="/Orders" element={<Orders />} />
+            <Route path="/Customers" element={<Customers />} />
+          </Routes>
+        </Router>
+      </Container>
+    </DataContext>
   );
 }
 
-export default App;
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Dynamic Data/DynamicData.js b/src/Dynamic Data/DynamicData.js
@@ -0,0 +1,17 @@
+export const fetchCart = async () => {
+    const response = await fetch('https://dummyjson.com/carts')
+    if (!response.ok) {
+        throw new Error('Carts could not be fetched!')
+    } else {
+        return response.json()
+    }
+}
+
+export const fetchProducts = async () => {
+    const response = await fetch('https://dummyjson.com/products?limit=30')
+    if (!response.ok) {
+        throw new Error('Products could not be fetched!')
+    } else {
+        return response.json()
+    }
+}
diff --git a/src/Dynamic Data/dataContext.js b/src/Dynamic Data/dataContext.js
@@ -0,0 +1,28 @@
+import React, { createContext, useEffect, useState } from 'react'
+import { fetchCart, fetchProducts } from './DynamicData';
+export const productContext = createContext();
+
+const DataContext = ({ children }) => {
+    const [products, setProducts] = useState();
+    const [carts, setCarts] = useState();
+    const [filteredProducts, setFilteredProducts] = useState();
+
+    useEffect(() => {
+        fetchProducts()
+            .then(res => {
+                setProducts(res.products);
+                setFilteredProducts(res.products)
+            });
+        fetchCart()
+            .then(res => setCarts(res))
+    }, [])
+
+    return (<>
+        <productContext.Provider value={[products, setProducts, carts, setCarts, filteredProducts, setFilteredProducts]}>
+            {children}
+        </productContext.Provider>
+    </>)
+}
+
+
+export default DataContext;
diff --git a/src/Pages/Customers.js b/src/Pages/Customers.js
@@ -0,0 +1,13 @@
+import { Container } from '@mui/material';
+import React, { useEffect } from 'react';
+
+
+const Customers = () => {
+    useEffect(() => { document.title = "Admin | Customers" }, []);
+
+    return (
+        <Container>Customers</Container>
+    )
+}
+
+export default Customers;
diff --git a/src/Pages/Dashboard/Cards.js b/src/Pages/Dashboard/Cards.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import DashboardCard from './DashboardCard';
+
+import { Stack } from '@mui/material';
+const Cards = ({ orders = 0, inventory = 0, customers = 0, revenue = 0 }) => {
+
+    const cardsLog = [{ title: "Orders", value: orders }, { title: "Inventory", value: inventory.length }, { title: "Customers", value: customers }, { title: "Revenue", value: revenue.toLocaleString() }]
+    //const formattedNumber = number.toLocaleString("en-US");
+    return (
+        <Stack spacing={{ xs: 3, sm: 4, md: 5 }} direction="row" justifyContent="center" useFlexGap flexWrap="wrap">
+            {/* useFlexGap helps in wrap */}
+            {cardsLog.map((ele, index) => (<DashboardCard key={index} ele={ele} index={index} />))}
+        </Stack>
+    )
+}
+
+export default Cards;
diff --git a/src/Pages/Dashboard/DashboardCard.js b/src/Pages/Dashboard/DashboardCard.js
@@ -0,0 +1,30 @@
+import { Card, Typography, Stack, CardContent, Skeleton } from '@mui/material';
+
+import CurrencyRupeeIcon from '@mui/icons-material/CurrencyRupee';
+import InventoryIcon from '@mui/icons-material/Inventory';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+const DashboardCard = ({ ele, index }) => {
+    return (
+        <Card sx={{ width: 9 + "rem", height: 7 + "rem", boxShadow: 3 }} >
+            <CardContent sx={{ margin: 1 }} >
+                <Stack alignItems='center' justifyContent='center' gap={2} direction='row'>
+                    {index % 2 === 0 ? index === 0 ? <ShoppingCartIcon fontSize='large' color='success' /> : <AccountCircleIcon color='info' fontSize='large' /> : index === 1 ? <InventoryIcon fontSize='large' color='warning' /> : <CurrencyRupeeIcon fontSize='large' color='secondary' />}
+                    <Stack>
+                        <Typography sx={{ fontSize: 14 }}
+                            borderBottom={1}
+                            borderColor="text.secondary"
+                            color="text.secondary" gutterBottom>
+                            {ele.title}
+                        </Typography>
+                        {!ele.value || ele.value === "0" ? <Skeleton variant="h4" sx={{ width: 3 + "rem", fontSize: 14, padding: 2 }}></Skeleton> : <Typography variant="h5" >
+                            {ele.value}
+                        </Typography>
+                        }
+                    </Stack>
+                </Stack>
+            </CardContent>
+        </Card>
+    )
+}
+export default DashboardCard;
diff --git a/src/Pages/Dashboard/DashboardTable.js b/src/Pages/Dashboard/DashboardTable.js
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+
+const DashboardTable = ({ orders }) => {
+    const [row, setRow] = useState(null);
+    const [randomIndex, setRandomIndex] = useState(0);
+
+    //Math.floor(Math.random() * arr.length)
+    useEffect(() => {
+        if (orders) {
+            // setRandomIndex(Math.floor(Math.random() * orders.carts.length));
+            // setRow(orders.carts[randomIndex].products)
+            setRow(orders.slice(0, 5));
+        }
+    }, [orders])
+
+
+
+    function BasicTable() {
+        return (<>
+            <TableContainer sx={{ boxShadow: 5, height: 20 + "rem" }} component={Paper}>
+                <Table size='large' aria-label="simple table">
+                    <TableHead>
+                        <TableRow>
+                            <TableCell sx={{ fontWeight: "bold" }} align="center">Title</TableCell>
+                            <TableCell sx={{ fontWeight: "bold" }} align="center">Quantity</TableCell>
+                            <TableCell sx={{ fontWeight: "bold" }} align="center">Price</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {row &&
+                            row.map((item) => (
+                                <TableRow
+                                    key={item.id}
+                                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                                >
+                                    <TableCell align="left">{item.title}</TableCell>
+                                    <TableCell align="center">{item.quantity}</TableCell>
+                                    <TableCell align="center">{item.price}</TableCell>
+                                </TableRow>
+                            ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        </>
+        );
+    }
+    return (
+        <BasicTable />
+    )
+}
+
+export default DashboardTable;