Feat : scroll mà chart

src/_components/boxChart/BoxDoughnutBarChart.js

@@ -58,8 +58,10 @@ export default function BoxDoughnutBarChart({
       {titleLine && <p className='box-chart-title'>{titleLine}</p>}
       {subTitleLine && <p className='box-chart-subtitle'>{subTitleLine}</p>}
       {dataBarChart.length > 0 ? (
-        <div className='flex-1' style={{padding: '1.6rem 0'}}>
+        <div className='chart-container'>
-          <VerticalBarChart data={dataBarChart} labels={labelsBarChart}/>
+          <div className='flex-1' style={{ padding: '1.6rem 0', height: '100%', width: '360px' }}>
+            <VerticalBarChart data={dataBarChart} labels={labelsBarChart} />
+          </div>
         </div>
       ) : (
         <div className="d-flex justify-content-center align-items-center flex-1">
@@ -101,7 +103,7 @@ export default function BoxDoughnutBarChart({
     <div className="box-chart-container">
       {renderDoughnutSection()}
       {renderBarSection()}
-      <div className='d-flex justify-content-center align-items-center'>
+      <div className='d-flex justify-content-center align-items-center' style={{marginTop:'1.2rem'}}>
         <Btn icon={renderIconButtonLeft()} isDisabled={false} onClick={handleClickPrev} />
         <div className='d-flex justify-content-center align-item-center' style={{width: 140, alignSelf: 'center'}}>
           <InputDate

src/_components/boxChart/boxChart.scss

@@ -48,4 +48,15 @@
     background: #c1c1c1 !important;
     pointer-events: none;
   }
+  .chart-container {
+    max-width: 360px;
+    overflow-x: scroll;
+    height: 100%;
+  }
+  
+  @media (max-width: 1600px) {
+    .chart-container {
+      max-width: 260px;
+    }
+  }
 }

src/_screens/home/detail-room-education/detailRoomEducation.style.scss

@@ -29,30 +29,33 @@
     .detail-room-education-right-p-h {
       padding-right: 32px;
     }
-    .detail-room-education-list-header{
-      justify-content: space-around;
-      margin: 12px 32px;
-      gap: 32px;
-      .criteria-manage-search-input {
-        height: 46px;
-        border-radius: 40px;
-        @include screen_pc_sm {
-          height: 36px;
-        }
-      }
-  
-      .criteria-manage-item {
-        min-width: fit-content;
-        flex: 1;
-      }
-    }
-
     .detail-room-education-list-container {
       padding: 2rem 0;
       display: flex;
       flex-direction: column;
       height: 100%;
 
+      .detail-room-education-header{
+        width: 100%;
+        .detail-room-education-list-header{
+          justify-content: space-around;
+          margin: 12px 32px;
+          gap: 32px;
+          .criteria-manage-search-input {
+            height: 46px;
+            border-radius: 40px;
+            @include screen_pc_sm {
+              height: 36px;
+            }
+          }
+      
+          .criteria-manage-item {
+            min-width: fit-content;
+            flex: 1;
+          }
+        }
+      }
+
       .detail-room-education-list {
         flex: 1;
         gap: 20px;

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

@@ -398,10 +398,10 @@ export default function DetailRoomEducation() {
             </div>
           <div className="detail-room-education-right-side">
             <div className="detail-room-education-list-container">
-              <div>
+              <div className="detail-room-education-header">
                 <span style={{fontSize: '2rem', fontWeight: 700, padding: '0 3.2rem'}}>Danh sách trường</span>
 
-                <div className="d-flex detail-education-department-list-header">
+                <div className="d-flex detail-room-education-list-header">
                     <InputText
                     className="criteria-manage-search-input criteria-manage-item"
                     value={searchText}

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

@@ -35,11 +35,31 @@
     //     height: 34px;
     //   }
     // }
+    .education-department-home-header{
+      width: 100%;
+      padding: 0 32px;
+      .detail-education-department-list-header{
+        justify-content: space-around;
+        margin: 1.2rem 0;
+        gap: 32px;
+        .criteria-manage-search-input {
+          height: 46px;
+          border-radius: 40px;
+          @include screen_pc_sm {
+            height: 36px;
+          }
+        }
+      
+        .criteria-manage-item {
+          min-width: fit-content;
+          flex: 1;
+        }
+      }
+    }
 
     .education-department-home-note {
       font-size: 2rem;
       font-weight: 700;
-      padding-left: 3.2rem;
       padding-bottom: 1.2rem;
     }
 
@@ -49,6 +69,7 @@
       flex-direction: column;
       padding: 0 3.2rem;
       max-height: 740px;
+      padding-top: 1.2rem;
 
       .education-department-home-list-room {
         flex: 1;
@@ -96,20 +117,3 @@
     }
   }
 }
-.detail-education-department-list-header{
-  justify-content: space-around;
-  margin: 12px 32px;
-  gap: 32px;
-  .criteria-manage-search-input {
-    height: 46px;
-    border-radius: 40px;
-    @include screen_pc_sm {
-      height: 36px;
-    }
-  }
-
-  .criteria-manage-item {
-    min-width: fit-content;
-    flex: 1;
-  }
-}

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

@@ -194,7 +194,7 @@ export default function EducationDepartmentHome() {
       <div className="container-page-header container-page-sidebar">
         <div className="education-department-home-container bg-sub-main-green-img">
           <div className="education-department-statistic-container">
-            {!!data ? <div className="d-flex gap-16" style={{height: '80%'}}>
+            {!!data ? <div className="d-flex gap-16" style={{height: '90%'}}>
               <div className="education-department-statistic-col gap-16">
                 <BoxDoughnutChart data={[data?.district_join, data?.total_district]} title={'Số huyện đã tham gia'} />
                 <BoxDoughnutChart data={[data?.school_join, data?.total_school]} title={'Số trường đã tham gia'} />
@@ -238,7 +238,7 @@ export default function EducationDepartmentHome() {
             </div>
           </div>
           <div className="education-department-home-list-container">
-            <div>
+            <div className="education-department-home-header">
               <p className="education-department-home-note">
                 Danh sách phòng giáo dục
               </p>