Feat : handle button change month

src/_components/Auth/InputDate/index.js

@@ -72,6 +72,7 @@ const InputDate = (props) => {
                     }`}
                     selected={props.value}
                     onChange={(date) => changeValue(date)}
+                    disabledKeyboardNavigation
                     // showMonthDropdown
                     showYearDropdown
                     showMonthYearPicker={!!props?.isMonthPicker}

src/_components/Auth/InputDate/index.scss

@@ -53,6 +53,18 @@ $border-color: #4a4848;
       }
     }
 
+    .react-datepicker {
+      &__month-text {
+
+        &--selected,
+        &--in-selecting-range,
+        &--in-range {
+          border-radius: 8px !important;
+
+        }
+      }
+    }
+
     input {
       height: 100%;
       border: none;

src/_components/boxChart/BoxDoughnutBarChart.js

@@ -2,9 +2,19 @@ import { PRIMARY_COLOR } from '../../_constants/common'
 import RDoughnutChart from '../chart/RDoughnutChart'
 import './boxChart.scss'
 import { VerticalBarChart } from '../chart/VerticalBarChart'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import InputDate from '../Auth/InputDate'
-import { renderIconDate } from '../renderIcon'
+import { renderIconButton, renderIconButtonLeft, renderIconDate } from '../renderIcon'
+
+const Btn = ({ icon, isDisabled = false, onClick }) => {
+  return (
+    <div className='d-flex justify-content-center align-items-center'>
+      <button className={`d-flex custom-button ${isDisabled ? "button-disable" : ""}`} onClick={onClick} disabled={isDisabled}>
+        <div>{icon}</div>
+      </button>
+    </div>
+  );
+};
 
 export default function BoxDoughnutBarChart({
   dataDoughnut = [], 
@@ -23,7 +33,6 @@ export default function BoxDoughnutBarChart({
 
   const handleMonthChange = (date) => {
     setMonth(date)
-    onSetDateBarChart?.(date)
   }
 
   const renderDoughnutSection = () => (
@@ -59,26 +68,58 @@ export default function BoxDoughnutBarChart({
       )}
     </div>
   )
+  const handleClickNext = () => {
+    const newMonth = month.getMonth() + 1;
+    const newYear = month.getFullYear();
+  
+    if (newMonth > 11) {
+      setMonth(new Date(newYear + 1, 0, 1));
+    } else {
+      setMonth(new Date(newYear, newMonth, 1));
+    }
+  };
+  
+  const handleClickPrev = () => {
+    const newMonth = month.getMonth() - 1;
+    const newYear = month.getFullYear();
+    
+    if (newMonth < 0) {
+      setMonth(new Date(newYear - 1, 11, 1)); 
+    } else {
+      setMonth(new Date(newYear, newMonth, 1));
+    }
+  };
+
+  useEffect(() => {
+    onSetDateBarChart?.(month);
+  }, [month]);
+
+  const isDisabledNext = new Date(month).getMonth() === new Date().getMonth() && new Date(month).getFullYear() === new Date().getFullYear();
+  
 
   return (
     <div className="box-chart-container">
       {renderDoughnutSection()}
       {renderBarSection()}
-      <div className='d-flex justify-content-center align-item-center' style={{width: 140, alignSelf: 'center'}}>
+      <div className='d-flex justify-content-center align-items-center'>
-        <InputDate
+        <Btn icon={renderIconButtonLeft()} isDisabled={false} onClick={handleClickPrev} />
-          maxDate={new Date()}
+        <div className='d-flex justify-content-center align-item-center' style={{width: 140, alignSelf: 'center'}}>
-          label={''}
+          <InputDate
-          styleContainer={{flex: 1}}
+            maxDate={new Date()}
-          value={month}
+            label={''}
-          setValue={handleMonthChange}
+            styleContainer={{flex: 1}}
-          name="month"
+            value={month}
-          renderLabelIcon={renderIconDate}
+            setValue={handleMonthChange}
-          errorText={monthError}
+            name="month"
-          errorAbsolute={true}
+            renderLabelIcon={renderIconDate}
-          popperPlacement='top'
+            errorText={monthError}
-          typeErrText='underAbsolute'
+            errorAbsolute={true}
-          isMonthPicker
+            popperPlacement='top'
-        />
+            typeErrText='underAbsolute'
+            isMonthPicker
+          />
+        </div>
+        <Btn icon={renderIconButton()} isDisabled={isDisabledNext} onClick={handleClickNext} />
       </div>
     </div>
   )

src/_components/boxChart/boxChart.scss

@@ -20,4 +20,32 @@
   }
 
   .doughnut-chart-content {}
+
+  .custom-button {
+    padding: 0 32px;
+    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;
+    white-space: nowrap;
+    width: max-content;
+    margin: 0 10px;
+  }
+
+  .custom-button:hover {
+    background-color: #c07a05;
+  }
+
+  .button-disable {
+    cursor: not-allowed;
+    /* background: #70707070 !important; */
+    background: #c1c1c1 !important;
+    pointer-events: none;
+  }
 }

src/_components/renderIcon/index.js

@@ -145,6 +145,21 @@ export const renderIconButton = () => {
   )
 }
 
+export const renderIconButtonLeft = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <g fill="none" stroke="#fff" 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>
+        <path strokeDasharray="12" strokeDashoffset="12" d="M21 12l-7 7M21 12l-7 -7">
+          <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0" />
+        </path>
+      </g>
+    </svg>
+  );
+}
+
 export const renderIconDate = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 20 20">
     <path 

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

@@ -188,7 +188,7 @@ export default function EducationDepartmentHome() {
               /> */}
             <div className="education-department-home-list-content scrollbar-custom">
               <div className="education-department-home-list-room">
-                {listOrganization.map((item, index) => (
+                {listOrganization > 0 ? listOrganization.map((item, index) => (
                     <div
                       key={index}
                       className="education-department-home-item-room"
@@ -201,7 +201,12 @@ export default function EducationDepartmentHome() {
                         {item?.name}
                       </p>
                     </div>
-                  ))}
+                  ))
+                  :
+                  <div className="d-flex justify-content-center">
+                    Không có phòng giáo dục nào
+                  </div>
+                  }
               </div>
             </div>
           </div>

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

@@ -130,7 +130,7 @@ export default function OutstandingTeacher() {
               <div className="outstanding-teacher-list">
                 {!isLoading && !listTeacher?.length && (
                   <p style={{fontSize: '1.8rem', fontWeight: 700}}>
-                    Không có giáo viên nào
+                    Không còn GV nào để hiển thị
                   </p>
                 )}
                 {listTeacher.map((item, index) => {