update teacher dashboard
This commit is contained in:
parent
402400ddf2
commit
d2bb26e644
105
src/roles/teacher/dashboard/hooks/useDashboard.jsx
Normal file
105
src/roles/teacher/dashboard/hooks/useDashboard.jsx
Normal file
|
|
@ -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;
|
||||
48
src/roles/teacher/dashboard/services/serviceDashboard.jsx
Normal file
48
src/roles/teacher/dashboard/services/serviceDashboard.jsx
Normal file
|
|
@ -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
|
||||
};
|
||||
|
|
@ -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 (
|
||||
<div className='admin-dashboard'>
|
||||
<h2 className='page-title'>Hi, {validName(username)}!</h2>
|
||||
<p className='page-desc'>Together, we can make every learning journey smarter and more adaptive.</p>
|
||||
{/* <Row className='mb-45'>
|
||||
<Col sm={7}>
|
||||
<div className="cards">
|
||||
<div className="cards-title hr">
|
||||
<h4>New Users <br /> 9,090 </h4>
|
||||
<p>4,930 yesterday</p>
|
||||
</div>
|
||||
<div className="cards-body">
|
||||
<Table hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Email Address</th>
|
||||
<th>Full Name</th>
|
||||
<th>Activity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>kenzi.lawson@example.com</td>
|
||||
<td>Courtney</td>
|
||||
<td>In most states, the legal limit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>jessica.hanson@example.com</td>
|
||||
<td>Eleanor Pena</td>
|
||||
<td>So yes, the alcohol (ethanol)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>michelle.rivera@example.com</td>
|
||||
<td>Annette Black</td>
|
||||
<td>An average healthy 7 year old</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>tim.jennings@example.com</td>
|
||||
<td>Marvin McKinney</td>
|
||||
<td>The principal alcohol in Purell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>willie.jennings@example.com</td>
|
||||
<td>Leslie Alexander</td>
|
||||
<td>Twenty 30-second applications</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col sm={5}>
|
||||
<div className="cards">
|
||||
<div className="cards-title hr">
|
||||
<h4>Top Five Students</h4>
|
||||
</div>
|
||||
<div className="cards-body">
|
||||
<div className="student-display">
|
||||
<img src={avatar} alt="" />
|
||||
<div className='student-identity'>
|
||||
<h5>Dianne Russel</h5>
|
||||
<h6>Bekasi</h6>
|
||||
</div>
|
||||
<h5 className='student-level'>Level 6</h5>
|
||||
</div>
|
||||
|
||||
<div className="student-display">
|
||||
<img src={avatar} alt="" />
|
||||
<div className='student-identity'>
|
||||
<h5>Leslie Alexander</h5>
|
||||
<h6>Banda Aceh</h6>
|
||||
</div>
|
||||
<h5 className='student-level'>Level 5</h5>
|
||||
</div>
|
||||
|
||||
<div className="student-display">
|
||||
<img src={avatar} alt="" />
|
||||
<div className='student-identity'>
|
||||
<h5>Brooklyn Simmons</h5>
|
||||
<h6>Cilegon</h6>
|
||||
</div>
|
||||
<h5 className='student-level'>Level 4</h5>
|
||||
</div>
|
||||
|
||||
<div className="student-display">
|
||||
<img src={avatar} alt="" />
|
||||
<div className='student-identity'>
|
||||
<h5>Wade Warren</h5>
|
||||
<h6>Palembang</h6>
|
||||
</div>
|
||||
<h5 className='student-level'>Level 4</h5>
|
||||
</div>
|
||||
|
||||
<div className="student-display">
|
||||
<img src={avatar} alt="" />
|
||||
<div className='student-identity'>
|
||||
<h5>Floyd Miles</h5>
|
||||
<h6>Tanjung Balai</h6>
|
||||
</div>
|
||||
<h5 className='student-level'>Level 3</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row> */}
|
||||
<Row className='mb-45'>
|
||||
<Col sm={12} md={4}>
|
||||
<div className='bg-gd rounded-3' style={{padding:"1px"}}>
|
||||
<div className="px-3 py-2 bg-white rounded-3 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<p className='mb-1 fs-12p text-gd fw-bold'>Teacher</p> <br />
|
||||
<h3 className='m-0 text-gd'>9</h3>
|
||||
<h3 className='m-0 text-gd'>{totalTeacher}</h3>
|
||||
</div>
|
||||
<i className="display-3 text-gd bi bi-person-video3"></i>
|
||||
</div>
|
||||
|
|
@ -140,7 +50,7 @@ const TeacherDashboard = () => {
|
|||
<div className="px-3 py-2 bg-white rounded-3 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<p className='mb-1 fs-12p text-gd fw-bold'>Student</p> <br />
|
||||
<h3 className='m-0 text-gd'>150</h3>
|
||||
<h3 className='m-0 text-gd'>{totalStudent}</h3>
|
||||
</div>
|
||||
<i className="display-3 text-gd bi bi-people-fill"></i>
|
||||
</div>
|
||||
|
|
@ -151,7 +61,7 @@ const TeacherDashboard = () => {
|
|||
<div className="px-3 py-2 bg-white rounded-3 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<p className='mb-1 fs-12p text-gd fw-bold'>Class</p> <br />
|
||||
<h3 className='m-0 text-gd'>20</h3>
|
||||
<h3 className='m-0 text-gd'>{totalClass}</h3>
|
||||
</div>
|
||||
<i className="display-3 text-gd bi bi-easel2-fill"></i>
|
||||
</div>
|
||||
|
|
@ -162,11 +72,11 @@ const TeacherDashboard = () => {
|
|||
<Col sm={12}>
|
||||
<div className="cards">
|
||||
<div className="cards-title d-flex justify-content-between align-items-center">
|
||||
<h4 className='text-gd'>Student List</h4>
|
||||
<NavLink to="/portal/class" className="text-blue">See more</NavLink>
|
||||
<h4 className='text-gd'>Student Last Activity</h4>
|
||||
<NavLink to="/portal/monitoring" className="text-blue">See more</NavLink>
|
||||
</div>
|
||||
<div className="cards-body">
|
||||
<Table hover>
|
||||
{/* <Table hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
|
|
@ -207,6 +117,49 @@ const TeacherDashboard = () => {
|
|||
<td>Twenty 30-second applications within half an hour is well in excess of almost anyone’s use of a sani</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table> */}
|
||||
<Table hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>NISN</th>
|
||||
<th>Name</th>
|
||||
<th>Section</th>
|
||||
<th>Topic</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loadingActivity?(
|
||||
<tr>
|
||||
<td colSpan={5} style={{height:"20vh"}}>
|
||||
<Spinner animation="grow" variant="primary" />
|
||||
<Spinner animation="grow" variant="secondary" />
|
||||
<Spinner animation="grow" variant="success" />
|
||||
<Spinner animation="grow" variant="danger" />
|
||||
<Spinner animation="grow" variant="warning" />
|
||||
<Spinner animation="grow" variant="info" />
|
||||
</td>
|
||||
</tr>
|
||||
):(
|
||||
activity.length > 0?(
|
||||
activity.map((data, index) => (
|
||||
<tr index>
|
||||
<td>{index + 1}</td>
|
||||
<td>{data.NISN}</td>
|
||||
<td>{data.NAME_USERS}</td>
|
||||
<td>{data.NAME_SECTION}</td>
|
||||
<td>{data.NAME_TOPIC}</td>
|
||||
</tr>
|
||||
))
|
||||
):(
|
||||
<tr>
|
||||
<td colSpan={5} style={{height:'20vh'}}>
|
||||
<h3>Empty Data</h3>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user