├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── assets
    │   └── images
    │   │   └── dashboard.png
    ├── favicon.ico
    └── index.html
└── src
    ├── App.js
    ├── components
        ├── chart
        │   ├── Chart.jsx
        │   └── chart.scss
        ├── feature
        │   ├── Feature.jsx
        │   └── feature.scss
        ├── navbar
        │   ├── Navbar.jsx
        │   └── navbar.scss
        ├── sidebar
        │   ├── Sidebar.jsx
        │   └── sidebar.scss
        └── widget
        │   ├── Widget.jsx
        │   └── widget.scss
    ├── index.js
    └── pages
        ├── home
            ├── Home.jsx
            └── home.scss
        ├── list
            ├── List.jsx
            └── list.scss
        ├── login
            ├── Login.jsx
            └── login.scss
        ├── new
            ├── New.jsx
            └── new.scss
        └── single
            ├── Single.jsx
            └── single.scss


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Ivandjoh-AdminPanel
 2 | 
 3 | ### About
 4 | 
 5 | This is my own new project which I will continue to develop for my personal benefit. This project was created using `npx create-react-app`
 6 | 
 7 | ### Getting Started
 8 | 
 9 | To start developing this project, simply clone it by access the url's repository by typing <br />
10 | 
11 | - `git clone https://github.com/ivandi1980/ivandjoh-admin-panel.git` into your local machine.
12 | - `npm install`
13 | - `npm start`
14 | 
15 | ### ScreenShoot
16 | 
17 | ![Dashboard](./public/assets/images/dashboard.png "This is the dashboard")
18 | 
19 | ### Notes
20 | 
21 | This project is still in `Development phase` so this Document will continue to receive updates!
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "admin-panel",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.9.0",
 7 |     "@emotion/styled": "^11.8.1",
 8 |     "@mui/icons-material": "^5.6.2",
 9 |     "@mui/material": "^5.6.4",
10 |     "@testing-library/jest-dom": "^5.16.4",
11 |     "@testing-library/react": "^13.2.0",
12 |     "@testing-library/user-event": "^13.5.0",
13 |     "react": "^18.1.0",
14 |     "react-circular-progressbar": "^2.0.4",
15 |     "react-dom": "^18.1.0",
16 |     "react-router-dom": "^6.3.0",
17 |     "react-scripts": "5.0.1",
18 |     "recharts": "^2.1.14",
19 |     "sass": "^1.51.0",
20 |     "web-vitals": "^2.1.4"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/public/assets/images/dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivandj0h/ivandjoh-admin-panel/37a505740389ae429a920d72203ed7a52dbf28c2/public/assets/images/dashboard.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivandj0h/ivandjoh-admin-panel/37a505740389ae429a920d72203ed7a52dbf28c2/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="description" content="Ivandjoh Admin Panel" />
 8 |     <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 9 |     <style>
10 |       * {
11 |         font-family: 'Nunito', sans-serif;
12 |         margin: 0;
13 |       }
14 |     </style>
15 |     <title>Ivandjoh - Admin Panel</title>
16 |   </head>
17 |   <body>
18 |     <noscript>You need to enable JavaScript to run this app.</noscript>
19 |     <div id="root"></div>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter, Routes, Route } from 'react-router-dom';
 2 | 
 3 | import Home from "./pages/home/Home";
 4 | import Login from "./pages/login/Login";
 5 | import List from "./pages/list/List";
 6 | import Single from "./pages/single/Single";
 7 | import New from "./pages/new/New";
 8 | 
 9 | 
10 | function App() {
11 |   return (
12 |     <div className="App">
13 |       <BrowserRouter>
14 |         <Routes>
15 |           <Route path="/">
16 |             <Route index element={<Home />} />
17 |             <Route path="login" element={<Login />} />
18 |             <Route path="users">
19 |               <Route index element={<List />} />
20 |               <Route path=":userId" element={<Single />} />
21 |               <Route path="new" element={<New />} />
22 |             </Route>
23 |             <Route path="products">
24 |               <Route index element={<List />} />
25 |               <Route path=":productId" element={<Single />} />
26 |               <Route path="new" element={<New />} />
27 |             </Route>
28 |           </Route>
29 |         </Routes>
30 |       </BrowserRouter>
31 |     </div>
32 |   );
33 | }
34 | 
35 | export default App;
36 | 


--------------------------------------------------------------------------------
/src/components/chart/Chart.jsx:
--------------------------------------------------------------------------------
 1 | import './chart.scss'
 2 | import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 3 | 
 4 | 
 5 | const data = [
 6 |   { name: 'January', total: 1200 },
 7 |   { name: 'February', total: 3000 },
 8 |   { name: 'March', total: 1002 },
 9 |   { name: 'April', total: 900 },
10 |   { name: 'May', total: 500 },
11 |   { name: 'June', total: 3200 },
12 |   { name: 'July', total: 1200 },
13 |  
14 | ];
15 | 
16 | const Chart = () => {
17 |   return (
18 |     <div className='chart'>
19 |       <div className="title">Last 6 Months Revenue</div>
20 |         <ResponsiveContainer width="100%" aspect={2/1}>
21 |         <AreaChart width={'100%'} height={250} data={data} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
22 |             <defs>
23 |               <linearGradient id="total" x1="0" y1="0" x2="0" y2="1">
24 |                 <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
25 |                 <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
26 |               </linearGradient>
27 |             </defs>
28 |             <XAxis dataKey="name" />
29 |             <CartesianGrid strokeDasharray="3 3" className='chartGrid' />
30 |             <Tooltip />
31 |             <Area type="monotone" dataKey="total" stroke="#8884d8" fillOpacity={1} fill="url(#total)" />     
32 |         </AreaChart>                 
33 |       </ResponsiveContainer>
34 |     </div>
35 |   )
36 | }
37 | 
38 | export default Chart


--------------------------------------------------------------------------------
/src/components/chart/chart.scss:
--------------------------------------------------------------------------------
 1 | .chart {
 2 |     flex: 7;
 3 |     -webkit-box-shadow: 2px 4px 10px 1px rgba(0,0,0,0.47);
 4 |     box-shadow: 2px 4px 10px 1px rgba(201,201,201,0.47);
 5 |     padding: 10px;
 6 |     color: gray;
 7 |     display: flex;
 8 |     flex-direction: column;
 9 | 
10 |     .title {
11 |         margin-bottom: 20px;
12 |     }
13 | 
14 |     .chartGrid {
15 |         stroke: rgb(228, 225, 225);
16 |     }
17 | }


--------------------------------------------------------------------------------
/src/components/feature/Feature.jsx:
--------------------------------------------------------------------------------
 1 | import './feature.scss'
 2 | import 'react-circular-progressbar/dist/styles.css';
 3 | import MoreVertIcon from '@mui/icons-material/MoreVert';
 4 | import { CircularProgressbar } from 'react-circular-progressbar';
 5 | import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 6 | import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 7 | 
 8 | const Feature = () => {
 9 |   return (
10 |     <div className='feature'>
11 |         <div className="top">
12 |           <h1 className="title">Total Revenue</h1>
13 |           <MoreVertIcon fontSize='small' />
14 |         </div>
15 |         <div className="bottom">
16 |           <div className="featureChart">
17 |             <CircularProgressbar value={70} text={'70%'} strokeWidth={5} />
18 |           </div>
19 |             <p className="title">
20 |               Total Sales for today
21 |             </p>
22 |             <p className="amount">
23 |               $1,000,000
24 |             </p>
25 |             <p className="desc">
26 |               Previous Transaction Processing, Last Payment may not be inclided
27 |             </p>
28 |             <p className="summary">
29 |               <div className="item">
30 |                 <div className="itemTitle">Target</div>
31 |                 <div className="itemResult negative">
32 |                   <KeyboardArrowDownIcon fontSize='small' />
33 |                   <div className="resultAmount">$10.4k</div>
34 |                 </div>
35 |               </div>
36 |               <div className="item">
37 |                 <div className="itemTitle">Last Week</div>
38 |                 <div className="itemResult negative">
39 |                   <KeyboardArrowDownIcon fontSize='small' />
40 |                   <div className="resultAmount">$12.4k</div>
41 |                 </div>
42 |               </div>
43 |               <div className="item">
44 |                 <div className="itemTitle">Last Month</div>
45 |                 <div className="itemResult positive">
46 |                   <KeyboardArrowUpIcon fontSize='small' />
47 |                   <div className="resultAmount">$22.2k</div>
48 |                 </div>
49 |               </div>
50 |             </p>
51 |         </div>
52 |     </div>
53 |   )
54 | }
55 | 
56 | export default Feature


--------------------------------------------------------------------------------
/src/components/feature/feature.scss:
--------------------------------------------------------------------------------
 1 | .feature {
 2 |     flex: 3;
 3 |     -webkit-box-shadow: 2px 4px 10px 1px rgba(0,0,0,0.47);
 4 |     box-shadow: 2px 4px 10px 1px rgba(201,201,201,0.47);
 5 |     padding: 10px;
 6 |     margin-right: 20px;
 7 | 
 8 |     .top {
 9 |         display: flex;
10 |         align-items: center;
11 |         justify-content: space-between;
12 |         color: gray;
13 |         
14 |         .title {
15 |             font-size: 16px;
16 |             font-weight: 500;
17 |         }
18 |     }
19 | 
20 |     .bottom {
21 |         padding: 20px;
22 |         display: flex;
23 |         flex-direction: column;
24 |         align-items: center;
25 |         justify-content: center;
26 |         gap: 15px;
27 | 
28 |         .featureChart {
29 |             width: 100px;
30 |             height: 100px;
31 |         }
32 | 
33 |         .title {
34 |             font-weight: 500;
35 |             color: gray;
36 |         }
37 | 
38 |         .amount {
39 |             font-size: 30px;
40 |         }
41 | 
42 |         .desc {
43 |             font-weight: 300;
44 |             font-size: 12px;
45 |             color: grey;
46 |             text-align: center;
47 |         }
48 | 
49 |         .summary {
50 |             width: 100%;
51 |             display: flex;
52 |             align-items: center;
53 |             justify-content: space-between;
54 | 
55 |             .item {
56 |                 text-align: center;
57 | 
58 |                 .itemTitle {
59 |                     font-weight: 500;
60 |                     color: gray;
61 |                 }
62 | 
63 |                 .itemResult {
64 |                     display: flex;
65 |                     align-items: center;
66 |                     margin-top: 10px;
67 |                     font-size: 14px;
68 | 
69 |                     &.positive {
70 |                         color: green;
71 |                     }
72 | 
73 |                     &.negative {
74 |                         color: red;
75 |                     }
76 |                 }
77 |             }
78 |         }
79 |     }
80 | }


--------------------------------------------------------------------------------
/src/components/navbar/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import './navbar.scss'
 2 | import SearchIcon from '@mui/icons-material/Search';
 3 | import LanguageIcon from '@mui/icons-material/Language';
 4 | import Brightness4Icon from '@mui/icons-material/Brightness4';
 5 | import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
 6 | import MessageIcon from '@mui/icons-material/Message';
 7 | 
 8 | const Navbar = () => {
 9 |   return (
10 |     <div className='navbar'>
11 |       <div className="wrapper">
12 |         <div className="search">
13 |           <input type="text" placeholder='Search...' />
14 |           <SearchIcon />
15 |         </div>
16 |         <div className="items">
17 |           <div className="item">
18 |             <LanguageIcon className='icon' />
19 |             English
20 |           </div>
21 |           <div className="item">
22 |             <Brightness4Icon className='icon' />
23 |           </div>
24 |           <div className="item">
25 |             <NotificationsActiveIcon className='icon' />
26 |             <div className='counter'>1</div>
27 |           </div>
28 |           <div className="item">
29 |             <MessageIcon className='icon' />
30 |             <div className='counter'>2</div>
31 |           </div>
32 |           <div className="item">
33 |             <img src='https://www.iriset.in/tms/uploads/profile/profile.png' alt="user" className='avatar' />
34 |           </div>
35 |         </div>
36 |       </div>
37 |     </div>
38 |   )
39 | }
40 | 
41 | export default Navbar


--------------------------------------------------------------------------------
/src/components/navbar/navbar.scss:
--------------------------------------------------------------------------------
 1 | .navbar {
 2 |     height: 50px;
 3 |     border-bottom: 0.5px solid rgb(230, 227, 227);
 4 |     display: flex;
 5 |     align-items: center;
 6 |     font-size: 14px;
 7 |     color: gray;
 8 | 
 9 |     .wrapper {
10 |         display: flex;
11 |         align-items: center;
12 |         width: 100%;
13 |         padding: 20px;
14 |         justify-content: space-between;
15 | 
16 |         .search {
17 |             display: flex;
18 |             align-items: center;
19 |             border: 00.5px solid lightgrey;
20 |             padding: 3px;
21 | 
22 |             input {
23 |                 border: none;
24 |                 outline: none;
25 |                 background: transparent;
26 | 
27 |                 ::placeholder {
28 |                     font-size: 12px;
29 |                 }
30 |             }
31 |         }
32 | 
33 |         .items {
34 |             display: flex;
35 |             align-items: center;
36 | 
37 |             .item {
38 |                 display: flex;
39 |                 align-items: center;
40 |                 margin-right: 20px;
41 |                 position: relative;
42 | 
43 |                 .icon {
44 |                     font-size: 20px;
45 |                 }
46 | 
47 |                 .counter {
48 |                     width: 15px;
49 |                     height: 15px;
50 |                     background-color: red;
51 |                     border-radius: 50%;
52 |                     color: white;
53 |                     display: flex;
54 |                     align-items: center;
55 |                     justify-content: center;
56 |                     font-size: 10px;
57 |                     font-weight: bold;
58 |                     position: absolute;
59 |                     top: -5px;
60 |                     right: -5px;
61 |                 }
62 | 
63 |                 .avatar {
64 |                     width: 30px;
65 |                     height: 30px;
66 |                     border-radius: 50%;
67 |                 }
68 |             }
69 |         }
70 |     }
71 | }


--------------------------------------------------------------------------------
/src/components/sidebar/Sidebar.jsx:
--------------------------------------------------------------------------------
 1 | import './sidebar.scss'
 2 | import DashboardIcon from '@mui/icons-material/Dashboard';
 3 | import GroupIcon from '@mui/icons-material/Group';
 4 | import Inventory2Icon from '@mui/icons-material/Inventory2';
 5 | import ProductionQuantityLimitsIcon from '@mui/icons-material/ProductionQuantityLimits';
 6 | import LocalShippingIcon from '@mui/icons-material/LocalShipping';
 7 | import QueryStatsIcon from '@mui/icons-material/QueryStats';
 8 | import NotificationsIcon from '@mui/icons-material/Notifications';
 9 | import HealthAndSafetyIcon from '@mui/icons-material/HealthAndSafety';
10 | import PsychologyIcon from '@mui/icons-material/Psychology';
11 | import SettingsIcon from '@mui/icons-material/Settings';
12 | import PersonIcon from '@mui/icons-material/Person';
13 | import ExitToAppIcon from '@mui/icons-material/ExitToApp';
14 | 
15 | const Sidebar = () => {
16 |   return (
17 |     <div className='sidebar'>
18 |         <div className='top'>
19 |           <span className='logo'>Admin Panel</span>
20 |         </div>
21 |         <hr />
22 |         <div className='center'>
23 |           <ul>
24 |             <p className="title">MAIN MENU</p>
25 |             <li>
26 |               <DashboardIcon className='icon' />
27 |               <span>Dashboard</span>
28 |             </li>
29 |             <p className="title">LISTS MENU</p>
30 |             <li>
31 |               <GroupIcon className='icon' />
32 |               <span>Users</span>
33 |             </li>
34 |             <li>
35 |               <Inventory2Icon className='icon' />
36 |               <span>Products</span>
37 |             </li>
38 |             <li>
39 |               <ProductionQuantityLimitsIcon className='icon' />
40 |               <span>Orders</span>
41 |             </li>
42 |             <li>
43 |               <LocalShippingIcon className='icon' />
44 |               <span>Delivery</span>
45 |             </li>
46 |             <p className="title">OTHER MENU</p>
47 |             <li>
48 |               <QueryStatsIcon className='icon' />
49 |               <span>Status</span>
50 |             </li>
51 |             <li>
52 |               <NotificationsIcon className='icon' />
53 |               <span>Notifications</span>
54 |             </li>
55 |             <p className="title">SERVICES</p>
56 |             <li>
57 |               <HealthAndSafetyIcon className='icon' />
58 |               <span>System Health</span>
59 |             </li>
60 |             <li>
61 |               <PsychologyIcon className='icon' />
62 |               <span>Logs</span>
63 |             </li>
64 |             <li>
65 |               <SettingsIcon className='icon' />
66 |               <span>Settings</span>
67 |             </li>
68 |             <p className="title">ACCOUNT</p>
69 |             <li>
70 |               <PersonIcon className='icon' />
71 |               <span>Profile</span>
72 |             </li>
73 |             <li>
74 |               <ExitToAppIcon className='icon' />
75 |               <span>Logout</span>
76 |             </li>
77 |           </ul>
78 |         </div>
79 |         <div className='bottom'>
80 |           <div className='colorOptions'></div>
81 |           <div className='colorOptions'></div>
82 |         </div>
83 |     </div>
84 |   )
85 | }
86 | 
87 | export default Sidebar


--------------------------------------------------------------------------------
/src/components/sidebar/sidebar.scss:
--------------------------------------------------------------------------------
 1 | .sidebar {
 2 |     flex: 1;
 3 |     border: 0.5px solid rgb(230, 227, 227);
 4 |     min-height: 100vh;
 5 |     background-color: white;
 6 | 
 7 |     .top {
 8 |         height: 50px;
 9 |         display: flex;
10 |         align-items: center;
11 |         justify-content: center;
12 | 
13 |         .logo {
14 |             font-size: 20px;
15 |             font-weight: bold;
16 |             color: #1f5ce0;
17 |         }
18 |     }
19 | 
20 |     hr {
21 |         height: 0;
22 |         border: 0.5px solid rgb(230, 227, 227);
23 |     }
24 | 
25 |     .center {
26 |         padding-left: 10px;
27 | 
28 |         ul {
29 |             list-style: none;
30 |             margin: 0;
31 |             padding: 0;
32 | 
33 |             .title {
34 |                 font-size: 10px;
35 |                 font-weight: bold;
36 |                 color: gray;
37 |                 margin-top: 15px;
38 |                 margin-bottom: 5px;
39 |             }
40 | 
41 |             li {
42 |                 display: flex;
43 |                 align-items: center;
44 |                 padding: 5px;
45 |                 cursor: pointer;
46 | 
47 |                 &:hover {
48 |                     background-color: #ece8ff;
49 |                 }
50 | 
51 |                 .icon {
52 |                     font-size: 18px;
53 |                     color: #1f5ce0;
54 |                 }
55 | 
56 |                 span {
57 |                     font-size: 13px;
58 |                     font-weight: 600;
59 |                     color: #888;
60 |                     margin-left: 10px;
61 |                 }
62 |             }
63 |         }
64 |     }
65 |     
66 |     .bottom {
67 |         display: flex;
68 |         align-items: center;
69 |         margin: 10px;
70 | 
71 |         .colorOptions {
72 |             width: 20px;
73 |             height: 20px;
74 |             border-radius: 5px;
75 |             border: 1px solid #134bc3;
76 |             cursor: pointer;
77 |             margin: 5px;
78 | 
79 |             &:nth-child(1) {
80 |                 background-color: whitesmoke;
81 |             }
82 |             &:nth-child(2) {
83 |                 background-color: #333;
84 |             }
85 |         }
86 |     }
87 | }


--------------------------------------------------------------------------------
/src/components/widget/Widget.jsx:
--------------------------------------------------------------------------------
 1 | import './widget.scss'
 2 | import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 3 | import PersonOutlinedIcon from '@mui/icons-material/PersonOutlined';
 4 | import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined';
 5 | import MonetizationOnOutlinedIcon from '@mui/icons-material/MonetizationOnOutlined';
 6 | import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined';
 7 | 
 8 | 
 9 | const Widget = ({type}) => {
10 | 
11 |     let data;
12 | 
13 |     // temporary amount of money
14 |     const amount = Math.floor(Math.random() * 100);
15 |     const diff = Math.floor(Math.random() * 100);
16 | 
17 |     switch (type) {
18 |         case 'users':
19 |             data = {
20 |                 title: 'USERS',
21 |                 isMoney: false,
22 |                 link: 'See All Users',
23 |                 icon: (
24 |                     <PersonOutlinedIcon className='icon' style={{
25 |                         color: 'crimson', 
26 |                         backgroundColor: 'rgba(255, 0, 0, 0.2)'}} />
27 |                 ),
28 |             }
29 |             break;
30 |         case 'orders':
31 |             data = {
32 |                 title: 'ORDERS',
33 |                 isMoney: false,
34 |                 link: 'See All Oders',
35 |                 icon: (
36 |                     <ShoppingCartOutlinedIcon className='icon' style={{
37 |                         color: 'goldenrod', 
38 |                         backgroundColor: 'rgba(218, 65, 32, 0.2)'}} />
39 |                 ),
40 |             }
41 |             break;
42 |         case 'earnings':
43 |             data = {
44 |                 title: 'EARNINGS',
45 |                 isMoney: true,
46 |                 link: 'View Earnings',
47 |                 icon: (
48 |                     <MonetizationOnOutlinedIcon className='icon'  style={{
49 |                         color: 'green', 
50 |                         backgroundColor: 'rgba(0, 128, 0, 0.2)'}} />
51 |                 ),
52 |             }
53 |             break;
54 |         case 'balance':
55 |             data = {
56 |                 title: 'BALLANCE',
57 |                 isMoney: true,
58 |                 link: 'See Details',
59 |                 icon: (
60 |                     <AccountBalanceWalletOutlinedIcon className='icon' style={{
61 |                         color: 'purple', 
62 |                         backgroundColor: 'rgba(128, 0, 128, 0.2)'}} />
63 |                 ),
64 |             }
65 |             break;
66 |         default:
67 |             break;
68 |     }
69 | 
70 | 
71 | 
72 |   return (
73 |     <div className='widget'>
74 |         <div className='left'>
75 |             <span className='title'>{data.title}</span>
76 |             <span className='counter'>{data.isMoney && '$'} {amount}</span>
77 |             <span className='link'>{data.link}</span>
78 |         </div>
79 |         <div className='right'>
80 |             <div className="percentage positive">
81 |                 <KeyboardArrowUpIcon />
82 |                 {diff}%
83 |             </div>
84 |                 {data.icon}
85 |         </div>
86 |     </div>
87 |   )
88 | }
89 | 
90 | export default Widget


--------------------------------------------------------------------------------
/src/components/widget/widget.scss:
--------------------------------------------------------------------------------
 1 | .widget {
 2 |     display: flex;
 3 |     flex: 1px;
 4 |     justify-content: space-between;
 5 |     padding: 10px;
 6 |     -webkit-box-shadow: 2px 4px 10px 1px rgba(0,0,0,0.47);
 7 |     box-shadow: 2px 4px 10px 1px rgba(201,201,201,0.47);
 8 |     border-radius: 10px;
 9 |     height: 100px;
10 | 
11 |     .left, 
12 |     .right {
13 |         display: flex;
14 |         flex-direction: column;
15 |         justify-content: space-between;
16 |     }
17 | 
18 |     .title {
19 |         font-weight: bold;
20 |         font-size: 14px;
21 |         color: rgb(160, 160, 160);
22 |     }
23 | 
24 |     .counter {
25 |         font-size: 28px;
26 |         font-weight: 300;
27 |     }
28 | 
29 |     .link {
30 |         width: max-content;
31 |         font-size: 12px;
32 |         border-bottom: 1px solid grey;
33 |     }
34 | 
35 |     .percentage {
36 |         display: flex;
37 |         align-items: center;
38 |         font-style: 14px;
39 | 
40 |         &.positive {
41 |             color: green;
42 |         }
43 |         &.negative {
44 |             color: red;
45 |         }
46 |     }
47 | 
48 |     .icon {
49 |         font-size: 18px;
50 |         padding: 5px;
51 |         border-radius: 5px;
52 |         align-self: flex-end;
53 |     }
54 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import App from './App';
 4 | 
 5 | const root = ReactDOM.createRoot(document.getElementById('root'));
 6 | root.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>
10 | );
11 | 


--------------------------------------------------------------------------------
/src/pages/home/Home.jsx:
--------------------------------------------------------------------------------
 1 | import './home.scss'
 2 | import Sidebar from '../../components/sidebar/Sidebar'
 3 | import Navbar from '../../components/navbar/Navbar'
 4 | import Widget from '../../components/widget/Widget'
 5 | import Feature from '../../components/feature/Feature'
 6 | import Chart from '../../components/chart/Chart'
 7 | 
 8 | const Home = () => {
 9 |   return (
10 |     <div className="home">
11 |         <Sidebar />
12 |         <div className="homeContainer">
13 |           <Navbar />
14 |           <div className='widgets'>
15 |             <Widget type='users' />
16 |             <Widget type='orders' />
17 |             <Widget type='earnings' />
18 |             <Widget type='balance' />
19 |           </div>
20 |           <div className="charts">
21 |             <Feature />
22 |             <Chart />
23 |           </div>
24 |         </div>
25 |     </div>
26 |   )
27 | }
28 | 
29 | export default Home


--------------------------------------------------------------------------------
/src/pages/home/home.scss:
--------------------------------------------------------------------------------
 1 | .home {
 2 |     display: flex;
 3 |     .homeContainer {
 4 |         flex: 6;
 5 | 
 6 |         .widgets, .chart {
 7 |             display: flex;
 8 |             padding: 20px;
 9 |             gap: 20px;
10 |         }
11 | 
12 |         .charts {
13 |             display: flex;
14 |             padding: 5px 20px;
15 |         }
16 |     }
17 | }


--------------------------------------------------------------------------------
/src/pages/list/List.jsx:
--------------------------------------------------------------------------------
 1 | import './list.scss'
 2 | 
 3 | 
 4 | const List = () => {
 5 |   return (
 6 |     <div>List</div>
 7 |   )
 8 | }
 9 | 
10 | export default List


--------------------------------------------------------------------------------
/src/pages/list/list.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivandj0h/ivandjoh-admin-panel/37a505740389ae429a920d72203ed7a52dbf28c2/src/pages/list/list.scss


--------------------------------------------------------------------------------
/src/pages/login/Login.jsx:
--------------------------------------------------------------------------------
 1 | import './login.scss'
 2 | 
 3 | 
 4 | const Login = () => {
 5 |   return (
 6 |     <div>Login</div>
 7 |   )
 8 | }
 9 | 
10 | export default Login


--------------------------------------------------------------------------------
/src/pages/login/login.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivandj0h/ivandjoh-admin-panel/37a505740389ae429a920d72203ed7a52dbf28c2/src/pages/login/login.scss


--------------------------------------------------------------------------------
/src/pages/new/New.jsx:
--------------------------------------------------------------------------------
 1 | import './new.scss'
 2 | 
 3 | 
 4 | const New = () => {
 5 |   return (
 6 |     <div>New</div>
 7 |   )
 8 | }
 9 | 
10 | export default New


--------------------------------------------------------------------------------
/src/pages/new/new.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivandj0h/ivandjoh-admin-panel/37a505740389ae429a920d72203ed7a52dbf28c2/src/pages/new/new.scss


--------------------------------------------------------------------------------
/src/pages/single/Single.jsx:
--------------------------------------------------------------------------------
1 | import './single.scss'
2 | 
3 | const Single = () => {
4 |   return (
5 |     <div>Single</div>
6 |   )
7 | }
8 | 
9 | export default Single


--------------------------------------------------------------------------------
/src/pages/single/single.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivandj0h/ivandjoh-admin-panel/37a505740389ae429a920d72203ed7a52dbf28c2/src/pages/single/single.scss


--------------------------------------------------------------------------------