Skip to content

Commit 3ab4c1c

Browse files
nooobcodernooobcoder
committed
admin dashboard
1 parent 29cd566 commit 3ab4c1c

38 files changed

+3571
-0
lines changed

‎react-mui-admin-dashboard/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎react-mui-admin-dashboard/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

‎react-mui-admin-dashboard/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "admin-dashboard-mui",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite --host 0.0.0.0 --port 4848",
7+
"build": "vite build",
8+
"preview": "vite preview --host 0.0.0.0 --port 5858"
9+
},
10+
"dependencies": {
11+
"@emotion/react": "^11.9.0",
12+
"@emotion/styled": "^11.8.1",
13+
"@material-ui/core": "^4.12.4",
14+
"@material-ui/icons": "^4.11.3",
15+
"@mui/icons-material": "^5.6.2",
16+
"@mui/material": "^5.7.0",
17+
"@mui/x-data-grid": "^5.12.0",
18+
"react": "^18.0.0",
19+
"react-dom": "^18.0.0",
20+
"react-router-dom": "^6.3.0",
21+
"recharts": "^2.1.10"
22+
},
23+
"devDependencies": {
24+
"@types/react": "^18.0.0",
25+
"@types/react-dom": "^18.0.0",
26+
"@vitejs/plugin-react": "^1.3.0",
27+
"vite": "^2.9.9"
28+
}
29+
}

‎react-mui-admin-dashboard/src/App.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-logo {
6+
height: 40vmin;
7+
pointer-events: none;
8+
}
9+
10+
@media (prefers-reduced-motion: no-preference) {
11+
.App-logo {
12+
animation: App-logo-spin infinite 20s linear;
13+
}
14+
}
15+
16+
.App-header {
17+
background-color: #282c34;
18+
min-height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
font-size: calc(10px + 2vmin);
24+
color: white;
25+
}
26+
27+
.App-link {
28+
color: #61dafb;
29+
}
30+
31+
@keyframes App-logo-spin {
32+
from {
33+
transform: rotate(0deg);
34+
}
35+
to {
36+
transform: rotate(360deg);
37+
}
38+
}
39+
40+
button {
41+
font-size: calc(10px + 2vmin);
42+
}

‎react-mui-admin-dashboard/src/App.jsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
2+
3+
import Sidebar from "./components/Sidebar";
4+
import Topbar from "./components/Topbar";
5+
import "./App.css";
6+
import Home from "./pages/Home";
7+
import UserList from "./pages/UserList";
8+
import User from "./pages/User";
9+
import NewUser from "./pages/NewUser";
10+
import ProductList from "./pages/ProductList";
11+
import Product from "./pages/Product";
12+
import NewProduct from "./pages/NewProduct";
13+
14+
function App() {
15+
return (
16+
<Router>
17+
<Topbar />
18+
<div className="container">
19+
<Sidebar />
20+
<Routes>
21+
<Route path="/" element={<Home />} />
22+
<Route path="/users" element={<UserList />} />
23+
<Route path="/user/:userId" element={<User />} />
24+
<Route path="/newUser" element={<NewUser />} />
25+
<Route path="/products" element={<ProductList />} />
26+
<Route path="/product/:productId" element={<Product />} />
27+
<Route path="/newproduct" element={<NewProduct />} />
28+
</Routes>
29+
</div>
30+
</Router>
31+
);
32+
}
33+
34+
export default App;

‎react-mui-admin-dashboard/src/components/Chart.jsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import '../styles/component/chart.css'
2+
import {
3+
LineChart,
4+
Line,
5+
XAxis,
6+
CartesianGrid,
7+
Tooltip,
8+
ResponsiveContainer,
9+
} from "recharts";
10+
11+
function Chart({ title, data, dataKey, grid }) {
12+
13+
return (
14+
<div className="chart">
15+
<h3 className="chartTitle">{title}</h3>
16+
<ResponsiveContainer width="100%" aspect={4 / 1}>
17+
<LineChart data={data}>
18+
<XAxis dataKey="name" stroke="#5550bd" />
19+
<Line type="monotone" dataKey={dataKey} stroke="#5550bd" />
20+
<Tooltip />
21+
{grid && <CartesianGrid stroke="#e0dfdf" strokeDasharray="5 5" />}
22+
</LineChart>
23+
</ResponsiveContainer>
24+
</div>
25+
);
26+
}
27+
28+
export default Chart;

‎react-mui-admin-dashboard/src/components/FeaturedInfo.jsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import '../styles/component/featuredInfo.css'
2+
3+
import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
4+
5+
function FeaturedInfo() {
6+
return (
7+
<div className="featured">
8+
<div className="featuredItem">
9+
<span className="featuredTitle">Revanue</span>
10+
<div className="featuredMoneyContainer">
11+
<span className="featuredMoney">$2,415</span>
12+
<span className="featuredMoneyRate">
13+
-11.4 <ArrowDownward className="featuredIcon negative"/>
14+
</span>
15+
</div>
16+
<span className="featuredSub">Compared to last month</span>
17+
</div>
18+
<div className="featuredItem">
19+
<span className="featuredTitle">Sales</span>
20+
<div className="featuredMoneyContainer">
21+
<span className="featuredMoney">$4,415</span>
22+
<span className="featuredMoneyRate">
23+
-1.4 <ArrowDownward className="featuredIcon negative"/>
24+
</span>
25+
</div>
26+
<span className="featuredSub">Compared to last month</span>
27+
</div>
28+
<div className="featuredItem">
29+
<span className="featuredTitle">Cost</span>
30+
<div className="featuredMoneyContainer">
31+
<span className="featuredMoney">$2,225</span>
32+
<span className="featuredMoneyRate">
33+
+2.4 <ArrowUpward className="featuredIcon"/>
34+
</span>
35+
</div>
36+
<span className="featuredSub">Compared to last month</span>
37+
</div>
38+
</div>
39+
);
40+
}
41+
42+
export default FeaturedInfo;

‎react-mui-admin-dashboard/src/components/Sidebar.jsx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import '../styles/component/sidebar.css'
2+
3+
import {
4+
LineStyle,
5+
Timeline,
6+
TrendingUp,
7+
PermIdentity,
8+
Storefront,
9+
AttachMoney,
10+
BarChart,
11+
MailOutline,
12+
DynamicFeed,
13+
ChatBubbleOutline,
14+
WorkOutline,
15+
Report,
16+
} from "@material-ui/icons";
17+
import { Link } from "react-router-dom";
18+
19+
function Sidebar() {
20+
return (
21+
<div className="sidebar">
22+
<div className="sidebarWrapper">
23+
<div className="sidebarMenu">
24+
<h3 className="sidebarTitle">Dashboard</h3>
25+
<ul className="sidebarList">
26+
<Link to="/" className="link">
27+
<li className="sidebarListItem active">
28+
<LineStyle className="sidebarIcon" />
29+
Home
30+
</li>
31+
</Link>
32+
<li className="sidebarListItem">
33+
<Timeline className="sidebarIcon" />
34+
Analytics
35+
</li>
36+
<li className="sidebarListItem">
37+
<TrendingUp className="sidebarIcon" />
38+
Sales
39+
</li>
40+
</ul>
41+
</div>
42+
<div className="sidebarMenu">
43+
<h3 className="sidebarTitle">Quick Menu</h3>
44+
<ul className="sidebarList">
45+
<Link to="/users" className="link">
46+
<li className="sidebarListItem">
47+
<PermIdentity className="sidebarIcon" />
48+
Users
49+
</li>
50+
</Link>
51+
<Link to="/products" className="link">
52+
<li className="sidebarListItem">
53+
<Storefront className="sidebarIcon" />
54+
Products
55+
</li>
56+
</Link>
57+
<li className="sidebarListItem">
58+
<AttachMoney className="sidebarIcon" />
59+
Transactions
60+
</li>
61+
<li className="sidebarListItem">
62+
<BarChart className="sidebarIcon" />
63+
Reports
64+
</li>
65+
</ul>
66+
</div>
67+
<div className="sidebarMenu">
68+
<h3 className="sidebarTitle">Notifications</h3>
69+
<ul className="sidebarList">
70+
<li className="sidebarListItem">
71+
<MailOutline className="sidebarIcon" />
72+
Mail
73+
</li>
74+
<li className="sidebarListItem">
75+
<DynamicFeed className="sidebarIcon" />
76+
Feedback
77+
</li>
78+
<li className="sidebarListItem">
79+
<ChatBubbleOutline className="sidebarIcon" />
80+
Messages
81+
</li>
82+
</ul>
83+
</div>
84+
<div className="sidebarMenu">
85+
<h3 className="sidebarTitle">Staff</h3>
86+
<ul className="sidebarList">
87+
<li className="sidebarListItem">
88+
<WorkOutline className="sidebarIcon" />
89+
Manage
90+
</li>
91+
<li className="sidebarListItem">
92+
<Timeline className="sidebarIcon" />
93+
Analytics
94+
</li>
95+
<li className="sidebarListItem">
96+
<Report className="sidebarIcon" />
97+
Reports
98+
</li>
99+
</ul>
100+
</div>
101+
</div>
102+
</div>
103+
);
104+
}
105+
106+
export default Sidebar;

‎react-mui-admin-dashboard/src/components/Topbar.jsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import '../styles/component/topbar.css'
3+
// import "./topbar.css";
4+
import { NotificationsNone, Language, Settings } from "@material-ui/icons";
5+
6+
function Topbar() {
7+
return (
8+
<div className="topbar">
9+
<div className="topbarWrapper">
10+
<div className="topLeft">
11+
<span className="logo">OpenReplay</span>
12+
</div>
13+
<div className="topRight">
14+
<div className="topbarIconContainer">
15+
<NotificationsNone />
16+
<span className="topIconBadge">2</span>
17+
</div>
18+
<div className="topbarIconContainer">
19+
<Language />
20+
<span className="topIconBadge">2</span>
21+
</div>
22+
<div className="topbarIconContainer">
23+
<Settings />
24+
</div>
25+
<img src="https://images.pexels.com/photos/1526814/pexels-photo-1526814.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" className="topAvatar" />
26+
</div>
27+
</div>
28+
</div>
29+
);
30+
}
31+
32+
export default Topbar;

0 commit comments

Comments
 (0)