From 7b35a9b3dac2480017b1e6efdaff40775dddbdd5 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Tue, 3 Jun 2025 08:59:48 +0800
Subject: [PATCH 1/2] [QUDO-133,QUDO-130,QUDO-134] feat:ui kalender,ui iklan,
 change api AI content rewrite

---
 .../admin/settings/banner/component/table.tsx | 160 ++++++++++--------
 .../admin/settings/banner/page.tsx            |   7 +-
 .../admin/settings/iklan/component/table.tsx  |   5 +
 .../(protected)/admin/settings/iklan/page.tsx |  33 +---
 .../admin/settings/popup/component/table.tsx  | 160 ++++++++++--------
 .../component/calendar-polri-table.tsx        |   8 +-
 .../content-management/rewrite/page.tsx       | 127 +++++++++++---
 components/form/content/spit-convert-form.tsx |  14 +-
 .../form/schedule/form-calendar-polri.tsx     | 116 +++++++++++++
 components/form/schedule/live-report-form.tsx |   8 +-
 components/form/setting/form-add-iklan.tsx    | 114 +++++++++++++
 service/content/ai.ts                         |  11 +-
 12 files changed, 551 insertions(+), 212 deletions(-)
 create mode 100644 components/form/schedule/form-calendar-polri.tsx
 create mode 100644 components/form/setting/form-add-iklan.tsx

diff --git a/app/[locale]/(protected)/admin/settings/banner/component/table.tsx b/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
index 03175fb1..5b57778c 100644
--- a/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
+++ b/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
@@ -65,13 +65,17 @@ import { listEnableCategory } from "@/service/content/content";
 import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
 import { Link } from "@/i18n/routing";
+import { data } from "jquery";
+import { useToast } from "@/components/ui/use-toast";
+import { setBanner } from "@/service/settings/settings";
+import { id } from "date-fns/locale";
 
-const ContentListTable = () => {
+const ContentListBanner = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [showData, setShowData] = React.useState("10");
   const [categories, setCategories] = React.useState<any>();
-  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [data, setData] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -86,28 +90,9 @@ const ContentListTable = () => {
   });
   const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
   const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
-  const table = useReactTable({
-    data: dataTable,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-      pagination,
-    },
-  });
 
   let typingTimer: any;
   const doneTypingInterval = 1500;
@@ -159,7 +144,7 @@ const ContentListTable = () => {
 
       console.log("contentData : ", data);
 
-      setDataTable(contentData);
+      setData(contentData);
       setTotalData(data?.totalElements);
       setTotalPage(data?.totalPages);
       close();
@@ -200,6 +185,38 @@ const ContentListTable = () => {
     }
   };
 
+  const handleSelect = (id: number) => {
+    setSelectedItems((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  const handleSelectAll = () => {
+    if (selectedItems.length === data.length) {
+      setSelectedItems([]);
+    } else {
+      setSelectedItems(data.map((item: any) => Number(item.id)));
+    }
+  };
+
+  const { toast } = useToast();
+
+  const handleBanner = async (ids: number[]) => {
+    try {
+      await Promise.all(ids.map((id) => setBanner(id, true)));
+      toast({
+        title: "Sukses",
+        description: `${ids.length} item berhasil dijadikan banner.`,
+      });
+    } catch (err) {
+      toast({
+        title: "Gagal",
+        description: "Terjadi kesalahan saat menjadikan banner.",
+        variant: "destructive",
+      });
+    }
+  };
+
   return (
     <>
       <div className="flex justify-between ">
@@ -210,7 +227,7 @@ const ContentListTable = () => {
           onKeyDown={handleKeyDown}
           className="max-w-[300px]"
         />
-        <div className="flex flex-row gap-2">
+        {/* <div className="flex flex-row gap-2">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button size="md" variant="outline">
@@ -338,56 +355,57 @@ const ContentListTable = () => {
               </div>
             </PopoverContent>
           </Popover>
+        </div> */}
+      </div>
+      <div>
+        {/* Header select all + action */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              checked={selectedItems.length === data.length}
+              onCheckedChange={handleSelectAll}
+            />
+            <span>Pilih Semua</span>
+          </div>
+          {selectedItems.length > 0 && (
+            <Button color="primary" onClick={() => handleBanner(selectedItems)}>
+              Jadikan Banner
+            </Button>
+          )}
+        </div>
+
+        {/* Grid Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {data?.map((item: any) => (
+            <div
+              key={item.id}
+              className="relative rounded-lg shadow-md overflow-hidden border border-gray-200"
+            >
+              <div className="absolute top-2 left-2 z-10">
+                <Checkbox
+                  checked={selectedItems.includes(item.id)}
+                  onCheckedChange={() => handleSelect(item.id)}
+                />
+              </div>
+              <img
+                src={item.thumbnailLink || "/placeholder.jpg"}
+                alt={item.title}
+                className="w-full h-48 object-cover"
+              />
+              <div className="p-3">
+                <h4 className="font-semibold text-sm truncate">{item.title}</h4>
+              </div>
+            </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>
       </div>
-      <Table className="overflow-hidden">
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="bg-default-200">
-              {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </TableHead>
-              ))}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-                className="h-[75px]"
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </>
   );
 };
 
-export default ContentListTable;
+export default ContentListBanner;
diff --git a/app/[locale]/(protected)/admin/settings/banner/page.tsx b/app/[locale]/(protected)/admin/settings/banner/page.tsx
index c3fcbe33..8385b071 100644
--- a/app/[locale]/(protected)/admin/settings/banner/page.tsx
+++ b/app/[locale]/(protected)/admin/settings/banner/page.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 
 import BannerListTable from "./component/banner-table";
 import { Button } from "@/components/ui/button";
+import ContentListBanner from "./component/table";
 
 export default function AdminBanner() {
   const [selectedTab, setSelectedTab] = useState("content");
@@ -44,7 +45,11 @@ export default function AdminBanner() {
           </div>
         </div>
 
-        {selectedTab === "content" ? <ContentListTable /> : <BannerListTable />}
+        {selectedTab === "content" ? (
+          <ContentListBanner />
+        ) : (
+          <BannerListTable />
+        )}
       </div>
     </div>
   );
diff --git a/app/[locale]/(protected)/admin/settings/iklan/component/table.tsx b/app/[locale]/(protected)/admin/settings/iklan/component/table.tsx
index 21f35ad3..e9d72d23 100644
--- a/app/[locale]/(protected)/admin/settings/iklan/component/table.tsx
+++ b/app/[locale]/(protected)/admin/settings/iklan/component/table.tsx
@@ -30,6 +30,7 @@ import {
   ChevronRight,
   Eye,
   MoreVertical,
+  Plus,
   Search,
   SquarePen,
   Trash2,
@@ -65,6 +66,7 @@ import { listEnableCategory } from "@/service/content/content";
 import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
 import { Link } from "@/i18n/routing";
+import { TambahIklanModal } from "@/components/form/setting/form-add-iklan";
 
 const IklanList = () => {
   const router = useRouter();
@@ -202,6 +204,9 @@ const IklanList = () => {
 
   return (
     <>
+      <div>
+        <TambahIklanModal />
+      </div>
       <div className="flex justify-between ">
         <Input
           type="text"
diff --git a/app/[locale]/(protected)/admin/settings/iklan/page.tsx b/app/[locale]/(protected)/admin/settings/iklan/page.tsx
index 8615d36c..3571c256 100644
--- a/app/[locale]/(protected)/admin/settings/iklan/page.tsx
+++ b/app/[locale]/(protected)/admin/settings/iklan/page.tsx
@@ -14,38 +14,7 @@ export default function AdminIklan() {
     <div>
       <SiteBreadcrumb />
       <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
-        <div className="flex justify-between">
-          {selectedTab === "content" ? "List Media" : " List Pop Up"}
-
-          <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-5">
-            <Button
-              rounded="md"
-              onClick={() => setSelectedTab("content")}
-              className={` hover:text-white
-                ${
-                  selectedTab === "content"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
-            >
-              Kontent
-            </Button>
-            <Button
-              rounded="md"
-              onClick={() => setSelectedTab("iklan")}
-              className={` hover:text-white
-                ${
-                  selectedTab === "iklan"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
-            >
-              Iklan
-            </Button>
-          </div>
-        </div>
-
-        {selectedTab === "content" ? <IklanList /> : <IklanListTable />}
+        <IklanList />
       </div>
     </div>
   );
diff --git a/app/[locale]/(protected)/admin/settings/popup/component/table.tsx b/app/[locale]/(protected)/admin/settings/popup/component/table.tsx
index f23f6709..bd716f74 100644
--- a/app/[locale]/(protected)/admin/settings/popup/component/table.tsx
+++ b/app/[locale]/(protected)/admin/settings/popup/component/table.tsx
@@ -65,13 +65,17 @@ import { listEnableCategory } from "@/service/content/content";
 import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
 import { Link } from "@/i18n/routing";
+import { data } from "jquery";
+import { useToast } from "@/components/ui/use-toast";
+import { setBanner } from "@/service/settings/settings";
+import { id } from "date-fns/locale";
 
-const PopUpList = () => {
+const ContentListPopUp = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [showData, setShowData] = React.useState("10");
   const [categories, setCategories] = React.useState<any>();
-  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [data, setData] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -86,28 +90,9 @@ const PopUpList = () => {
   });
   const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
   const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
-  const table = useReactTable({
-    data: dataTable,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-      pagination,
-    },
-  });
 
   let typingTimer: any;
   const doneTypingInterval = 1500;
@@ -159,7 +144,7 @@ const PopUpList = () => {
 
       console.log("contentData : ", data);
 
-      setDataTable(contentData);
+      setData(contentData);
       setTotalData(data?.totalElements);
       setTotalPage(data?.totalPages);
       close();
@@ -200,6 +185,38 @@ const PopUpList = () => {
     }
   };
 
+  const handleSelect = (id: number) => {
+    setSelectedItems((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  const handleSelectAll = () => {
+    if (selectedItems.length === data.length) {
+      setSelectedItems([]);
+    } else {
+      setSelectedItems(data.map((item: any) => Number(item.id)));
+    }
+  };
+
+  const { toast } = useToast();
+
+  const handleBanner = async (ids: number[]) => {
+    try {
+      await Promise.all(ids.map((id) => setBanner(id, true)));
+      toast({
+        title: "Sukses",
+        description: `${ids.length} item berhasil dijadikan banner.`,
+      });
+    } catch (err) {
+      toast({
+        title: "Gagal",
+        description: "Terjadi kesalahan saat menjadikan banner.",
+        variant: "destructive",
+      });
+    }
+  };
+
   return (
     <>
       <div className="flex justify-between ">
@@ -210,7 +227,7 @@ const PopUpList = () => {
           onKeyDown={handleKeyDown}
           className="max-w-[300px]"
         />
-        <div className="flex flex-row gap-2">
+        {/* <div className="flex flex-row gap-2">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button size="md" variant="outline">
@@ -338,56 +355,57 @@ const PopUpList = () => {
               </div>
             </PopoverContent>
           </Popover>
+        </div> */}
+      </div>
+      <div>
+        {/* Header select all + action */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              checked={selectedItems.length === data.length}
+              onCheckedChange={handleSelectAll}
+            />
+            <span>Pilih Semua</span>
+          </div>
+          {selectedItems.length > 0 && (
+            <Button color="primary" onClick={() => handleBanner(selectedItems)}>
+              Jadikan Banner
+            </Button>
+          )}
+        </div>
+
+        {/* Grid Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {data?.map((item: any) => (
+            <div
+              key={item.id}
+              className="relative rounded-lg shadow-md overflow-hidden border border-gray-200"
+            >
+              <div className="absolute top-2 left-2 z-10">
+                <Checkbox
+                  checked={selectedItems.includes(item.id)}
+                  onCheckedChange={() => handleSelect(item.id)}
+                />
+              </div>
+              <img
+                src={item.thumbnailLink || "/placeholder.jpg"}
+                alt={item.title}
+                className="w-full h-48 object-cover"
+              />
+              <div className="p-3">
+                <h4 className="font-semibold text-sm truncate">{item.title}</h4>
+              </div>
+            </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>
       </div>
-      <Table className="overflow-hidden">
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="bg-default-200">
-              {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </TableHead>
-              ))}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-                className="h-[75px]"
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </>
   );
 };
 
-export default PopUpList;
+export default ContentListPopUp;
diff --git a/app/[locale]/(protected)/contributor/schedule/calendar-polri/component/calendar-polri-table.tsx b/app/[locale]/(protected)/contributor/schedule/calendar-polri/component/calendar-polri-table.tsx
index 10116e1e..3dc28244 100644
--- a/app/[locale]/(protected)/contributor/schedule/calendar-polri/component/calendar-polri-table.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/calendar-polri/component/calendar-polri-table.tsx
@@ -57,6 +57,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Label } from "@/components/ui/label";
+import { CalendarPolriAdd } from "@/components/form/schedule/form-calendar-polri";
 
 const CalendarPolriTable = () => {
   const router = useRouter();
@@ -161,12 +162,7 @@ const CalendarPolriTable = () => {
               {t("calendar-polri")} {t("schedule")}
             </div>
             <div className="flex-none">
-              <Link href={"/contributor/schedule/press-conference/create"}>
-                <Button color="primary" className="text-white">
-                  <UploadIcon size={18} className="mr-2" />
-                  {t("create-schedule")}
-                </Button>
-              </Link>
+              <CalendarPolriAdd />
             </div>
           </div>
         </CardTitle>
diff --git a/app/[locale]/(public)/content-management/rewrite/page.tsx b/app/[locale]/(public)/content-management/rewrite/page.tsx
index 4430eef1..6a1b1d9d 100644
--- a/app/[locale]/(public)/content-management/rewrite/page.tsx
+++ b/app/[locale]/(public)/content-management/rewrite/page.tsx
@@ -4,14 +4,24 @@ import HeaderManagement from "@/components/landing-page/header-management";
 import SidebarManagement from "@/components/landing-page/sidebar-management";
 import { close, error, loading, successCallback } from "@/config/swal";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { checkWishlistStatus, deleteWishlist, getContentRewritePagination, getInfoProfile, saveWishlist } from "@/service/landing/landing";
+import {
+  checkWishlistStatus,
+  deleteWishlist,
+  getContentRewritePagination,
+  getInfoProfile,
+  saveWishlist,
+} from "@/service/landing/landing";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { Card, CardContent } from "@/components/ui/card";
 import { Link } from "@/i18n/routing";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -63,7 +73,10 @@ const page = () => {
   }, [page, category, title, refresh]);
 
   async function getData() {
-    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+    const filter =
+      categoryFilter?.length > 0
+        ? categoryFilter?.sort().join(",")
+        : category || "";
 
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -119,7 +132,9 @@ const page = () => {
   };
 
   const copyToClip = async (url: any) => {
-    await navigator.clipboard.writeText(`https://mediahub.polri.go.id/image/detail/${url}`);
+    await navigator.clipboard.writeText(
+      `https://mediahub.polri.go.id/image/detail/${url}`
+    );
     setCopySuccess("Copied");
     // toast.success("Link Berhasil Di Copy");
   };
@@ -211,48 +226,110 @@ const page = () => {
             {contentImage?.length > 0 ? (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {contentImage?.map((image: any) => (
-                  <Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
+                  <Card
+                    key={image?.id}
+                    className="hover:scale-105 transition-transform duration-300"
+                  >
                     <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                       <div>
                         <div className="relative group overflow-hidden shadow-md hover:shadow-lg">
                           <div className="relative h-60 rounded-lg overflow-hidden">
-                            <ImageBlurry src={image?.thumbnailUrl} alt={image?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} />
+                            <ImageBlurry
+                              src={image?.thumbnailUrl}
+                              alt={image?.title}
+                              style={{
+                                objectFit: "contain",
+                                width: "100%",
+                                height: "100%",
+                              }}
+                            />
                             <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-transparent via-gray-900/80 to-transparent text-white">
-                              <Link href={`/content-management/rewrite/detail/${image.id}`}>
-                                <p className="text-sm p-2 lg:text-base font-semibold truncate">{image?.title}</p>
+                              <Link
+                                href={`/content-management/rewrite/detail/${image.id}`}
+                              >
+                                <p className="text-sm p-2 lg:text-base font-semibold truncate">
+                                  {image?.title}
+                                </p>
                               </Link>
                               <p className="flex text-[10px] ml-1 mb-2 items-end">
                                 <Popover>
-                                  <PopoverTrigger className="flex cursor-pointer" asChild>
+                                  <PopoverTrigger
+                                    className="flex cursor-pointer"
+                                    asChild
+                                  >
                                     <a className="flex justify-end items-end place-items-end">
-                                      <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                                      <Icon
+                                        className="text-white ml-1"
+                                        fontSize={25}
+                                        icon="tabler:dots"
+                                      />
                                     </a>
                                   </PopoverTrigger>
                                   <PopoverContent className="w-52">
-                                    <div onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
-                                      <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
-                                      <p className="text-base font-semibold mb-2">{t("save")}</p>
+                                    <div
+                                      onClick={() =>
+                                        handleSaveWishlist(
+                                          image?.mediaUpload?.id
+                                        )
+                                      }
+                                      className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                                    >
+                                      <Icon
+                                        icon="material-symbols:bookmark-outline"
+                                        fontSize={25}
+                                      />
+                                      <p className="text-base font-semibold mb-2">
+                                        {t("save")}
+                                      </p>
                                     </div>
-                                    <Link href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                                    <Link
+                                      href={`/content-management/rewrite/create/${image?.id}`}
+                                      className="flex flex-row hover:text-red-800 gap-2"
+                                    >
                                       <Icon icon="jam:write" fontSize={25} />
-                                      <p className="text-base font-semibold mb-2">Content Rewrite</p>
+                                      <p className="text-base font-semibold mb-2">
+                                        Content Rewrite
+                                      </p>
                                     </Link>
                                     <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
                                       <Popover>
                                         <PopoverTrigger asChild>
                                           <button className="w-full flex flex-row items-center gap-3">
-                                            <Icon icon="oi:share" fontSize={20} />
-                                            <p className="text-base font-semibold mb-1"> {t("share")}</p>
+                                            <Icon
+                                              icon="oi:share"
+                                              fontSize={20}
+                                            />
+                                            <p className="text-base font-semibold mb-1">
+                                              {" "}
+                                              {t("share")}
+                                            </p>
                                           </button>
                                         </PopoverTrigger>
                                         <PopoverContent>
                                           <div className="flex flex-col">
-                                            <h1 className="mb-2">{t("shareTo")}</h1>
+                                            <h1 className="mb-2">
+                                              {t("shareTo")}
+                                            </h1>
                                             <div className="flex flex-col mb-2">
-                                              <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                                              <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                                              <p className="text-base font-semibold mb-1">
+                                                {t("destinationEmail")}
+                                              </p>
+                                              <Input
+                                                value={emailShareInput}
+                                                onChange={(event) =>
+                                                  setEmailShareInput(
+                                                    event.target.value
+                                                  )
+                                                }
+                                                onKeyPress={handleEmailList}
+                                                type="email"
+                                                placeholder={t("pressEnter")}
+                                              />
                                             </div>
-                                            <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                            <Button
+                                              className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                              onClick={() => shareToEmail()}
+                                            >
                                               {t("send")}
                                             </Button>
                                           </div>
@@ -272,7 +349,13 @@ const page = () => {
               </div>
             ) : (
               <p className="flex items-center justify-center">
-                <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                <Image
+                  width={1920}
+                  height={1080}
+                  src="/assets/empty-data.png"
+                  alt="empty"
+                  className="h-52 w-52 my-4"
+                />
               </p>
             )}
           </div>
diff --git a/components/form/content/spit-convert-form.tsx b/components/form/content/spit-convert-form.tsx
index 40f96b6f..5a381f13 100644
--- a/components/form/content/spit-convert-form.tsx
+++ b/components/form/content/spit-convert-form.tsx
@@ -45,11 +45,16 @@ import "swiper/css";
 import "swiper/css/navigation";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
 import { request } from "http";
-import { generateDataArticle, getDetailArticle } from "@/service/content/ai";
+import {
+  generateDataArticle,
+  generateDataRewrite,
+  getDetailArticle,
+} from "@/service/content/ai";
 import { getCookiesDecrypt } from "@/lib/utils";
 import dynamic from "next/dynamic";
 import { error } from "@/lib/swal";
 import { useTranslations } from "next-intl";
+import { contextType } from "cleave.js/react";
 
 const imageSchema = z.object({
   contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
@@ -501,12 +506,15 @@ export default function FormConvertSPIT() {
       additionalKeywords: detail?.contentTitle,
       targetCountry: null,
       articleSize: "news",
+      contextType: "text",
+      context: detail?.contentDescription,
       projectId: 2,
       createdBy: roleId,
-      clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
+      sentiment: "Humorous",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
     };
 
-    const res = await generateDataArticle(request);
+    const res = await generateDataRewrite(request);
     close();
 
     if (res?.error) {
diff --git a/components/form/schedule/form-calendar-polri.tsx b/components/form/schedule/form-calendar-polri.tsx
new file mode 100644
index 00000000..b411f0f0
--- /dev/null
+++ b/components/form/schedule/form-calendar-polri.tsx
@@ -0,0 +1,116 @@
+// components/TambahIklanModal.tsx
+"use client";
+
+import * as React from "react";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { CalendarIcon, Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
+import DatePicker from "react-datepicker";
+import { id } from "date-fns/locale";
+import "react-datepicker/dist/react-datepicker.css";
+
+export function CalendarPolriAdd() {
+  const [open, setOpen] = React.useState(false);
+  const t = useTranslations("Schedule");
+  const [eventDate, setEventDate] = React.useState<Date | null>(new Date());
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)} color="primary" size="md">
+          <Plus className="mr-2 h-4 w-4" /> {t("calendar-polri")}{" "}
+          {t("schedule")}
+        </Button>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>Buat Jadwal Kalender Polri</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div>
+            <p className="font-medium mb-1">Tanggal Acara</p>
+            <div className="relative">
+              <DatePicker
+                selected={eventDate}
+                onChange={(date) => setEventDate(date)}
+                dateFormat="dd MMMM yyyy"
+                locale={id}
+                className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+              <CalendarIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 pointer-events-none" />
+            </div>
+          </div>
+          <div>
+            <p className="font-medium">Publish Area</p>
+            <div className="flex flex-wrap gap-4 mt-2">
+              {["Semua", "Nasional", "Polda", "Satker", "International"].map(
+                (label) => (
+                  <label key={label} className="flex items-center gap-2">
+                    <Checkbox id={label} />
+                    <span>{label}</span>
+                  </label>
+                )
+              )}
+            </div>
+          </div>
+
+          {/* Nama Iklan */}
+          <div>
+            <p className="font-medium">Nama Acara</p>
+            <Input placeholder="Masukkan nama acara" />
+          </div>
+
+          {/* Upload */}
+          <div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
+            <svg
+              className="w-6 h-6 mb-2 text-blue-500"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
+              />
+            </svg>
+            <div>
+              Drag your file(s) or{" "}
+              <span className="text-blue-500 underline cursor-pointer">
+                browse
+              </span>
+            </div>
+            <div className="text-xs mt-1">Max 10 MB files are allowed</div>
+          </div>
+
+          {/* Deskripsi */}
+          <div>
+            <p className="font-medium">Deskripsi</p>
+            <Textarea placeholder="Masukkan deskripsi acara" rows={4} />
+          </div>
+
+          {/* Button Submit */}
+          <div className="text-right">
+            <Button
+              type="submit"
+              className="bg-blue-600 text-white hover:bg-blue-700"
+            >
+              Submit
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/form/schedule/live-report-form.tsx b/components/form/schedule/live-report-form.tsx
index e5a0eb19..cf3a73a4 100644
--- a/components/form/schedule/live-report-form.tsx
+++ b/components/form/schedule/live-report-form.tsx
@@ -99,10 +99,10 @@ export default function FormLiveReport() {
       address: data.location,
       speakerTitle: data.level,
       speakerName: data.name,
-      startTime, // Start time from state
-      endTime, // End time from state
-      addressLat: "0.0", // Replace with actual latitude
-      addressLong: "0.0", // Replace with actual longitude
+      startTime,
+      endTime,
+      addressLat: "0.0",
+      addressLong: "0.0",
       startDate: date?.from ? format(date.from, "yyyy-MM-dd") : null,
       endDate: date?.to ? format(date.to, "yyyy-MM-dd") : null,
       isYoutube: isLiveStreamingEnabled,
diff --git a/components/form/setting/form-add-iklan.tsx b/components/form/setting/form-add-iklan.tsx
new file mode 100644
index 00000000..c8f61c24
--- /dev/null
+++ b/components/form/setting/form-add-iklan.tsx
@@ -0,0 +1,114 @@
+// components/TambahIklanModal.tsx
+"use client";
+
+import * as React from "react";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Plus } from "lucide-react";
+
+export function TambahIklanModal() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)} color="primary" size="md">
+          <Plus className="mr-2 h-4 w-4" />
+          Tambah Iklan
+        </Button>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>Tambah Iklan</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Target Area */}
+          <div>
+            <p className="font-medium">Target Area</p>
+            <div className="flex flex-wrap gap-4 mt-2">
+              {["Kiri - 1", "Kiri - 2", "Kanan - 1", "Kanan - 2"].map(
+                (label) => (
+                  <label key={label} className="flex items-center gap-2">
+                    <Checkbox id={label} />
+                    <span>{label}</span>
+                  </label>
+                )
+              )}
+            </div>
+          </div>
+
+          {/* Publish Area */}
+          <div>
+            <p className="font-medium">Publish Area</p>
+            <div className="flex flex-wrap gap-4 mt-2">
+              {["Semua", "Nasional", "Polda", "Satker", "International"].map(
+                (label) => (
+                  <label key={label} className="flex items-center gap-2">
+                    <Checkbox id={label} />
+                    <span>{label}</span>
+                  </label>
+                )
+              )}
+            </div>
+          </div>
+
+          {/* Nama Iklan */}
+          <div>
+            <p className="font-medium">Nama Iklan</p>
+            <Input placeholder="Masukkan nama iklan" />
+          </div>
+
+          {/* Upload */}
+          <div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
+            <svg
+              className="w-6 h-6 mb-2 text-blue-500"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
+              />
+            </svg>
+            <div>
+              Drag your file(s) or{" "}
+              <span className="text-blue-500 underline cursor-pointer">
+                browse
+              </span>
+            </div>
+            <div className="text-xs mt-1">Max 10 MB files are allowed</div>
+          </div>
+
+          {/* Deskripsi */}
+          <div>
+            <p className="font-medium">Deskripsi</p>
+            <Textarea placeholder="Masukkan deskripsi iklan" rows={4} />
+          </div>
+
+          {/* Button Submit */}
+          <div className="text-right">
+            <Button
+              type="submit"
+              className="bg-blue-600 text-white hover:bg-blue-700"
+            >
+              Tambah Iklan
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/service/content/ai.ts b/service/content/ai.ts
index 28a4f055..f97cff19 100644
--- a/service/content/ai.ts
+++ b/service/content/ai.ts
@@ -10,6 +10,15 @@ export async function generateDataArticle(data: any) {
   return await httpPost("ai-writer/save-article", headers, data);
 }
 
+export async function generateDataRewrite(data: any) {
+  const headers = {
+    "content-type": "application/json",
+    Authorization:
+      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+  };
+  return await httpPost("ai-writer/create-rewriter", headers, data);
+}
+
 export async function getGenerateTitle(data: any) {
   const headers = {
     "content-type": "application/json",
@@ -109,5 +118,3 @@ export async function detailMediaNulis(id: any) {
   const url = `media/nulis-ai?id=${id}`;
   return httpGetInterceptor({ url });
 }
-
-

From 08e3ca86626fd308f69a7f3b18bea103f322f313 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Tue, 3 Jun 2025 10:10:12 +0800
Subject: [PATCH 2/2] fix media tracking

---
 .../admin/media-tracking/component/modal.tsx  | 11 +++++++---
 .../admin/media-tracking/component/table.tsx  | 21 +------------------
 2 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/app/[locale]/(protected)/admin/media-tracking/component/modal.tsx b/app/[locale]/(protected)/admin/media-tracking/component/modal.tsx
index ed3043f7..1fb9ddf4 100644
--- a/app/[locale]/(protected)/admin/media-tracking/component/modal.tsx
+++ b/app/[locale]/(protected)/admin/media-tracking/component/modal.tsx
@@ -15,8 +15,9 @@ import { toast } from "sonner";
 import { Input } from "@/components/ui/input";
 import { close, error, loading, successCallback } from "@/config/swal";
 import {
-  listData5Data,
+  getMediaTracking,
   listDataAllNonPagination,
+  listDataTracking,
   mediaTrackingSave,
 } from "@/service/media-tracking/media-tracking";
 import { useEffect, useState } from "react";
@@ -27,12 +28,16 @@ export default function TrackingMediaModal(props: {
   const [content, setContent] = useState<any>([]);
   const [inputValue, setInputValue] = useState("");
   const [selectedId, setSelectedId] = useState(0);
+  const [search, setSearch] = useState<string>("");
+  const [page, setPage] = useState(1);
+  const [showData, setShowData] = useState("10");
+
   useEffect(() => {
     initFecth();
-  }, []);
+  }, [page, showData, search]);
 
   const initFecth = async () => {
-    const response = await listData5Data();
+    const response = await getMediaTracking(page - 1, search, showData);
     setContent(response?.data?.data.content);
   };
 
diff --git a/app/[locale]/(protected)/admin/media-tracking/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/component/table.tsx
index ba3ba8be..954f89f6 100644
--- a/app/[locale]/(protected)/admin/media-tracking/component/table.tsx
+++ b/app/[locale]/(protected)/admin/media-tracking/component/table.tsx
@@ -54,27 +54,8 @@ import columns from "./column";
 import { listEnableCategory } from "@/service/content/content";
 import { close, loading } from "@/config/swal";
 import { Label } from "@/components/ui/label";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { link } from "fs";
-import { listDataAll } from "@/service/landing/landing";
-import SearchImageComponent from "@/components/form/media-tracking/search-image-card";
-import SearchVideoComponent from "@/components/form/media-tracking/search-video-card";
-import SearchDocumentComponent from "@/components/form/media-tracking/search-document-card";
-import SearchAudioComponent from "@/components/form/media-tracking/search-audio-card";
 import TrackingMediaModal from "./modal";
 import { getMediaTracking } from "@/service/media-tracking/media-tracking";
-import { group } from "console";
-import router from "next/router";
-import { title } from "process";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
 
 const NewsTable = () => {
   const router = useRouter();
@@ -266,7 +247,7 @@ const NewsTable = () => {
       </div>
 
       <div className="flex flex-col sm:flex-row lg:flex-row justify-between sm:items-center md:items-center lg:items-center px-1">
-        <TrackingMediaModal triggerFetch={() => getDataTable()} />
+        {/* <TrackingMediaModal triggerFetch={() => getDataTable()} /> */}
         <div className=" flex flex-row items-center gap-3">
           <div className="flex items-center py-2">
             <div className="mx-3">