From d2bb26e6449408c3501985268d7010d3645c55ae Mon Sep 17 00:00:00 2001 From: Dimas Atmodjo Date: Tue, 26 Nov 2024 11:38:26 +0700 Subject: [PATCH] update teacher dashboard --- .../teacher/dashboard/hooks/useDashboard.jsx | 105 ++++++++++ .../dashboard/services/serviceDashboard.jsx | 48 +++++ .../teacher/dashboard/views/Dashboard.jsx | 181 +++++++----------- 3 files changed, 220 insertions(+), 114 deletions(-) create mode 100644 src/roles/teacher/dashboard/hooks/useDashboard.jsx create mode 100644 src/roles/teacher/dashboard/services/serviceDashboard.jsx diff --git a/src/roles/teacher/dashboard/hooks/useDashboard.jsx b/src/roles/teacher/dashboard/hooks/useDashboard.jsx new file mode 100644 index 0000000..98b48a6 --- /dev/null +++ b/src/roles/teacher/dashboard/hooks/useDashboard.jsx @@ -0,0 +1,105 @@ +import { useState, useEffect } from 'react'; +import dashboardService from '../services/serviceDashboard'; + +const useDashboard = () => { + const [totalStudent, setTotalStudent] = useState("-"); + const [totalTeacher, setTotalTeacher] = useState("2"); + const [totalClass, setTotalClass] = useState("-"); + const [reports, setReports] = useState([]); + const [loadingReports, setLoadingReports] = useState(true); + const [activity, setActivity] = useState([]); + const [loadingActivity, setLoadingActivity] = useState(true); + const [error, setError] = useState(null); + + const fetchTotalStudent = async () => { + try { + const data = await dashboardService.fetchTotalStudent("", "", 1, 0); + setTotalStudent(data.payload.totalStudents); + } catch (err) { + setError(err); + } + }; + + const fetchTotalTeacher = async () => { + try { + const data = await dashboardService.fetchTotalTeacher("", "", 1, 0); + setTotalTeacher(data.payload.totalTeachers); + } catch (err) { + setError(err); + } + }; + + const fetchTotalClass = async () => { + try { + const data = await dashboardService.fetchTotalClass("", "", 1, 0); + setTotalClass(data.payload.length); + } catch (err) { + setError(err); + } + }; + + const fetchActivity = async () => { + setLoadingActivity(true); + try { + const data = await dashboardService.fetchActivity("", "", 1, 5); + setActivity(data.payload.monitorings); + } catch (err) { + setError(err); + } finally { + setLoadingActivity(false); + } + }; + + const fetchReport = async () => { + setLoadingReports(true); + try { + const data = await dashboardService.fetchReport("", "", 1, 5); + setReports(data.payload.reports); + } catch (err) { + setError(err); + } finally { + setLoadingReports(false); + } + }; + + useEffect(() => { + fetchTotalStudent(); + fetchTotalTeacher(); + fetchTotalClass(); + fetchActivity(); + }, []); + + + + function formatLocalDate(isoDate) { + const date = new Date(isoDate); + + const options = { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + hour12: false, + timeZone: 'Asia/Jakarta' + }; + + return new Intl.DateTimeFormat('id-ID', options).format(date) + .replace(/\//g, '-') + .replace(/\./g, ':') + ' WIB'; + } + + return { + error, + totalStudent, + totalTeacher, + totalClass, + reports, + activity, + loadingReports, + loadingActivity, + formatLocalDate + }; +}; + +export default useDashboard; diff --git a/src/roles/teacher/dashboard/services/serviceDashboard.jsx b/src/roles/teacher/dashboard/services/serviceDashboard.jsx new file mode 100644 index 0000000..8f86d71 --- /dev/null +++ b/src/roles/teacher/dashboard/services/serviceDashboard.jsx @@ -0,0 +1,48 @@ +import axiosInstance from '../../../../utils/axiosInstance'; + +const fetchTotalStudent = async (search, sort, page, limit) => { + try { + const response = await axiosInstance.get(`/user/student?search=${search}&sort=${sort}&page=${page}&limit=${limit}`); + return response.data; + } catch (error) { + console.error('Error fetching reports:', error); + throw error; + } +}; + +const fetchTotalTeacher = async (search, sort, page, limit) => { + try { + const response = await axiosInstance.get(`/user/teacher?search=${search}&sort=${sort}&page=${page}&limit=${limit}`); + return response.data; + } catch (error) { + console.error('Error fetching reports:', error); + throw error; + } +}; + +const fetchTotalClass = async (search, sort, page, limit) => { + try { + const response = await axiosInstance.get(`/classes`); + return response.data; + } catch (error) { + console.error('Error fetching reports:', error); + throw error; + } +}; + +const fetchActivity = async (search, sort, page, limit) => { + try { + const response = await axiosInstance.get(`/monitoring/progress?search=${search}&sort=${sort}&page=${page}&limit=${limit}`); + return response.data; + } catch (error) { + console.error('Error fetching reports:', error); + throw error; + } +}; + +export default{ + fetchTotalStudent, + fetchTotalTeacher, + fetchTotalClass, + fetchActivity +}; diff --git a/src/roles/teacher/dashboard/views/Dashboard.jsx b/src/roles/teacher/dashboard/views/Dashboard.jsx index 6ffff9a..e41c453 100644 --- a/src/roles/teacher/dashboard/views/Dashboard.jsx +++ b/src/roles/teacher/dashboard/views/Dashboard.jsx @@ -1,8 +1,10 @@ import React from 'react'; -import { Table, Row, Col, Card, Button } from 'react-bootstrap'; +import { Table, Row, Col, Card, Button, Spinner } from 'react-bootstrap'; import { NavLink } from 'react-router-dom'; import avatar from '../../../../assets/images/avatar.png'; +import useDashboard from '../hooks/useDashboard'; + function validName(fullName) { const nameArray = fullName.split(" "); const firstTwoWords = nameArray.slice(0, 2).join(" "); @@ -12,124 +14,32 @@ function validName(fullName) { const TeacherDashboard = () => { const { username }= JSON.parse(localStorage.getItem('userData')); + + const { + error, + totalStudent, + totalTeacher, + totalClass, + reports, + activity, + loadingActivity, + loadingReports, + formatLocalDate + } = useDashboard(); + + + return (

Hi, {validName(username)}!

Together, we can make every learning journey smarter and more adaptive.

- {/* - -
-
-

New Users
9,090

-

4,930 yesterday

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NoEmail AddressFull NameActivity
1kenzi.lawson@example.comCourtneyIn most states, the legal limit
2jessica.hanson@example.comEleanor PenaSo yes, the alcohol (ethanol)
3michelle.rivera@example.comAnnette BlackAn average healthy 7 year old
4tim.jennings@example.comMarvin McKinneyThe principal alcohol in Purell
5willie.jennings@example.comLeslie AlexanderTwenty 30-second applications
-
-
- - -
-
-

Top Five Students

-
-
-
- -
-
Dianne Russel
-
Bekasi
-
-
Level 6
-
- -
- -
-
Leslie Alexander
-
Banda Aceh
-
-
Level 5
-
- -
- -
-
Brooklyn Simmons
-
Cilegon
-
-
Level 4
-
- -
- -
-
Wade Warren
-
Palembang
-
-
Level 4
-
- -
- -
-
Floyd Miles
-
Tanjung Balai
-
-
Level 3
-
-
-
- - */}

Teacher


-

9

+

{totalTeacher}

@@ -140,7 +50,7 @@ const TeacherDashboard = () => {

Student


-

150

+

{totalStudent}

@@ -151,7 +61,7 @@ const TeacherDashboard = () => {

Class


-

20

+

{totalClass}

@@ -162,11 +72,11 @@ const TeacherDashboard = () => {
-

Student List

- See more +

Student Last Activity

+ See more
- + {/*
@@ -207,6 +117,49 @@ const TeacherDashboard = () => { +
NoTwenty 30-second applications within half an hour is well in excess of almost anyone’s use of a sani
*/} + + + + + + + + + + + + {loadingActivity?( + + + + ):( + activity.length > 0?( + activity.map((data, index) => ( + + + + + + + + )) + ):( + + + + ) + )} +
NoNISNNameSectionTopic
+ + + + + + +
{index + 1}{data.NISN}{data.NAME_USERS}{data.NAME_SECTION}{data.NAME_TOPIC}
+

Empty Data

+