fix:pagination media traking-tracking berita, setting banner, media tracking result

app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx

@@ -49,11 +49,11 @@ const columns: ColumnDef<any>[] = [
     header: "Jumlah Amplifikasi",
     cell: ({ row }) => <span>{row.getValue("link")}</span>,
   },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => <span>{row.getValue("status")}</span>,
-  },
+  // {
+  //   accessorKey: "status",
+  //   header: "Status",
+  //   cell: ({ row }) => <span>{row.getValue("status")}</span>,
+  // },
   {
     accessorKey: "date",
     header: "Tanggal Penarikan",
@@ -77,10 +77,17 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <Link href={`/contributor/content/audio/detail/${row.original.id}`}>
+            <Link
+              href={`/contributor/content/${
+                row.original.mediaUpload.fileType.secondaryName &&
+                row.original.mediaUpload.fileType.secondaryName.toLowerCase()
+              }/detail/${row.original.mediaUpload.id}`}
+            >
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
-                View
+                View{" "}
+                {row.original.mediaUpload.fileType.secondaryName &&
+                  row.original.mediaUpload.fileType.secondaryName.toLowerCase()}
               </DropdownMenuItem>
             </Link>
           </DropdownMenuContent>

app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx

@@ -9,7 +9,7 @@ import {
   listDataTracking,
   mediaTrackingSave,
 } from "@/service/media-tracking/media-tracking";
-import { error, loading } from "@/lib/swal";
+import { error } from "@/lib/swal";
 import { toast } from "sonner";
 import {
   DropdownMenu,
@@ -20,31 +20,32 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { PaginationState } from "@tanstack/react-table";
 import page from "../page";
+import CustomPagination from "@/components/table/custom-pagination";
+import { close, loading } from "@/config/swal";
 
 export default function TrackingBeritaCard() {
   const [search, setSearch] = useState("");
   const [content, setContent] = useState<any[]>([]);
   const [selectedItems, setSelectedItems] = useState<number[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [page, setPage] = React.useState(1);
-  const [showData, setShowData] = React.useState("10");
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: Number(showData),
-  });
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+  const [showData, setShowData] = useState("6");
 
   useEffect(() => {
     initFecth();
-  }, [showData]);
+  }, [showData, page]);
 
   const initFecth = async () => {
+    loading();
     const response = await listDataTracking(showData, page - 1);
     const data = response?.data?.data;
     const newData = data?.content;
+    setTotalPage(data?.totalPages || 1);
     newData.forEach((item: any, index: number) => {
       item.no = (page - 1) * Number(showData) + index + 1;
     });
     setContent(response?.data?.data?.content || []);
+    close();
   };
 
   const fecthAll = async (keyword: string) => {
@@ -117,17 +118,17 @@ export default function TrackingBeritaCard() {
                   value={showData}
                   onValueChange={setShowData}
                 >
-                  <DropdownMenuRadioItem value="10">
-                    1 - 10 Data
+                  <DropdownMenuRadioItem value="12">
+                    1 - 6 Data
                   </DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="50">
-                    1 - 50 Data
+                  <DropdownMenuRadioItem value="12">
+                    1 - 12 Data
                   </DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="100">
-                    1 - 100 Data
+                  <DropdownMenuRadioItem value="60">
+                    1 - 60 Data
                   </DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="250">
-                    1 - 250 Data
+                  <DropdownMenuRadioItem value="120">
+                    1 - 120 Data
                   </DropdownMenuRadioItem>
                 </DropdownMenuRadioGroup>
               </DropdownMenuContent>
@@ -150,48 +151,40 @@ export default function TrackingBeritaCard() {
         )}
 
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-          {content.map((item: any) => (
-            <Card
-              key={item.id}
-              className="relative overflow-hidden shadow-sm border rounded-lg cursor-pointer"
-              onClick={() => handleSelect(item.id)}
-            >
-              <img
-                src={item.thumbnailLink}
-                alt={item.title}
-                className="w-full h-[300px] object-cover"
-              />
-              <div className="absolute top-2 left-2">
-                <div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center">
-                  {selectedItems.includes(item.id) && (
-                    <div className="w-3 h-3 bg-blue-600 rounded-sm" />
-                  )}
+          {content?.length > 1 &&
+            content.map((item: any) => (
+              <Card
+                key={item.id}
+                className="relative overflow-hidden shadow-sm border rounded-lg cursor-pointer"
+                onClick={() => handleSelect(item.id)}
+              >
+                <img
+                  src={item.thumbnailLink}
+                  alt={item.title}
+                  className="w-full h-[300px] object-cover"
+                />
+                <div className="absolute top-2 left-2">
+                  <div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center">
+                    {selectedItems.includes(item.id) && (
+                      <div className="w-3 h-3 bg-blue-600 rounded-sm" />
+                    )}
+                  </div>
                 </div>
-              </div>
-              <p className="p-2 text-sm font-medium text-gray-800 truncate">
-                {item.title}
-              </p>
-            </Card>
-          ))}
+                <p className="p-2 text-sm font-medium text-gray-800 truncate">
+                  {item.title}
+                </p>
+              </Card>
+            ))}
         </div>
-
-        <div className="flex justify-center items-center gap-2 mt-4">
-          <Button
-            size="icon"
-            variant="ghost"
-            disabled={currentPage === 1}
-            onClick={() => setCurrentPage((p) => p - 1)}
-          >
-            <ChevronLeft className="w-4 h-4" />
-          </Button>
-          <div className="px-3 py-1 rounded-full border">{currentPage}</div>
-          <Button
-            size="icon"
-            variant="ghost"
-            onClick={() => setCurrentPage((p) => p + 1)}
-          >
-            <ChevronRight className="w-4 h-4" />
-          </Button>
+        <div className="mt-3">
+          {content && content?.length > 0 ? (
+            <CustomPagination
+              totalPage={totalPage}
+              onPageChange={(data) => setPage(data)}
+            />
+          ) : (
+            <p>No Data</p>
+          )}
         </div>
       </div>
     </Card>

app/[locale]/(protected)/admin/settings/banner/component/table.tsx

@@ -69,6 +69,7 @@ import { data } from "jquery";
 import { useToast } from "@/components/ui/use-toast";
 import { setBanner } from "@/service/settings/settings";
 import { id } from "date-fns/locale";
+import CustomPagination from "@/components/table/custom-pagination";
 
 const ContentListBanner = () => {
   const router = useRouter();
@@ -120,10 +121,10 @@ const ContentListBanner = () => {
 
   React.useEffect(() => {
     fetchData();
-    setPagination({
-      pageIndex: 0,
-      pageSize: Number(showData),
-    });
+    // setPagination({
+    //   pageIndex: 0,
+    //   pageSize: Number(showData),
+    // });
   }, [page, showData]);
 
   async function fetchData() {
@@ -398,10 +399,15 @@ const ContentListBanner = () => {
             </div>
           ))}
         </div>
-        <div className="flex justify-center mt-6">
-          <div className="border rounded px-3 py-1 text-sm text-gray-600">
-            1
-          </div>
+        <div className="mt-3">
+          {data && data?.length > 0 ? (
+            <CustomPagination
+              totalPage={totalPage}
+              onPageChange={(data) => setPage(data)}
+            />
+          ) : (
+            <p>No Data</p>
+          )}
         </div>
       </div>
     </>

components/table/custom-pagination.tsx

@@ -0,0 +1,143 @@
+"use client";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+import { useEffect, useState } from "react";
+
+export default function CustomPagination(props: {
+  totalPage: number;
+  onPageChange: (data: number) => void;
+}) {
+  const { totalPage, onPageChange } = props;
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    onPageChange(page);
+  }, [page]);
+
+  const renderPageNumbers = () => {
+    const pageNumbers = [];
+    const halfWindow = Math.floor(5 / 2);
+    let startPage = Math.max(2, page - halfWindow);
+    let endPage = Math.min(totalPage - 1, page + halfWindow);
+
+    if (endPage - startPage + 1 < 5) {
+      if (page <= halfWindow) {
+        endPage = Math.min(
+          totalPage,
+          endPage + (5 - (endPage - startPage + 1))
+        );
+      } else if (page + halfWindow >= totalPage) {
+        startPage = Math.max(1, startPage - (5 - (endPage - startPage + 1)));
+      }
+    }
+
+    if (startPage === endPage) {
+      return "";
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(
+        <PaginationItem key={i} onClick={() => setPage(i)}>
+          <PaginationLink isActive={page === i}>{i}</PaginationLink>
+        </PaginationItem>
+      );
+    }
+
+    return pageNumbers;
+  };
+  return (
+    <Pagination>
+      <PaginationContent>
+        {page - 10 >= 1 && (
+          <PaginationItem>
+            <PaginationLink
+              onClick={() => (page > 10 ? setPage(page - 10) : setPage(1))}
+            >
+              {/* <DoubleArrowLeftIcon /> */}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12zm-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12z"
+                />
+              </svg>
+            </PaginationLink>
+          </PaginationItem>
+        )}
+
+        <PaginationItem className="hidden md:block">
+          <PaginationPrevious
+            onClick={() => (page > 1 ? setPage(page - 1) : "")}
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink onClick={() => setPage(1)} isActive={page === 1}>
+            {1}
+          </PaginationLink>
+        </PaginationItem>
+        {page > 4 && (
+          <PaginationItem>
+            <PaginationEllipsis onClick={() => setPage(page - 1)} />
+          </PaginationItem>
+        )}
+        {renderPageNumbers()}
+        {page < totalPage - 3 && (
+          <PaginationItem>
+            <PaginationEllipsis onClick={() => setPage(page + 1)} />
+          </PaginationItem>
+        )}
+        {totalPage > 1 && (
+          <PaginationItem>
+            <PaginationLink
+              onClick={() => setPage(totalPage)}
+              isActive={page === totalPage}
+            >
+              {totalPage}
+            </PaginationLink>
+          </PaginationItem>
+        )}
+
+        <PaginationItem className="hidden md:block">
+          <PaginationNext
+            onClick={() => (page < totalPage ? setPage(page + 1) : "")}
+          />
+        </PaginationItem>
+
+        {page + 10 <= totalPage && totalPage > 9 && (
+          <PaginationItem>
+            <PaginationLink
+              onClick={() =>
+                page < totalPage - 10 ? setPage(page + 10) : setPage(totalPage)
+              }
+            >
+              {/* <DoubleArrowRightIcon /> */}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12zm6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12z"
+                />
+              </svg>
+            </PaginationLink>
+          </PaginationItem>
+        )}
+      </PaginationContent>
+    </Pagination>
+  );
+}