feat:update all

src/components/page/statistical/MainPageStatistical/MainPageStatistical.tsx

@@ -1,30 +1,49 @@
 "use client";
+
+import React, { useMemo, useState } from "react";
+import moment from "moment";
+import { useQuery } from "@tanstack/react-query";
+import { Users, Stethoscope, Pill } from "lucide-react";
+
 import Table from "@/components/customs/custom-table";
 import DataWrapper from "@/components/customs/DataWrapper";
-import { QUERY_KEY } from "@/constant/config/enum";
+
+import { QUERY_KEY, TYPE_DATE } from "@/constant/config/enum";
+
 import { httpRequest } from "@/services";
+
 import consultationServices, {
   ReportResponse,
 } from "@/services/consultationServices";
-import { useQuery } from "@tanstack/react-query";
-import moment from "moment";
-// import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import React, { useMemo } from "react";
+import FilterDateRange from "@/components/utils/FilterDateRage";
 
 const MainPageStatistical = () => {
-  //   const router = useRouter();
-  //   const pathname = usePathname();
-  //   const searchParams = useSearchParams();
+  const [date, setDate] = useState<{
+    from: Date | null;
+    to: Date | null;
+  } | null>(null);
+  const [typeDate, setTypeDate] = useState<TYPE_DATE>(TYPE_DATE.TODAY);
 
-  //   const _page = searchParams.get("_page");
+  const isInvalidDate =
+    !!date?.from && moment(date.from).isAfter(moment().endOf("day"));
 
-  //   const _pageSize = searchParams.get("_pageSize");
   const reportQuery = useQuery<ReportResponse>({
-    queryKey: [QUERY_KEY.table_list_report],
+    queryKey: [
+      QUERY_KEY.table_list_report,
+      date?.from?.toISOString(),
+      date?.to?.toISOString(),
+    ],
+
+    enabled: !!date?.from && !!date?.to && !isInvalidDate,
 
     queryFn: async () => {
-      const toDate = moment().format("YYYY-MM-DD");
-      const fromDate = moment().subtract(14, "days").format("YYYY-MM-DD");
+      const fromDate = moment(date?.from).format("YYYY-MM-DD");
+      const toDate = moment(date?.to).format("YYYY-MM-DD");
+
+      console.log({
+        FormDate: fromDate,
+        ToDate: toDate,
+      });
 
       const res = await httpRequest<ReportResponse>({
         showMessageFailed: true,
@@ -38,68 +57,132 @@ const MainPageStatistical = () => {
     },
   });
 
+  const report = reportQuery.data;
+
   const reportData = useMemo(() => {
-    return reportQuery.data?.specialtyDetails || [];
-  }, [reportQuery.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());
-
-  //     if (!value) {
-  //       params.delete(key);
-  //     } else {
-  //       params.set(key, String(value));
-  //     }
-
-  //     const queryString = params.toString();
-
-  //     router.push(queryString ? `${pathname}?${queryString}` : pathname);
-  //   };
+    return report?.specialtyDetails || [];
+  }, [report]);
 
   return (
-    <div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow">
+    <div className="flex flex-col gap-6">
       {/* HEADER */}
-      <div className="flex items-center justify-between">
-        <h2 className="text-xl font-semibold text-black">
-          Thống kê các phiên khám
-        </h2>
+      <div className="rounded-xl bg-white p-6 shadow">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-semibold">Thống kê phiên khám</h2>
+
+          <FilterDateRange
+            date={date}
+            setDate={setDate}
+            typeDate={typeDate}
+            setTypeDate={setTypeDate}
+          />
+        </div>
       </div>
-      <DataWrapper
-        data={reportData}
-        loading={reportQuery.isLoading}
-        title="Không có dữ liệu"
-        note="Vui lòng thử lại sau"
-      >
-        <Table
-          rowKey={(item) => item.specialtyId}
+
+      {/* CARDS */}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <div className="rounded-xl bg-white p-5 shadow">
+          <div className="mb-3 flex items-center justify-between">
+            <Users size={22} />
+          </div>
+
+          <p className="text-sm text-gray-500">Tổng lượt khám</p>
+
+          <h3 className="mt-2 text-3xl font-bold">
+            {report?.totalSessions || 0}
+          </h3>
+        </div>
+
+        <div className="rounded-xl bg-white p-5 shadow">
+          <div className="mb-3 flex items-center justify-between">
+            <Stethoscope size={22} />
+          </div>
+
+          <p className="text-sm text-gray-500">Lượt khám chuyên khoa</p>
+
+          <h3 className="mt-2 text-3xl font-bold">
+            {report?.totalSpecialtySubSessions || 0}
+          </h3>
+        </div>
+
+        <div className="rounded-xl bg-white p-5 shadow">
+          <div className="mb-3 flex items-center justify-between">
+            <Pill size={22} />
+          </div>
+
+          <p className="text-sm text-gray-500">Đơn thuốc đã cấp</p>
+
+          <h3 className="mt-2 text-3xl font-bold">
+            {report?.totalPrescriptionsIssued || 0}
+          </h3>
+        </div>
+      </div>
+
+      {/* BẢNG THỐNG KÊ */}
+      <div className="rounded-xl bg-white p-6 shadow">
+        <h3 className="mb-4 text-lg font-semibold">
+          Thống kê theo chuyên khoa
+        </h3>
+
+        <DataWrapper
           data={reportData}
-          column={[
-            {
-              title: "MÃ CHUYÊN KHOA",
-              render: (item) => <span>{item.specialtyId}</span>,
-            },
-            {
-              title: "TÊN CHUYÊN KHOA",
-              render: (item) => <span>{item.specialtyName}</span>,
-            },
-            {
-              title: "SỐ CA KHÁM",
-              render: (item) => <span>{item.totalCases}</span>,
-            },
-          ]}
-        />
-      </DataWrapper>
-      {/* <Pagination
-        total={reportData.length}
-        page={page}
-        pageSize={pageSize}
-        onSetPage={(value) => updateQuery("_page", value)}
-        onSetPageSize={(value) => updateQuery("_pageSize", value)}
-        dependencies={[_pageSize]}
-      /> */}
+          loading={reportQuery.isLoading}
+          title="Không có dữ liệu"
+          note="Vui lòng thử lại sau"
+        >
+          <Table
+            rowKey={(item) => item.specialtyId}
+            data={reportData}
+            column={[
+              {
+                title: "MÃ CHUYÊN KHOA",
+                render: (item) => <span>{item.specialtyId}</span>,
+              },
+              {
+                title: "TÊN CHUYÊN KHOA",
+                render: (item) => <span>{item.specialtyName}</span>,
+              },
+              {
+                title: "SỐ CA KHÁM",
+                render: (item) => (
+                  <span className="font-semibold">{item.totalCases}</span>
+                ),
+              },
+            ]}
+          />
+        </DataWrapper>
+      </div>
+
+      {/* BÁO CÁO TỔNG HỢP */}
+      <div className="rounded-xl bg-white p-6 shadow">
+        <h3 className="mb-4 text-lg font-semibold">Báo cáo tổng hợp</h3>
+
+        <div className="space-y-3 text-[15px]">
+          <p>
+            Số lượt khám bệnh nhân đạo:
+            <strong> {report?.totalSpecialtySubSessions || 0}</strong> lượt
+            người dân được khám chuyên khoa, cụ thể như sau:
+          </p>
+
+          <ul className="list-disc space-y-2 pl-6">
+            {reportData.map((item) => (
+              <li key={item.specialtyId}>
+                <strong>{item.specialtyName}</strong>: {item.totalCases} ca
+              </li>
+            ))}
+          </ul>
+
+          <p>
+            Tổng số đơn thuốc đã cấp:
+            <strong> {report?.totalPrescriptionsIssued || 0}</strong> đơn.
+          </p>
+
+          {/* <p>
+            Số suất quà được phát:
+            <strong> {report?.totalGiftPackagesIssued || 0}</strong> suất.
+          </p> */}
+        </div>
+      </div>
     </div>
   );
 };