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,180 @@
+import CustomButton from "@/components/customs/custom-button";
+import Search from "@/components/customs/custom-search";
+import Table from "@/components/customs/custom-table";
+import DataWrapper from "@/components/customs/DataWrapper";
+import { PATH } from "@/constant/config";
+import { QUERY_KEY } from "@/constant/config/enum";
+import { httpRequest } from "@/services";
+import prescriptionServices, {
+  PrescriptionItem,
+  PrescriptionResponse,
+} from "@/services/prescriptionServices";
+import { useQuery } from "@tanstack/react-query";
+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";
+
+const MainPrescription = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const _page = searchParams.get("_page");
+  const _pageSize = searchParams.get("_pageSize");
+  const _keyword = searchParams.get("_keyword");
+
+  const prescriptionQuery = useQuery<PrescriptionResponse>({
+    queryKey: [
+      QUERY_KEY.table_list_patientrescription,
+      _page,
+      _pageSize,
+      _keyword,
+    ],
+
+    queryFn: async () => {
+      const res = await httpRequest<PrescriptionResponse>({
+        showMessageFailed: true,
+
+        http: prescriptionServices.getPrescription({
+          Page: Number(_page || 1),
+          PageSize: Number(_pageSize || 10),
+          Search: _keyword || "",
+          SortBy: "id",
+          Desc: true,
+        }),
+      });
+
+      return (
+        res || {
+          items: [],
+          page: 1,
+          pageSize: 10,
+          total: 0,
+          totalPages: 0,
+        }
+      );
+    },
+  });
+
+  const updateQuery = (key: string, value?: string | number) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (!value) {
+      params.delete(key);
+    } else {
+      params.set(key, String(value));
+    }
+
+    const queryString = params.toString();
+
+    router.push(queryString ? `${pathname}?${queryString}` : pathname);
+  };
+
+  return (
+    <div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow">
+      {/* HEADER */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold text-black">Đơn thuốc</h2>
+
+        <CustomButton
+          variant="midnightBlue"
+          fullWidth={false}
+          icon={<Pill />}
+          href={PATH.CREATE_PRESCRIPTION}
+        >
+          Tạo mới
+        </CustomButton>
+      </div>
+
+      {/* SEARCH */}
+      <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 theo mã đơn thuốc"
+          />
+        </div>
+      </div>
+
+      <DataWrapper
+        data={prescriptionQuery.data?.items || []}
+        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 || []}
+          column={[
+            // ================= ID / CODE =================
+            {
+              title: "MÃ ĐƠN THUỐC",
+              render: (item: any) => (
+                <Link
+                  href={`/prescription/${item.id}`}
+                  className="text-blue-500 hover:underline"
+                >
+                  {item.prescriptionCode}
+                </Link>
+              ),
+            },
+
+            // ================= SESSION =================
+            {
+              title: "PHIÊN KHÁM",
+              render: (item: any) => <span>{item.examinationSessionId}</span>,
+            },
+
+            // ================= NOTES =================
+            {
+              title: "GHI CHÚ",
+              render: (item: any) => <span>{item.notes || "-"}</span>,
+            },
+
+            // ================= IMAGE =================
+            {
+              title: "ẢNH ĐƠN THUỐC",
+              render: (item: any) =>
+                item.prescriptionImg ? (
+                  <Image
+                    src={item.prescriptionImg}
+                    alt="prescription"
+                    className="h-10 w-10 rounded object-cover"
+                  />
+                ) : (
+                  <span className="text-gray-400">Không có ảnh</span>
+                ),
+            },
+
+            // ================= ITEMS COUNT =================
+            {
+              title: "SỐ THUỐC",
+              render: (item: any) => <span>{item.items?.length || 0}</span>,
+            },
+
+            // ================= ACTION =================
+            {
+              fixedRight: true,
+              title: "ACTION",
+
+              render: (item: any) => (
+                <div className="flex items-center gap-2">
+                  <CustomButton
+                    size="sm"
+                    icon={<Pencil className="text-blue-400" />}
+                    href={`${PATH.PRESCRIPTION}/update?_id=${item?.id}`}
+                  />
+                </div>
+              ),
+            },
+          ]}
+        />
+      </DataWrapper>
+    </div>
+  );
+};
+
+export default MainPrescription;