feat: update presentation scheduling flow and enhance UI components

Author: hoangtuanqn

backend/src/controllers/team.controllers.ts

@@ -57,7 +57,7 @@ export const getSchedulePresentation = async (
         const userId = req.userId!;
         const { teamId } = req.params;
         console.log("teamId", userId, teamId);
-        // chỉ có thành viên mới get dc
+      
         const result = await teamService.getSchedulePresentation(userId, teamId);
         return res.status(HTTP_STATUS.OK).json(new ResponseClient({ result }));
     } catch (error) {

backend/src/services/team.service.ts

@@ -166,14 +166,14 @@ class TeamService {
         const isMember = await teamRepository.isMember(teamId, userId);
         if (!isMember) {
             throw new ErrorWithStatus({
-                status: HTTP_STATUS.FORBIDDEN,
+                status: HTTP_STATUS.OK,
                 message: "Bạn không có quyền xem lịch trình thuyết trình của nhóm này.",
             });
         }
         const schedule = await teamRepository.findSchedulePresentationByTeamId(teamId);
         if (!schedule) {
             throw new ErrorWithStatus({
-                status: HTTP_STATUS.NOT_FOUND,
+                status: HTTP_STATUS.OK,
                 message: "Lịch trình thuyết trình của nhóm không tồn tại.",
             });
         }

frontend/src/api-requests/team.requests.ts

@@ -42,7 +42,7 @@ class TeamApi {
     }
 
     static async getSchedulePresentation(teamId: string) {
-        const res = await privateApi.get<ResponseDetailData<SchedulePresentType>>(`/teams/present/${teamId}`);
+        const res = await privateApi.get<ResponseDetailData<SchedulePresentType>>(`/teams/get-schedule/${teamId}`);
         return res.data;
     }
 }

frontend/src/components/Header/Candidate.tsx

@@ -1,6 +1,6 @@
 import Helper from "~/utils/helper";
 import { NavLink } from "./NavLink";
-import { Presentation, Send } from "lucide-react";
+import { Presentation } from "lucide-react";
 import { useLocation } from "react-router";
 
 const CandidateHeader = () => {

frontend/src/pages/Present/FormRegisterPresent.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Calendar, Clock, Send } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
@@ -17,22 +17,33 @@ interface TimeSlots {
 }
 
 const trialTimeSlots: TimeSlots = {
-    "17/01/2026": ["7:00 - 7:45", "8:00 - 8:45", "9:00 - 9:45", "10:00 - 10:45"],
-    "18/01/2026": ["7:00 - 7:45", "8:00 - 8:45", "9:00 - 9:45", "10:00 - 10:45"],
-    "19/01/2026": ["7:00 - 7:45", "8:00 - 8:45", "9:00 - 9:45", "10:00 - 10:45"],
-    "20/01/2026": ["7:00 - 7:45", "8:00 - 8:45", "9:00 - 9:45", "10:00 - 10:45"],
+    "17/01/2026": ["10h05 - 10h50", "16h05 - 16h50", "19h05 - 19h50", "20h05 - 20h50"],
+    "18/01/2026": ["15h05 - 15h50", "16h05 - 16h50", "19h05 - 19h50", "20h05 - 20h50"],
+    "19/01/2026": ["09h05 - 09h50", "10h05 - 10h50", "19h05 - 19h50", "20h05 - 20h50"],
+    "20/01/2026": ["19h05 - 19h50", "20h05 - 20h50"],
+    "21/01/2026": ["19h05 - 19h50", "20h05 - 20h50"],
 };
 
 const officialTimeSlots: TimeSlots = {
-    "17/01/2026": ["13:00 - 13:45", "14:00 - 14:45"],
-    "18/01/2026": ["13:00 - 13:45", "14:00 - 14:45"],
-    "19/01/2026": ["13:00 - 13:45", "14:00 - 14:45"],
-    "20/01/2026": ["13:00 - 13:45", "14:00 - 14:45"],
+    "24/01/2026": ["18h - 19h", "19h15 - 20h15"],
+    "26/01/2026": ["18h - 19h", "19h15 - 20h15"],
+    "27/01/2026": ["18h - 19h", "19h15 - 20h15"],
+    "28/01/2026": ["18h - 19h", "19h15 - 20h15"],
+    "29/01/2026": ["18h - 19h", "19h15 - 20h15"],
+    "30/01/2026": ["18h - 19h", "19h15 - 20h15"],
+    "31/01/2026": ["18h - 19h", "19h15 - 20h15"],
 };
 
-const FormRegisterPresent = () => {
+const FormRegisterPresent = ({
+    isReload,
+    setIsReload,
+}: {
+    isReload: boolean;
+    setIsReload: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
     const userInfo = useAppSelector((state) => state.user.userInfo);
     const teamId = userInfo.candidate?.teamId || "";
+    const queryClient = useQueryClient();
 
     const [trialSlot, setTrialSlot] = useState<string>("");
     const [officialSlots, setOfficialSlots] = useState<string[]>([]);
@@ -48,9 +59,11 @@ const FormRegisterPresent = () => {
             });
         },
         onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["schedulePresentation", teamId] });
             Notification.success({
                 text: "Đăng ký thời gian thuyết trình thành công!",
             });
+            setIsReload(!isReload);
             setTrialSlot("");
             setOfficialSlots([]);
         },
@@ -101,13 +114,13 @@ const FormRegisterPresent = () => {
                     </div>
                     <p className="text-sm text-gray-600">
                         Chọn <span className="font-semibold">MỘT</span> khung giờ để thuyết trình thử nghiệm và nhận
-                        phản hồi từ mentor.
+                        phản hồi từ Ban Giám Khảo.
                     </p>
                     <div className="rounded-md border-l-4 border-blue-400 bg-blue-50 p-3">
                         <p className="text-xs text-blue-800">
-                            <span className="font-semibold">Lưu ý:</span> Chỉ có{" "}
-                            <span className="font-bold">10 slot</span> thuyết trình thử cho toàn bộ các nhóm. Mỗi nhóm
-                            chỉ được chọn 1 khung giờ tham gia.
+                            <span className="font-semibold">Lưu ý:</span> Chỉ còn{" "}
+                            <span className="font-bold">10 slot</span> thuyết trình thử. Hãy chọn một khung giờ phù hợp
+                            có đủ tất cả các thành viên trong nhóm để tham gia.
                         </p>
                     </div>
 

frontend/src/pages/Present/Notification.tsx

@@ -1,27 +1,5 @@
-import React from "react";
-import { AlertCircle, CheckCircle, Info } from "lucide-react";
-
+import { Info } from "lucide-react";
 const Notification = () => {
-    // TODO: Replace with actual notification data from API/store
-    const hasRegistered = false; // Example state
-    const registrationStatus = "pending"; // 'pending' | 'approved' | 'rejected'
-
-    if (hasRegistered) {
-        return (
-            <div className="mb-6 overflow-hidden rounded-md border border-blue-200 bg-blue-50">
-                <div className="flex gap-3 p-4">
-                    <CheckCircle className="h-5 w-5 flex-shrink-0 text-blue-600" />
-                    <div className="flex-1">
-                        <h3 className="text-sm font-semibold text-blue-900">Đã đăng ký thành công</h3>
-                        <p className="mt-1 text-sm text-blue-700">
-                            Bạn đã đăng ký thời gian thuyết trình. Ban tổ chức sẽ xác nhận và thông báo lại cho bạn.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
     return (
         <div className="mb-6 overflow-hidden rounded-md border border-amber-200 bg-amber-50">
             <div className="flex gap-3 p-4">
@@ -30,26 +8,25 @@ const Notification = () => {
                     <h3 className="text-sm font-semibold text-amber-900">Hướng dẫn đăng ký</h3>
                     <ul className="mt-2 space-y-1 text-sm text-amber-700">
                         <li className="flex items-start gap-2">
-                            <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-amber-600"></span>
+                            <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-600"></span>
                             <span>
-                                <strong>Thuyết trình thử:</strong> Chọn 1 khung giờ để thử nghiệm và nhận phản hồi từ
-                                mentor
+                                <strong>Thuyết trình thử (Online - 45 phút):</strong> 20 phút trình bày + 25 phút hỏi
+                                đáp/góp ý.
                             </span>
                         </li>
                         <li className="flex items-start gap-2">
-                            <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-amber-600"></span>
+                            <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-600"></span>
                             <span>
-                                <strong>Thuyết trình chính thức:</strong> Chọn nhiều khung giờ bạn có thể tham gia, BTC
-                                sẽ sắp xếp cụ thể
+                                <strong>Thuyết trình chính thức (Offline - 60 phút):</strong> 25 phút trình bày + 35
+                                phút hỏi đáp.
                             </span>
                         </li>
                         <li className="flex items-start gap-2">
-                            <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-amber-600"></span>
-                            <span>Mỗi slot thuyết trình kéo dài tối đa 45 phút</span>
-                        </li>
-                        <li className="flex items-start gap-2">
-                            <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-amber-600"></span>
-                            <span>Vui lòng đăng ký trước thời hạn để đảm bảo có slot phù hợp</span>
+                            <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-600"></span>
+                            <span>
+                                <strong>Lưu ý:</strong> Thời gian và địa điểm/Google Meet sẽ được BTC cập nhật trên hệ
+                                thống trước khi diễn ra buổi thuyết trình.
+                            </span>
                         </li>
                     </ul>
                 </div>