react admin dashboard material ui

17 نوفمبر 2022

تفاعل لوحة معلومات المسؤول | رابط مباشر

التكنولوجيا المستخدمة

1. رد فعل
2. واجهة المستخدم المادية
3. Formik
4. نعم
5. مخطط نيفو
6. الوصر الكامل
7. رد فعل pro-sidebar

يتكون هذا التطبيق من

• الوضع الخفيف والظلام
• ملخص لوحة القيادة
• 3 صفحات جدول بيانات مختلفة
• صفحة نموذج إدخال المستخدم
• تكامل التقويم
• صفحة الأسئلة الشائعة
• 4 مخططات مختلفة

سياق التعلم

• ... انتشار مشغل + تحميل خاصية الكائن الأساسي الشرطي على مستوى السمة
• قدم مع أداة CSS ==> مبيد الآفات
• بواسطة مجموعة من الكائن {text ، icon} ، بناء القائم الجانبي
• عرض بيانات تخطيط المادة-عمود ROW-UI ...
• استخدام تخطيط data-grid من material ui ...
• اسم المسار يصبح عنصر قائمة محدد ، بعد التحديث أيضًا ...
• التحقق من صحة نموذج إدخال المستخدم yup التحقق ...
• رقم الهاتف regex نمط من سلسلة الإدخال ...
• استخدام [email protected] مع css ...
• استخدام مكتبة full-calendar ...
• استخدام نظام nivo chart ...
• ترحيل التجربة من Vite إلى الرد ،
  • لأن Vite لديها بعض issus مع lib الكامل ...

حزم قاعدة الغزل/lib ...

لا	اسم الحزم	وصف
01	الغزل أضف react-router-dom	الملاحة URL
02	YARN أضف [email protected]	رد فعل الشريط الجانبي Pro
03	الغزل إضافة formik	عناصر النماذج
04	الغزل أضف yup	صحة النموذج
05	الغزل إضافة @mui/material	واجهة المستخدم المادية
06	الغزل إضافة @emotion/react	واجهة المستخدم المادية
07	الغزل إضافة @emotion/styled	واجهة المستخدم المادية
08	الغزل إضافة @emotion/styled	واجهة المستخدم المادية
09	الغزل إضافة @mui/x-data-grid	واجهة المستخدم المادية
10	الغزل إضافة @mui/icons-material	واجهة المستخدم المادية
11	الغزل إضافة @fullcalendar/core	تقويم كامل؟
12	الغزل إضافة @fullcalendar/daygrid	تقويم كامل؟
13	الغزل إضافة @fullcalendar/timegrid	تقويم كامل؟
14	الغزل إضافة @fullcalendar/list	تقويم كامل؟
15	الغزل إضافة @fullcalendar/interaction	تقويم كامل؟
16	الغزل إضافة @fullcalendar/react	تقويم كامل؟
17	الغزل إضافة @nivo/core	مخطط نيفو؟
18	الغزل إضافة @nivo/pie	مخطط نيفو؟
19	الغزل إضافة @nivo/bar	مخطط نيفو؟
20	الغزل إضافة @nivo/line	مخطط نيفو؟
21	الغزل إضافة @nivo/geo	مخطط نيفو؟

التسلسل الهرمي للملف والمجلد

 ?
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