Skip to content

Commit 55fa0c2

Browse files
Boel21Boel21
committed
Reactjs Admin Dashboard
1 parent 1942008 commit 55fa0c2

38 files changed

+19244
-143
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
.env.development.local
1818
.env.test.local
1919
.env.production.local
20+
.babelrc
2021

2122
npm-debug.log*
2223
yarn-debug.log*

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
# Getting Started with Create React App
22

3+
# React Admin Dashboard
4+
5+
npx create-react-app react admin
6+
7+
dependencies:
8+
9+
Install Material UI / data grid / icons --> npm i @mui/material @emotion/react @emotion/styled @mui/x-data-grid @mui/icons-material
10+
Install react router dom --> npm i react-router-dom
11+
Install react sidebar pro --> npm i react-pro-sidebar
12+
Install formik / yup for forms --> npm i formik yup
13+
Install Full Calendar --> npm i @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list @fullcalendar/interaction
14+
Install Nivo charts --> npm i @nivo/core @nivo/pie @nivo/line @nivo/bar @nivo/geo
15+
16+
The new classes of the sidde bar pro are in the sideBarProUpdated.html file inside Global
17+
318
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
419

520
## Available Scripts

‎package-lock.json‎

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

‎package.json‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,33 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@emotion/react": "^11.11.1",
7+
"@emotion/styled": "^11.11.0",
8+
"@fullcalendar/core": "^6.1.8",
9+
"@fullcalendar/daygrid": "^6.1.8",
10+
"@fullcalendar/interaction": "^6.1.9",
11+
"@fullcalendar/list": "^6.1.8",
12+
"@fullcalendar/react": "^6.1.9",
13+
"@fullcalendar/timegrid": "^6.1.8",
14+
"@mui/icons-material": "^5.14.9",
15+
"@mui/material": "^5.14.10",
16+
"@mui/x-data-grid": "^6.14.0",
17+
"@nivo/bar": "^0.83.0",
18+
"@nivo/core": "^0.83.0",
19+
"@nivo/geo": "^0.83.0",
20+
"@nivo/line": "^0.83.0",
21+
"@nivo/pie": "^0.83.0",
622
"@testing-library/jest-dom": "^5.17.0",
723
"@testing-library/react": "^13.4.0",
824
"@testing-library/user-event": "^13.5.0",
25+
"formik": "^2.4.5",
926
"react": "^18.2.0",
1027
"react-dom": "^18.2.0",
28+
"react-pro-sidebar": "^1.1.0-alpha.1",
29+
"react-router-dom": "^6.16.0",
1130
"react-scripts": "5.0.1",
12-
"web-vitals": "^2.1.4"
31+
"web-vitals": "^2.1.4",
32+
"yup": "^1.2.0"
1333
},
1434
"scripts": {
1535
"start": "react-scripts start",
@@ -34,5 +54,8 @@
3454
"last 1 firefox version",
3555
"last 1 safari version"
3656
]
57+
},
58+
"devDependencies": {
59+
"@babel/plugin-proposal-private-property-in-object": "7.21.11"
3760
}
3861
}

‎public/assets/user.png‎

12.8 KB
Loading

‎src/App.css‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/App.js‎

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,47 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import { ColorModeContext, useMode } from "./theme";
2+
import { CssBaseline, ThemeProvider } from "@mui/material";
3+
import { Routes, Route } from "react-router-dom";
4+
import Topbar from "./scenes/Global/Topbar";
5+
import SideBar from "./scenes/Global/SideBar";
6+
import Dashboard from "./scenes/dashboard";
7+
import Team from "./scenes/team";
8+
import Invoices from "./scenes/invoices";
9+
import Contacts from "./scenes/contacts";
10+
import Form from "./scenes/form";
11+
import Calendar from "./scenes/calendar";
12+
import FAQ from "./scenes/faq";
13+
import Bar from "./scenes/bar";
14+
import Line from "./scenes/line";
15+
import Pie from "./scenes/pie";
16+
import Geography from "./scenes/geography";
317

418
function App() {
19+
const [theme, colorMode] = useMode();
520
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
21+
<ColorModeContext.Provider value={colorMode}>
22+
<ThemeProvider theme={theme}>
23+
<CssBaseline />
24+
<div className="app">
25+
<SideBar />
26+
<main className="content">
27+
<Topbar />
28+
<Routes>
29+
<Route path="/" element={<Dashboard />} />
30+
<Route path="/team" element={<Team />} />
31+
<Route path="/contacts" element={<Contacts />} />
32+
<Route path="/invoices" element={<Invoices />} />
33+
<Route path="/form" element={<Form />} />
34+
<Route path="/calendar" element={<Calendar />} />
35+
<Route path="/faq" element={<FAQ />} />
36+
<Route path="/bar" element={<Bar />} />
37+
<Route path="/line" element={<Line />} />
38+
<Route path="/pie" element={<Pie />} />
39+
<Route path="/geography" element={<Geography />} />
40+
</Routes>
41+
</main>
42+
</div>
43+
</ThemeProvider>
44+
</ColorModeContext.Provider>
2245
);
2346
}
2447

‎src/App.test.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/components/BarChart.jsx‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import { useTheme } from "@mui/material";
2+
import { ResponsiveBar } from "@nivo/bar";
3+
import { tokens } from "../theme";
4+
import { mockBarData as data } from "../data/mockData";
5+
6+
const BarChart = ({ isDashboard = false }) => {
7+
const theme = useTheme();
8+
const colors = tokens(theme.palette.mode);
9+
10+
return (
11+
<ResponsiveBar
12+
data={data}
13+
theme={{
14+
// added
15+
axis: {
16+
domain: {
17+
line: {
18+
stroke: colors.grey[100],
19+
},
20+
},
21+
legend: {
22+
text: {
23+
fill: colors.grey[100],
24+
},
25+
},
26+
ticks: {
27+
line: {
28+
stroke: colors.grey[100],
29+
strokeWidth: 1,
30+
},
31+
text: {
32+
fill: colors.grey[100],
33+
},
34+
},
35+
},
36+
legends: {
37+
text: {
38+
fill: colors.grey[100],
39+
},
40+
},
41+
}}
42+
keys={["hot dog", "burger", "sandwich", "kebab", "fries", "donut"]}
43+
indexBy="country"
44+
margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
45+
padding={0.3}
46+
valueScale={{ type: "linear" }}
47+
indexScale={{ type: "band", round: true }}
48+
colors={{ scheme: "nivo" }}
49+
defs={[
50+
{
51+
id: "dots",
52+
type: "patternDots",
53+
background: "inherit",
54+
color: "#38bcb2",
55+
size: 4,
56+
padding: 1,
57+
stagger: true,
58+
},
59+
{
60+
id: "lines",
61+
type: "patternLines",
62+
background: "inherit",
63+
color: "#eed312",
64+
rotation: -45,
65+
lineWidth: 6,
66+
spacing: 10,
67+
},
68+
]}
69+
borderColor={{
70+
from: "color",
71+
modifiers: [["darker", "1.6"]],
72+
}}
73+
axisTop={null}
74+
axisRight={null}
75+
axisBottom={{
76+
tickSize: 5,
77+
tickPadding: 5,
78+
tickRotation: 0,
79+
legend: isDashboard ? undefined : "country", // changed
80+
legendPosition: "middle",
81+
legendOffset: 32,
82+
}}
83+
axisLeft={{
84+
tickSize: 5,
85+
tickPadding: 5,
86+
tickRotation: 0,
87+
legend: isDashboard ? undefined : "food", // changed
88+
legendPosition: "middle",
89+
legendOffset: -40,
90+
}}
91+
enableLabel={false}
92+
labelSkipWidth={12}
93+
labelSkipHeight={12}
94+
labelTextColor={{
95+
from: "color",
96+
modifiers: [["darker", 1.6]],
97+
}}
98+
legends={[
99+
{
100+
dataFrom: "keys",
101+
anchor: "bottom-right",
102+
direction: "column",
103+
justify: false,
104+
translateX: 120,
105+
translateY: 0,
106+
itemsSpacing: 2,
107+
itemWidth: 100,
108+
itemHeight: 20,
109+
itemDirection: "left-to-right",
110+
itemOpacity: 0.85,
111+
symbolSize: 20,
112+
effects: [
113+
{
114+
on: "hover",
115+
style: {
116+
itemOpacity: 1,
117+
},
118+
},
119+
],
120+
},
121+
]}
122+
role="application"
123+
barAriaLabel={function (e) {
124+
return e.id + ": " + e.formattedValue + " in country: " + e.indexValue;
125+
}}
126+
/>
127+
);
128+
};
129+
130+
export default BarChart;

0 commit comments

Comments
 (0)