Skip to content

Commit ccf4904

Browse files
IMDADMIIMDADMI
committed
inventory update
1 parent 7ce9e14 commit ccf4904

File tree

14 files changed

+514
-33
lines changed

14 files changed

+514
-33
lines changed

‎app.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#root{
2+
background-color: "#DEE3E9",
3+
}

‎package-lock.json

Lines changed: 31 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@
1515
"@iconscout/react-unicons": "^2.0.2",
1616
"@mui/icons-material": "^5.14.1",
1717
"@mui/material": "^5.14.2",
18+
"@mui/x-data-grid": "^6.11.1",
1819
"react": "^18.2.0",
19-
"react-dom": "^18.2.0",
2020
"react-apexcharts": "^1.4.1",
21+
"react-dom": "^18.2.0",
2122
"react-router-dom": "^6.11.2"
2223
},
2324
"devDependencies": {

‎src/App.jsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,19 @@ import Inter from "../public/static/fonts/Inter.ttf";
22
import { ThemeProvider, CssBaseline, createTheme } from "@mui/material";
33
import RootComponent from "./components/RootComponent";
44
import RootPage from "./components/RootPage";
5+
import DataTable from "./test/DataTable";
6+
import Hello from "./test/Hello";
7+
// import "../app.css";
58
import {
69
Route,
710
createBrowserRouter,
811
createRoutesFromElements,
912
RouterProvider,
1013
} from "react-router-dom";
11-
import Home from "./components/bodyComponents/Home/Home";
14+
import Home from "./components/bodyComponents/home/Home";
15+
import Products from "./components/bodyComponents/inventory/Products";
16+
import Inventory from "./components/bodyComponents/inventory/Inventory";
17+
1218
function App() {
1319
const theme = createTheme({
1420
spacing: 4,
@@ -51,9 +57,9 @@ function App() {
5157
const router = createBrowserRouter(
5258
createRoutesFromElements(
5359
<Route path="/" element={<RootComponent />}>
54-
<Route index element={<RootPage />}></Route>
60+
<Route index element={<RootPage />} />
5561
<Route path="/home" element={<Home />}></Route>
56-
<Route path="/inventory"></Route>
62+
<Route path="/inventory" element={<Inventory />}></Route>
5763
<Route path="/orders"></Route>
5864
<Route path="/customers"></Route>
5965
<Route path="/revenue"></Route>
@@ -66,7 +72,10 @@ function App() {
6672

6773
return (
6874
<ThemeProvider theme={theme}>
75+
{/* <DataTable /> */}
76+
{/* <Products /> */}
6977
<RouterProvider router={router} />
78+
7079
<CssBaseline />
7180
</ThemeProvider>
7281
);

‎src/assets/Home.PNG

-37.1 KB
Loading

‎src/components/RootComponent.jsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ export default function RootComponent() {
88
return (
99
<>
1010
<NavBarComponent />
11-
12-
<Box sx={{ bgcolor: "#DEE3E9" }}>
11+
<Box sx={{ bgcolor: "#DEE3E9", height: 899 }}>
1312
<Grid container spacing={0}>
1413
<Grid item md={2} sm={0}>
1514
<SideBarComponent />

‎src/components/SideBarComponent.jsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,15 @@ import {
2222
TrendingUpOutlined,
2323
PeopleAltOutlined,
2424
} from "@mui/icons-material";
25-
import { Link, NavLink, useNavigate } from "react-router-dom";
25+
import { Link, NavLink, useLocation, useNavigate } from "react-router-dom";
2626

2727
export default function SideBarComponent() {
2828
const navigate = useNavigate();
2929
const navigateTo = (to) => {
3030
navigate(to);
3131
};
32+
const location = useLocation();
33+
const currentPage = location.pathname;
3234
// const styles = theme => ({
3335
// listItemText:{
3436
// fontSize:'0.7em',//Insert your required size
@@ -83,7 +85,11 @@ export default function SideBarComponent() {
8385
handlSelectedComponent(event, index);
8486
navigateTo(comp.title.toLocaleLowerCase());
8587
}}
86-
selected={index === selected}
88+
// selected={}
89+
selected={
90+
index === selected &&
91+
currentPage === "/" + comp.title.toLocaleLowerCase()
92+
}
8793
sx={{
8894
mb: 3,
8995
borderLeft: 0,

‎src/components/bodyComponents/Home/Channels.jsx

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,41 @@
1-
import React from "react";
1+
import React, { useEffect, useState } from "react";
22
import ApexCharts from "react-apexcharts";
33
import { Box } from "@mui/material";
44
export default function Channels() {
55
// const total = data.reduce((sum, value) => sum + value, 0);
66
// const percentages = data.map(value => ((value / total) * 100).toFixed(2) + '%');
7+
const [channelData, setChannelData] = useState([]);
8+
useEffect(() => {
9+
setChannelData([
10+
{
11+
name: "Online Store",
12+
data: [14, 25, 21, 17, 12, 13, 11],
13+
},
14+
{
15+
name: "Amazon Marketplace",
16+
data: [13, 23, 20, 8, 13, 27, 33],
17+
},
18+
{
19+
name: "eBay Marketplace",
20+
data: [11, 17, 15, 15, 21, 14, 15],
21+
},
22+
{
23+
name: "Physical Store",
24+
data: [50, 27, 13, 19, 16, 10, 5],
25+
},
26+
{
27+
name: "Distributors",
28+
data: [33, 4, 25, 20, 24, 11, 44],
29+
},
30+
]);
731

8-
const series3 = [
9-
{
10-
name: "Online Store",
11-
data: [14, 25, 21, 17, 12, 13, 11],
12-
},
13-
{
14-
name: "Amazon Marketplace",
15-
data: [13, 23, 20, 8, 13, 27, 33],
16-
},
17-
{
18-
name: "eBay Marketplace",
19-
data: [11, 17, 15, 15, 21, 14, 15],
20-
},
21-
{
22-
name: "Physical Store",
23-
data: [50, 27, 13, 19, 16, 10, 5],
24-
},
25-
{
26-
name: "Distributors",
27-
data: [33, 4, 25, 20, 24, 11, 44],
28-
},
29-
];
32+
return () => {
33+
setChannelData([]);
34+
};
35+
}, []);
3036

3137
let totalArray = [];
32-
const total = series3.forEach((value) => {
38+
const total = channelData.forEach((value) => {
3339
const data = value.data;
3440
if (totalArray.length === 0) totalArray = [...data];
3541
else {
@@ -79,7 +85,7 @@ export default function Channels() {
7985
>
8086
<ApexCharts
8187
options={options3}
82-
series={series3}
88+
series={channelData}
8389
type="bar"
8490
width="100%"
8591
height="320"

‎src/components/bodyComponents/inventory/Inventory.jsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Grid, Box, Typography } from "@mui/material";
2+
import React, { Component } from "react";
3+
import Products from "./Products";
4+
import Overview from "./Overview";
5+
export default class Inventory extends Component {
6+
constructor(props) {
7+
super(props);
8+
this.state = {};
9+
}
10+
render() {
11+
return (
12+
<Box p={3}>
13+
<Grid container sx={{ mx: 3 }}>
14+
<Grid item md={9}>
15+
<Box
16+
sx={{
17+
margin: 3,
18+
bgcolor: "white",
19+
borderRadius: 5,
20+
padding: 3,
21+
height: "100%",
22+
}}
23+
>
24+
<Typography variant="h5" sx={{ m: 3, fontWeight: "bold" }}>
25+
Inventory
26+
</Typography>
27+
<Products />
28+
</Box>
29+
</Grid>
30+
<Grid item md={3}>
31+
<Box
32+
sx={{
33+
margin: 3,
34+
bgcolor: "white",
35+
borderRadius: 5,
36+
padding: 3,
37+
height: "100%",
38+
}}
39+
>
40+
<Typography variant="h5" sx={{ m: 3, fontWeight: "bold" }}>
41+
Overview
42+
</Typography>
43+
<Overview />
44+
</Box>
45+
</Grid>
46+
</Grid>
47+
</Box>
48+
);
49+
}
50+
}

‎src/components/bodyComponents/inventory/Overview.jsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import {
2+
Box,
3+
Table,
4+
TableBody,
5+
TableCell,
6+
TableContainer,
7+
TableHead,
8+
TableRow,
9+
Typography,
10+
} from "@mui/material";
11+
import React from "react";
12+
13+
export default function Overview() {
14+
return (
15+
<Box>
16+
<TableContainer>
17+
<Table>
18+
<TableBody>
19+
<TableRow>
20+
<TableCell>Total Product</TableCell>
21+
<TableCell align="right">
22+
<Typography variant="subtitle1" fontWeight="bold">
23+
15226
24+
</Typography>
25+
</TableCell>
26+
</TableRow>
27+
28+
<TableRow>
29+
<TableCell>Today sell</TableCell>
30+
<TableCell align="right">
31+
<Typography variant="subtitle1" fontWeight="bold">
32+
5241
33+
</Typography>
34+
</TableCell>
35+
</TableRow>
36+
37+
<TableRow>
38+
<TableCell>Yesterday sell</TableCell>
39+
<TableCell align="right">
40+
<Typography variant="subtitle1" fontWeight="bold">
41+
3652
42+
</Typography>
43+
</TableCell>
44+
</TableRow>
45+
46+
<TableRow>
47+
<TableCell>Total sell</TableCell>
48+
<TableCell align="right">
49+
<Typography variant="subtitle1" fontWeight="bold">
50+
11425
51+
</Typography>
52+
</TableCell>
53+
</TableRow>
54+
55+
<TableRow>
56+
<TableCell>Product Reserved</TableCell>
57+
<TableCell align="right">
58+
<Typography variant="subtitle1" fontWeight="bold">
59+
6547
60+
</Typography>
61+
</TableCell>
62+
</TableRow>
63+
64+
<TableRow>
65+
<TableCell>Stock Issues</TableCell>
66+
<TableCell align="right">
67+
<Typography variant="subtitle1" fontWeight="bold">
68+
9562
69+
</Typography>
70+
</TableCell>
71+
</TableRow>
72+
</TableBody>
73+
</Table>
74+
</TableContainer>
75+
</Box>
76+
);
77+
}

0 commit comments

Comments
 (0)