feat:update all page

2026-05-26 16:43:42 +07:00
parent bce004352c
commit 56e2733d8f
18 changed files with 480 additions and 262 deletions
@@ -0,0 +1,196 @@
+"use client";
+
+import React from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import Link from "next/link";
+
+import consultationServices, {
+  ConsultationItem,
+  ConsultationResponse,
+} from "@/services/consultationServices";
+import { httpRequest } from "@/services";
+
+import { QUERY_KEY, TYPE_STATUS } from "@/constant/config/enum";
+
+import DataWrapper from "@/components/customs/DataWrapper";
+import Table from "@/components/customs/custom-table";
+import StateActive from "@/components/customs/StateActive";
+import Pagination from "@/components/customs/custom-pagination";
+import Search from "@/components/customs/custom-search";
+
+const TableHistoryPatient = () => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const patientId = searchParams.get("_id");
+
+  const consultationQuery = useQuery<ConsultationResponse>({
+    queryKey: [QUERY_KEY.table_list_consultation, patientId, "full-history"],
+    enabled: !!patientId,
+    queryFn: async () => {
+      const res = await httpRequest<ConsultationResponse>({
+        showMessageFailed: true,
+        http: consultationServices.getConsultations({
+          Page: 1,
+          PageSize: 1000,
+          PatientId: patientId || "",
+        }),
+      });
+
+      return (
+        res || {
+          items: [],
+          page: 1,
+          pageSize: 10,
+          total: 0,
+          totalPages: 0,
+        }
+      );
+    },
+  });
+
+  const _page = searchParams.get("_page");
+
+  const _pageSize = searchParams.get("_pageSize");
+
+  const _keyword = searchParams.get("_keyword");
+
+  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());
+
+    if (!value || value === "" || (key === "_page" && value === 1)) {
+      params.delete(key);
+    } else {
+      params.set(key, String(value));
+    }
+
+    if (key === "_pageSize") {
+      params.delete("_page");
+    }
+
+    const queryString = params.toString();
+
+    router.push(queryString ? `?${queryString}` : pathname);
+  };
+
+  const data = consultationQuery.data?.items || [];
+
+  // lấy tên bệnh nhân từ record đầu tiên (nếu backend có trả)
+  const patientName = data?.[0]?.patientName || "Bệnh nhân";
+
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl font-semibold">
+          Lịch sử phiên khám của {patientName}
+        </h2>
+
+        <button
+          onClick={() => router.back()}
+          className="text-blue-500 hover:underline"
+        >
+          ← Quay lại
+        </button>
+      </div>
+      <div className="flex items-center justify-between gap-4">
+        <div className="w-full md:min-w-[400px]">
+          <Search
+            keyword={_keyword ?? ""}
+            setKeyword={(value) => updateQuery("_keyword", value)}
+            placeholder="Tìm kiếm phiên khám..."
+          />
+        </div>
+      </div>
+
+      <DataWrapper
+        data={data}
+        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: ConsultationItem) => item.id}
+          data={data}
+          column={[
+            {
+              title: "MÃ PHIÊN KHÁM",
+              render: (item: ConsultationItem) => (
+                <Link
+                  href={`/consultation/${item.id}`}
+                  className="text-blue-500 hover:underline"
+                >
+                  {item.sessionCode}
+                </Link>
+              ),
+            },
+            {
+              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: "CHẨN ĐOÁN",
+              render: (item: ConsultationItem) => (
+                <span>{item.diagnosis || "---"}</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: "#cccccc",
+                    },
+                  ]}
+                />
+              ),
+            },
+          ]}
+        />
+      </DataWrapper>
+
+      <Pagination
+        total={data.length}
+        page={page}
+        pageSize={pageSize}
+        onSetPage={(value) => updateQuery("_page", value)}
+        onSetPageSize={(value) => updateQuery("_pageSize", value)}
+        dependencies={[_pageSize, _keyword]}
+      />
+    </div>
+  );
+};
+
+export default TableHistoryPatient;