feat: add BadgeLeader component and integrate it into Members, MentorBarem, and Team pages

Author: hoangtuanqn

frontend/src/components/BadgeLeader.tsx

@@ -0,0 +1,5 @@
+const BadgeLeader = () => {
+    return <span className="text-primary bg-primary/10 rounded-md px-2 py-0.5 text-xs font-medium">Trưởng nhóm</span>;
+};
+
+export default BadgeLeader;

frontend/src/pages/Candidate/Members.tsx

@@ -2,6 +2,7 @@ import NotifyNotLeader from "~/components/NotifyNotLeader";
 import type { TeamType } from "~/types/team.types";
 import { ChangeNameTeam } from "./ChangeNameTeam";
 import useAuth from "~/hooks/useAuth";
+import BadgeLeader from "~/components/BadgeLeader";
 
 const Members = ({ data }: { data: TeamType | undefined }) => {
     const candidates = data?.candidates;
@@ -84,11 +85,7 @@ const Members = ({ data }: { data: TeamType | undefined }) => {
                                         >
                                             <div className="flex items-center gap-2">
                                                 {user.fullName}
-                                                {isLeader && (
-                                                    <span className="text-primary bg-primary/10 rounded-md px-2 py-0.5 text-xs font-medium">
-                                                        Trưởng nhóm
-                                                    </span>
-                                                )}
+                                                {isLeader && <BadgeLeader />}
                                             </div>
                                             <p className="mt-0.5 text-xs text-gray-600">Ngành: {member.major}</p>
                                             {!user.isConfirm && (

frontend/src/pages/Judge/Barem/index.tsx

@@ -7,137 +7,13 @@ const baremJudge = [
         target: "Trang phục",
         partitions: [
             {
-                criteria: "Trang phục phù hợp.",
-                description: `Lịch sự, gọn gàng, phù hợp với tính chất học thuật của buổi thuyết trình. <br/>
-                (<span class="font-bold">Trừ 1 điểm</span> cho trường hợp mặc quần/ váy ngắn trên đầu gối; mang dép)`,
+                criteria: "x",
+                description: `Lxxxxxxxxxxxxxxxxxxxxxxxx <br/>
+                (<span class="font-bold">Trừ 1 điểm</span>xxxx`,
                 maxScore: 3,
             },
         ],
     },
-    {
-        target: "Thái độ",
-        partitions: [
-            {
-                criteria: "Tác phong chuyên nghiệp",
-                description:
-                    "Thể hiện sự tôn trọng, lịch sự, đúng mực với giám khảo (chào hỏi, phản ứng tích cực khi bị hỏi khó, thái độ bình tĩnh).",
-                maxScore: 10,
-            },
-            {
-                criteria: "Tiếp nhận ý kiến từ BGK",
-                description: `Sẵn sàng tiếp nhận và thực hiện lời phê bình mang tính xây dựng; không né tránh, phản ứng tích cực khi được hỏi. <br/>
-                (<span class="font-bold">0 điểm</span> nếu đổ lỗi cho người khác hoặc biện minh thay vì nhận trách nhiệm)`,
-                maxScore: 5,
-            },
-            {
-                criteria: "Đến đúng giờ",
-                description: `<span class="font-bold">2 điểm</span> nếu đúng giờ.<br/>
-                <span class="font-bold">1 điểm</span> nếu đến trễ và đã thông báo cho CLB từ trước.<br/>
-                <span class="font-bold">0 điểm</span> nếu đến trễ nhưng không thông báo với CLB từ trước.`,
-                maxScore: 2,
-            },
-            {
-                criteria: "Tự tin thuyết trình",
-                description: "Giữ phong thái tự tin, giọng nói rõ ràng, tốc độ nói hợp lý.",
-                maxScore: 5,
-            },
-            {
-                criteria: "Thuyết trình mà không cần script",
-                description: `Thuyết trình tự nhiên, không cầm điện thoại, nhìn giấy.<br/>
-                (<span class="font-bold">Trừ 2 điểm</span> cho trường hợp cầm điện thoại, giấy / nhìn chú thích trên slide quá nhiều)`,
-                maxScore: 5,
-            },
-        ],
-    },
-    {
-        target: "Khả năng thuyết trình",
-        partitions: [
-            {
-                criteria: "Eye contact",
-                description: `Giao tiếp bằng ánh mắt với giám khảo, tạo sự kết nối.<br/>
-                <span class="font-bold">2 điểm</span>: Ứng viên tương tác ít nhất 70% tổng thời lượng thuyết trình của mình<br/>
-                <span class="font-bold">1 điểm</span>: Tương tác ít nhất 30%<br/>
-                <span class="font-bold">0 điểm</span>: Cho các trường hợp còn lại`,
-                maxScore: 2,
-            },
-            {
-                criteria: "Body language",
-                description: "Cử chỉ, điệu bộ tự nhiên, phù hợp với nội dung nói; không gò bó, không thừa động tác.",
-                maxScore: 2,
-            },
-            {
-                criteria: "Lưu loát, mạch lạc, rõ ràng, ngắn gọn và hấp dẫn.",
-                description:
-                    "Bài nói có cấu trúc logic, xen lẫn cảm xúc hoặc ví dụ thực tế giúp tăng tính thuyết phục.",
-                maxScore: 5,
-            },
-        ],
-    },
-    {
-        target: "Teamwork",
-        partitions: [
-            {
-                criteria: "Hỗ trợ thành viên trong nhóm",
-                description: `Lắng nghe, ra hiệu, giúp đỡ khi thành viên khác gặp sự cố (slide sai, quên ý...).<br/>
-                Cần <span class="font-bold">trừ điểm mạnh tay</span> những trường hợp sử dụng điện thoại, làm việc riêng,... trong khi những người khác đang thuyết trình<br/>
-                Chú đề <span class="font-bold">đáng nổi không khác gì <span class="text-red-500">quá 30s</span> mà nhóm không phát hiện hoặc bị BGK nhắc nhở thì từ cả nhóm cốt nạy.<br/>
-                Nếu nhóm</span> thuyết trình tốt, không cần hỗ trợ thì full điểm.`,
-                maxScore: 5,
-            },
-            {
-                criteria: "Ăn ý trong trình bày",
-                description: `Giúp đỡ thành viên khác khi không trả lời được câu hỏi.<br/>
-                (<span class="font-bold">Trừ 2 điểm</span> nếu từ ý xen vào khi người khác đang trả lời kể cả đang trả lời sai)`,
-                maxScore: 5,
-            },
-            {
-                criteria: "Chuyển slide giữa các phần với nhau.",
-                description: `Khi xong phần thuyết trình mời bạn kế tiếp lên để tiếp tục. (VD: Đến đây phần thuyết trình của em đã hết, e xin mời bạn ABC lên trình bài nội dung XYZ)`,
-                maxScore: 5,
-            },
-            {
-                criteria: "Nắm vững phần trình bày của bạn thân",
-                description: "BGK xem qua yêu cầu để tái của ứng viên và quan sát ứng viên trình bày.",
-                maxScore: 10,
-            },
-        ],
-    },
-    {
-        target: "Kiến thức và Tư duy phản biện",
-        partitions: [
-            {
-                criteria: "Giải thích được các kiến thức phức tạp một cách dễ hiểu, rõ ràng và ngắn gọn",
-                description: "",
-                maxScore: 10,
-            },
-            {
-                criteria: "Trả lời câu hỏi của giám khảo cách để hiểu, rõ ràng, không lạm man",
-                description: "",
-                maxScore: 10,
-            },
-            {
-                criteria: "Phản biện, thuyết phục được BGK.",
-                description: `Dựa ra vị dụ thực tế hoặc 1 lý do nào đó để bảo vệ câu trả lời của mình và thuyết phục được BGK. (<span class="font-bold">Chú ý thái độ ứng viên</span>)`,
-                maxScore: 10,
-            },
-            {
-                criteria: "Nắm được tổng quát nội dung của cả nhóm",
-                description: `Trong lúc thuyết trình, ứng viên có liên hệ hoặc nhắc đến nội dung của các thành viên khác trong nhóm.<br/>
-                (<span class="font-bold">BGK có thể đặt câu hỏi về phần trình bày của bạn khác để kiểm tra mức độ hiểu và nắm bắt tổng thể của ứng viên.</span>)`,
-                maxScore: 2,
-            },
-        ],
-    },
-    {
-        target: "Năng khiếu khác",
-        partitions: [
-            {
-                criteria: "Đây là điểm cộng. Do BGK tự quyết định",
-                description: `BGK căn ghi rõ lý do hoặc tiêu chí được cộng điểm (<span class="font-bold">ví dụ: sáng tạo, phong thái ấn tượng, xử lý tình huống tốt...</span>)`,
-                maxScore: 4,
-            },
-        ],
-    },
 ];
 
 const JudgeBaremPage = () => {

frontend/src/pages/Mentor/Barem/index.tsx

@@ -9,6 +9,7 @@ import { socket } from "~/utils/socket";
 import useAuth from "~/hooks/useAuth";
 import type { CandidateType } from "~/types/team.types";
 import { BadgeCheck } from "lucide-react";
+import BadgeLeader from "~/components/BadgeLeader";
 type ParamsBarem = {
     id: string;
     candidateId?: string;
@@ -33,6 +34,8 @@ const MentorBaremPage = () => {
         },
         enabled: !!params.id,
     });
+    const isLeader = params?.candidateId === candidates?.leader.id;
+    // console.log("isLeader", params?.candidateId, isLeader);
 
     const [candidateActive, setcandidateActive] = useState<CandidateType | undefined>(undefined);
 
@@ -88,6 +91,9 @@ const MentorBaremPage = () => {
 
     const totalMaxScore =
         baremMentor?.reduce((sum, item) => {
+            if (!isLeader && item.target == "Leader") {
+                return sum;
+            }
             return (
                 sum +
                 item.partitions.reduce((partSum, partition) => {
@@ -212,9 +218,12 @@ const MentorBaremPage = () => {
             <section className="my-6" id="barem-table">
                 <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-xs">
                     <div className="border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 py-4 sm:px-6">
-                        <h2 className="text-base font-bold text-gray-900 sm:text-lg">
-                            ỨNG VIÊN: <span className="text-primary">{candidateActive?.user.fullName}</span>
-                        </h2>
+                        <div className="flex items-center gap-2">
+                            <h2 className="text-base font-bold text-gray-900 sm:text-lg">
+                                ỨNG VIÊN: <span className="text-primary">{candidateActive?.user.fullName}</span>
+                            </h2>
+                            {isLeader && <BadgeLeader />}
+                        </div>
                         <p className="mt-1 text-xs text-gray-500 sm:text-sm">
                             Vui lòng nhập điểm cho từng tiêu chí dưới đây
                         </p>
@@ -249,6 +258,9 @@ const MentorBaremPage = () => {
                                         (sum, partition) => sum + (partition.partitions?.length || 0),
                                         0,
                                     );
+                                    if (!isLeader && item.target == "Leader") {
+                                        return null;
+                                    }
 
                                     return item.partitions.flatMap((partition, partitionIndex) => {
                                         const subPartitions = partition.partitions || [];
@@ -357,16 +369,19 @@ const MentorBaremPage = () => {
 
 const TotalScore = ({ totalCurrentScore, totalMaxScore }: { totalCurrentScore: number; totalMaxScore: number }) => (
     <div className="my-6 flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4 shadow-xs sm:flex-row sm:items-center sm:justify-between sm:p-6">
-        <div className="flex items-baseline gap-2">
-            <span className="text-md font-semibold text-gray-700 sm:text-lg">Tổng điểm:</span>
-            <span
-                className={`${
-                    totalCurrentScore <= totalMaxScore ? "text-primary" : "text-red-600"
-                } text-2xl font-bold sm:text-3xl`}
-            >
-                {totalCurrentScore.toFixed(1)}
-            </span>
-            <span className="text-lg font-medium text-gray-600">/ {totalMaxScore}</span>
+        <div>
+            <div className="flex items-baseline gap-2">
+                <span className="text-md font-semibold text-gray-700 sm:text-lg">Tổng điểm:</span>
+                <span
+                    className={`${
+                        totalCurrentScore <= totalMaxScore ? "text-primary" : "text-red-600"
+                    } text-2xl font-bold sm:text-3xl`}
+                >
+                    {totalCurrentScore.toFixed(1)}
+                </span>
+                <span className="text-lg font-medium text-gray-600">/ {totalMaxScore}</span>
+            </div>
+            <span className="text-xs italic">Leader luôn cao hơn member tối đa là 15đ</span>
         </div>
         <span className="font-bold italic">Điểm được lưu tự động</span>
     </div>

frontend/src/pages/Mentor/Team.tsx

@@ -6,6 +6,7 @@ import type { TeamType } from "~/types/team.types";
 import NotifyNotLeader from "~/components/NotifyNotLeader";
 import { ShowTopic } from "../Candidate/ShowTopic";
 import Helper from "~/utils/helper";
+import BadgeLeader from "~/components/BadgeLeader";
 const Team = ({ team }: { team: TeamType }) => {
     return (
         <section className="col-span-1 lg:col-span-8" id="members">
@@ -84,11 +85,7 @@ const Team = ({ team }: { team: TeamType }) => {
                                         >
                                             <div className="flex items-center gap-2">
                                                 {user.fullName}
-                                                {isLeader && (
-                                                    <span className="text-primary bg-primary/10 rounded-md px-2 py-0.5 text-xs font-medium">
-                                                        Trưởng nhóm
-                                                    </span>
-                                                )}
+                                                {isLeader && <BadgeLeader />}
                                             </div>
                                             <p className="mt-0.5 text-xs text-gray-600">Ngành: {member.major}</p>
                                             {!user.isConfirm && (