From 1cb0f9cb8e989ccc58627d63bacd765549cb622b Mon Sep 17 00:00:00 2001
From: Dimas Atmodjo <dimasputra162003@gmail.com>
Date: Mon, 16 Dec 2024 00:42:37 +0700
Subject: [PATCH] update admin popup error

---
 .../admin/manage_classes/hooks/useClasses.jsx | 22 ++++--
 .../hooks/useUpdateExercises.jsx              | 56 +++++++++++---
 .../services/serviceExercises.jsx             | 11 +++
 .../manage_exercises/views/UpdateExercise.jsx | 42 ----------
 .../manage_progress/hooks/useProgress.jsx     |  2 +-
 .../hooks/useProgressClass.jsx                | 23 +++++-
 .../services/serviceProgress.jsx              | 25 +++++-
 .../manage_progress/views/ClassProgress.jsx   | 27 ++++---
 .../manage_progress/views/ManageProgress.jsx  | 21 ++---
 .../manage_section/hooks/useSections.jsx      | 20 +++--
 .../manage_section/views/ManageSections.jsx   |  2 +-
 .../manage_students/hooks/useStudents.jsx     | 77 +++++++++++--------
 .../manage_students/views/ManageStudents.jsx  |  2 +-
 .../manage_teachers/hooks/useTeachers.jsx     | 35 ++++++---
 .../admin/manage_topics/hooks/useTopics.jsx   | 20 +++--
 .../manage_topics/views/ManageTopics.jsx      |  2 +-
 src/roles/admin/setting/views/Setting.jsx     |  6 +-
 17 files changed, 238 insertions(+), 155 deletions(-)

diff --git a/src/roles/admin/manage_classes/hooks/useClasses.jsx b/src/roles/admin/manage_classes/hooks/useClasses.jsx
index 620dfe3..c4290df 100644
--- a/src/roles/admin/manage_classes/hooks/useClasses.jsx
+++ b/src/roles/admin/manage_classes/hooks/useClasses.jsx
@@ -91,15 +91,19 @@ const useClasses = () => {
         try {
             const createdClass = await classService.createData(newClass);
             setClasses((prevClasses) => [...prevClasses, createdClass.payload]);
-        } catch (err) {
-            setError(err);
-        }finally{
-            resetForm();
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
                 successMessage: 'Your new entry has been successfully created and saved.'
             }));
+            resetForm();
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
+            }));
         }
     };
 
@@ -117,14 +121,18 @@ const useClasses = () => {
             setClasses((prevClasses) => 
                 prevClasses.map((s) => (s.ID_CLASS === id ? classData.payload : s))
             );
-        } catch (err) {
-            setError(err);
-        }finally{
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
                 successMessage: 'Your data has been successfully updated.'
             }));
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
+            }));
         }
     };
 
diff --git a/src/roles/admin/manage_exercises/hooks/useUpdateExercises.jsx b/src/roles/admin/manage_exercises/hooks/useUpdateExercises.jsx
index b9c5ffd..411b7c9 100644
--- a/src/roles/admin/manage_exercises/hooks/useUpdateExercises.jsx
+++ b/src/roles/admin/manage_exercises/hooks/useUpdateExercises.jsx
@@ -39,6 +39,9 @@ const useUpdateExercises = (levelId) => {
         trueFalse: "",
         matchingPairs: {},
     });
+    
+    const [imageContainer, setImageContainer] = useState("");
+    const [audioContainer, setAudioContainer] = useState("");
 
     const [selectedQuestion, setSelectedQuestion] = useState(false);
 
@@ -55,9 +58,9 @@ const useUpdateExercises = (levelId) => {
             QUESTION:"",
             QUESTION_TYPE:"",
             SCORE_WEIGHT:"",
-            AUDIO:"",
-            IMAGE:"",
-            VIDEO:"",
+            AUDIO:'',
+            IMAGE:'',
+            VIDEO:'',
             multipleChoices:"",
             trueFalse:"",
             matchingPairs:{},
@@ -82,6 +85,8 @@ const useUpdateExercises = (levelId) => {
     
     const [selectedQuestionNumber, setSelectedQuestionNumber] = useState(null);
     const handleShow = (data) => {
+        setImageContainer("");
+        setAudioContainer("");
         setSelectedQuestion(true);
         setSelectedQuestionNumber(data+1);
         setFormData({
@@ -91,13 +96,19 @@ const useUpdateExercises = (levelId) => {
             QUESTION: exerciseData[data].QUESTION || "",
             QUESTION_TYPE: exerciseData[data].QUESTION_TYPE || "",
             SCORE_WEIGHT: exerciseData[data].SCORE_WEIGHT || "",
-            AUDIO: exerciseData[data].AUDIO || "",
-            IMAGE: exerciseData[data].IMAGE || "",
-            VIDEO: exerciseData[data].VIDEO || "",
+            AUDIO: exerciseData[data].AUDIO || '',
+            IMAGE: exerciseData[data].IMAGE || '',
+            VIDEO: exerciseData[data].VIDEO || '',
             multipleChoices: exerciseData[data].multipleChoices || "",
             trueFalse: exerciseData[data].trueFalse || "",
             matchingPairs: exerciseData[data].matchingPairs || {},
         });
+        if(exerciseData[data].IMAGE){
+            setImageContainer(exerciseData[data].IMAGE);
+        }
+        if(exerciseData[data].AUDIO){
+            setAudioContainer(exerciseData[data].AUDIO);
+        }
         setShow(true);
     };
     const handleClose = () => {
@@ -105,6 +116,9 @@ const useUpdateExercises = (levelId) => {
         resetForm(); 
         setSelectedQuestion(null);
         setMediaPreview(null);
+
+        setImageContainer("");
+        setAudioContainer("");
     };
 
     const handleShowNewData = () => {
@@ -225,8 +239,13 @@ const useUpdateExercises = (levelId) => {
         }
     };
 
+    const [deleteMedia, setDeleteMedia] = useState(false);
+    const [deleteMediaType, setDeleteMediaType] = useState(null);
     const updateQuestion = async () => {
+        setDeleteMedia(false);
+        setDeleteMediaType(null)
         const id = formData.ID_ADMIN_EXERCISE;
+
         const updateData = new FormData();
         updateData.append('ID_LEVEL', levelId);
         updateData.append('QUESTION', formData.QUESTION);
@@ -239,15 +258,27 @@ const useUpdateExercises = (levelId) => {
             updateData.append('AUDIO', formData.AUDIO);
         }
 
-        if (formData.VIDEO === "") {
+        if (formData.VIDEO === '') {
             updateData.append('VIDEO', "");
         }
-        if (formData.IMAGE === "") {
+        if (formData.IMAGE === '') {
             updateData.append('IMAGE', "");
         }
-        if (formData.AUDIO === "") {
+        if (formData.AUDIO === '') {
             updateData.append('AUDIO', "");
         }
+
+        //media checker delete
+        console.log('continer',imageContainer);
+        console.log('form',formData.IMAGE);
+        if (imageContainer !== '' && imageContainer !== formData.IMAGE) {
+            setDeleteMedia(true);
+            setDeleteMediaType('image')
+        }
+        if (audioContainer !== '' && audioContainer !== formData.AUDIO) {
+            setDeleteMedia(true);
+            setDeleteMediaType('audio')
+        }
         
         if (formData.QUESTION_TYPE === "TFQ") {
             if (typeof formData.trueFalse === 'object') {
@@ -271,8 +302,15 @@ const useUpdateExercises = (levelId) => {
             });
         }
 
+        const deleteMediaTypeData ={
+            'fileType' : deleteMediaType
+        } 
         handleShowLoader('Updated', '', true);
         try {
+            if (deleteMedia) {
+                console.log(deleteMediaTypeData);
+                await exerciseService.deleteMedia(id, deleteMediaTypeData);
+            }
             const update = await exerciseService.updateData(id, updateData);
             setExerciseData((prevQuestion) => 
                 prevQuestion.map((s) => (s.ID_ADMIN_EXERCISE === id ? update.payload : s))
diff --git a/src/roles/admin/manage_exercises/services/serviceExercises.jsx b/src/roles/admin/manage_exercises/services/serviceExercises.jsx
index ab7dc49..b813dbb 100644
--- a/src/roles/admin/manage_exercises/services/serviceExercises.jsx
+++ b/src/roles/admin/manage_exercises/services/serviceExercises.jsx
@@ -103,6 +103,16 @@ const deleteData = async (id) => {
     }
 };
 
+const deleteMedia = async (id, data) => {
+    try {
+        const response = await axiosInstance.delete(`/exercise/file/${id}`, data);
+        return response.data;
+    } catch (error) {
+        console.error(`Error deleting question with ID ${id}:`, error);
+        throw error;
+    }
+};
+
 export default{
     fetchData,
     getExerciseByLevelId,
@@ -111,4 +121,5 @@ export default{
     updateData,
     sortingData,
     deleteData,
+    deleteMedia
 };
diff --git a/src/roles/admin/manage_exercises/views/UpdateExercise.jsx b/src/roles/admin/manage_exercises/views/UpdateExercise.jsx
index 015aa22..4cbedd5 100644
--- a/src/roles/admin/manage_exercises/views/UpdateExercise.jsx
+++ b/src/roles/admin/manage_exercises/views/UpdateExercise.jsx
@@ -82,43 +82,6 @@ const UpdateExercises = () => {
             </Row>
             <Row className='mb-45'>
                 <Col className='h-fit'>
-                    
-                    {/* <div className="cards">
-                        <div className="cards-title d-flex justify-content-between">
-                            <div className="d-flex align-items-center">
-                                <span style={{ cursor: 'grab' }}><i className="bi bi-list me-3" /></span>
-                                <h4>1</h4>
-                                <h4>.Multiple Choice</h4>
-                            </div>
-                            <div className="d-flex">
-                                <Button size='sm' variant='outline-warning' className='me-2 border'><i className="bi bi-pencil me-1"></i>edit</Button>
-                                <Button size='sm' variant='outline-danger' className='border'><i className="bi bi-trash3"></i></Button>
-                            </div>
-                        </div>
-                        <div className="cards-body">
-                            <Row className='mb-2'>
-                                <Col className='d-flex align-items-center'>
-                                    <img src="https://picsum.photos/300/200" alt="" className='me-2 bg-light' style={{aspectRatio:"1/1",width:"5vw",objectPosition:"center",objectFit:"contain"}}/>
-                                    <p className='m-0 fs-14p'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum assumenda tenetur nostrum, consequatur mollitia ea dignissimos adipisci rerum nesciunt laboriosam laborum ut atque beatae facilis nam illum impedit quia eius.</p>
-                                </Col>
-                            </Row>
-                            <span className='fs-12p'>Question Choices</span>
-                            <Row>
-                                <Col md={6} className='d-flex align-items-center'>
-                                    <i className="bi bi-check text-success fs-5 me-1"></i><span className='fs-14p'>gatau</span>
-                                </Col>
-                                <Col md={6} className='d-flex align-items-center'>
-                                    <i className="bi bi-x text-red fs-5 me-1"></i><span className='fs-14p'>ya ini</span>
-                                </Col>
-                                <Col md={6} className='d-flex align-items-center'>
-                                    <i className="bi bi-x text-red fs-5 me-1"></i><span className='fs-14p'>ya itu</span>
-                                </Col>
-                                <Col md={6} className='d-flex align-items-center'>
-                                    <i className="bi bi-x text-red fs-5 me-1"></i><span className='fs-14p'>gatau ini</span>
-                                </Col>
-                            </Row>
-                        </div>
-                    </div> */}
 
                     {loading?(
                         <div className='w-100 d-flex justify-content-center align-items-center' style={{height:"20vh"}}>
@@ -750,11 +713,6 @@ const UpdateExercises = () => {
                                     )
                                 )
                             )}
-                            {/* <div className="py-4 bg-white d-flex justify-content-end">
-                                <Button variant="blue" type="submit" className='ms-2 py-2 px-5 rounded-35'>
-                                    Update
-                                </Button>
-                            </div> */}
                         </Form>
                 </Modal.Body>
             </Modal>  
diff --git a/src/roles/admin/manage_progress/hooks/useProgress.jsx b/src/roles/admin/manage_progress/hooks/useProgress.jsx
index 3a689b8..2c6cbd9 100644
--- a/src/roles/admin/manage_progress/hooks/useProgress.jsx
+++ b/src/roles/admin/manage_progress/hooks/useProgress.jsx
@@ -92,7 +92,7 @@ const useProgress = () => {
     const getClassTopic = async (id) => {
         setLoadingModal(true);
         try {
-            const classes = await progressService.getTopicByClass(id, '', '', '', 1000);
+            const classes = await progressService.getTopicByClass(id);
             setSelected(classes.payload.data);
         } catch (err) {
             console.log(err);
diff --git a/src/roles/admin/manage_progress/hooks/useProgressClass.jsx b/src/roles/admin/manage_progress/hooks/useProgressClass.jsx
index 9389238..197d170 100644
--- a/src/roles/admin/manage_progress/hooks/useProgressClass.jsx
+++ b/src/roles/admin/manage_progress/hooks/useProgressClass.jsx
@@ -78,12 +78,30 @@ const useProgressClass = (progressId) => {
             .replace(/\./g, ':') + ' WIB';
     }
 
+    const handleDownloadCSV = async () => {
+        try {
+            const response = await progressService.getCsvProgress();
+    
+            const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+            const downloadUrl = URL.createObjectURL(blob);
+    
+            const link = document.createElement('a');
+            link.href = downloadUrl;
+            link.download = `progress ${name}-${topic}.csv`;
+            link.click();
+    
+            URL.revokeObjectURL(downloadUrl);
+        } catch (error) {
+            console.error('Error downloading file:', error);
+            alert('Gagal mengunduh file');
+        }
+    }
+
     return { 
         progress,
         section,
         topic,
         name,
-        nisn,
         loading, 
         error, 
 
@@ -94,7 +112,8 @@ const useProgressClass = (progressId) => {
         handlePageChange,
         handleLimitsChange,
         handleSearchChange,
-        formatLocalDate
+        formatLocalDate,
+        handleDownloadCSV
     };
 };
 
diff --git a/src/roles/admin/manage_progress/services/serviceProgress.jsx b/src/roles/admin/manage_progress/services/serviceProgress.jsx
index 251b396..70a6d42 100644
--- a/src/roles/admin/manage_progress/services/serviceProgress.jsx
+++ b/src/roles/admin/manage_progress/services/serviceProgress.jsx
@@ -30,9 +30,9 @@ const getStudentById = async (id) => {
     }
 };
 
-const getTopicByClass = async (id, search, sort, page, limit) => {
+const getTopicByClass = async (id) => {
     try {
-        const response = await axiosInstance.get(`/monitoring/class/${id}?search=${search}&sort=${sort}&page=${page}&limit=${limit}`);
+        const response = await axiosInstance.get(`/monitoring/class/${id}`);
         return response.data;
     } catch (error) {
         console.error('Error fetching progress:', error);
@@ -52,7 +52,7 @@ const fetchDataStudentProgress = async (id, search, sort, page, limit) => {
 
 const fetchDataClassProgress = async (dataId, search, sort, page, limit) => {
     try {
-        const response = await axiosInstance.get(`/monitoring/class?search=${search}&sort=${sort}&page=${page}&limit=${limit}`, dataId);
+        const response = await axiosInstance.post(`/monitoring/class?search=${search}&sort=${sort}&page=${page}&limit=${limit}`, dataId);
         return response.data;
     } catch (error) {
         console.error('Error fetching progress:', error);
@@ -60,11 +60,28 @@ const fetchDataClassProgress = async (dataId, search, sort, page, limit) => {
     }
 };
 
+const getCsvProgress = async () => {
+    const configs = {
+        headers: {
+          Authorization: localStorage.getItem('token')
+        },
+        responseType: 'blob',
+    };
+    try {
+        const response = await axiosInstance.get(`/monitoring/class/csv`, configs);
+        return response.data;
+    } catch (error) {
+        console.error(`Error get file:`, error);
+        throw error;
+    }
+};
+
 export default{
     fetchDataStudent,
     fetchDataClass,
     getStudentById,
     getTopicByClass,
     fetchDataStudentProgress,
-    fetchDataClassProgress
+    fetchDataClassProgress,
+    getCsvProgress
 };
diff --git a/src/roles/admin/manage_progress/views/ClassProgress.jsx b/src/roles/admin/manage_progress/views/ClassProgress.jsx
index c5c0841..e9ff83e 100644
--- a/src/roles/admin/manage_progress/views/ClassProgress.jsx
+++ b/src/roles/admin/manage_progress/views/ClassProgress.jsx
@@ -8,12 +8,10 @@ const ClassProgress = () => {
     const { progressId } = useParams();
     const { 
         progress,
+        name,
         section,
         topic,
-        name,
-        nisn,
         loading, 
-        error, 
 
         totalPages,
         totalData,
@@ -22,7 +20,8 @@ const ClassProgress = () => {
         handlePageChange,
         handleLimitsChange,
         handleSearchChange,
-        formatLocalDate
+        formatLocalDate,
+        handleDownloadCSV
     } = useProgressClass(progressId);
     return (
         <div className='admin-teachers'>
@@ -33,12 +32,12 @@ const ClassProgress = () => {
                     </Button>
                     <Breadcrumb className='custom-breadcrumb'>
                         <Breadcrumb.Item href="/admin/learning-progress">Monitoring Progress</Breadcrumb.Item>
-                        <Breadcrumb.Item active>Progress Details</Breadcrumb.Item>
+                        <Breadcrumb.Item active>Class Progress Details</Breadcrumb.Item>
                     </Breadcrumb>
                 </Col>
                 <Col sm={6} className="d-flex align-items-center justify-content-end">
-                    <Button variant="outline-blue" type="button" className='py-2 bg-white'>
-                        <i className="bi bi-download me-2"></i>Download PDF
+                    <Button variant="outline-blue" type="button" className='py-2 bg-white' onClick={(e) => { e.preventDefault(); handleDownloadCSV(); }}>
+                        <i className="bi bi-download me-2"></i>Download CSV
                     </Button>
                 </Col>
             </Row>
@@ -46,7 +45,7 @@ const ClassProgress = () => {
                 <Col>
                     <div className="cards">
                         <div className="cards-title">
-                            <h4 className='mb-2'>{nisn} - {name}</h4>
+                            <h4 className='mb-2'>{name}</h4>
                             <span className='text-grey'>{section} / {topic}</span>
                         </div>
                         <div className="cards-body">
@@ -63,11 +62,11 @@ const ClassProgress = () => {
                             <Table hover>
                                 <thead>
                                     <tr>
-                                        <th>No</th>
-                                        <th>NISN</th>
+                                        <th className='text-start'>NISN</th>
                                         <th>Full Name</th>
                                         <th>Level</th>
                                         <th>Score</th>
+                                        <th>Feedback</th>
                                         <th>Start Exercise</th>
                                         <th>Finish Exercise</th>
                                     </tr>
@@ -75,7 +74,7 @@ const ClassProgress = () => {
                                 <tbody>
                                     {loading?(
                                         <tr>
-                                            <td colSpan={6} style={{height:"20vh"}}>
+                                            <td colSpan={7} style={{height:"20vh"}}>
                                                 <Spinner animation="grow" variant="primary" />
                                                 <Spinner animation="grow" variant="secondary" />
                                                 <Spinner animation="grow" variant="success" />
@@ -88,18 +87,18 @@ const ClassProgress = () => {
                                         progress.length > 0?(
                                             progress.map((data, index) => (
                                                 <tr key={index}>
-                                                    <td>{index + 1}</td>
-                                                    <td>{data.NISN}</td>
+                                                    <td className='text-start'>{data.NISN}</td>
                                                     <td>{data.NAME_USERS}</td>
                                                     <td>{data.NAME_LEVEL}</td>
                                                     <td>{data.SCORE}</td>
+                                                    <td>{data.FEEDBACK_STUDENT ?? '-'}</td>
                                                     <td>{formatLocalDate(data.STUDENT_START)}</td>
                                                     <td>{formatLocalDate(data.STUDENT_FINISH)}</td>
                                                 </tr>
                                             ))
                                         ):( 
                                             <tr>
-                                                <td colSpan={6} style={{height:'20vh'}}>
+                                                <td colSpan={7} style={{height:'20vh'}}>
                                                     <h3>Empty Data</h3>
                                                 </td>
                                             </tr>
diff --git a/src/roles/admin/manage_progress/views/ManageProgress.jsx b/src/roles/admin/manage_progress/views/ManageProgress.jsx
index bb98849..5320fa7 100644
--- a/src/roles/admin/manage_progress/views/ManageProgress.jsx
+++ b/src/roles/admin/manage_progress/views/ManageProgress.jsx
@@ -206,26 +206,13 @@ const ManageProgress = () => {
                 </Row>
             </Tab.Container>
 
-            <Modal show={show} onHide={handleClose} className='modal-admin' size='lg' centered>
+            <Modal show={show} onHide={handleClose} className='modal-admin' size='xl' centered>
                 <Modal.Header closeButton>
                     <Modal.Title>Select Topic</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <Row>
-                        <Col xs={6} lg={4} className='mb-3'>
-                            <Card className='h-100'>
-                                <Card.Body>
-                                <Card.Title as='h3'>Vocabulary</Card.Title>
-                                    <Card.Text className='mb-4 fs-14p'>
-                                        The legend of naresh
-                                    </Card.Text>
-                                <Button as={Link} to={`c/${selectedId}&21a9c23e-9737-49f5-bbd5-5b0ecac3f73d`}  variant="warning" className='py-2 w-100 rounded-35'>See Details</Button>
-                                </Card.Body>
-                            </Card>
-                        </Col>
-                    </Row>
                     {loadingModal?(
-                        <div className='d-flex justify-content-center align-items-center' style={{height:"20vh"}}>
+                        <div className='d-flex justify-content-center align-items-center' style={{height:"179px"}}>
                             <Spinner animation="grow" variant="primary" />
                             <Spinner animation="grow" variant="secondary" />
                             <Spinner animation="grow" variant="success" />
@@ -251,7 +238,9 @@ const ManageProgress = () => {
                                 ))}
                             </Row>
                         ):(
-                            <h2 className='my-3 text-center'>No Progress from this class</h2>
+                            <div className='d-flex justify-content-center align-items-center' style={{height:"179px"}}>
+                                <h2 className='m-0 text-center'>No Progress from this class</h2>
+                            </div>
                         )
                     )}
                 </Modal.Body>
diff --git a/src/roles/admin/manage_section/hooks/useSections.jsx b/src/roles/admin/manage_section/hooks/useSections.jsx
index 9b02608..c383206 100644
--- a/src/roles/admin/manage_section/hooks/useSections.jsx
+++ b/src/roles/admin/manage_section/hooks/useSections.jsx
@@ -102,14 +102,18 @@ const useSections = () => {
             setSections((prevSections) => 
                 prevSections.map((s) => (s.ID_SECTION === id ? section.payload : s))
             );
-        } catch (err) {
-            setError(err);
-        }finally{
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
                 successMessage: 'Your data has been successfully updated.'
             }));
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
+            }));
         }
     };
 
@@ -121,15 +125,19 @@ const useSections = () => {
             handleShowLoader('Deleted', '', true)
             try {
                 await sectionService.deleteData(id);
-            } catch (err) {
-                setError(err);
-            }finally{
                 setSections((prevSections) => prevSections.filter((s) => s.ID_SECTION !== id));
                 setLoaderState(prev => ({
                     ...prev,
                     loading: false,
                     successMessage: 'Your data has been successfully deleted.'
                 }));
+            } catch (err) {
+                setLoaderState(prev => ({
+                    ...prev,
+                    title: "ERROR",
+                    loading: false,
+                    successMessage: err.response.data.message
+                }));
             }
         }
         setLoaderState(prev => ({ ...prev, handleConfirm: confirmDelete }));
diff --git a/src/roles/admin/manage_section/views/ManageSections.jsx b/src/roles/admin/manage_section/views/ManageSections.jsx
index 7f0de3c..64e45da 100644
--- a/src/roles/admin/manage_section/views/ManageSections.jsx
+++ b/src/roles/admin/manage_section/views/ManageSections.jsx
@@ -225,7 +225,7 @@ const ManageSections = () => {
 
             <Modal show={show} onHide={handleClose} className='modal-admin' size='lg' centered>
                 <Modal.Header closeButton>
-                    <Modal.Title>Update Teacher Data</Modal.Title>
+                    <Modal.Title>Update Section Data</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <Form onSubmit={(e) => { e.preventDefault(); editSection(); }}>
diff --git a/src/roles/admin/manage_students/hooks/useStudents.jsx b/src/roles/admin/manage_students/hooks/useStudents.jsx
index a674a85..57f25e6 100644
--- a/src/roles/admin/manage_students/hooks/useStudents.jsx
+++ b/src/roles/admin/manage_students/hooks/useStudents.jsx
@@ -22,6 +22,7 @@ const useStudents = () => {
     const [loaderState, setLoaderState] = useState({ loading: false, successMessage: '', title: '', description: '', confirmAction: false });
 
     const resetForm = () =>{
+        setFileImport(null);
         setFormData({
             fullName: '',
             nisn: '',
@@ -41,15 +42,19 @@ const useStudents = () => {
             };
             const createdStudent = await studentService.createData(newStudent);
             setStudents((prevStudents) => [...prevStudents, createdStudent.payload]);
-        } catch (err) {
-            setError(err);
-        }finally{
             resetForm();
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
                 successMessage: 'Your new entry has been successfully created and saved.'
             }));
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
+            }));
         }
     };
 
@@ -60,16 +65,19 @@ const useStudents = () => {
         console.log(file);
         try {
             const response = await studentService.registerImport(fileData);
-            console.log(response.data);
-        } catch (err) {
-            setError(err);
-        }finally{
-            resetForm();
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
                 successMessage: 'Your new entry has been successfully created and saved.'
             }));
+            resetForm();
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
+            }));
         }
     }
 
@@ -83,14 +91,18 @@ const useStudents = () => {
             setStudents((prevStudents) => 
                 prevStudents.map((s) => (s.ID === id ? student.payload : s))
             );
-        } catch (err) {
-            setError(err);
-        }finally{
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
                 successMessage: 'Your data has been successfully updated.'
             }));
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
+            }));
         }
     };
 
@@ -98,15 +110,19 @@ const useStudents = () => {
         handleShowLoader('Deleted', '', true)
         try {
             await studentService.deleteData(id);
-        } catch (err) {
-            setError(err);
-        }finally{
             setStudents((prevStudents) => prevStudents.filter((s) => s.ID !== id));
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
                 successMessage: 'Your data has been successfully deleted.'
             }));
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
+            }));
         }
     };
 
@@ -175,22 +191,23 @@ const useStudents = () => {
     }, [page, limit]);
 
 
-    const handleDownloadTemplate = async () => {try {
-        const response = await studentService.getTemplate();
-  
-        const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-        const downloadUrl = URL.createObjectURL(blob);
-  
-        const link = document.createElement('a');
-        link.href = downloadUrl;
-        link.download = 'template.xls';
-        link.click();
-  
-        URL.revokeObjectURL(downloadUrl);
-    } catch (error) {
-        console.error('Error downloading file:', error);
-        alert('Gagal mengunduh file');
-    }
+    const handleDownloadTemplate = async () => {
+        try {
+            const response = await studentService.getTemplate();
+    
+            const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+            const downloadUrl = URL.createObjectURL(blob);
+    
+            const link = document.createElement('a');
+            link.href = downloadUrl;
+            link.download = 'template.xlsx';
+            link.click();
+    
+            URL.revokeObjectURL(downloadUrl);
+        } catch (error) {
+            console.error('Error downloading file:', error);
+            alert('Gagal mengunduh file');
+        }
     }
 
     return { 
diff --git a/src/roles/admin/manage_students/views/ManageStudents.jsx b/src/roles/admin/manage_students/views/ManageStudents.jsx
index 83ed565..d3904d0 100644
--- a/src/roles/admin/manage_students/views/ManageStudents.jsx
+++ b/src/roles/admin/manage_students/views/ManageStudents.jsx
@@ -377,7 +377,7 @@ const ManageStudents = () => {
                                                     onDragLeave={handleDragLeave}
                                                 >
                                                     <h5 className={`m-0 ${fileImport ? `text-green fs-3` : `text-grey`}`}>{fileImport ? fileImport.name : "Upload Excel file here"}</h5>
-                                                    <span className={`fs-14p ${fileImport ? `text-green` : `text-grey`}`}>{fileImport ? "Your file is ready to import" : "Please make sure your Excel file follows the template."}</span>
+                                                    <span className={`fs-14p ${fileImport ? `text-green` : `text-grey`}`}>{fileImport ? "Your file is ready to import" : "Please make sure your Excel file follows the template.(*.xlsx)"}</span>
                                                 </label>
                                             </Row>
                                             <div className="d-flex justify-content-end">
diff --git a/src/roles/admin/manage_teachers/hooks/useTeachers.jsx b/src/roles/admin/manage_teachers/hooks/useTeachers.jsx
index c56b05c..b8f5f7a 100644
--- a/src/roles/admin/manage_teachers/hooks/useTeachers.jsx
+++ b/src/roles/admin/manage_teachers/hooks/useTeachers.jsx
@@ -40,15 +40,18 @@ const useTeachers = () => {
                 CONFIRM_PASSWORD: data.confirm_pass,
             };
             const createdTeacher = await teacherService.createData(newTeacher);
-            setTeachers((prevTeachers) => [...prevTeachers, createdTeacher.payload]);
-        } catch (err) {
-            setError(err);
-        }finally{
-            resetForm();
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
-                successMessage: 'Your new entry has been successfully created and saved.'
+                successMessage: 'New teacher has been successfully created. waiting to verify the email.'
+            }));
+            resetForm();
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
             }));
         }
     };
@@ -63,14 +66,18 @@ const useTeachers = () => {
             setTeachers((prevTeachers) => 
                 prevTeachers.map((s) => (s.ID === id ? Teacher.payload : s))
             );
-        } catch (err) {
-            setError(err);
-        }finally{
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
                 successMessage: 'Your data has been successfully updated.'
             }));
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
+            }));
         }
     };
 
@@ -78,15 +85,19 @@ const useTeachers = () => {
         handleShowLoader('Deleted', '', true)
         try {
             await teacherService.deleteData(id);
-        } catch (err) {
-            setError(err);
-        }finally{
             setTeachers((prevTeachers) => prevTeachers.filter((s) => s.ID !== id));
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
                 successMessage: 'Your data has been successfully deleted.'
             }));
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
+            }));
         }
     };
 
diff --git a/src/roles/admin/manage_topics/hooks/useTopics.jsx b/src/roles/admin/manage_topics/hooks/useTopics.jsx
index 0bbf05f..6681888 100644
--- a/src/roles/admin/manage_topics/hooks/useTopics.jsx
+++ b/src/roles/admin/manage_topics/hooks/useTopics.jsx
@@ -106,14 +106,18 @@ const useTopics = () => {
             setTopics((prevTopics) => 
                 prevTopics.map((s) => (s.ID_TOPIC === id ? topic.payload : s))
             );
-        } catch (err) {
-            setError(err);
-        }finally{
             setLoaderState(prev => ({
                 ...prev,
                 loading: false,
                 successMessage: 'Your data has been successfully updated.'
             }));
+        } catch (err) {
+            setLoaderState(prev => ({
+                ...prev,
+                title: "ERROR",
+                loading: false,
+                successMessage: err.response.data.message
+            }));
         }
     };
 
@@ -125,15 +129,19 @@ const useTopics = () => {
             handleShowLoader('Deleted', '', true)
             try {
                 await topicService.deleteData(id);
-            } catch (err) {
-                setError(err);
-            }finally{
                 setTopics((prevTopics) => prevTopics.filter((s) => s.ID_TOPIC !== id));
                 setLoaderState(prev => ({
                     ...prev,
                     loading: false,
                     successMessage: 'Your data has been successfully deleted.'
                 }));
+            } catch (err) {
+                setLoaderState(prev => ({
+                    ...prev,
+                    title: "ERROR",
+                    loading: false,
+                    successMessage: err.response.data.message
+                }));
             }
         }
         setLoaderState(prev => ({ ...prev, handleConfirm: confirmDelete }));
diff --git a/src/roles/admin/manage_topics/views/ManageTopics.jsx b/src/roles/admin/manage_topics/views/ManageTopics.jsx
index 4459879..67ad375 100644
--- a/src/roles/admin/manage_topics/views/ManageTopics.jsx
+++ b/src/roles/admin/manage_topics/views/ManageTopics.jsx
@@ -108,7 +108,7 @@ const ManageTopics = () => {
                                                                 <td>{topic.NAME_TOPIC}</td>
                                                                 <td>{topic.DESCRIPTION_TOPIC}</td>
                                                                 <td className='text-center action-col'>
-                                                                    <div class="d-flex">
+                                                                    <div className="d-flex">
                                                                         <Button size='sm' className='btn-edit' onClick={() => handleShow(topic)}>
                                                                             <i className="bi bi-pencil-square"></i>
                                                                         </Button>
diff --git a/src/roles/admin/setting/views/Setting.jsx b/src/roles/admin/setting/views/Setting.jsx
index c533fa7..03e759d 100644
--- a/src/roles/admin/setting/views/Setting.jsx
+++ b/src/roles/admin/setting/views/Setting.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Table, Row, Col, Nav, Tab, Button, Form, InputGroup, Dropdown, DropdownButton, Modal } from 'react-bootstrap';
+import { Table, Row, Col, Nav, Tab, Button, Form, Spinner, Modal } from 'react-bootstrap';
 import avatar from '../../../../assets/images/default-avatar.jpg';
 import ilustration from '../../../../assets/images/illustration/changePass.png';
 import successModal from '../../../../assets/images/illustration/successModal.png';
@@ -49,8 +49,8 @@ const Setting = () => {
 
     return (
         <div className='admin-students'>
-            <h2 className='page-title strip'>Students</h2>
-            <p className='page-desc'>Description of students.</p>
+            <h2 className='page-title strip'>Admin Profile</h2>
+            <p className='page-desc'>Manage your account.</p>
             <Tab.Container id="left-tabs-example" defaultActiveKey="profile">
                 <Row className='mb-45'>
                     <Col xs={12}>