Refactor : icon back và header, thêm responsive cho màn thống kê

public/assets/css/all.css

@@ -50,14 +50,17 @@
   font-family: "AvertaStdCY-Black";
   src: url(../fonts/AvertaStdCY-Black_1.otf);
 }
+
 @font-face {
   font-family: "AvertaStdCY-ExtraBold";
   src: url(../fonts/AvertaStdCY-Extrabold_1.otf);
 }
+
 @font-face {
   font-family: "AvertaStdCY-ExtraBoldItalic";
   src: url(../fonts/AvertaStdCY-ExtraboldItalic_1.otf);
 }
+
 @font-face {
   font-family: "AvertaStdCY-Bold";
   src: url(../fonts/AvertaStdCY-Bold_1.otf);
@@ -72,6 +75,7 @@
   font-family: "AvertaStdCY";
   src: url(../fonts/AvertaStdCY-Regular_3.otf);
 }
+
 @font-face {
   font-family: "AvertaStdCY-Italic";
   src: url(../fonts/AvertaStdCY-RegularItalic_1.otf);
@@ -193,6 +197,7 @@ video {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
+
 html,
 body {
   /* height: 100%; */
@@ -1412,6 +1417,7 @@ a:hover {
   overflow: hidden;
   height: 80px;
 }
+
 .personal.plan-item {
   border-left: 20px solid #8dc63f;
 }
@@ -2104,9 +2110,11 @@ a:hover {
   height: 100%;
   object-fit: cover;
 }
+
 .item-student-name-container {
   max-width: 65%;
 }
+
 .item-student-name {
   padding: 0 0 0 20px;
 }
@@ -2728,12 +2736,10 @@ a:hover {
 }
 
 .laplai p>input[type="radio"]:checked+*::before {
-  background: radial-gradient(
+  background: radial-gradient(#84c241 0%,
-    #84c241 0%,
       #84c241 40%,
       transparent 50%,
-    transparent
+      transparent);
-  );
 }
 
 .apdung label {
@@ -3211,6 +3217,7 @@ a:hover {
 .box-select-file-full {
   flex: 1;
 }
+
 .box-select-file-full p {
   flex: 1;
   text-align: left;
@@ -3820,9 +3827,7 @@ a:hover {
   border-bottom: 1px solid #777777;
 }
 
-.giaotrinh.pad-t-0
+.giaotrinh.pad-t-0 .sunE-giaotrinh-resuft-filter .sunE-giaotrinh-item:last-child {
-  .sunE-giaotrinh-resuft-filter
-  .sunE-giaotrinh-item:last-child {
   border-bottom: none;
 }
 
@@ -4153,6 +4158,7 @@ a:hover {
 .sunE-right-container:has(.__text_empty) {
   overflow: initial;
 }
+
 .chambai.writing {
   margin: 0 0 15px;
 }
@@ -5132,15 +5138,13 @@ a:hover {
   color: #fff;
   font-size: 18px;
   font-family: "Myriadpro-Bold";
-  background-image: linear-gradient(
+  background-image: linear-gradient(45deg,
-    45deg,
       #b0853a,
       #f8efa5,
       #9d7033,
       #e7bf55,
       #faf4ac,
-    #9d7033
+      #9d7033);
-  );
   text-align: center;
   border-radius: 15px;
   margin: 0 auto 5px;
@@ -5154,14 +5158,12 @@ a:hover {
   color: #fff;
   font-size: 18px;
   font-family: "Myriadpro-Bold";
-  background-image: linear-gradient(
+  background-image: linear-gradient(45deg,
-    45deg,
       #c0c0c0,
       #ebeaea,
       #b8b8b8,
       #6f6f6f,
-    #ebeaea
+      #ebeaea);
-  );
   text-align: center;
   border-radius: 15px;
   margin: 0 auto 5px;
@@ -5175,14 +5177,12 @@ a:hover {
   color: #fff;
   font-size: 18px;
   font-family: "Myriadpro-Bold";
-  background-image: linear-gradient(
+  background-image: linear-gradient(40deg,
-    40deg,
       #a3bee3,
       #7da6d7,
       #dde5f4,
       #b5c9e7,
-    #174d6b
+      #174d6b);
-  );
   text-align: center;
   border-radius: 15px;
   margin: 0 auto 5px;
@@ -5679,8 +5679,7 @@ a:hover {
   content: "";
   width: 17px;
   height: 10px;
-  background: url(./../images/tinnhan/ico_dropdown.png) 98% / 17px no-repeat
+  background: url(./../images/tinnhan/ico_dropdown.png) 98% / 17px no-repeat transparent;
-    transparent;
   position: absolute;
   top: 18px;
   right: 30px;
@@ -5976,6 +5975,7 @@ a:hover {
   justify-content: space-between;
   padding-left: 3rem;
 }
+
 .phieudiem .diemdanh-item .phieudiem-info p {
   font-family: "Myriadpro-Bold";
   font-size: 18px;
@@ -6620,8 +6620,7 @@ a:hover {
   font-family: "Myriadpro-Bold";
 }
 
-.student-khht .sunE-calendar {
+.student-khht .sunE-calendar {}
-}
 
 .sunE-plan.khht-tkb,
 .sunE-plan.khht-cn {
@@ -7215,14 +7214,12 @@ p.text-center.f-18 {
 }
 
 .top-k-item.b .top-k-score {
-  background-image: linear-gradient(
+  background-image: linear-gradient(to right,
-    to right,
       #b8b8b8,
       #cfcfcf,
       #ebeaea,
       #c0c0c0,
-    #ebeaea
+      #ebeaea);
-  );
 }
 
 .top-k-item p {
@@ -7691,6 +7688,7 @@ p.text-center.f-18 {
 .fix_text_cut_chart::after {
   background: none !important;
 }
+
 .box-s {
   padding: 0 5px 0 30px;
 }
@@ -8021,8 +8019,7 @@ p.text-center.f-18 {
   appearance: none;
   /* Remove default arrow */
   color: #fff;
-  background: url("./../images/icon/ico_dropdown_border_white.png") 98% / 30px
+  background: url("./../images/icon/ico_dropdown_border_white.png") 98% / 30px no-repeat #00ceab;
-    no-repeat #00ceab;
   /* Add custom arrow */
 }
 
@@ -8479,21 +8476,13 @@ p.text-center.f-18 {
   border-radius: 50% !important;
 }
 
-.react-datepicker__time-container
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
-  .react-datepicker__time
-  .react-datepicker__time-box
-  ul.react-datepicker__time-list
-  li.react-datepicker__time-list-item--selected {
   background-image: linear-gradient(to right, #00e1a0, #00b9b7);
   color: white;
   font-weight: bold;
 }
 
-.react-datepicker__time-container
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
-  .react-datepicker__time
-  .react-datepicker__time-box
-  ul.react-datepicker__time-list
-  li.react-datepicker__time-list-item:hover {
   background-image: linear-gradient(to right, #00e1a0, #00b9b7);
 }
 
@@ -8523,16 +8512,20 @@ p.text-center.f-18 {
   color: #fff !important;
 }
 
-.react-datepicker__month .react-datepicker__month-text:hover, .react-datepicker__month .react-datepicker__quarter-text:hover {
+.react-datepicker__month .react-datepicker__month-text:hover,
+.react-datepicker__month .react-datepicker__quarter-text:hover {
   border-radius: 8px !important;
   border: none !important;
 }
 
-.react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {
+.react-datepicker__month .react-datepicker__month-text,
+.react-datepicker__month .react-datepicker__quarter-text {
   width: auto !important;
 }
 
-.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
+.react-datepicker__current-month,
+.react-datepicker-time__header,
+.react-datepicker-year-header {
   font-size: 1.6rem !important;
 }
 
@@ -8548,7 +8541,10 @@ p.text-center.f-18 {
   display: flex !important;
 }
 
-.react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today {
+.react-datepicker__day--today,
+.react-datepicker__month-text--today,
+.react-datepicker__quarter-text--today,
+.react-datepicker__year-text--today {
   border-radius: 8px !important;
 }
 
@@ -8751,8 +8747,7 @@ ul.pagination li:hover a {
   content: "";
   width: 18px;
   height: 9px;
-  background: url(./../images/teacher/diemdanh/ico_dropdown_green.png) 96% /
+  background: url(./../images/teacher/diemdanh/ico_dropdown_green.png) 96% / 18px no-repeat transparent;
-    18px no-repeat transparent;
   position: absolute;
   top: 12px;
   right: 10px;
@@ -8762,8 +8757,7 @@ ul.pagination li:hover a {
   content: "";
   width: 18px;
   height: 9px;
-  background: url(./../images/teacher/diemdanh/ico_dropdown_orange.png) 96% /
+  background: url(./../images/teacher/diemdanh/ico_dropdown_orange.png) 96% / 18px no-repeat transparent;
-    18px no-repeat transparent;
   position: absolute;
   top: 12px;
   right: 10px;
@@ -8774,8 +8768,7 @@ ul.pagination li:hover a {
   content: "";
   width: 18px;
   height: 9px;
-  background: url(./../images/teacher/diemdanh/ico_dropdown_red.png) 96% / 18px
+  background: url(./../images/teacher/diemdanh/ico_dropdown_red.png) 96% / 18px no-repeat transparent;
-    no-repeat transparent;
   position: absolute;
   top: 12px;
   right: 10px;
@@ -8959,16 +8952,14 @@ ul.pagination li:hover a {
   content: "";
   width: 24px;
   height: 14px;
-  background: url(./../images/teacher/diemdanh/ico_dropdown_blue.png) 90% / 24px
+  background: url(./../images/teacher/diemdanh/ico_dropdown_blue.png) 90% / 24px no-repeat transparent;
-    no-repeat transparent;
   position: absolute;
   top: 19px;
   right: 8px;
 }
 
 .btn-ob .select-styled.active:after {
-  background: url(./../images/teacher/diemdanh/ico_dropup_blue.png) 90% / 24px
+  background: url(./../images/teacher/diemdanh/ico_dropup_blue.png) 90% / 24px no-repeat transparent;
-    no-repeat transparent;
 }
 
 .hoc-ky.btn-ob {
@@ -8994,6 +8985,7 @@ ul.pagination li:hover a {
 .he-so.btn-ob .select-options {
   z-index: 5;
 }
+
 .uk-modal {
   z-index: 99999;
 }
@@ -9240,10 +9232,7 @@ ul.pagination li:hover a {
   border-top-left-radius: 35px;
 }
 
-.giaotrinh.unit.student
+.giaotrinh.unit.student .unit-list .unit-giaotrinh-content.active .unit-more-info {
-  .unit-list
-  .unit-giaotrinh-content.active
-  .unit-more-info {
   border-bottom: none;
 }
 
@@ -10443,10 +10432,7 @@ ul.pagination li:hover a {
   padding: 30px 20px 0;
 }
 
-.ldjas
+.ldjas .giaotrinh.teacher-giaobai .giaotrinh.filter .sunE-giaotrinh-resuft-filter {
-  .giaotrinh.teacher-giaobai
-  .giaotrinh.filter
-  .sunE-giaotrinh-resuft-filter {
   height: calc(100vh - 290px);
 }
 

src/_components/Header/index.js

@@ -9,30 +9,37 @@ export default function Header({ icon, title, subtitles = [], manager = false, i
   const authentication = useSelector((state) => state.authentication);
   const { fullname, organization_name, role } = authentication?.user || {};
   const hasFullName = fullname || organization_name;
+  const isSGD = authentication?.user?.organization_name?.toLowerCase().includes('sở');
+  const organizationName = authentication?.user?.organization_name?.toLowerCase() || '';
+  const keywords = ['sở', 'phòng'];
+  
+  const isManager = keywords.some(keyword => organizationName.includes(keyword));
+  
   
   
   const handleFullName = () => {
-    let fullName
+    if (manager || isManager) {
-    if(manager){
+      return `${isSGD ? 'Giám đốc' : 'Trưởng phòng'} ${hasFullName}`;
-      fullName = 'Giám đốc ' + hasFullName
-    }else{
-      fullName = role === "organization_admin"
-        ? `${organization_name ? 'Hiệu trưởng ' : ''}${hasFullName}`
-        : fullname;
     }
-    return fullName
+    
+    if (role === "organization_admin") {
+      return `${organization_name ? 'Hiệu trưởng ' : ''}${hasFullName}`;
     }
     
+    return fullname;
+  }
+
+  
   return (
     <div className="header-container">
       <div className="header-left-side">
         {isBack && (
-          <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', cursor:'pointer' }}>
-              <button className="header-back-button" onClick={()=>{
+                <div 
-                history.goBack()
+                  style={{marginRight: 8, paddingBottom: 4}} 
-              }}>
+                  onClick={()=>{ history.goBack() }}>
-                <div style={{marginRight: 8, paddingBottom: 4}}>{renderIconButtonLeft()}</div>
+                  {renderIconButtonLeft(24, 24, "#FFA500")}
-              </button>
+                </div>
             </div>
         )}
         {icon}

src/_components/boxChart/BoxDoughnutBarChart.js

@@ -131,6 +131,7 @@ export default function BoxDoughnutBarChart({
             popperPlacement='top'
             typeErrText='underAbsolute'
             isMonthPicker
+            style={{padding:'0 10px'}}
           />
         </div>
         <Btn icon={renderIconButton()} isDisabled={isDisabledNext} onClick={handleClickNext} />

src/_components/boxChart/boxChart.scss

@@ -12,7 +12,7 @@
   }
 
   @media (max-width: 1599px) {
-    max-width: 260px;
+    max-width: 233px;
   }
 
   .box-chart-title {

src/_components/renderIcon/index.js

@@ -145,7 +145,7 @@ export const renderIconButton = (width = 24, height = 24) => {
   )
 }
 
-export const renderIconButtonLeft = (width = 24, height = 24) => {
+export const renderIconButtonLeft = (width = 24, height = 24, color = '#fff') => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -154,7 +154,7 @@ export const renderIconButtonLeft = (width = 24, height = 24) => {
       viewBox="0 0 24 24"
       preserveAspectRatio="xMidYMid meet"
     >
-      <g fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" transform="rotate(180 12 12)">
+      <g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" transform="rotate(180 12 12)">
         <path strokeDasharray="20" strokeDashoffset="20" d="M3 12h17.5">
           <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0" />
         </path>

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

@@ -330,7 +330,7 @@ export default function DetailRoomEducation() {
     const getDataTeacher = async () => {
       try {
         setIsLoading(true);
-        const endPoint = `/api_teacher/get_teacher_info?search=${searchText}`;
+        const endPoint = `/api_teacher/get_teacher_info?search=${searchText}&organization_id=${authentication.user.organization_id}`;
         const res = await apiCaller(endPoint, "GET");
         setIsLoading(false);
         if (res?.status) {
@@ -372,7 +372,7 @@ export default function DetailRoomEducation() {
               <div className="d-flex flex-1 gap-16" style={{ flexDirection: 'column'}}>
                 {data ? 
                 (<>
-                  <div className="flex flex-m gap-16" style={{height: '23%'}}>
+                  <div className="flex flex-m gap-16">
                   <BoxDoughnutChart data={[data?.school_join, data?.total_school]} title={'Số trường đã tham gia'} />
                   <BoxDoughnutChart data={[data?.class_join, data?.total_class]} title={'Số lớp đã tham gia'} />
                   </div>

src/_screens/home/education-department/educationDepartmentHome.style.scss

@@ -5,7 +5,7 @@
   overflow: hidden;
 
   .education-department-statistic-container {
-    flex: 0.7;
+    flex: 0.6;
     height: calc(100vh - var(--height-header));
     padding: 2rem;
 
@@ -18,7 +18,7 @@
   }
 
   .education-department-home-list-container {
-    flex: 0.3;
+    flex: 0.4;
     height: calc(100vh - var(--height-header));
     overflow: hidden;
     padding: 2rem 0;
@@ -38,16 +38,22 @@
     .education-department-home-header {
       width: 100%;
       padding: 0 32px;
+
       .detail-education-department-list-header {
-        justify-content: space-around;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
         margin: 1.2rem 0;
-        gap: 32px;
+
         @media (max-width: 1650px) {
           flex-direction: column;
         }
+
         .criteria-manage-search-input {
           height: 46px;
           border-radius: 40px;
+
           @include screen_pc_sm {
             height: 36px;
           }

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

@@ -147,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 giáo viên nào để hiển thị
+                    Không còn giáo viên nào
                   </p>
                 )}
                 {listTeacher.map((item, index) => {

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

@@ -42,7 +42,16 @@
         max-height: 290px;
 
         .outstanding-teacher-best-avatar-box {
-          height: 90%;
+          height: 250px;
+
+          @media (max-width: 1650px) {
+            height: 210px;
+          }
+
+          @media (max-width: 1300px) {
+            height: 70px;
+          }
+
           aspect-ratio: 1;
           padding: 0.8rem;
           border-radius: 50%;