From 8515a9956e44fe7f8bbc9c62389de50c5c711b82 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Mon, 9 Jun 2025 14:16:37 +0700
Subject: [PATCH 1/2] fix:penugasan redirect, approval image

---
 components/form/content/image-detail-form.tsx | 317 ++++++++++--------
 components/form/task/task-detail-form.tsx     |   8 +-
 components/form/task/task-form.tsx            |  46 +--
 components/partials/auth/login-form.tsx       |  19 +-
 4 files changed, 222 insertions(+), 168 deletions(-)

diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx
index 3cd600ca..9ff0264a 100644
--- a/components/form/content/image-detail-form.tsx
+++ b/components/form/content/image-detail-form.tsx
@@ -66,6 +66,7 @@ import { UnitMapping } from "@/app/[locale]/(protected)/contributor/agenda-setti
 import SuggestionModal from "@/components/modal/suggestions-modal";
 import { formatDateToIndonesian } from "@/utils/globals";
 import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
+import Image from "next/image";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -437,6 +438,22 @@ export default function FormImageDetail() {
     successCallback();
   };
 
+  const [portraitMap, setPortraitMap] = useState<any>({});
+
+  const handleImageLoad = (e: any, index: number) => {
+    const { naturalWidth, naturalHeight } = e.target;
+    const isPortrait = naturalHeight > naturalWidth;
+
+    setPortraitMap((prev: any) => ({
+      ...prev,
+      [index]: isPortrait,
+    }));
+  };
+
+  useEffect(() => {
+    console.log("portrai", portraitMap);
+  }, [portraitMap]);
+
   return (
     <form>
       {detail !== undefined ? (
@@ -513,19 +530,19 @@ export default function FormImageDetail() {
                       thumbs={{ swiper: thumbsSwiper }}
                       modules={[FreeMode, Navigation, Thumbs]}
                       navigation={false}
-                      className="w-full"
+                      className="h-[480px] object-cover w-full"
                     >
                       {detailThumb?.map((data: any) => (
                         <SwiperSlide key={data.id}>
                           <img
-                            className="object-fill h-full w-full rounded-md"
+                            className="h-[480px] max-w-[600px]  rounded-md object-cover mx-auto border-2"
                             src={data}
                             alt={` ${data.id}`}
                           />
                         </SwiperSlide>
                       ))}
                     </Swiper>
-                    <div className=" mt-2 ">
+                    <div className="mt-2 mx-auto min-w-fit max-w-[600px]">
                       <Swiper
                         onSwiper={setThumbsSwiper}
                         slidesPerView={6}
@@ -539,7 +556,7 @@ export default function FormImageDetail() {
                         {detailThumb?.map((data: any) => (
                           <SwiperSlide key={data.id}>
                             <img
-                              className="object-cover h-[60px] w-[80px]"
+                              className="object-cover h-[60px] w-[80px] border-2 border-slate-100"
                               src={data}
                               alt={` ${data.id}`}
                             />
@@ -579,11 +596,11 @@ export default function FormImageDetail() {
               </div>
               <div className="mt-3 px-3 space-y-2">
                 <Label>{t("preview")}</Label>
-                <Card className="mt-2">
+                <Card className="mt-2 w-fit">
                   <img
                     src={detail.thumbnailLink}
                     alt="Thumbnail Gambar Utama"
-                    className="w-full h-auto rounded"
+                    className="h-[200px] rounded"
                   />
                 </Card>
               </div>
@@ -699,119 +716,139 @@ export default function FormImageDetail() {
               )} */}
 
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-                <DialogContent className="min-w-max h-[600px] overflow-y-auto">
+                <DialogContent size="md" className="max-h-[600px]">
                   <DialogHeader>
                     <DialogTitle>{t("leave-comment")}</DialogTitle>
                   </DialogHeader>
-                  {status == "2"
-                    ? files?.map((file, index) => (
-                        <div
-                          key={file.id}
-                          className="flex flex-row gap-2 items-center"
-                        >
-                          <img src={file.url} className="w-[200px]" />
-                          <div className="flex flex-col gap-2 w-full">
-                            <div className="flex justify-between text-sm">
-                              {file.fileName}
-                              <a
-                                onClick={() =>
-                                  handleDeleteFileApproval(file.id)
-                                }
-                              >
-                                <Icon icon="humbleicons:times" color="red" />
-                              </a>
+                  <div className="flex flex-col gap-2 max-h-[208px] md:max-h-[312px] overflow-y-auto">
+                    {status == "2"
+                      ? files?.map((file, index) => (
+                          <div
+                            key={file.id}
+                            className="flex flex-row gap-5 items-center w-full"
+                          >
+                            <div className="w-[200px] h-[100px] flex justify-center items-center">
+                              <img
+                                key={index}
+                                alt={`files-${index + 1}`}
+                                src={file.url}
+                                onLoad={(e) => handleImageLoad(e, index)}
+                                className={`h-[100px] object-cover ${
+                                  portraitMap[index] ? "w-auto" : "!w-[200px]"
+                                }`}
+                              />
                             </div>
-                            {isUserMabesApprover && (
-                              <div className="flex flex-row gap-2">
-                                <div className="flex items-center space-x-2">
-                                  <Checkbox
-                                    id="terms"
-                                    value="all"
-                                    checked={filePlacements[index]?.includes(
-                                      "all"
-                                    )}
-                                    onCheckedChange={(e) =>
-                                      setupPlacement(index, "all", Boolean(e))
-                                    }
-                                  />
-                                  <label
-                                    htmlFor="terms"
-                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                  >
-                                    {t("all")}
-                                  </label>
-                                </div>
-                                <div className="flex items-center space-x-2">
-                                  <Checkbox
-                                    id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "mabes"
-                                    )}
-                                    onCheckedChange={(e) =>
-                                      setupPlacement(index, "mabes", Boolean(e))
-                                    }
-                                  />
-                                  <label
-                                    htmlFor="terms"
-                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                  >
-                                    Nasional
-                                  </label>
-                                </div>
-                                <div className="flex items-center space-x-2">
-                                  <Checkbox
-                                    id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "polda"
-                                    )}
-                                    onCheckedChange={(e) =>
-                                      setupPlacement(index, "polda", Boolean(e))
-                                    }
-                                  />
-                                  <label
-                                    htmlFor="terms"
-                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                  >
-                                    Wilayah
-                                  </label>
-                                  {wilayahPublish.polda && (
-                                    <UnitMapping
-                                      unit="Polda"
-                                      isDetail={false}
-                                      sendDataToParent={(data: any) =>
-                                        setSelectedPolda(data)
+                            <div className="flex flex-col gap-2 w-full">
+                              <div className="flex justify-between text-sm">
+                                {file.fileName}
+                                <a
+                                  onClick={() =>
+                                    handleDeleteFileApproval(file.id)
+                                  }
+                                >
+                                  <Icon icon="humbleicons:times" color="red" />
+                                </a>
+                              </div>
+                              {isUserMabesApprover && (
+                                <div className="flex flex-row gap-2">
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      value="all"
+                                      checked={filePlacements[index]?.includes(
+                                        "all"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(index, "all", Boolean(e))
                                       }
                                     />
-                                  )}
-                                </div>
-
-                                <div className="flex items-center space-x-2">
-                                  <Checkbox
-                                    id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "international"
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      {t("all")}
+                                    </label>
+                                  </div>
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      checked={filePlacements[index]?.includes(
+                                        "mabes"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(
+                                          index,
+                                          "mabes",
+                                          Boolean(e)
+                                        )
+                                      }
+                                    />
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      Nasional
+                                    </label>
+                                  </div>
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      checked={filePlacements[index]?.includes(
+                                        "polda"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(
+                                          index,
+                                          "polda",
+                                          Boolean(e)
+                                        )
+                                      }
+                                    />
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      Wilayah
+                                    </label>
+                                    {wilayahPublish.polda && (
+                                      <UnitMapping
+                                        unit="Polda"
+                                        isDetail={false}
+                                        sendDataToParent={(data: any) =>
+                                          setSelectedPolda(data)
+                                        }
+                                      />
                                     )}
-                                    onCheckedChange={(e) =>
-                                      setupPlacement(
-                                        index,
-                                        "international",
-                                        Boolean(e)
-                                      )
-                                    }
-                                  />
-                                  <label
-                                    htmlFor="terms"
-                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                  >
-                                    Internasional
-                                  </label>
+                                  </div>
+
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      checked={filePlacements[index]?.includes(
+                                        "international"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(
+                                          index,
+                                          "international",
+                                          Boolean(e)
+                                        )
+                                      }
+                                    />
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      Internasional
+                                    </label>
+                                  </div>
                                 </div>
-                              </div>
-                            )}
+                              )}
+                            </div>
                           </div>
-                        </div>
-                      ))
-                    : ""}
+                        ))
+                      : ""}
+                  </div>
                   <div className="flex flex-col gap-4">
                     <Textarea
                       placeholder="Type your message here."
@@ -821,7 +858,8 @@ export default function FormImageDetail() {
                   </div>
                   {status == "3" || status == "4" ? (
                     <div className="flex flex-row gap-2">
-                      <Badge
+                      <Button
+                        size="sm"
                         color={
                           description === "Kualitas media kurang baik"
                             ? "primary"
@@ -833,9 +871,10 @@ export default function FormImageDetail() {
                         }
                       >
                         Kualitas media kurang baik
-                      </Badge>
+                      </Button>
 
-                      <Badge
+                      <Button
+                        size="sm"
                         color={
                           description === "Deskripsi kurang lengkap"
                             ? "primary"
@@ -847,8 +886,9 @@ export default function FormImageDetail() {
                         }
                       >
                         Deskripsi kurang lengkap
-                      </Badge>
-                      <Badge
+                      </Button>
+                      <Button
+                        size="sm"
                         color={
                           description === "Judul kurang tepat"
                             ? "primary"
@@ -858,11 +898,12 @@ export default function FormImageDetail() {
                         onClick={() => setDescription("Judul kurang tepat")}
                       >
                         Judul kurang tepat
-                      </Badge>
+                      </Button>
                     </div>
                   ) : (
                     <div className="flex flex-row gap-2">
-                      <Badge
+                      <Button
+                        size="sm"
                         color={
                           description === "Konten sangat bagus"
                             ? "primary"
@@ -872,8 +913,9 @@ export default function FormImageDetail() {
                         onClick={() => setDescription("Konten sangat bagus")}
                       >
                         Konten sangat bagus
-                      </Badge>
-                      <Badge
+                      </Button>
+                      <Button
+                        size="sm"
                         color={
                           description === "Konten menarik"
                             ? "primary"
@@ -883,26 +925,29 @@ export default function FormImageDetail() {
                         onClick={() => setDescription("Konten menarik")}
                       >
                         Konten menarik
-                      </Badge>
+                      </Button>
                     </div>
                   )}
                   <DialogFooter>
-                    <Button
-                      type="button"
-                      color="primary"
-                      onClick={() => submit()}
-                    >
-                      {t("submit")}
-                    </Button>
-                    <Button
-                      type="button"
-                      color="destructive"
-                      onClick={() => {
-                        setModalOpen(false);
-                      }}
-                    >
-                      {t("cancel")}
-                    </Button>
+                    <div className="flex flex-row gap-2 justify-end">
+                      {" "}
+                      <Button
+                        type="button"
+                        color="primary"
+                        onClick={() => submit()}
+                      >
+                        {t("submit")}
+                      </Button>
+                      <Button
+                        type="button"
+                        color="destructive"
+                        onClick={() => {
+                          setModalOpen(false);
+                        }}
+                      >
+                        {t("cancel")}
+                      </Button>
+                    </div>
                   </DialogFooter>
                 </DialogContent>
               </Dialog>
diff --git a/components/form/task/task-detail-form.tsx b/components/form/task/task-detail-form.tsx
index 18d841a3..a4b4887b 100644
--- a/components/form/task/task-detail-form.tsx
+++ b/components/form/task/task-detail-form.tsx
@@ -1361,20 +1361,22 @@ export default function FormTaskDetail() {
                   <div className="mt-4">
                     <Label>Link Url</Label>
                     {urlInputs.map((url: any, index: any) => (
-                      <div
+                      <Link
                         key={url.id}
+                        href={url}
+                        target="_blank"
                         className="flex items-center gap-2 mt-2"
                       >
                         <input
                           type="url"
-                          className="border rounded p-2 w-full"
+                          className="border rounded p-2 w-full cursor-pointer"
                           value={url}
                           // onChange={(e) =>
                           //   handleLinkChange(index, e.target.value)
                           // }
                           placeholder={`Masukkan link berita ${index + 1}`}
                         />
-                      </div>
+                      </Link>
                     ))}
                   </div>
                 </div>
diff --git a/components/form/task/task-form.tsx b/components/form/task/task-form.tsx
index ace2e83c..3a3af009 100644
--- a/components/form/task/task-form.tsx
+++ b/components/form/task/task-form.tsx
@@ -36,7 +36,7 @@ import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
 import { AudioRecorder } from "react-audio-voice-recorder";
 import FileUploader from "@/components/form/shared/file-uploader";
 import { Upload } from "tus-js-client";
-import { error } from "@/config/swal";
+import { close, error } from "@/config/swal";
 import { getCsrfToken } from "@/service/auth";
 import { loading } from "@/lib/swal";
 import { useTranslations } from "next-intl";
@@ -320,37 +320,42 @@ export default function FormTask() {
     loading();
     if (imageFiles?.length == 0) {
       setIsImageUploadFinish(true);
+    } else {
+      imageFiles?.map(async (item: any, index: number) => {
+        await uploadResumableFile(index, String(id), item, "1", "0");
+      });
     }
-    imageFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "1", "0");
-    });
 
     if (videoFiles?.length == 0) {
       setIsVideoUploadFinish(true);
+    } else {
+      videoFiles?.map(async (item: any, index: number) => {
+        await uploadResumableFile(index, String(id), item, "2", "0");
+      });
     }
-    videoFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "2", "0");
-    });
 
     if (textFiles?.length == 0) {
       setIsTextUploadFinish(true);
+    } else {
+      textFiles?.map(async (item: any, index: number) => {
+        await uploadResumableFile(index, String(id), item, "3", "0");
+      });
     }
-    textFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "3", "0");
-    });
 
     if (audioFiles?.length == 0) {
       setIsAudioUploadFinish(true);
+    } else {
+      audioFiles.map(async (item: FileWithPreview, index: number) => {
+        await uploadResumableFile(
+          index,
+          String(id),
+          item, // Use .file to access the actual File object
+          "4",
+          "0" // Optional: Replace with actual duration if available
+        );
+      });
     }
-    audioFiles.map(async (item: FileWithPreview, index: number) => {
-      await uploadResumableFile(
-        index,
-        String(id),
-        item, // Use .file to access the actual File object
-        "4",
-        "0" // Optional: Replace with actual duration if available
-      );
-    });
+    close();
   };
 
   const onSubmit = (data: TaskSchema) => {
@@ -479,7 +484,8 @@ export default function FormTask() {
         successTodo();
         if (fileTypeId == "1") {
           setIsImageUploadFinish(true);
-        } else if (fileTypeId == "2") {
+        }
+        if (fileTypeId == "2") {
           setIsVideoUploadFinish(true);
         }
         if (fileTypeId == "3") {
diff --git a/components/partials/auth/login-form.tsx b/components/partials/auth/login-form.tsx
index 68695b3f..212af74c 100644
--- a/components/partials/auth/login-form.tsx
+++ b/components/partials/auth/login-form.tsx
@@ -281,16 +281,17 @@ const LoginForm = () => {
       return false;
     }
     const msg = response?.data?.message;
+    onSubmit(data);
 
-    if (msg == "Continue to setup email") {
-      setStep(2);
-    } else if (msg == "Email is valid and OTP has been sent") {
-      setStep(3);
-    } else if (msg == "Username & password valid") {
-      onSubmit(data);
-    } else {
-      error("Username / password incorrect");
-    }
+    // if (msg == "Continue to setup email") {
+    //   setStep(2);
+    // } else if (msg == "Email is valid and OTP has been sent") {
+    //   setStep(3);
+    // } else if (msg == "Username & password valid") {
+    //   onSubmit(data);
+    // } else {
+    //   error("Username / password incorrect");
+    // }
     // else {
     //   setStep(1);
     // }

From f8829985f69e17268be7dda1a50f7abb4c8e87b2 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Mon, 9 Jun 2025 16:04:03 +0700
Subject: [PATCH 2/2] fix:pagination media traking-tracking berita, setting
 banner, media tracking result

---
 .../results/component/column.tsx              |  21 ++-
 .../tracking-berita/component/table.tsx       | 107 ++++++-------
 .../admin/settings/banner/component/table.tsx |  22 ++-
 components/table/custom-pagination.tsx        | 143 ++++++++++++++++++
 4 files changed, 221 insertions(+), 72 deletions(-)
 create mode 100644 components/table/custom-pagination.tsx

diff --git a/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx b/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx
index b6bfa497..69d40134 100644
--- a/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx
+++ b/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>
diff --git a/app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx
index e60c0b89..33d03582 100644
--- a/app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx
+++ b/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>
diff --git a/app/[locale]/(protected)/admin/settings/banner/component/table.tsx b/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
index 5b57778c..44d98ec7 100644
--- a/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
+++ b/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>
     </>
diff --git a/components/table/custom-pagination.tsx b/components/table/custom-pagination.tsx
new file mode 100644
index 00000000..cd3adfb6
--- /dev/null
+++ b/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>
+  );
+}