17 Nov 2022
React Admin Dashboard | Live Link
- React
- Material UI
- Formik
- Yup
- Nivo chart
- Full-calendar
- React-Pro-Sidebar
- Light & Dark Mode
- Dashboard Summary
- 3 Different Data Table Pages
- User Input Form Page
- Calendar Integration
- FAQ Page
- 4 Different Charts
- ...spread operator + conditional base object property loading at theme level
- introduce with css tool ==> Pesticide
- by array of object{text,icon}, construct side-menu
- row-column material-ui layout data display...
- usage of
data-grid
layout ofmaterial ui
... - path name become selected menu item, after refresh also...
- user input form validation
yup
checking... - phone number regex pattern from input string...
- usage of
[email protected]
with itscss
... - usage of
full-calendar
library... - usage of
nivo chart
system... - migrate experience from Vite to React,
- because Vite have some issus with full-calendar lib...
No | Packages Name | Description |
---|---|---|
01 | yarn add react-router-dom |
URL Navigation |
02 | yarn add [email protected] |
React Pro Sidebar |
03 | yarn add formik |
Form Elements |
04 | yarn add yup |
Form Validations |
05 | yarn add @mui/material |
Material UI |
06 | yarn add @emotion/react |
Material UI |
07 | yarn add @emotion/styled |
Material UI |
08 | yarn add @emotion/styled |
Material UI |
09 | yarn add @mui/x-data-grid |
Material UI |
10 | yarn add @mui/icons-material |
Material UI |
11 | yarn add @fullcalendar/core |
Full Calendar ๐ |
12 | yarn add @fullcalendar/daygrid |
Full Calendar ๐ |
13 | yarn add @fullcalendar/timegrid |
Full Calendar ๐ |
14 | yarn add @fullcalendar/list |
Full Calendar ๐ |
15 | yarn add @fullcalendar/interaction |
Full Calendar ๐ |
16 | yarn add @fullcalendar/react |
Full Calendar ๐ |
17 | yarn add @nivo/core |
Nivo Chart ๐ |
18 | yarn add @nivo/pie |
Nivo Chart ๐ |
19 | yarn add @nivo/bar |
Nivo Chart ๐ |
20 | yarn add @nivo/line |
Nivo Chart ๐ |
21 | yarn add @nivo/geo |
Nivo Chart ๐ |
๐จ
src
โโโ components
| โโโ BarChart.jsx
| โโโ GeographyChart.jsx
| โโโ Header.jsx
| โโโ index.js
| โโโ LineChart.jsx
| โโโ PieChart.jsx
| โโโ ProgressCircle.jsx
| โโโ StatBox.jsx
|
โโโ constants
| โโโ contactsColumns.js
| โโโ faq.js
| โโโ inputFormFields.js
| โโโ inputFormValues.js
| โโโ invoicesColumns.js
| โโโ mockData.js
| โโโ mockGeoFeatures.js
| โโโ sidebarMenu.js
| โโโ teamColumns.js
|
โโโ pages
| | Dashboard.jsx
| | index.js
| |
| โโโ charts
| | โโโ Bar.jsx
| | โโโ Geography.jsx
| | โโโ Line.jsx
| | โโโ Pie.jsx
| |
| โโโ global
| | โโโ SidebarMenu.jsx
| | โโโ SidebarMenuItem.jsx
| | โโโ Topbar.jsx
| |
| โโโ info
| | โโโ Contacts.jsx
| | โโโ Invoices.jsx
| | โโโ Team.jsx
| |
| โโโ inputs
| โโโ Calendars.jsx
| โโโ FAQ.jsx
| โโโ InputForm.jsx
|
โโโ styles
| โโโ index.css
| โโโ theme.js
|
โโโ App.jsx
โโโ index.js
๐จ
tree /f