feat:media tracking

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

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  formatDateToIndonesian,
+  getOnlyDate,
+  htmlToString,
+} from "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "date",
+    header: "Tanggal",
+    cell: ({ row }) => (
+      <span>
+        {row.original.startDate.split(" ")[0]} -{" "}
+        {row.original.endDate.split(" ")[0]}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "pageUrl",
+    header: "Link Berita",
+    cell: ({ row }) => (
+      <a
+        className="cursor-pointer normal-case"
+        href={row.original.mediaUpload.pageUrl}
+        target="_blank"
+      >
+        {row.original.mediaUpload.pageUrl}
+      </a>
+    ),
+  },
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Aksi",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <span className="sr-only">Open menu</span>
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <Link href={`/admin/media-tracking/detail/${row.original.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
+              </DropdownMenuItem>
+            </Link>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

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

@@ -0,0 +1,139 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { toast } from "sonner";
+
+import { Input } from "@/components/ui/input";
+import { close, error, loading, successCallback } from "@/config/swal";
+import {
+  listData5Data,
+  listDataAllNonPagination,
+  mediaTrackingSave,
+} from "@/service/media-tracking/media-tracking";
+import { useEffect, useState } from "react";
+
+export default function TrackingMediaModal(props: {
+  triggerFetch: () => void;
+}) {
+  const [content, setContent] = useState<any>([]);
+  const [inputValue, setInputValue] = useState("");
+  const [selectedId, setSelectedId] = useState(0);
+  useEffect(() => {
+    initFecth();
+  }, []);
+
+  const initFecth = async () => {
+    const response = await listData5Data();
+    setContent(response?.data?.data.content);
+  };
+
+  const fecthAll = async (search?: string) => {
+    const response = await listDataAllNonPagination(search || inputValue);
+    setContent(response?.data?.data.content);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const nowLength = value.split(" ").length;
+    const prevLength = inputValue.split(" ").length;
+
+    setInputValue(value);
+
+    if (value === "") {
+      initFecth();
+      setSelectedId(0);
+    }
+
+    if (/\s/.test(value)) {
+      console.log("Terdapat spasi dalam input");
+      fecthAll();
+    }
+
+    if (nowLength !== prevLength) {
+      fecthAll();
+    }
+  };
+
+  const doSave = async () => {
+    loading();
+    const req = {
+      mediaUploadId: selectedId,
+      duration: 24,
+      scrapingPeriod: 3,
+    };
+
+    const res = await mediaTrackingSave(req);
+    if (res?.error) {
+      error(res?.message);
+      return false;
+    }
+    close();
+
+    toast("Berhasil Menambahkan", {
+      description: "",
+    });
+    props.triggerFetch();
+    return false;
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="bg-blue-600" size="md">
+          Tracking Berita
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Form Tracking Berita</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2">
+          {" "}
+          <Input
+            type="text"
+            placeholder="Content"
+            value={inputValue}
+            onChange={handleInputChange}
+          />{" "}
+          <div className="w-full border rounded-md text-xs p-2 flex flex-col gap-1 max-h-[300px] overflow-auto">
+            {content.length > 0 &&
+              content.map((item: any) => (
+                <a
+                  key={item.id}
+                  className={`cursor-pointer ${
+                    selectedId === item.id ? "font-bold" : ""
+                  }`}
+                  onClick={() => {
+                    setSelectedId(item.id);
+                    setInputValue(item.title);
+                    fecthAll(item.title);
+                  }}
+                >
+                  {item.title}
+                </a>
+              ))}
+          </div>
+        </div>
+        {/* <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button type="button">Close</Button>
+          </DialogClose>
+        </DialogFooter> */}
+        <DialogFooter className="flex justify-end gap-2">
+          <Button className="bg-blue-600 text-white" onClick={doSave}>
+            Tracking Berita
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,359 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+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";
+
+const NewsTable = () => {
+  const router = useRouter();
+  const asPath = usePathname();
+  const searchParams = useSearchParams();
+  const [search, setSearch] = React.useState("");
+  const [showData, setShowData] = React.useState("10");
+  const [categories, setCategories] = React.useState<any>();
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [showTable, setShowTable] = React.useState(false);
+  const [onSearch, setOnSearch] = React.useState("");
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<any>([]);
+  const [searchTitle, setSearchTitle] = React.useState<string>("");
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [imageData, setImageData] = React.useState<any>();
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [totalPage, setTotalPage] = React.useState<number>(1);
+  const [contentAll, setContentAll] = React.useState([]);
+  const [formatFilter, setFormatFilter] = React.useState<any>([]);
+  const [totalContent, setTotalContent] = React.useState();
+  const group = searchParams?.get("group");
+  const title = searchParams?.get("title");
+  const categorie = searchParams?.get("category");
+  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;
+
+  // async function doneTyping() {
+  //   fetchData();
+  // }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  React.useEffect(() => {
+    getDataTable();
+  }, []);
+
+  const getDataTable = async () => {
+    const res = await getMediaTracking({ page: page - 1, size: 10 });
+    const data = res?.data?.data;
+    console.log;
+    if (data) {
+      const startIndex = 10 * (page - 1);
+      let iterate = 0;
+      const newData = data.content.map((value: any) => {
+        iterate++;
+        value.no = startIndex + iterate;
+        return value;
+      });
+      setDataTable(newData);
+      setTotalData(data.totalElements);
+      setTotalPage(data?.totalPages);
+      setTotalContent(data.totalElements);
+    }
+  };
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  React.useEffect(() => {
+    if (categorie) {
+      setCategoryFilter(
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
+    }
+  }, [categorie]);
+
+  const handleCategoryFilter = (e: boolean, id: string) => {
+    let filter = [...categoryFilter];
+
+    if (e) {
+      filter = [...categoryFilter, String(id)];
+    } else {
+      filter.splice(categoryFilter.indexOf(id), 1);
+    }
+    console.log("checkbox filter", filter);
+    setCategoryFilter(filter);
+    router.push(`?category=${filter.join("&")}`);
+  };
+
+  const cleanCheckbox = () => {
+    setCategoryFilter([]);
+    setFormatFilter([]);
+    router.push(`?category=&title=`);
+  };
+
+  async function getData() {
+    if (asPath?.includes("/polda/") == true) {
+      if (asPath?.split("/")[2] !== "[polda_name]") {
+        const filter =
+          categoryFilter?.length > 0
+            ? categoryFilter?.sort().join(",")
+            : categorie || "";
+
+        const name = title == undefined ? "" : title;
+        const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+        loading();
+        const response = await listDataAll("", name, filter, "");
+        close();
+        // setGetTotalPage(response?.data?.data?.totalPages);
+        // setContentImage(response?.data?.data?.content);
+        // setTotalContent(response?.data?.data?.totalElements);
+        const data = response?.data?.data;
+        const contentData = data?.content;
+        setImageData(contentData);
+        setTotalData(data?.totalElements);
+        setContentAll(response?.data?.data?.content);
+        setTotalPage(data?.totalPages);
+        setTotalContent(response?.data?.data?.totalElements);
+      }
+    }
+  }
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  async function doneTyping() {
+    if (searchTitle == "" || searchTitle == undefined) {
+      router.push("?title=");
+    } else {
+      router.push(`?title=${searchTitle}`);
+    }
+  }
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3 border ">
+      <div className="flex justify-between  items-center">
+        <p className="text-xl font-medium text-default-900">
+          Tracking Berita hari ini!
+        </p>
+      </div>
+      <TrackingMediaModal triggerFetch={() => getDataTable()} />
+      {/* <Dialog>
+        <DialogTrigger asChild>
+          <Button className="bg-blue-600" size="md">
+            Tracking Berita
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="overflow-y-auto h-[500px] min-w-max mx-5">
+          <DialogHeader>
+            <DialogTitle>Form Tracking Berita</DialogTitle>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4 px-5">
+            <div className="space-y-2 flex flex-col">
+              <Label htmlFor="link" className="text-sm font-medium">
+                Masukkan Link <span className="text-red-500">*</span>
+              </Label>
+              <input
+                value={searchTitle}
+                onChange={(e) => setSearchTitle(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                type="text"
+                placeholder="Search..."
+                className="pl-4 pr-4 py-1 w-full h-10 text-[15px] border  focus:outline-none dark:text-white"
+              />
+            </div>
+            <div className="flex flex-col gap-2 w-full">
+              <SearchImageComponent categoryFilter={categoryFilter} />
+              <SearchVideoComponent categoryFilter={categoryFilter} />
+              <SearchDocumentComponent categoryFilter={categoryFilter} />
+              <SearchAudioComponent categoryFilter={categoryFilter} />
+            </div>
+          </div>
+
+          <DialogFooter className="flex justify-end gap-2">
+            <Button onClick={cleanCheckbox} variant="outline">
+              Riset Filter
+            </Button>
+            <Button className="bg-blue-600 text-white">Tracking Berita</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog> */}
+      <Table className="overflow-hidden mt-4">
+        <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} 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}
+      />
+      {/* <div className="flex justify-end mt-4">
+        <Button
+          color="primary"
+          size="md"
+          className="text-sm mr-3"
+          onClick={() => setShowTable(false)}
+        >
+          Tracking Berita Baru
+        </Button>
+      </div> */}
+      {/* </>
+      )} */}
+    </div>
+  );
+};
+
+export default NewsTable;

app/[locale]/(protected)/admin/media-tracking/detail/[id]/page.tsx

@@ -0,0 +1,12 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import NewsTable from "../../component/table";
+import NewsDetailTable from "../component/table";
+
+export default function DetailNews() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <NewsDetailTable />
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  formatDateToIndonesian,
+  getOnlyDate,
+  htmlToString,
+} from "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "source",
+    header: "Media Online",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("source")}</span>
+    ),
+  },
+  {
+    accessorKey: "title",
+    header: "Judul Berita",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("title")}</span>
+    ),
+  },
+  {
+    accessorKey: "link",
+    header: "Link Berita",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("link")}</span>
+    ),
+  },
+];
+
+export default columns;

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

@@ -0,0 +1,260 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { paginationBlog } from "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { listDataMedia } from "@/service/broadcast/broadcast";
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link } from "@/i18n/routing";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { link } from "fs";
+import { getMediaTrackingResult } from "@/service/media-tracking/media-tracking";
+
+const NewsDetailTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const param = useParams();
+  const id = param?.id;
+  const [search, setSearch] = React.useState("");
+  const [showData, setShowData] = React.useState("10");
+  const [categories, setCategories] = React.useState<any>();
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [showTable, setShowTable] = React.useState(false);
+  const [link, setLink] = React.useState("");
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  const [statusFilter, setStatusFilter] = 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;
+
+  // const handleKeyUp = () => {
+  //   clearTimeout(typingTimer);
+  //   typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  // };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  // async function doneTyping() {
+  //   fetchData();
+  // }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+    setPagination({
+      pageIndex: 0,
+      pageSize: Number(showData),
+    });
+  }, [page, showData]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await getMediaTrackingResult({ id: id, page: page - 1 });
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * Number(showData) + index + 1;
+      });
+
+      console.log("contentData : ", data);
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  const handleChange = (type: string, id: number, checked: boolean) => {
+    if (type === "category") {
+      if (checked) {
+        const temp: number[] = [...categoryFilter];
+        temp.push(id);
+        setCategoryFilter(temp);
+      } else {
+        const temp = categoryFilter.filter((a) => a !== id);
+        setCategoryFilter(temp);
+      }
+    } else {
+      if (checked) {
+        const temp: number[] = [...statusFilter];
+        temp.push(id);
+        setStatusFilter(temp);
+      } else {
+        const temp = statusFilter.filter((a) => a !== id);
+        setStatusFilter(temp);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3 border">
+      <Table className="overflow-hidden mt-4">
+        <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} 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}
+      />
+    </div>
+  );
+};
+
+export default NewsDetailTable;

app/[locale]/(protected)/admin/media-tracking/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import NewsTable from "./component/table";
+
+export default function AdminNews() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <NewsTable />
+    </div>
+  );
+}

lib/menus.ts

@@ -3148,14 +3148,14 @@ export function getMenuList(pathname: string, t: any): Group[] {
                 {
                   href: "/admin/media-tracking/media-online",
                   label: "Media Online",
-                  active: pathname === "/media-tracking/media-online",
+                  active: pathname === "/admin/media-tracking/media-online",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
                 {
-                  href: "/admin/media-tracking/tb-news",
+                  href: "/admin/media-tracking",
                   label: "Tracking Beritra Hari Ini",
-                  active: pathname === "/media-tracking/news",
+                  active: pathname === "/admin/media-tracking",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },

service/media-tracking/media-tracking.ts

@@ -1,4 +1,7 @@
-import { httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
+import {
+  httpGetInterceptor,
+  httpPostInterceptor,
+} from "../http-config/http-interceptor-service";
 
 export async function getMediaTrackingMonitoring(page: number, size: number) {
   const url = `cekmedsos/monitoring/pagination?page=${page}&size=${size}`;
@@ -9,3 +12,35 @@ export async function sendMediaUploadToEmail(data: any) {
   const url = "media/public/share-to-email";
   return httpPostInterceptor(url, data);
 }
+
+export async function mediaTrackingSave(data: any) {
+  const url = `/media/tracking/monitoring`;
+  return httpPostInterceptor(url, data);
+}
+
+export async function getMediaTracking(data: any) {
+  // const url = `/media/tracking/monitoring/pagination`;
+  const url = `/media/tracking/monitoring/pagination?enablePagination=1&page=${
+    data.page || 0
+  }&size=${data?.size || 10}`;
+  return httpGetInterceptor(url);
+}
+export async function getMediaTrackingResult(data: any) {
+  // const url = `/media/tracking/monitoring/pagination`;
+  const url = `/media/tracking/monitoring/results/pagination?trackingId=${
+    data.id || ""
+  }`;
+  return httpGetInterceptor(url);
+}
+
+export async function listData5Data() {
+  return await httpGetInterceptor(
+    `media/public/list?enablePage=1&sort=desc&size=5`
+  );
+}
+
+export async function listDataAllNonPagination(search: string) {
+  return await httpGetInterceptor(
+    `media/public/list?enablePage=0&sort=desc&title=${search || ""}`
+  );
+}

vendor/ckeditor5/node_modules/.bin/tsc

@@ -2,11 +2,7 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
+    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
 esac
 
 if [ -x "$basedir/node" ]; then

vendor/ckeditor5/node_modules/.bin/tsserver

@@ -2,11 +2,7 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
+    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
 esac
 
 if [ -x "$basedir/node" ]; then