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 {
-        padding: 8px;
-        border: 1.25px solid #e5e5e5;
+      .headmaster-home-item-teacher-container {
+        padding: 8px 8px 32px;
+        border: 1.25px solid var(--primary-color);
         border-radius: 4px;
-        display: flex;
-        gap: 16px;
         background-color: #fff;
         transition: all 0.5s linear;
 
@@ -174,83 +182,94 @@
           cursor: pointer;
         }
 
-        .headmaster-home-avatar-teacher {
-          width: 88px;
-          height: 88px;
-          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 {
-            height: 70px;
-            width: 70px;
-          }
+        .headmaster-home-item-teacher {
+          display: flex;
+          gap: 16px;
+          border-bottom: 1px solid #939393;
+          padding-bottom: 12px;
 
-          img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
+          .headmaster-home-avatar-teacher {
+            width: var(--width-avatar);
+            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 {
+            //   height: 70px;
+            //   width: 70px;
+            // }
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              border-radius: 5px;
+            }
           }
-        }
-
-        .headmaster-home-detail-teacher {
-          display: flex;
-          flex: 1;
-          justify-content: space-between;
-          gap: 24px;
 
-          .headmaster-home-info-teacher {
+          .headmaster-home-detail-teacher {
             display: flex;
-            flex-direction: column;
-
-            .headmaster-info-teacher-name {
-              font-size: 2rem;
-              font-weight: 700;
-              color: var(--primary-color);
-            }
+            flex: 1;
+            justify-content: space-between;
+            gap: 24px;
 
-            .headmaster-info-teacher-text {
-              font-size: 1.8rem;
-            }
-          }
+            .headmaster-home-info-teacher {
+              display: flex;
+              flex-direction: column;
+              position: relative;
+              flex: 1;
+              height: 100%;
 
-          .headmaster-home-criteria-teacher {
-            display: flex;
-            flex-direction: column;
+              .headmaster-info-teacher-name {
+                font-size: 2rem;
+                font-weight: 700;
+                color: var(--primary-color);
+              }
 
-            .headmaster-criteria-teacher-title {
-              font-size: 2rem;
-              font-weight: 700;
-              color: var(--primary-color);
+              .headmaster-info-teacher-text {
+                font-size: 1.8rem;
+              }
             }
 
-            .headmaster-criteria-teacher-row {
+            .headmaster-home-criteria-teacher {
               display: flex;
-              justify-content: space-between;
-              gap: 8px;
+              flex-direction: column;
+              position: relative;
 
-              .criteria-teacher-title {
+              .headmaster-criteria-teacher-title {
                 font-size: 2rem;
                 font-weight: 700;
+                color: var(--primary-color);
               }
 
-              .headmaster-criteria-teacher-criteria {
-                font-size: 1.8rem;
-                font-weight: 400;
-                position: relative;
-                padding-left: 12px;
-
-                &::before {
-                  content: "";
-                  display: block;
-                  position: absolute;
-                  left: 0;
-                  top: 12px;
-                  width: 5px;
-                  height: 5px;
-                  background-color: var(--primary-color);
-                  border-radius: 50%;
+              .headmaster-criteria-teacher-row {
+                display: flex;
+                justify-content: space-between;
+                gap: 8px;
+
+                .criteria-teacher-title {
+                  font-size: 2rem;
+                  font-weight: 700;
+                }
+
+                .headmaster-criteria-teacher-criteria {
+                  font-size: 1.8rem;
+                  font-weight: 400;
+                  position: relative;
+                  padding-left: 12px;
+
+                  &::before {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    left: 0;
+                    top: 12px;
+                    width: 5px;
+                    height: 5px;
+                    background-color: var(--primary-color);
+                    border-radius: 50%;
+                  }
                 }
               }
             }
@@ -259,4 +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,40 +290,44 @@ export default function HeadmasterHome() {
                 )}
                 {listTeacher.map((item, index) => {
                     return (
-                      <div className="headmaster-home-item-teacher" key={index} onClick={() => handleClickTeacherItem(item)}>
-                        <div className="headmaster-home-avatar-teacher">
-                          <img src={configConstants.BASE_URL + item?.avatar} />
-                        </div>
-                        <div className="headmaster-home-detail-teacher">
-                          <div className="headmaster-home-info-teacher">
-                            <p className="headmaster-info-teacher-name">
-                              {item?.teacher_name}
-                            </p>
-                            <p className="headmaster-info-teacher-text">
-                              {item?.email}
-                            </p>
-                            <p className="headmaster-info-teacher-text">
-                              {item?.phone}
-                            </p>
+                      <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>
-                          <div className="headmaster-home-criteria-teacher">
-                            <div className="headmaster-criteria-teacher-row">
-                              <p className="headmaster-criteria-teacher-title">
-                                Mức độ CĐS Sunday English
+                          <div className="headmaster-home-detail-teacher">
+                            <div className="headmaster-home-info-teacher">
+                              <p className="headmaster-info-teacher-name">
+                                {item?.teacher_name}
                               </p>
-                              <RateStar rate={item?.criteria_teacher?.criteria_level} />
-                            </div>
-                            <div className="headmaster-criteria-teacher-row">
-                              <p className="headmaster-criteria-teacher-criteria">
-                                Tiêu chí giao bài
+                              <p className="headmaster-info-teacher-text">
+                                {item?.email}
                               </p>
-                              <RateStar rate={item?.criteria_teacher?.assign_number_level} />
-                            </div>
-                            <div className="headmaster-criteria-teacher-row">
-                              <p className="headmaster-criteria-teacher-criteria">
-                                Tiêu chí tỷ lệ học sinh làm bài
+                              <p className="headmaster-info-teacher-text">
+                                {item?.phone}
                               </p>
-                              <RateStar rate={item?.criteria_teacher?.student_done_per_level} />
+                              <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">
+                                <p className="headmaster-criteria-teacher-title">
+                                  Mức độ CĐS Sunday English
+                                </p>
+                                <RateStar rate={item?.criteria_teacher?.criteria_level} />
+                              </div>
+                              <div className="headmaster-criteria-teacher-row">
+                                <p className="headmaster-criteria-teacher-criteria">
+                                  Tiêu chí giao bài
+                                </p>
+                                <RateStar rate={item?.criteria_teacher?.assign_number_level} />
+                              </div>
+                              <div className="headmaster-criteria-teacher-row">
+                                <p className="headmaster-criteria-teacher-criteria">
+                                  Tiêu chí tỷ lệ học sinh làm bài
+                                </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>

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;
@@ -192,4 +209,4 @@
       }
     }
   }
-}
+}