add ui assign teacher

src/_screens/home/headmaster/headmaster.style.scss

@@ -1,5 +1,15 @@
 @import "/src/_styles/mixin";
 
+:root {
+  --height-avatar: 88px;
+  --width-avatar: 88px;
+
+  @include screen_pc_sm {
+    --height-avatar: 70px;
+    --width-avatar: 70px;
+  }
+}
+
 .headmaster-home-container {
   display: flex;
   gap: 32px;
@@ -160,12 +170,10 @@
         gap: 16px;
       }
 
-      .headmaster-home-item-teacher {
+      .headmaster-home-item-teacher-container {
-        padding: 8px;
+        padding: 8px 8px 32px;
-        border: 1.25px solid #e5e5e5;
+        border: 1.25px solid var(--primary-color);
         border-radius: 4px;
-        display: flex;
-        gap: 16px;
         background-color: #fff;
         transition: all 0.5s linear;
 
@@ -174,17 +182,23 @@
           cursor: pointer;
         }
 
+        .headmaster-home-item-teacher {
+          display: flex;
+          gap: 16px;
+          border-bottom: 1px solid #939393;
+          padding-bottom: 12px;
+
           .headmaster-home-avatar-teacher {
-          width: 88px;
+            width: var(--width-avatar);
-          height: 88px;
+            height: var(--height-avatar);
             border-radius: 5px;
             box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
               rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 
-          @include screen_pc_sm {
+            // @include screen_pc_sm {
-            height: 70px;
+            //   height: 70px;
-            width: 70px;
+            //   width: 70px;
-          }
+            // }
 
             img {
               width: 100%;
@@ -203,6 +217,9 @@
             .headmaster-home-info-teacher {
               display: flex;
               flex-direction: column;
+              position: relative;
+              flex: 1;
+              height: 100%;
 
               .headmaster-info-teacher-name {
                 font-size: 2rem;
@@ -218,6 +235,7 @@
             .headmaster-home-criteria-teacher {
               display: flex;
               flex-direction: column;
+              position: relative;
 
               .headmaster-criteria-teacher-title {
                 font-size: 2rem;
@@ -260,3 +278,15 @@
       }
     }
   }
+
+  .headmaster-home-teacher-assign-text {
+    position: absolute;
+    bottom: -4rem;
+    left: 0;
+    font-weight: 700;
+
+    @include screen_pc_sm {
+      bottom: -4.6rem;
+    }
+  }
+}

src/_screens/home/headmaster/index.js

@@ -290,7 +290,8 @@ export default function HeadmasterHome() {
                 )}
                 {listTeacher.map((item, index) => {
                     return (
-                      <div className="headmaster-home-item-teacher" key={index} onClick={() => handleClickTeacherItem(item)}>
+                      <div className="headmaster-home-item-teacher-container" key={index} onClick={() => handleClickTeacherItem(item)}>
+                        <div className="headmaster-home-item-teacher" >
                           <div className="headmaster-home-avatar-teacher">
                             <img src={configConstants.BASE_URL + item?.avatar} />
                           </div>
@@ -305,6 +306,7 @@ export default function HeadmasterHome() {
                               <p className="headmaster-info-teacher-text">
                                 {item?.phone}
                               </p>
+                              <p className="headmaster-home-teacher-assign-text">{'Số lần giao bài: ' + item?.total_assign}</p>
                             </div>
                             <div className="headmaster-home-criteria-teacher">
                               <div className="headmaster-criteria-teacher-row">
@@ -325,6 +327,8 @@ export default function HeadmasterHome() {
                                 </p>
                                 <RateStar rate={item?.criteria_teacher?.student_done_per_level} />
                               </div>
+                              <p className="headmaster-home-teacher-assign-text">{'Số lớp đã giao: ' + item?.assign_class + '/' + item?.total_class}</p>
+                            </div>
                           </div>
                         </div>
                       </div>

src/_screens/home/teacher/index.js

@@ -13,6 +13,7 @@ import {
   LIST_SCHOOL_YEAR,
   LIST_SEMESTER,
   listAlphabet,
+  PRIMARY_COLOR,
 } from "../../../_constants/common";
 import { useEffect, useState } from "react";
 import { apiCaller, history } from "../../../_helpers";
@@ -152,6 +153,20 @@ export default function TeacherHome() {
                 Áp dụng
               </PrimaryButton>
             </div>
+            <div className="d-flex gap-16 justify-content-center align-item-center" style={{padding: '24px 16px 0', width: '100%'}}>
+              <div className="teacher-home-info-assign-box">
+                <img src="/assets/imgs/icon_group.png" />
+                <span style={{fontWeight: 700}}>{"Tổng số lớp: "}
+                  <span style={{color: PRIMARY_COLOR}}>5</span>
+                </span>
+              </div>
+              <div className="teacher-home-info-assign-box">
+                <img src="/assets/imgs/icon_assign_class.png" />
+                <span style={{fontWeight: 700}}>{"Tổng số lần giao: "}
+                  <span style={{color: PRIMARY_COLOR}}>50</span>
+                </span>
+              </div>
+            </div>
             <div className="teacher-home-overview">
               <p className="teacher-home-overview-title font_news">
                 Mức độ CĐS Sunday Englsih của Giáo viên

src/_screens/home/teacher/teacherHome.style.scss

@@ -17,9 +17,26 @@
       gap: 16px;
     }
 
+    .teacher-home-info-assign-box {
+      border-radius: 8px;
+      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+      padding: 6px 24px 6px 8px;
+      background-color: #fff;
+      display: flex;
+      gap: 4px;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        width: 20px;
+        height: 20px;
+        object-fit: contain;
+      }
+    }
+
     .teacher-home-overview {
       padding: 16px;
-      margin: 48px 16px 0;
+      margin: 24px 16px 0;
       box-shadow: 0px 0px 8px 0px #00000040;
       border-radius: 12px;
       background-color: #fff;