feat:update push

src/components/page/consultation/CreateConsultation/CreateConsultation.tsx

@@ -22,18 +22,30 @@ import patientServices, {
 import { QUERY_KEY } from "@/constant/config/enum";
 
 import CustomButton from "@/components/customs/custom-button";
+import { useRouter } from "next/navigation";
+import InputForm from "@/components/utils/FormCustom/components/InputForm";
+import GridColumn from "@/components/layouts/GridColumn";
 
-export interface PopupCreateConsultationProps {
-  onClose: () => void;
-}
-
-const PopupCreateConsultation = ({ onClose }: PopupCreateConsultationProps) => {
+const CreateConsultation = () => {
+  const router = useRouter();
   const queryClient = useQueryClient();
 
   const [form, setForm] = useState<{
     patientId: string;
+    chiefComplaint: string;
+    symptomsText: string;
+    vitalSigns: string;
+    diagnosis: string;
+    treatmentPlan: string;
+    doctorNotes: string;
   }>({
     patientId: "",
+    chiefComplaint: "",
+    symptomsText: "",
+    vitalSigns: "",
+    diagnosis: "",
+    treatmentPlan: "",
+    doctorNotes: "",
   });
 
   /* =========================
@@ -94,8 +106,7 @@ const PopupCreateConsultation = ({ onClose }: PopupCreateConsultationProps) => {
       queryClient.invalidateQueries({
         queryKey: [QUERY_KEY.table_list_consultation],
       });
-
-      onClose();
+      router.back();
     },
   });
 
@@ -108,8 +119,6 @@ const PopupCreateConsultation = ({ onClose }: PopupCreateConsultationProps) => {
       <div
         className="
           relative
-          h-[400px]
-          w-[640px]
           max-w-[95vw]
           rounded-3xl
           bg-white
@@ -119,41 +128,68 @@ const PopupCreateConsultation = ({ onClose }: PopupCreateConsultationProps) => {
           overflow-hidden
         "
       >
-        {/* CLOSE */}
-        <button
-          type="button"
-          onClick={onClose}
-          className="
-            absolute
-            right-5
-            top-5
-            z-10
-            text-gray-400
-            transition
-            hover:text-gray-600
-          "
-        >
-          <X size={22} />
-        </button>
-
-        {/* HEADER */}
-        <div
-          className="
+        <div className="flex items-center justify-between">
+          <div
+            className="
             shrink-0
             border-b
             px-7
             py-5
             bg-white
           "
-        >
-          <h2 className="text-[30px] font-semibold text-[#111827]">
-            Thêm phiên khám
-          </h2>
+          >
+            <h2 className="text-[30px] font-semibold text-[#111827]">
+              Thêm phiên khám
+            </h2>
+          </div>
+          <div
+            className="
+            shrink-0
+            border-t
+            bg-white
+            px-7
+            py-5
+            flex
+            items-center
+            justify-end
+            gap-3
+          "
+          >
+            <CustomButton
+              variant="grey"
+              rounded="md"
+              onClick={() => router.back()}
+            >
+              Hủy bỏ
+            </CustomButton>
+
+            <CustomButton
+              disabled={
+                !form.patientId ||
+                // !form.chiefComplaint ||
+                // !form.diagnosis ||
+                // !form.doctorNotes ||
+                // !form.symptomsText ||
+                // !form.treatmentPlan ||
+                // !form.vitalSigns ||
+                createConsultationMutation.isPending
+              }
+              variant="midnightBlue"
+              rounded="md"
+              fullWidth={false}
+              className="min-w-[180px] "
+              onClick={handleSubmit}
+            >
+              {createConsultationMutation.isPending
+                ? "Đang tạo..."
+                : "Tạo phiên khám"}
+            </CustomButton>
+          </div>
         </div>
 
         {/* BODY */}
         <div className="flex-1 overflow-y-auto px-7 py-5">
-          <div className="space-y-5">
+          <div className="space-y-5 mb-2">
             <SelectForm
               label={
                 <span className="text-[14px] font-medium text-[#374151]">
@@ -183,40 +219,66 @@ const PopupCreateConsultation = ({ onClose }: PopupCreateConsultationProps) => {
               getOptionValue={(item: PatientItem) => item.id}
             />
           </div>
+          {/* <GridColumn col={3}>
+            <InputForm
+              label="Lý do khám"
+              name="chiefComplaint"
+              type="text"
+              value={form.chiefComplaint}
+              placeholder="Nhập lý do khám"
+              isRequired
+            />
+            <InputForm
+              type="text"
+              label="Triệu chứng"
+              name="symptomsText"
+              placeholder="Nhập triệu chứng"
+              isRequired
+              value={form.symptomsText}
+            />
+
+            <InputForm
+              type="text"
+              label="Nhiệt độ cơ thể"
+              name="vitalSigns"
+              placeholder="Nhập nhiệt độ cơ thể"
+              value={form.vitalSigns}
+              isRequired
+            />
+
+            <InputForm
+              type="text"
+              label="Chẩn đoán"
+              name="diagnosis"
+              placeholder="Nhập chẩn đoán"
+              value={form.diagnosis}
+              isRequired
+            />
+
+            <InputForm
+              type="text"
+              label="Kế hoạch điều trị"
+              name="treatmentPlan"
+              placeholder="Nhập kế hoạch điều trị"
+              value={form.treatmentPlan}
+              isRequired
+            />
+
+            <InputForm
+              type="text"
+              label="Ghi chú bác sĩ"
+              name="doctorNotes"
+              placeholder="Nhập ghi chú"
+              value={form.doctorNotes}
+              isRequired
+            />
+          </GridColumn> */}
         </div>
 
         {/* FOOTER */}
-        <div
-          className="
-            shrink-0
-            border-t
-            bg-white
-            px-7
-            py-5
-            flex
-            items-center
-            justify-end
-            gap-3
-          "
-        >
-          <CustomButton variant="grey" rounded="md" onClick={onClose}>
-            Hủy bỏ
-          </CustomButton>
-
-          <CustomButton
-            disabled={!form.patientId || createConsultationMutation.isPending}
-            variant="midnightBlue"
-            rounded="md"
-            onClick={handleSubmit}
-          >
-            {createConsultationMutation.isPending
-              ? "Đang tạo..."
-              : "Tạo phiên khám"}
-          </CustomButton>
-        </div>
       </div>
     </FormCustom>
   );
 };
 
-export default PopupCreateConsultation;
+export default CreateConsultation;

src/components/page/consultation/CreateConsultation/index.ts

@@ -0,0 +1 @@
+export { default } from "./CreateConsultation";

src/components/page/consultation/MainPageConsultation/MainPageConsultation.tsx

@@ -27,8 +27,8 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import React, { useMemo, useState } from "react";
 
-import PopupUpdateConsultation from "../PopupUpdateConsultation";
-import PopupCreateConsultation from "../PopupCreateConsultation";
+import { PATH } from "@/constant/config";
+import Pagination from "@/components/customs/custom-pagination";
 
 const MainPageConsultation = () => {
   const router = useRouter();
@@ -49,10 +49,6 @@ const MainPageConsultation = () => {
 
   const _keyword = searchParams.get("_keyword");
 
-  const _create = searchParams.get("_create");
-
-  const _update = searchParams.get("_update");
-
   /* =========================
         STATE
   ========================= */
@@ -112,6 +108,9 @@ const MainPageConsultation = () => {
         UPDATE QUERY
   ========================= */
 
+  const page = _page ? Number(_page) : 1;
+  const pageSize = _pageSize ? Number(_pageSize) : 10;
+
   const updateQuery = (key: string, value: string | number) => {
     const params = new URLSearchParams(searchParams.toString());
 
@@ -130,45 +129,21 @@ const MainPageConsultation = () => {
     router.push(queryString ? `?${queryString}` : pathname);
   };
 
-  /* =========================
-        CREATE POPUP
-  ========================= */
-
-  const handleOpenCreate = () => {
-    const params = new URLSearchParams(searchParams.toString());
-
-    params.set("_create", "true");
-
-    router.push(`?${params.toString()}`);
-  };
-
-  /* =========================
-        UPDATE POPUP
-  ========================= */
-
-  const handleOpenUpdate = (item: ConsultationItem) => {
-    const params = new URLSearchParams(searchParams.toString());
-
-    params.set("_update", item.id);
-
-    router.push(`?${params.toString()}`);
-  };
-
   /* =========================
         CLOSE POPUP
   ========================= */
 
-  const handleClosePopup = () => {
-    const params = new URLSearchParams(searchParams.toString());
+  // const handleClosePopup = () => {
+  //   const params = new URLSearchParams(searchParams.toString());
 
-    params.delete("_create");
+  //   params.delete("_create");
 
-    params.delete("_update");
+  //   params.delete("_update");
 
-    const queryString = params.toString();
+  //   const queryString = params.toString();
 
-    router.push(queryString ? `?${queryString}` : pathname);
-  };
+  //   router.push(queryString ? `?${queryString}` : pathname);
+  // };
 
   /* =========================
         DIALOG
@@ -268,9 +243,10 @@ const MainPageConsultation = () => {
           variant="midnightBlue"
           fullWidth={false}
           icon={<ClipboardPlus />}
-          onClick={handleOpenCreate}
+          // onClick={handleOpenCreate}
+          href="/consultation/create"
         >
-          Thêm mới
+          Tạo phiên khám
         </CustomButton>
       </div>
 
@@ -310,6 +286,13 @@ const MainPageConsultation = () => {
                 </Link>
               ),
             },
+            {
+              title: "TÊN BỆNH NHÂN",
+
+              render: (item: ConsultationItem) => (
+                <span>{item.patientName}</span>
+              ),
+            },
 
             {
               title: "MÃ PHIÊN KHÁM",
@@ -365,24 +348,30 @@ const MainPageConsultation = () => {
                   stateActive={item.status}
                   listState={[
                     {
-                      state: 1,
-                      text: "Đang khám",
+                      state: TYPE_STATUS.Draft,
+                      text: "Đang chờ",
                       textColor: "#000",
                       backgroundColor: "#FFE4C4",
                     },
 
                     {
-                      state: 2,
-                      text: "Hoàn thành",
-                      textColor: "#fff",
-                      backgroundColor: "#22c55e",
+                      state: TYPE_STATUS.InProgress,
+                      text: "Đang thực hiện",
+                      textColor: "#000",
+                      backgroundColor: "#ff3300",
                     },
 
                     {
-                      state: 3,
+                      state: TYPE_STATUS.Completed,
+                      text: "Hoàn thành",
+                      textColor: "#000",
+                      backgroundColor: "#3d69eb",
+                    },
+                    {
+                      state: TYPE_STATUS.Cancelled,
                       text: "Đã hủy",
-                      textColor: "#fff",
-                      backgroundColor: "#ef4444",
+                      textColor: "#000",
+                      backgroundColor: "#cccc",
                     },
                   ]}
                 />
@@ -408,7 +397,7 @@ const MainPageConsultation = () => {
                       size="sm"
                       disabled={isDisabled}
                       icon={<Pencil className="text-blue-400" />}
-                      onClick={() => handleOpenUpdate(item)}
+                      href={`/consultation/update?_id=${item?.id}`}
                     />
 
                     {/* CANCEL */}
@@ -437,6 +426,14 @@ const MainPageConsultation = () => {
           ]}
         />
       </DataWrapper>
+      <Pagination
+        total={consultationData.length}
+        page={page}
+        pageSize={pageSize}
+        onSetPage={(value) => updateQuery("_page", value)}
+        onSetPageSize={(value) => updateQuery("_pageSize", value)}
+        dependencies={[_pageSize, _keyword]}
+      />
 
       {/* CANCEL DIALOG */}
       <CustomDialog
@@ -461,19 +458,6 @@ const MainPageConsultation = () => {
         titleCancel="Đóng"
         titleSubmit="Xác nhận"
       />
-
-      {/* CREATE */}
-      <CustomPopup open={!!_create} onClose={handleClosePopup}>
-        <PopupCreateConsultation onClose={handleClosePopup} />
-      </CustomPopup>
-
-      {/* UPDATE */}
-      <CustomPopup open={!!_update} onClose={handleClosePopup}>
-        <PopupUpdateConsultation
-          id={_update || ""}
-          onClose={handleClosePopup}
-        />
-      </CustomPopup>
     </div>
   );
 };

src/components/page/consultation/PopupCreateConsultation/index.ts

@@ -1 +0,0 @@
-export { default } from "./PopupCreateConsultation";

src/components/page/consultation/PopupUpdateConsultation/PopupUpdateConsultation.tsx

@@ -1,281 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-
-import { X } from "lucide-react";
-
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-
-import CustomButton from "@/components/customs/custom-button";
-
-import FormCustom from "@/components/utils/FormCustom";
-
-import InputForm from "@/components/utils/FormCustom/components/InputForm";
-
-import TextArea from "@/components/utils/FormCustom/components/TextArea";
-
-import { QUERY_KEY } from "@/constant/config/enum";
-
-import { httpRequest } from "@/services";
-
-import consultationServices, {
-  ConsultationDetail,
-} from "@/services/consultationServices";
-import { ContextFormCustom } from "@/components/utils/FormCustom/contexts";
-
-interface PopupUpdateConsultationProps {
-  id: string;
-  onClose: () => void;
-}
-
-interface IUpdateConsul {
-  chiefComplaint: string;
-  symptomsText: string;
-  vitalSigns: string;
-  diagnosis: string;
-  treatmentPlan: string;
-  doctorNotes: string;
-}
-
-const defaultForm: IUpdateConsul = {
-  chiefComplaint: "",
-  symptomsText: "",
-  vitalSigns: "",
-  diagnosis: "",
-  treatmentPlan: "",
-  doctorNotes: "",
-};
-
-const PopupUpdateConsultation = ({
-  id,
-  onClose,
-}: PopupUpdateConsultationProps) => {
-  const queryClient = useQueryClient();
-  const [form, setForm] = useState<IUpdateConsul>(defaultForm);
-
-  const consulDetailQuery = useQuery<ConsultationDetail>({
-    queryKey: [QUERY_KEY.chi_tiet_phien_kham, id],
-    enabled: !!id,
-    queryFn: async () => {
-      const res = await httpRequest<ConsultationDetail>({
-        showMessageFailed: true,
-        http: consultationServices.detailConsultations(id),
-      });
-      return (
-        res || {
-          id: "",
-          patientId: "",
-          sessionCode: "",
-          visitDate: "",
-          status: 1,
-          chiefComplaint: null,
-          symptomsText: null,
-          vitalSigns: null,
-          diagnosis: null,
-          treatmentPlan: null,
-          doctorNotes: null,
-          createdBy: "",
-          isDeleted: false,
-        }
-      );
-    },
-  });
-
-  useEffect(() => {
-    const consul = consulDetailQuery.data;
-
-    if (!consul) return;
-
-    setForm({
-      chiefComplaint: consul.chiefComplaint || "",
-      symptomsText: consul.symptomsText || "",
-      vitalSigns: consul.vitalSigns || "",
-      diagnosis: consul.diagnosis || "",
-      treatmentPlan: consul.treatmentPlan || "",
-      doctorNotes: consul.doctorNotes || "",
-    });
-  }, [consulDetailQuery.data]);
-
-  /* =========================
-      SUBMIT
-  ========================= */
-
-  const updateConsultationMutation = useMutation({
-    mutationFn: async () => {
-      return httpRequest({
-        showMessageFailed: true,
-        showMessageSuccess: true,
-        msgSuccess: "Cập nhật phiên khám thành công!",
-        http: consultationServices.putConsultations(id, {
-          chiefComplaint: form.chiefComplaint,
-          symptomsText: form.symptomsText,
-          vitalSigns: form.vitalSigns,
-          diagnosis: form.diagnosis,
-          treatmentPlan: form.treatmentPlan,
-          doctorNotes: form.doctorNotes,
-        }),
-      });
-    },
-
-    onSuccess(data) {
-      if (!data) return;
-
-      queryClient.invalidateQueries({
-        queryKey: [QUERY_KEY.table_list_consultation],
-      });
-
-      queryClient.invalidateQueries({
-        queryKey: [QUERY_KEY.chi_tiet_phien_kham, id],
-      });
-
-      onClose();
-    },
-  });
-
-  const handleSubmit = () => {
-    updateConsultationMutation.mutate();
-  };
-
-  if (consulDetailQuery.isLoading) {
-    return (
-      <div className="flex items-center justify-center p-10">
-        Đang tải dữ liệu...
-      </div>
-    );
-  }
-
-  return (
-    <FormCustom form={form} setForm={setForm} onSubmit={handleSubmit}>
-      <div
-        className="
-          relative
-          h-[680px]
-          w-[640px]
-          max-w-[95vw]
-          rounded-3xl
-          bg-white
-          shadow-xl
-          flex
-          flex-col
-          overflow-hidden
-        "
-      >
-        {/* CLOSE */}
-        <button
-          type="button"
-          onClick={onClose}
-          className="
-            absolute
-            right-5
-            top-5
-            z-10
-            text-gray-400
-            transition
-            hover:text-gray-600
-          "
-        >
-          <X size={22} />
-        </button>
-
-        {/* HEADER */}
-        <div
-          className="
-            shrink-0
-            border-b
-            px-7
-            py-5
-            bg-white
-          "
-        >
-          <h2 className="text-[30px] font-semibold text-[#111827]">
-            Chỉnh sửa phiên khám
-          </h2>
-        </div>
-
-        {/* BODY */}
-        <div className="flex-1 overflow-y-auto px-7 py-5">
-          <div className="space-y-5">
-            <InputForm
-              label="Lý do khám"
-              name="chiefComplaint"
-              type="text"
-              value={form.chiefComplaint}
-              placeholder="Nhập lý do khám"
-            />
-
-            <TextArea
-              label="Triệu chứng"
-              name="symptomsText"
-              placeholder="Nhập triệu chứng"
-              value={form.symptomsText}
-            />
-
-            <TextArea
-              label="Dấu hiệu sinh tồn"
-              name="vitalSigns"
-              placeholder="Nhập dấu hiệu sinh tồn"
-              value={form.vitalSigns}
-            />
-
-            <TextArea
-              label="Chẩn đoán"
-              name="diagnosis"
-              placeholder="Nhập chẩn đoán"
-              value={form.diagnosis}
-            />
-
-            <TextArea
-              label="Kế hoạch điều trị"
-              name="treatmentPlan"
-              placeholder="Nhập kế hoạch điều trị"
-              value={form.treatmentPlan}
-            />
-
-            <TextArea
-              label="Ghi chú bác sĩ"
-              name="doctorNotes"
-              placeholder="Nhập ghi chú"
-              value={form.doctorNotes}
-            />
-          </div>
-        </div>
-
-        {/* FOOTER */}
-        <div
-          className="
-            shrink-0
-            border-t
-            bg-white
-            px-7
-            py-5
-            flex
-            items-center
-            justify-end
-            gap-3
-          "
-        >
-          <CustomButton variant="grey" rounded="md" onClick={onClose}>
-            Hủy bỏ
-          </CustomButton>
-
-          <ContextFormCustom.Consumer>
-            {({ isDone }) => (
-              <CustomButton
-                disabled={!isDone || updateConsultationMutation.isPending}
-                variant="midnightBlue"
-                rounded="md"
-                type="submit"
-              >
-                {updateConsultationMutation.isPending
-                  ? "Đang cập nhật..."
-                  : "Cập nhật"}
-              </CustomButton>
-            )}
-          </ContextFormCustom.Consumer>
-        </div>
-      </div>
-    </FormCustom>
-  );
-};
-
-export default PopupUpdateConsultation;

src/components/page/consultation/PopupUpdateConsultation/index.ts

@@ -1 +0,0 @@
-export { default } from "./PopupUpdateConsultation";

src/components/page/consultation/UpdateConsultation/UpdateConsultation.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+
+import CustomButton from "@/components/customs/custom-button";
+import FormCustom from "@/components/utils/FormCustom";
+import InputForm from "@/components/utils/FormCustom/components/InputForm";
+import TextArea from "@/components/utils/FormCustom/components/TextArea";
+import GridColumn from "@/components/layouts/GridColumn";
+
+import { QUERY_KEY } from "@/constant/config/enum";
+import { PATH } from "@/constant/config";
+import { httpRequest } from "@/services";
+import consultationServices, {
+  ConsultationDetail,
+} from "@/services/consultationServices";
+
+/* =========================
+   TYPES
+========================= */
+interface IUpdateConsul {
+  chiefComplaint: string;
+  symptomsText: string;
+  vitalSigns: string;
+  diagnosis: string;
+  treatmentPlan: string;
+  doctorNotes: string;
+}
+
+/* =========================
+   DEFAULT
+========================= */
+const defaultForm: IUpdateConsul = {
+  chiefComplaint: "",
+  symptomsText: "",
+  vitalSigns: "",
+  diagnosis: "",
+  treatmentPlan: "",
+  doctorNotes: "",
+};
+
+/* =========================
+   COMPONENT
+========================= */
+const UpdateConsultation = () => {
+  const router = useRouter();
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+
+  // Hỗ trợ lấy ID từ cả /consultation/update/[id] hoặc /consultation/update?_id=...
+  const idFromParams = params?.id as string | undefined;
+  const idFromSearch = searchParams?.get("_id") ?? undefined;
+  const id = idFromParams || idFromSearch || "";
+
+  const [form, setForm] = useState<IUpdateConsul>(defaultForm);
+
+  /* =========================
+        GET DETAIL API
+  ========================= */
+  const consulDetailQuery = useQuery<ConsultationDetail>({
+    queryKey: [QUERY_KEY.chi_tiet_phien_kham, id],
+    enabled: !!id,
+    queryFn: async () => {
+      const res = await httpRequest<ConsultationDetail>({
+        showMessageFailed: true,
+        http: consultationServices.detailConsultations(id),
+      });
+
+      return (
+        res || {
+          id: "",
+          patientId: "",
+          sessionCode: "",
+          visitDate: "",
+          status: 1,
+          chiefComplaint: null,
+          symptomsText: null,
+          vitalSigns: null,
+          diagnosis: null,
+          treatmentPlan: null,
+          doctorNotes: null,
+          createdBy: "",
+          isDeleted: false,
+        }
+      );
+    },
+  });
+
+  /* =========================
+        MAP & SET FORM
+  ========================= */
+  useEffect(() => {
+    const consul = consulDetailQuery.data;
+    if (!consul) return;
+
+    setForm({
+      chiefComplaint: consul.chiefComplaint || "",
+      symptomsText: consul.symptomsText || "",
+      vitalSigns: consul.vitalSigns || "",
+      diagnosis: consul.diagnosis || "",
+      treatmentPlan: consul.treatmentPlan || "",
+      doctorNotes: consul.doctorNotes || "",
+    });
+  }, [consulDetailQuery.data]);
+
+  /* =========================
+        UPDATE MUTATION
+  ========================= */
+  const updateConsultationMutation = useMutation({
+    mutationFn: async () => {
+      if (!id || id === "undefined") {
+        throw new Error("Không tìm thấy ID phiên khám!");
+      }
+
+      return httpRequest({
+        showMessageFailed: true,
+        showMessageSuccess: true,
+        msgSuccess: "Cập nhật phiên khám thành công!",
+        http: consultationServices.putConsultations(id, {
+          chiefComplaint: form.chiefComplaint,
+          symptomsText: form.symptomsText,
+          vitalSigns: form.vitalSigns,
+          diagnosis: form.diagnosis,
+          treatmentPlan: form.treatmentPlan,
+          doctorNotes: form.doctorNotes,
+        }),
+      });
+    },
+
+    onSuccess(data) {
+      if (!data) return;
+
+      // Làm mới danh sách và chi tiết phiên khám trong cache
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.table_list_consultation],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.chi_tiet_phien_kham, id],
+      });
+
+      // Quay lại trang quản lý danh sách phiên khám
+      router.push(PATH.CONSULTATION || "/consultation");
+    },
+  });
+
+  const handleSubmit = () => {
+    updateConsultationMutation.mutate();
+  };
+
+  const isLoading =
+    consulDetailQuery.isLoading || updateConsultationMutation.isPending;
+
+  /* =========================
+        LOADING UI
+  ========================= */
+  if (consulDetailQuery.isLoading) {
+    return (
+      <div className="flex items-center justify-center p-10 font-medium text-gray-500">
+        Đang tải dữ liệu phiên khám...
+      </div>
+    );
+  }
+
+  /* =========================
+        MAIN UI
+  ========================= */
+  return (
+    <FormCustom form={form} setForm={setForm} onSubmit={handleSubmit}>
+      <div className="flex flex-col gap-6 rounded-2xl bg-white p-6 shadow-xl">
+        {/* HEADER */}
+        <div className="flex items-center justify-between border-b pb-5">
+          <div>
+            <h2 className="text-[28px] font-semibold text-[#111827]">
+              Chỉnh sửa phiên khám
+            </h2>
+            <p className="mt-1 text-sm text-[#697586]">
+              Cập nhật thông tin chi tiết quá trình khám bệnh
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <CustomButton
+              type="button"
+              variant="grey"
+              rounded="md"
+              onClick={() => router.back()}
+              className="min-w-[120px]"
+            >
+              Hủy bỏ
+            </CustomButton>
+            <CustomButton
+              type="submit"
+              variant="midnightBlue"
+              rounded="md"
+              disabled={isLoading || !id || id === "undefined"}
+              className="min-w-[140px]"
+            >
+              {updateConsultationMutation.isPending
+                ? "Đang cập nhật..."
+                : "Cập nhật"}
+            </CustomButton>
+          </div>
+        </div>
+
+        {/* GENERAL INFO (PATIENT) */}
+        <InputForm
+          label="Bệnh nhân"
+          name="patientInfo"
+          type="text"
+          // Hiển thị Tên bệnh nhân - SĐT hoặc CCCD dựa trên API detail trả về
+          value={
+            consulDetailQuery.data?.patientName
+              ? `${consulDetailQuery.data.patientName} - ${
+                  consulDetailQuery.data.sessionCode ||
+                  // consulDetailQuery.data.identityCard ||
+                  ""
+                }`
+              : "Chưa có thông tin bệnh nhân"
+          }
+          placeholder="Thông tin bệnh nhân"
+          isRequired
+          readOnly
+        />
+        {/* </div> */}
+
+        <GridColumn col={3}>
+          <InputForm
+            label="Lý do khám"
+            name="chiefComplaint"
+            type="text"
+            value={form.chiefComplaint}
+            placeholder="Nhập lý do khám"
+            isRequired
+            onChangeValue={(v) =>
+              setForm((prev) => ({ ...prev, chiefComplaint: String(v) }))
+            }
+          />
+          <InputForm
+            type="text"
+            label="Triệu chứng"
+            name="symptomsText"
+            placeholder="Nhập triệu chứng"
+            isRequired
+            value={form.symptomsText}
+            onChangeValue={(v) =>
+              setForm((prev) => ({ ...prev, symptomsText: String(v) }))
+            }
+          />
+
+          <InputForm
+            type="text"
+            label="Nhiệt độ cơ thể"
+            name="vitalSigns"
+            placeholder="Nhập nhiệt độ cơ thể"
+            value={form.vitalSigns}
+            isRequired
+            onChangeValue={(v) =>
+              setForm((prev) => ({ ...prev, vitalSigns: String(v) }))
+            }
+          />
+
+          <InputForm
+            type="text"
+            label="Chẩn đoán"
+            name="diagnosis"
+            placeholder="Nhập chẩn đoán"
+            value={form.diagnosis}
+            isRequired
+            onChangeValue={(v) =>
+              setForm((prev) => ({ ...prev, diagnosis: String(v) }))
+            }
+          />
+
+          <InputForm
+            type="text"
+            label="Kế hoạch điều trị"
+            name="treatmentPlan"
+            placeholder="Nhập kế hoạch điều trị"
+            value={form.treatmentPlan}
+            isRequired
+            onChangeValue={(v) =>
+              setForm((prev) => ({ ...prev, treatmentPlan: String(v) }))
+            }
+          />
+
+          <InputForm
+            type="text"
+            label="Ghi chú bác sĩ"
+            name="doctorNotes"
+            placeholder="Nhập ghi chú"
+            value={form.doctorNotes}
+            isRequired
+            onChangeValue={(v) =>
+              setForm((prev) => ({ ...prev, doctorNotes: String(v) }))
+            }
+          />
+        </GridColumn>
+      </div>
+    </FormCustom>
+  );
+};
+
+export default UpdateConsultation;

src/components/page/consultation/UpdateConsultation/index.ts

@@ -0,0 +1 @@
+export { default } from "./UpdateConsultation";