feat:update push

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,
-              title: "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>
-              ),
-            },
+            //   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>
+      <Pagination
+        total={prescriptionData?.length}
+        page={page}
+        pageSize={pageSize}
+        onSetPage={(value) => updateQuery("_page", value)}
+        onSetPageSize={(value) => updateQuery("_pageSize", value)}
+        dependencies={[_pageSize, _keyword]}
+      />
     </div>
   );
 };