feat:update web

2026-05-24 23:33:43 +07:00
parent b6ccde2c74
commit b0baa509d9
58 changed files with 4920 additions and 292 deletions
@@ -0,0 +1,237 @@
+"use client";
+
+import React from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+
+import { httpRequest } from "@/services";
+import { QUERY_KEY, TYPE_STATUS } from "@/constant/config/enum";
+
+import { ArrowLeft } from "lucide-react";
+
+import consultationServices, {
+  ConsultationDetail,
+} from "@/services/consultationServices";
+
+import StateActive from "@/components/customs/StateActive";
+
+const DetailConsultation = () => {
+  const params = useParams();
+  const router = useRouter();
+
+  const consultationId = params?.id as string;
+
+  const consulDetailQuery = useQuery<ConsultationDetail>({
+    queryKey: [QUERY_KEY.chi_tiet_phien_kham, consultationId],
+
+    enabled: !!consultationId,
+
+    queryFn: async () => {
+      const res = await httpRequest<ConsultationDetail>({
+        showMessageFailed: true,
+
+        http: consultationServices.detailConsultations(consultationId),
+      });
+
+      return (
+        res || {
+          id: "",
+          patientId: "",
+          sessionCode: "",
+          visitDate: "",
+          status: 1,
+          chiefComplaint: null,
+          symptomsText: null,
+          vitalSigns: null,
+          diagnosis: null,
+          treatmentPlan: null,
+          doctorNotes: null,
+          createdBy: "",
+          isDeleted: false,
+        }
+      );
+    },
+  });
+
+  const consultation = consulDetailQuery.data;
+
+  if (consulDetailQuery.isLoading) {
+    return <div>Đang tải dữ liệu...</div>;
+  }
+
+  if (!consultation) {
+    return <div>Không tìm thấy dữ liệu phiên khám</div>;
+  }
+
+  return (
+    <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-6">
+          {/* HEADER */}
+          <div className="flex items-center gap-3">
+            <ArrowLeft
+              onClick={() => router.back()}
+              className="cursor-pointer"
+            />
+
+            <h2 className="text-[28px] font-semibold text-[#111827]">
+              Chi tiết phiên khám
+            </h2>
+          </div>
+
+          {/* CONTENT */}
+          <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+            {/* ID PHIÊN KHÁM */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">
+                ID PHIÊN KHÁM
+              </p>
+
+              <p className="text-[15px] font-medium text-[#202939]">
+                {consultation.id}
+              </p>
+            </div>
+
+            {/* MÃ PHIÊN KHÁM */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">
+                MÃ PHIÊN KHÁM
+              </p>
+
+              <p className="text-[15px] font-medium text-[#202939]">
+                {consultation.sessionCode}
+              </p>
+            </div>
+
+            {/* NGÀY GIỜ KHÁM */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">
+                NGÀY, GIỜ KHÁM
+              </p>
+
+              <p className="text-[15px] font-medium text-[#202939]">
+                {consultation.visitDate}
+              </p>
+            </div>
+
+            {/* TRIỆU CHỨNG */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">DẤU HIỆU</p>
+
+              <p className="text-[15px] font-medium text-[#202939]">
+                {consultation.symptomsText || "---"}
+              </p>
+            </div>
+
+            {/* KHIẾU NẠI CHÍNH */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">
+                KHIẾU NẠI CHÍNH
+              </p>
+
+              <p className="text-[15px] font-medium text-[#202939]">
+                {consultation.chiefComplaint || "---"}
+              </p>
+            </div>
+
+            {/* DẤU HIỆU SINH TỒN */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">
+                DẤU HIỆU SINH TỒN
+              </p>
+
+              <p className="text-[15px] font-medium text-[#202939]">
+                {consultation.vitalSigns || "---"}
+              </p>
+            </div>
+
+            {/* CHẨN ĐOÁN */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">
+                CHUẨN ĐOÁN
+              </p>
+
+              <p className="text-[15px] font-medium text-[#202939]">
+                {consultation.diagnosis || "---"}
+              </p>
+            </div>
+
+            {/* KẾ HOẠCH ĐIỀU TRỊ */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">
+                KẾ HOẠCH ĐIỀU TRỊ
+              </p>
+
+              <p className="text-[15px] font-medium text-[#202939]">
+                {consultation.treatmentPlan || "---"}
+              </p>
+            </div>
+
+            {/* GHI CHÚ BÁC SĨ */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">
+                GHI CHÚ BÁC SĨ
+              </p>
+
+              <p className="text-[15px] font-medium text-[#202939]">
+                {consultation.doctorNotes || "---"}
+              </p>
+            </div>
+
+            {/* NGƯỜI TẠO */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">
+                NGƯỜI TẠO
+              </p>
+
+              <p className="text-[15px] font-medium text-[#202939]">
+                {consultation.createdBy || "---"}
+              </p>
+            </div>
+
+            {/* TRẠNG THÁI */}
+            <div className="space-y-1">
+              <p className="text-[14px] font-medium text-[#697586]">
+                TRẠNG THÁI
+              </p>
+
+              <StateActive
+                stateActive={consultation.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",
+                  },
+                ]}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DetailConsultation;