feat:update push

src/app/consultation/create/page.tsx

@@ -0,0 +1,14 @@
+"use client";
+import BaseLayout from "@/components/layouts/BaseLayout";
+import CreateConsultation from "@/components/page/consultation/CreateConsultation";
+import React from "react";
+
+const page = () => {
+  return (
+    <BaseLayout title="Tạo phiên khám">
+      <CreateConsultation />
+    </BaseLayout>
+  );
+};
+
+export default page;

src/app/consultation/update/page.tsx

@@ -0,0 +1,14 @@
+"use client";
+import BaseLayout from "@/components/layouts/BaseLayout";
+import UpdateConsultation from "@/components/page/consultation/UpdateConsultation";
+import React from "react";
+
+const page = () => {
+  return (
+    <BaseLayout title="Cập nhật phiên khám">
+      <UpdateConsultation />
+    </BaseLayout>
+  );
+};
+
+export default page;

src/components/page/auth/MainLogin/MainLogin.tsx

@@ -52,7 +52,7 @@ export default function MainLogin() {
         http: authServices.login({
           username: form.username,
           password: form.password,
-          deviceId: form.deviceId,
+          deviceId: form.username,
         }),
       });
     },
@@ -142,7 +142,7 @@ export default function MainLogin() {
             icon={<User size={22} />}
           />
 
-          <div className="mt-5">
+          {/* <div className="mt-5">
             <InputForm
               label={
                 <span>
@@ -159,7 +159,7 @@ export default function MainLogin() {
               showDone
               icon={<ShieldPlus size={22} />}
             />
-          </div>
+          </div> */}
 
           {/* PASSWORD */}
           <div className="mt-5">

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 {
+const CreateConsultation = () => {
-  onClose: () => void;
+  const router = useRouter();
-}
-
-const PopupCreateConsultation = ({ onClose }: PopupCreateConsultationProps) => {
   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],
       });
-
+      router.back();
-      onClose();
     },
   });
 
@@ -108,8 +119,6 @@ const PopupCreateConsultation = ({ onClose }: PopupCreateConsultationProps) => {
       <div
         className="
           relative
-          h-[400px]
-          w-[640px]
           max-w-[95vw]
           rounded-3xl
           bg-white
@@ -119,24 +128,7 @@ const PopupCreateConsultation = ({ onClose }: PopupCreateConsultationProps) => {
           overflow-hidden
         "
       >
-        {/* CLOSE */}
+        <div className="flex items-center justify-between">
-        <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
@@ -150,10 +142,54 @@ const PopupCreateConsultation = ({ onClose }: PopupCreateConsultationProps) => {
               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 { PATH } from "@/constant/config";
-import PopupCreateConsultation from "../PopupCreateConsultation";
+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 handleClosePopup = () => {
-    const params = new URLSearchParams(searchParams.toString());
+  //   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,
+                      state: TYPE_STATUS.Draft,
-                      text: "Đang khám",
+                      text: "Đang chờ",
                       textColor: "#000",
                       backgroundColor: "#FFE4C4",
                     },
 
                     {
-                      state: 2,
+                      state: TYPE_STATUS.InProgress,
-                      text: "Hoàn thành",
+                      text: "Đang thực hiện",
-                      textColor: "#fff",
+                      textColor: "#000",
-                      backgroundColor: "#22c55e",
+                      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",
+                      textColor: "#000",
-                      backgroundColor: "#ef4444",
+                      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";

src/components/page/patient/DetailPatient/DetailPatient.tsx

@@ -1,30 +1,46 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import { ArrowLeft, ClipboardPlus } from "lucide-react";
 
 import patientServices, { PatientDetail } from "@/services/patientServices";
-
+import consultationServices, {
+  ConsultationItem,
+  ConsultationResponse,
+} from "@/services/consultationServices";
 import { httpRequest } from "@/services";
-import { QUERY_KEY } from "@/constant/config/enum";
+
-import { ArrowLeft } from "lucide-react";
+import { QUERY_KEY, TYPE_STATUS } from "@/constant/config/enum";
+import { PATH } from "@/constant/config";
+
+import CustomButton from "@/components/customs/custom-button";
+import StateActive from "@/components/customs/StateActive";
+import DataWrapper from "@/components/customs/DataWrapper";
+import Table from "@/components/customs/custom-table";
+import CustomDialog from "@/components/customs/custom-dialog";
 
 const DetailPatient = () => {
   const params = useParams();
   const router = useRouter();
+  const queryClient = useQueryClient();
 
   const patientId = params?.id as string;
 
+  // State quản lý đóng/mở Dialog xác nhận tạo phiên khám
+  const [openCreateDialog, setOpenCreateDialog] = useState<boolean>(false);
+
+  /* =========================
+        GET DETAIL PATIENT
+  ========================= */
   const patientDetailQuery = useQuery<PatientDetail>({
     queryKey: [QUERY_KEY.chi_tiet_benh_nhan, patientId],
-
     enabled: !!patientId,
-
     queryFn: async () => {
       const res = await httpRequest<PatientDetail>({
         showMessageFailed: true,
-
         http: patientServices.detailPatient(patientId),
       });
 
@@ -51,16 +67,97 @@ const DetailPatient = () => {
     },
   });
 
+  /* =========================
+        GET CONSULTATION HISTORY
+  ========================= */
+  const consultationQuery = useQuery<ConsultationResponse>({
+    queryKey: [QUERY_KEY.table_list_consultation, patientId],
+    enabled: !!patientId,
+    queryFn: async () => {
+      const res = await httpRequest<ConsultationResponse>({
+        showMessageFailed: true,
+        http: consultationServices.getConsultations({
+          Page: 1,
+          PageSize: 5,
+          PatientId: patientId,
+        }),
+      });
+
+      return (
+        res || {
+          items: [],
+          page: 1,
+          pageSize: 10,
+          total: 0,
+          totalPages: 0,
+        }
+      );
+    },
+  });
+
+  /* =========================
+        CREATE MUTATION
+  ========================= */
+  const createConsultationMutation = useMutation({
+    mutationFn: async () => {
+      return httpRequest({
+        showMessageFailed: true,
+        showMessageSuccess: true,
+        msgSuccess: "Tạo phiên khám mới thành công!",
+        // Gọi API với payload chứa patientId của bệnh nhân hiện tại
+        http: consultationServices.createConsultations({
+          patientId: patientId,
+        }),
+      });
+    },
+    onSuccess: (res: any) => {
+      // Đóng dialog
+      setOpenCreateDialog(false);
+
+      // Làm mới danh sách lịch sử phiên khám của bệnh nhân này
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.table_list_consultation, patientId],
+      });
+
+      // Nếu API trả về thông tin phiên khám vừa tạo (có chứa id), chuyển thẳng tới trang update
+      if (res?.id) {
+        router.push(`${PATH.CONSULTATION}/update/${res.id}`);
+      }
+    },
+  });
+
   const patient = patientDetailQuery.data;
+  const consultationData = consultationQuery.data?.items || [];
+
+  /* =========================
+        HANDLERS DIALOG
+  ========================= */
+  const handleOpenCreate = () => {
+    setOpenCreateDialog(true);
+  };
+
+  const handleCloseDialog = () => {
+    setOpenCreateDialog(false);
+  };
+
+  const handleCreateDialog = () => {
+    createConsultationMutation.mutate();
+  };
 
   if (patientDetailQuery.isLoading) {
-    return <div>Đang tải dữ liệu...</div>;
+    return (
+      <div className="flex items-center justify-center p-10 font-medium text-gray-500">
+        Đang tải dữ liệu...
+      </div>
+    );
   }
 
   return (
+    <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-4">
         <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
           <div className="flex flex-col gap-5">
+            <div className="flex items-center justify-between">
               <h2 className="text-[28px] flex items-center gap-2 font-semibold text-[#111827]">
                 <ArrowLeft
                   onClick={() => router.back()}
@@ -68,13 +165,25 @@ const DetailPatient = () => {
                 />{" "}
                 {patient?.fullName}
               </h2>
+              <div>
+                <CustomButton
+                  variant="midnightBlue"
+                  fullWidth={false}
+                  icon={<ClipboardPlus size={18} />}
+                  onClick={handleOpenCreate}
+                  disabled={createConsultationMutation.isPending}
+                >
+                  Tạo phiên khám
+                </CustomButton>
+              </div>
+            </div>
 
+            {/* Thông tin chi tiết bệnh nhân */}
             <div className="grid grid-cols-2 gap-5">
               <div className="space-y-1">
                 <p className="text-[14px] font-medium text-[#697586]">
                   Mã bệnh nhân
                 </p>
-
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.patientCode}
                 </p>
@@ -82,7 +191,6 @@ const DetailPatient = () => {
 
               <div className="space-y-1">
                 <p className="text-[14px] font-medium text-[#697586]">Họ tên</p>
-
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.fullName}
                 </p>
@@ -92,7 +200,6 @@ const DetailPatient = () => {
                 <p className="text-[14px] font-medium text-[#697586]">
                   Mã định danh
                 </p>
-
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.identificationNumber}
                 </p>
@@ -102,7 +209,6 @@ const DetailPatient = () => {
                 <p className="text-[14px] font-medium text-[#697586]">
                   Ngày sinh
                 </p>
-
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.dateOfBirth}
                 </p>
@@ -112,7 +218,6 @@ const DetailPatient = () => {
                 <p className="text-[14px] font-medium text-[#697586]">
                   Giới tính
                 </p>
-
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.gender}
                 </p>
@@ -122,7 +227,6 @@ const DetailPatient = () => {
                 <p className="text-[14px] font-medium text-[#697586]">
                   Số điện thoại
                 </p>
-
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.phone}
                 </p>
@@ -130,15 +234,15 @@ const DetailPatient = () => {
 
               <div className="space-y-1">
                 <p className="text-[14px] font-medium text-[#697586]">Email</p>
-
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.email}
                 </p>
               </div>
 
               <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">Địa chỉ</p>
+                <p className="text-[14px] font-medium text-[#697586]">
-
+                  Địa chỉ
+                </p>
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.address || "-"}
                 </p>
@@ -148,7 +252,6 @@ const DetailPatient = () => {
                 <p className="text-[14px] font-medium text-[#697586]">
                   Người liên hệ khẩn cấp
                 </p>
-
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.emergencyContactName || "-"}
                 </p>
@@ -158,7 +261,6 @@ const DetailPatient = () => {
                 <p className="text-[14px] font-medium text-[#697586]">
                   SĐT khẩn cấp
                 </p>
-
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.emergencyContactPhone || "-"}
                 </p>
@@ -166,15 +268,15 @@ const DetailPatient = () => {
 
               <div className="space-y-1">
                 <p className="text-[14px] font-medium text-[#697586]">Dị ứng</p>
-
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.allergyNotes || "-"}
                 </p>
               </div>
 
               <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">Bệnh nền</p>
+                <p className="text-[14px] font-medium text-[#697586]">
-
+                  Bệnh nền
+                </p>
                 <p className="text-[15px] font-medium text-[#202939]">
                   {patient?.chronicDiseaseNotes || "-"}
                 </p>
@@ -183,6 +285,131 @@ const DetailPatient = () => {
           </div>
         </div>
       </div>
+
+      {/* Lịch sử phiên khám */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold text-black">
+            Lịch sử phiên khám
+          </h2>
+          <Link
+            href={`/consultation`}
+            className="text-blue-500 hover:underline"
+          >
+            Tất cả
+          </Link>
+        </div>
+        <DataWrapper
+          data={consultationData}
+          loading={consultationQuery.isLoading}
+          title="Không có dữ liệu"
+          note="Bệnh nhân chưa có lịch sử khám"
+        >
+          <Table
+            rowKey={(item) => item.id}
+            data={consultationData}
+            column={[
+              {
+                fixedLeft: true,
+                title: "ID PHIÊN KHÁM",
+                render: (item: ConsultationItem) => (
+                  <Link
+                    href={`/consultation/${item.id}`}
+                    className="text-blue-500 hover:underline"
+                  >
+                    {item.id}
+                  </Link>
+                ),
+              },
+              {
+                title: "MÃ PHIÊN KHÁM",
+                render: (item: ConsultationItem) => (
+                  <span>{item.sessionCode}</span>
+                ),
+              },
+              {
+                title: "NGÀY KHÁM",
+                render: (item: ConsultationItem) => (
+                  <span>{item.visitDate}</span>
+                ),
+              },
+              {
+                title: "DẤU HIỆU",
+                render: (item: ConsultationItem) => (
+                  <span>{item.symptomsText || "---"}</span>
+                ),
+              },
+              {
+                title: "CHUẨN ĐOÁN",
+                render: (item: ConsultationItem) => (
+                  <span>{item.diagnosis || "---"}</span>
+                ),
+              },
+              {
+                title: "KẾ HOẠCH ĐIỀU TRỊ",
+                render: (item: ConsultationItem) => (
+                  <span>{item.treatmentPlan || "---"}</span>
+                ),
+              },
+              {
+                title: "GHI CHÚ BÁC SĨ",
+                render: (item: ConsultationItem) => (
+                  <span>{item.doctorNotes || "---"}</span>
+                ),
+              },
+              {
+                title: "TRẠNG THÁI",
+                render: (item: ConsultationItem) => (
+                  <StateActive
+                    stateActive={item.status}
+                    listState={[
+                      {
+                        state: TYPE_STATUS.Draft,
+                        text: "Đang chờ",
+                        textColor: "#000",
+                        backgroundColor: "#FFE4C4",
+                      },
+                      {
+                        state: TYPE_STATUS.InProgress,
+                        text: "Đang thực hiện",
+                        textColor: "#000",
+                        backgroundColor: "#ff3300",
+                      },
+                      {
+                        state: TYPE_STATUS.Completed,
+                        text: "Hoàn thành",
+                        textColor: "#000",
+                        backgroundColor: "#3d69eb",
+                      },
+                      {
+                        state: TYPE_STATUS.Cancelled,
+                        text: "Đã hủy",
+                        textColor: "#000",
+                        backgroundColor: "#cccc",
+                      },
+                    ]}
+                  />
+                ),
+              },
+            ]}
+          />
+        </DataWrapper>
+      </div>
+
+      {/* DIALOG XÁC NHẬN */}
+      <CustomDialog
+        open={openCreateDialog}
+        title="Tạo phiên khám"
+        note={`Bạn có chắc chắn muốn tạo phiên khám cho bệnh nhân ${patient?.fullName} không?`}
+        type="successPlay" // Giữ nguyên type của bạn, hoặc đổi thành "warning"/"info" tùy UI component quy định
+        onClose={handleCloseDialog}
+        onSubmit={handleCreateDialog}
+        titleCancel="Đóng"
+        titleSubmit={
+          createConsultationMutation.isPending ? "Đang xử lý..." : "Xác nhận"
+        }
+      />
+    </div>
   );
 };
 

src/components/page/patient/MainPagePatient/MainPagePatient.tsx

@@ -19,6 +19,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import React, { useMemo, useState } from "react";
 import PopupCreatePatient from "../PopupCreatePatient";
 import PopupUpdatePatient from "../PopupUpdatePatient";
+import Pagination from "@/components/customs/custom-pagination";
 
 const MainPagePatient = () => {
   const router = useRouter();
@@ -80,6 +81,10 @@ const MainPagePatient = () => {
   /**
    * UPDATE QUERY PARAMS
    */
+
+  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());
 
@@ -272,6 +277,14 @@ const MainPagePatient = () => {
           ]}
         />
       </DataWrapper>
+      <Pagination
+        total={patientData.length}
+        page={page}
+        pageSize={pageSize}
+        onSetPage={(value) => updateQuery("_page", value)}
+        onSetPageSize={(value) => updateQuery("_pageSize", value)}
+        dependencies={[_pageSize, _keyword]}
+      />
 
       {/* DELETE DIALOG */}
       <CustomDialog

src/components/page/prescription/CreatePrescription/CreatePrescription.tsx

@@ -6,6 +6,8 @@ import { Plus, Trash2 } from "lucide-react";
 
 import { useMutation, useQuery } from "@tanstack/react-query";
 
+import { useRouter } from "next/navigation";
+
 import CustomButton from "@/components/customs/custom-button";
 
 import FormCustom from "@/components/utils/FormCustom";
@@ -16,6 +18,8 @@ import TextArea from "@/components/utils/FormCustom/components/TextArea";
 
 import SelectForm from "@/components/utils/FormCustom/components/SelectForm";
 
+import UploadImage from "@/components/utils/UploadImage";
+
 import { httpRequest } from "@/services";
 
 import prescriptionServices from "@/services/prescriptionServices";
@@ -26,10 +30,14 @@ import consultationServices, {
 } from "@/services/consultationServices";
 
 import { QUERY_KEY } from "@/constant/config/enum";
+
 import { toastWarn } from "@/common/funcs/toast";
+
 import { PATH } from "@/constant/config";
-import { useRouter } from "next/navigation";
+
-import UploadImage from "@/components/utils/UploadImage";
+/* =========================
+   TYPES
+========================= */
 
 interface PrescriptionItem {
   medicineName: string;
@@ -42,16 +50,12 @@ interface PrescriptionItem {
 interface PrescriptionForm {
   examinationSessionId: string;
   notes: string;
-  PrescriptionFile: string;
   items: PrescriptionItem[];
 }
 
-interface UploadImageItem {
+/* =========================
-  url?: string;
+   DEFAULT
-  path?: string;
+========================= */
-  file?: File;
-  img?: string;
-}
 
 const defaultMedicine: PrescriptionItem = {
   medicineName: "",
@@ -61,36 +65,25 @@ const defaultMedicine: PrescriptionItem = {
   instructions: "",
 };
 
-const convertFileToBase64 = (file: File): Promise<string> => {
+/* =========================
-  return new Promise((resolve, reject) => {
+   COMPONENT
-    const reader = new FileReader();
+========================= */
-
-    reader.readAsDataURL(file);
-
-    reader.onload = () => {
-      resolve(reader.result as string);
-    };
-
-    reader.onerror = (error) => {
-      reject(error);
-    };
-  });
-};
 
 const CreatePrescription = () => {
   const router = useRouter();
-  const [file, setFile] = useState<any>(null);
+
+  const [file, setFile] = useState<File | null>(null);
 
   const [form, setForm] = useState<PrescriptionForm>({
     examinationSessionId: "",
     notes: "",
-    PrescriptionFile: "",
     items: [defaultMedicine],
   });
 
-  /**
+  /* =========================
-   * GET EXAMINATION SESSION
+      GET EXAMINATION SESSION
-   */
+  ========================= */
+
   const examinationSessionQuery = useQuery<ConsultationResponse>({
     queryKey: [QUERY_KEY.table_list_consultation],
 
@@ -120,30 +113,50 @@ const CreatePrescription = () => {
 
   const examinationSessionOptions = examinationSessionQuery.data?.items || [];
 
+  /* =========================
+      CREATE MUTATION
+  ========================= */
+
   const createPrescriptionMutation = useMutation({
-    mutationFn: async (body: { PrescriptionFile: string }) => {
+    mutationFn: async () => {
+      const formData = new FormData();
+
+      formData.append("examinationSessionId", form.examinationSessionId);
+
+      formData.append("notes", form.notes);
+
+      /**
+       * FILE
+       */
+      if (file) {
+        formData.append("PrescriptionFile", file);
+      }
+
+      /**
+       * MEDICINE ITEMS
+       */
+      form.items
+        .filter((x) => x.medicineName.trim() !== "")
+        .forEach((item, index) => {
+          formData.append(`items[${index}].medicineName`, item.medicineName);
+
+          formData.append(`items[${index}].dosage`, item.dosage);
+
+          formData.append(`items[${index}].frequency`, item.frequency);
+
+          formData.append(`items[${index}].duration`, item.duration);
+
+          formData.append(`items[${index}].instructions`, item.instructions);
+        });
+
       return await httpRequest({
         showMessageFailed: true,
+
         showMessageSuccess: true,
+
         msgSuccess: "Tạo đơn thuốc thành công!",
 
-        http: prescriptionServices.createPrescription({
+        http: prescriptionServices.createPrescription(formData),
-          examinationSessionId: form.examinationSessionId,
-
-          notes: form.notes,
-
-          PrescriptionFile: body.PrescriptionFile,
-
-          items: form.items
-            .filter((x) => x.medicineName.trim() !== "")
-            .map((x) => ({
-              medicineName: x.medicineName,
-              dosage: x.dosage,
-              frequency: x.frequency,
-              duration: x.duration,
-              instructions: x.instructions,
-            })),
-        }),
       });
     },
 
@@ -152,23 +165,21 @@ const CreatePrescription = () => {
     },
 
     onError: (error: any) => {
-      // 👇 BACKEND ERROR HERE
       const message =
-        error?.message || error?.error?.message || "Có lỗi xảy ra";
+        error?.response?.data?.message || error?.message || "Có lỗi xảy ra";
-
-      const code = error?.code || error?.error?.code;
 
       toastWarn({
         msg: message,
       });
 
-      console.log("ERROR CODE:", code);
+      console.log("CREATE PRESCRIPTION ERROR:", error);
     },
   });
 
-  /**
+  /* =========================
-   * CHANGE MEDICINE FIELD
+      CHANGE MEDICINE FIELD
-   */
+  ========================= */
+
   const handleChangeMedicine = (
     index: number,
     key: keyof PrescriptionItem,
@@ -187,9 +198,10 @@ const CreatePrescription = () => {
     }));
   };
 
-  /**
+  /* =========================
-   * ADD MEDICINE
+      ADD MEDICINE
-   */
+  ========================= */
+
   const handleAddMedicine = () => {
     setForm((prev) => ({
       ...prev,
@@ -207,9 +219,10 @@ const CreatePrescription = () => {
     }));
   };
 
-  /**
+  /* =========================
-   * REMOVE MEDICINE
+      REMOVE MEDICINE
-   */
+  ========================= */
+
   const handleRemoveMedicine = (index: number) => {
     const newItems = form.items.filter((_, i) => i !== index);
 
@@ -219,11 +232,11 @@ const CreatePrescription = () => {
     }));
   };
 
-  const handleSubmit = async () => {
+  /* =========================
-    try {
+      SUBMIT
-      /**
+  ========================= */
-       * VALIDATE
+
-       */
+  const handleSubmit = () => {
     if (!form.examinationSessionId) {
       return toastWarn({
         msg: "Vui lòng chọn phiên khám",
@@ -236,46 +249,13 @@ const CreatePrescription = () => {
       });
     }
 
-      /**
+    createPrescriptionMutation.mutate();
-       * UPLOAD IMAGE
-       */
-      let uploadedImage = "";
-
-      if (file) {
-        const formData = new FormData();
-
-        formData.append("file", file);
-
-        /**
-         * API UPLOAD
-         * SỬA uploadServices theo project của bạn
-         */
-        const uploadRes: any = await httpRequest({
-          showMessageFailed: true,
-
-          http: prescriptionServices.uploadImage(formData),
-        });
-
-        /**
-         * BACKEND RESPONSE
-         */
-        uploadedImage =
-          uploadRes?.url || uploadRes?.path || uploadRes?.data?.url || "";
-      }
-
-      /**
-       * CREATE PRESCRIPTION
-       */
-      createPrescriptionMutation.mutate({
-        PrescriptionFile: uploadedImage,
-      });
-    } catch (error: any) {
-      toastWarn({
-        msg: error?.message || "Upload ảnh thất bại",
-      });
-    }
   };
 
+  /* =========================
+      UI
+  ========================= */
+
   return (
     <FormCustom form={form} setForm={setForm} onSubmit={handleSubmit}>
       <div className="flex flex-col gap-6 rounded-2xl bg-white p-6 shadow">
@@ -290,11 +270,13 @@ const CreatePrescription = () => {
               Tạo mới đơn thuốc cho bệnh nhân
             </p>
           </div>
+
           <div>
             <CustomButton
               type="submit"
               variant="midnightBlue"
               disabled={createPrescriptionMutation.isPending}
+              className="min-w-[180px]"
             >
               {createPrescriptionMutation.isPending
                 ? "Đang tạo..."
@@ -333,9 +315,7 @@ const CreatePrescription = () => {
                   examinationSessionId: "",
                 }))
               }
-              getOptionLabel={(item: ConsultationItem) =>
+              getOptionLabel={(item: ConsultationItem) => `${item.sessionCode}`}
-                `${item.sessionCode} `
-              }
               getOptionValue={(item: ConsultationItem) => item.id}
             />
 
@@ -350,7 +330,7 @@ const CreatePrescription = () => {
                 name="PrescriptionFile"
                 file={file}
                 setFile={setFile}
-                path={""}
+                path=""
               />
             </div>
 
@@ -378,6 +358,7 @@ const CreatePrescription = () => {
             <h3 className="text-lg font-semibold text-[#111827]">
               Danh sách thuốc
             </h3>
+
             <div>
               <CustomButton
                 type="button"
@@ -413,7 +394,7 @@ const CreatePrescription = () => {
                   )}
                 </div>
 
-                {/* FORM */}
+                {/* INPUTS */}
                 <div className="grid grid-cols-2 gap-5">
                   <InputForm
                     label="Tên thuốc"
@@ -460,6 +441,7 @@ const CreatePrescription = () => {
                   />
                 </div>
 
+                {/* INSTRUCTION */}
                 <div className="mt-5">
                   <TextArea
                     label="Hướng dẫn sử dụng"

src/components/page/prescription/MainPrescription/MainPrescription.tsx

@@ -1,4 +1,5 @@
 import CustomButton from "@/components/customs/custom-button";
+import Pagination from "@/components/customs/custom-pagination";
 import Search from "@/components/customs/custom-search";
 import Table from "@/components/customs/custom-table";
 import DataWrapper from "@/components/customs/DataWrapper";
@@ -14,7 +15,7 @@ import { Pencil, Pill, Trash2 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import React from "react";
+import React, { useMemo } from "react";
 
 const MainPrescription = () => {
   const router = useRouter();
@@ -58,6 +59,13 @@ const MainPrescription = () => {
     },
   });
 
+  const prescriptionData = useMemo(() => {
+    return prescriptionQuery.data?.items || [];
+  }, [prescriptionQuery.data]);
+
+  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());
 
@@ -100,14 +108,14 @@ const MainPrescription = () => {
       </div>
 
       <DataWrapper
-        data={prescriptionQuery.data?.items || []}
+        data={prescriptionData || []}
         loading={prescriptionQuery.isLoading}
         title="No Data"
         note="Không có đơn thuốc nào"
       >
         <Table
           rowKey={(item: any) => item.id}
-          data={prescriptionQuery.data?.items || []}
+          data={prescriptionData || []}
           column={[
             // ================= ID / CODE =================
             {
@@ -158,23 +166,31 @@ const MainPrescription = () => {
             },
 
             // ================= ACTION =================
-            {
+            // {
-              fixedRight: true,
+            //   fixedRight: true,
-              title: "ACTION",
+            //   title: "ACTION",
 
-              render: (item: any) => (
+            //   render: (item: any) => (
-                <div className="flex items-center gap-2">
+            //     <div className="flex items-center gap-2">
-                  <CustomButton
+            //       <CustomButton
-                    size="sm"
+            //         size="sm"
-                    icon={<Pencil className="text-blue-400" />}
+            //         icon={<Pencil className="text-blue-400" />}
-                    href={`${PATH.PRESCRIPTION}/update?_id=${item?.id}`}
+            //         href={`${PATH.PRESCRIPTION}/update?_id=${item?.id}`}
-                  />
+            //       />
-                </div>
+            //     </div>
-              ),
+            //   ),
-            },
+            // },
           ]}
         />
       </DataWrapper>
+      <Pagination
+        total={prescriptionData?.length}
+        page={page}
+        pageSize={pageSize}
+        onSetPage={(value) => updateQuery("_page", value)}
+        onSetPageSize={(value) => updateQuery("_pageSize", value)}
+        dependencies={[_pageSize, _keyword]}
+      />
     </div>
   );
 };

src/services/consultationServices.ts

@@ -12,6 +12,7 @@ export interface GetConsultationParams {
 export interface ConsultationItem {
   id: string;
   patientId: string;
+  patientName: string;
   sessionCode: string;
   visitDate: string;
   status: number;
@@ -28,6 +29,7 @@ export interface ConsultationItem {
 export interface ConsultationDetail {
   id: string;
   patientId: string;
+  patientName: string;
   sessionCode: string;
   visitDate: string;
   status: number;