Refactor : tách biệt SGD và PGD

src/_components/Header/header.style.scss

@@ -16,6 +16,25 @@
       font-weight: 700;
       color: #4d4d4d;
     }
+
+    .header-back-button {
+      height: 40px;
+      border-radius: 20px;
+      border: none;
+      font-size: 16px;
+      color: #fff;
+      font-family: 'Myriadpro-SemiBold';
+      background-color: var(--button-bg-color);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 64px;
+      white-space: nowrap;
+    }
+
+    .header-back-button:hover {
+      background-color: #c07a05;
+    }
   }
 
   .header-right-side {

src/_components/Header/index.js

@@ -28,12 +28,11 @@ export default function Header({ icon, title, subtitles = [], manager = false, i
       <div className="header-left-side">
         {isBack && (
           <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
-              <PrimaryButton style={{ alignSelf: "center", justifyContent:'flex end', marginRight:30 }} onClick={()=>{
+              <button className="header-back-button" onClick={()=>{
                 history.goBack()
               }}>
                 <div style={{marginRight: 8, paddingBottom: 4}}>{renderIconButtonLeft()}</div>
-                Quay lại
-              </PrimaryButton>
+              </button>
             </div>
         )}
         {icon}

src/_components/boxChart/BoxDoughnutChar.js

@@ -18,12 +18,12 @@ export default function BoxDoughnutChart({data = [], title, propsContainer}) {
 
   return (
     <div className="box-chart-container" {...propsContainer}>
-      <p className='box-chart-subtitle'>{title}</p>
-      <div className='d-flex flex-1'>
-        <div className='doughnut-chart-content flex-1'>
+      <p className='box-chart-subtitle' style={{ marginBottom: '1.2rem'}}>{title}</p>
+      <div className='' style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+        <div className='doughnut-chart-content'>
           <RDoughnutChart data={data} />
         </div>
-        <div className='origin-vertical justify-content-center align-item-center flex-1'>
+        <div className='origin-vertical justify-content-center align-item-center' style={{display: 'flex'}}>
           {renderStats()}
         </div>
       </div>

src/_components/chart/RDoughnutChart.js

@@ -46,6 +46,8 @@ export default function RDoughnutChart({data = [], ...other}) {
                       return `${label}: ${value}`;
                     },
                   },
+                  position: 'nearest',
+                  z: 1000,
                 },
                 legend: false,
               }

src/_screens/home/detail-room-education/index.js

@@ -45,6 +45,8 @@ export default function DetailRoomEducation() {
   const [isLoading, setIsLoading] = useState(false);
   const [searchText, setSearchText] = useState('');
   const dispatch = useDispatch();
+  const isSGD = authentication?.user?.organization_name?.toLowerCase().includes('sở');
+
 
   const getListOrganization = async () => {
     try {
@@ -358,7 +360,7 @@ export default function DetailRoomEducation() {
     <div className="flex-1">
       <Header
         icon={renderIconHome({ color: "#4D4D4D" })}
-        title={"Phòng giáo dục " + authentication.user.province}
+        title={"Phòng giáo dục " + (isSGD ? `${authentication.user.province}` : `${authentication.user.district}`)}
         manager={true}
         isBack={isBack}
       />
@@ -444,19 +446,19 @@ export default function DetailRoomEducation() {
                   data={LIST_SCHOOL_YEAR}
                   value={schoolYear}
                   setValue={setSchoolYear}
-                  style={{flex: 1,maxWidth: '260px'}}
+                  style={{flex: 1,minWidth: '100px'}}
                 />
                 <RootSelect
                   data={LIST_SEMESTER}
                   value={semester}
                   setValue={changeSemester}
-                  style={{flex: 0.5,maxWidth: '200px'}}
+                  style={{flex: 0.5,minWidth: '200px'}}
                 />
                 <RootSelect
                   data={getListMonthBySemester(semester.value)}
                   value={month}
                   setValue={setMonth}
-                  style={{flex: 0.5,maxWidth: '160px'}}
+                  style={{flex: 0.5,minWidth: '180px'}}
                 />
                 <PrimaryButton onClick={handleFilter}>
                   Áp dụng

src/_screens/home/education-department/index.js

@@ -34,6 +34,8 @@ export default function EducationDepartmentHome() {
   const [isEndOnlineClasses, setIsEndOnlineClasses] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const dispatch = useDispatch();
+  const isSGD = authentication?.user?.organization_name?.toLowerCase().includes('sở');
+
 
   const getDataOrganization = async () => {
     try {
@@ -200,7 +202,7 @@ export default function EducationDepartmentHome() {
     <div className="flex-1">
       <Header
         icon={renderIconHome({ color: "#4D4D4D" })}
-        title={"Sở giáo dục " + authentication.user.province}
+        title={"Phòng giáo dục " + (isSGD ? `${authentication.user.province}` : `${authentication.user.district}`)}
         manager={true}
       />
       <div className="container-page-header container-page-sidebar">

src/_screens/home/outstanding-teacher/index.js

@@ -25,6 +25,8 @@ export default function OutstandingTeacher() {
   const [firstTeacher, setFirstTeacher] = useState();
   const [listTeacher, setListTeacher] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+  const isSGD = authentication?.user?.organization_name?.toLowerCase().includes('sở');
+  
 
   const getData = async () => {
     setIsLoading(true)
@@ -72,8 +74,9 @@ export default function OutstandingTeacher() {
     <div className="flex-1">
       <Header
         icon={renderIconHome({ color: "#4D4D4D" })}
-        title={"Top 10 giáo viên tiêu biểu - " + authentication.user.province}
+        title={"Top 10 giáo viên tiêu biểu - " + (isSGD ? `${authentication.user.province}` : `${authentication.user.district}`)}
         isBack={true}
+        manager={true}
       />
       <div className="container-page-header container-page-sidebar">
         <div className="outstanding-teacher-container bg-outstanding-img">
@@ -102,14 +105,14 @@ export default function OutstandingTeacher() {
                 </PrimaryButton>
               </div>
               {!!firstTeacher && <div className="outstanding-teacher-best-container" >
-                <div className="outstanding-teacher-best-avatar-content" onClick={() => handleClickTeacherItem(firstTeacher)}>
+                <div className="outstanding-teacher-best-avatar-content">
                   <div className="outstanding-teacher-best-avatar-box">
-                    <img className="outstanding-teacher-best-crown" src="/assets/imgs/crown_warning.png" />
-                    <img className="outstanding-teacher-best-avatar" src={configConstants.BASE_URL + firstTeacher?.avatar} />
+                    <img className="outstanding-teacher-best-crown" style={{cursor: 'default', zIndex: -1}} src="/assets/imgs/crown_warning.png" />
+                    <img className="outstanding-teacher-best-avatar" src={configConstants.BASE_URL + firstTeacher?.avatar} onClick={() => handleClickTeacherItem(firstTeacher)} />
                   </div>
                 </div>
                 <div className="outstanding-teacher-best-info">
-                  <span className="outstanding-teacher-best-name">{firstTeacher?.teacher_name}</span>
+                  <span className="outstanding-teacher-best-name" onClick={() => handleClickTeacherItem(firstTeacher)}>{firstTeacher?.teacher_name}</span>
                   <div className="flex flex-m" style={{gap: '1.6rem', width: '100%', marginTop: '1rem'}}>
                     <div className="flex-1 outstanding-teacher-best-address">{firstTeacher?.district_name}</div>
                     <div className="flex-1 outstanding-teacher-best-address">{firstTeacher?.school_name}</div>
@@ -144,7 +147,7 @@ export default function OutstandingTeacher() {
               <div className="outstanding-teacher-list">
                 {!isLoading && !listTeacher?.length && (
                   <p style={{fontSize: '1.8rem', fontWeight: 700}}>
-                    Không còn GV nào để hiển thị
+                    Không còn giáo viên nào để hiển thị
                   </p>
                 )}
                 {listTeacher.map((item, index) => {

src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss

@@ -40,7 +40,6 @@
         align-items: center;
         justify-content: center;
         max-height: 290px;
-        cursor: pointer;
 
         .outstanding-teacher-best-avatar-box {
           height: 90%;
@@ -64,6 +63,7 @@
             object-fit: cover;
             border-radius: 50%;
             box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+            cursor: pointer;
           }
         }
 
@@ -80,6 +80,7 @@
           font-size: 2.4rem;
           font-weight: 700;
           align-self: center;
+          cursor: pointer;
         }
 
         .outstanding-teacher-best-address {