adjust conflict

app/[locale]/(protected)/admin/settings/iklan/component/column.tsx

@@ -0,0 +1,113 @@
+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";
+import { setBanner } from "@/service/settings/settings";
+import { error } from "@/config/swal";
+import { useToast } from "@/components/ui/use-toast";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "categoryName",
+    header: "Kategori",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Tanggal Unggah",
+    cell: ({ row }) => (
+      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
+    ),
+  },
+
+  {
+    accessorKey: "statusName",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("statusName")}</span>,
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const { toast } = useToast();
+
+      const handleBanner = async (id: number) => {
+        const response = setBanner(id, true);
+        toast({
+          title: "Success",
+        });
+      };
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link
+                href={`/contributor/content/image/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <a onClick={() => handleBanner(row.original.id)}>
+                Jadikan Banner
+              </a>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/settings/iklan/component/popup-column.tsx

@@ -0,0 +1,110 @@
+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";
+import StatusToogle from "./status-toogle";
+import StaticToogle from "./static-toogle";
+
+const columns: ColumnDef<any>[] = [
+  // {
+  //   accessorKey: "no",
+  //   header: "No",
+  //   cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  // },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "categoryName",
+    header: "Kategori",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Tanggal Unggah",
+    cell: ({ row }) => (
+      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
+    ),
+  },
+  {
+    accessorKey: "isStaticBanner",
+    header: "Static Banner",
+    cell: ({ row }) => (
+      <StaticToogle
+        id={row.original.id}
+        initChecked={row.original.isStaticBanner}
+      />
+    ),
+  },
+  {
+    accessorKey: "statusName",
+    header: "Status Banner",
+    cell: ({ row }) => (
+      <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />
+    ),
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    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"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link
+                href={`/contributor/content/image/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/settings/iklan/component/popup-table.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import { useSearchParams } from "next/navigation";
+
+import { close, loading } from "@/config/swal";
+import { Link, useRouter } from "@/i18n/routing";
+import columns from "./popup-column";
+import { listBanner, listStaticBanner } from "@/service/settings/settings";
+
+const IklanListTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [showData, setShowData] = React.useState("10");
+
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [getData, setGetData] = React.useState<any>([]);
+  const dataChange = searchParams?.get("dataChange");
+
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: getData,
+    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,
+    },
+  });
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    if (dataChange) {
+      router.push("/admin/settings/banner");
+    }
+    getListBanner();
+  }, [dataChange]);
+
+  React.useEffect(() => {
+    getListBanner();
+    // getListStaticBanner();
+  }, [page, showData]);
+
+  async function getListBanner() {
+    loading();
+    let temp: any;
+
+    const response = await listBanner();
+    const data = response?.data?.data?.content;
+    console.log("banner", data);
+    setGetData(data);
+
+    close();
+  }
+
+  return (
+    <>
+      <Table className="overflow-hidden mt-10">
+        <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>
+    </>
+  );
+};
+
+export default IklanListTable;

app/[locale]/(protected)/admin/settings/iklan/component/static-toogle.tsx

@@ -0,0 +1,40 @@
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/components/ui/use-toast";
+import { useRouter } from "@/i18n/routing";
+import { setStaticBanner } from "@/service/settings/settings";
+
+export default function StaticToogle(props: {
+  id: number;
+  initChecked: boolean;
+}) {
+  const { id, initChecked } = props;
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const changeStaticBanner = async (id: number) => {
+    const response = await setStaticBanner(id);
+
+    if (response?.error) {
+      toast({
+        variant: "destructive",
+        title: response?.message,
+      });
+      return false;
+    }
+
+    toast({
+      title: "Success ",
+    });
+    router.push("/admin/settings/banner?dataChange=true");
+  };
+
+  return (
+    <Switch
+      id="static-toogle"
+      checked={initChecked}
+      onCheckedChange={(e) => {
+        changeStaticBanner(id);
+      }}
+    />
+  );
+}

app/[locale]/(protected)/admin/settings/iklan/component/status-toogle.tsx

@@ -0,0 +1,37 @@
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/components/ui/use-toast";
+import { useRouter } from "@/i18n/routing";
+import { setBanner } from "@/service/settings/settings";
+
+export default function StatusToogle(props: {
+  id: number;
+  initChecked: boolean;
+}) {
+  const { id, initChecked } = props;
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const disableBanner = async () => {
+    const response = await setBanner(id, false);
+
+    if (response?.error) {
+      toast({
+        variant: "destructive",
+        title: response?.message,
+      });
+      return false;
+    }
+
+    toast({
+      title: "Success ",
+    });
+    router.push("/admin/settings/banner?dataChange=true");
+  };
+  return (
+    <Switch
+      id="status-toogle"
+      checked={initChecked}
+      onCheckedChange={() => disableBanner()}
+    />
+  );
+}

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

@@ -0,0 +1,393 @@
+"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 { 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";
+
+const IklanList = () => {
+  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 [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  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);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  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 listDataMedia(
+        page - 1,
+        showData,
+        "",
+        categoryFilter?.sort().join(","),
+        statusFilter?.sort().join(",")
+      );
+      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="flex justify-between ">
+        <Input
+          type="text"
+          placeholder="Search"
+          onKeyUp={handleKeyUp}
+          onKeyDown={handleKeyDown}
+          className="max-w-[300px]"
+        />
+        <div className="flex flex-row gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56 text-sm">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button size="md" variant="outline">
+                Filter
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 ">
+              <div className="flex flex-col gap-2 px-2">
+                <div className="flex justify-between text-sm">
+                  <p>Filter</p>
+                  <a
+                    onClick={() => fetchData()}
+                    className="cursor-pointer text-primary"
+                  >
+                    Simpan
+                  </a>
+                </div>
+                <div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
+                  <p>Kategory</p>
+                  {categories?.map((category: any) => (
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id={category.id}
+                        checked={categoryFilter.includes(category.id)}
+                        onCheckedChange={(e) =>
+                          handleChange("category", category.id, Boolean(e))
+                        }
+                      />
+                      <label
+                        htmlFor={category.id}
+                        className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      >
+                        {category.name}
+                      </label>
+                    </div>
+                  ))}
+                  <p className="mt-3">Status</p>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(1)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 1, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Menunggu Review
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(2)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 2, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Diterima
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(3)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 3, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Minta Update{" "}
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(4)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 4, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Ditolak
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </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 IklanList;

app/[locale]/(protected)/admin/settings/iklan/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import PopUpList from "../popup/component/table";
+import PopUpListTable from "../popup/component/popup-table";
+import IklanList from "./component/table";
+import IklanListTable from "./component/popup-table";
+
+export default function AdminIklan() {
+  const [selectedTab, setSelectedTab] = useState("content");
+
+  return (
+    <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 />}
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/settings/popup/component/column.tsx

@@ -0,0 +1,113 @@
+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";
+import { setBanner } from "@/service/settings/settings";
+import { error } from "@/config/swal";
+import { useToast } from "@/components/ui/use-toast";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "categoryName",
+    header: "Kategori",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Tanggal Unggah",
+    cell: ({ row }) => (
+      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
+    ),
+  },
+
+  {
+    accessorKey: "statusName",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("statusName")}</span>,
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const { toast } = useToast();
+
+      const handleBanner = async (id: number) => {
+        const response = setBanner(id, true);
+        toast({
+          title: "Success",
+        });
+      };
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link
+                href={`/contributor/content/image/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <a onClick={() => handleBanner(row.original.id)}>
+                Jadikan Banner
+              </a>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/settings/popup/component/popup-column.tsx

@@ -0,0 +1,110 @@
+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";
+import StatusToogle from "./status-toogle";
+import StaticToogle from "./static-toogle";
+
+const columns: ColumnDef<any>[] = [
+  // {
+  //   accessorKey: "no",
+  //   header: "No",
+  //   cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  // },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "categoryName",
+    header: "Kategori",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Tanggal Unggah",
+    cell: ({ row }) => (
+      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
+    ),
+  },
+  {
+    accessorKey: "isStaticBanner",
+    header: "Static Banner",
+    cell: ({ row }) => (
+      <StaticToogle
+        id={row.original.id}
+        initChecked={row.original.isStaticBanner}
+      />
+    ),
+  },
+  {
+    accessorKey: "statusName",
+    header: "Status Banner",
+    cell: ({ row }) => (
+      <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />
+    ),
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    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"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link
+                href={`/contributor/content/image/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

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

@@ -0,0 +1,153 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import { useSearchParams } from "next/navigation";
+
+import { close, loading } from "@/config/swal";
+import { Link, useRouter } from "@/i18n/routing";
+import columns from "./popup-column";
+import { listBanner, listStaticBanner } from "@/service/settings/settings";
+
+const PopUpListTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [showData, setShowData] = React.useState("10");
+
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [getData, setGetData] = React.useState<any>([]);
+  const dataChange = searchParams?.get("dataChange");
+
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: getData,
+    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,
+    },
+  });
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    if (dataChange) {
+      router.push("/admin/settings/banner");
+    }
+    getListBanner();
+  }, [dataChange]);
+
+  React.useEffect(() => {
+    getListBanner();
+    // getListStaticBanner();
+  }, [page, showData]);
+
+  async function getListBanner() {
+    loading();
+    let temp: any;
+
+    const response = await listBanner();
+    const data = response?.data?.data?.content;
+    console.log("banner", data);
+    setGetData(data);
+
+    close();
+  }
+
+  return (
+    <>
+      <Table className="overflow-hidden mt-10">
+        <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>
+    </>
+  );
+};
+
+export default PopUpListTable;

app/[locale]/(protected)/admin/settings/popup/component/static-toogle.tsx

@@ -0,0 +1,40 @@
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/components/ui/use-toast";
+import { useRouter } from "@/i18n/routing";
+import { setStaticBanner } from "@/service/settings/settings";
+
+export default function StaticToogle(props: {
+  id: number;
+  initChecked: boolean;
+}) {
+  const { id, initChecked } = props;
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const changeStaticBanner = async (id: number) => {
+    const response = await setStaticBanner(id);
+
+    if (response?.error) {
+      toast({
+        variant: "destructive",
+        title: response?.message,
+      });
+      return false;
+    }
+
+    toast({
+      title: "Success ",
+    });
+    router.push("/admin/settings/banner?dataChange=true");
+  };
+
+  return (
+    <Switch
+      id="static-toogle"
+      checked={initChecked}
+      onCheckedChange={(e) => {
+        changeStaticBanner(id);
+      }}
+    />
+  );
+}

app/[locale]/(protected)/admin/settings/popup/component/status-toogle.tsx

@@ -0,0 +1,37 @@
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/components/ui/use-toast";
+import { useRouter } from "@/i18n/routing";
+import { setBanner } from "@/service/settings/settings";
+
+export default function StatusToogle(props: {
+  id: number;
+  initChecked: boolean;
+}) {
+  const { id, initChecked } = props;
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const disableBanner = async () => {
+    const response = await setBanner(id, false);
+
+    if (response?.error) {
+      toast({
+        variant: "destructive",
+        title: response?.message,
+      });
+      return false;
+    }
+
+    toast({
+      title: "Success ",
+    });
+    router.push("/admin/settings/banner?dataChange=true");
+  };
+  return (
+    <Switch
+      id="status-toogle"
+      checked={initChecked}
+      onCheckedChange={() => disableBanner()}
+    />
+  );
+}

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

@@ -0,0 +1,393 @@
+"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 { 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";
+
+const PopUpList = () => {
+  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 [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  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);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  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 listDataMedia(
+        page - 1,
+        showData,
+        "",
+        categoryFilter?.sort().join(","),
+        statusFilter?.sort().join(",")
+      );
+      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="flex justify-between ">
+        <Input
+          type="text"
+          placeholder="Search"
+          onKeyUp={handleKeyUp}
+          onKeyDown={handleKeyDown}
+          className="max-w-[300px]"
+        />
+        <div className="flex flex-row gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56 text-sm">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button size="md" variant="outline">
+                Filter
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 ">
+              <div className="flex flex-col gap-2 px-2">
+                <div className="flex justify-between text-sm">
+                  <p>Filter</p>
+                  <a
+                    onClick={() => fetchData()}
+                    className="cursor-pointer text-primary"
+                  >
+                    Simpan
+                  </a>
+                </div>
+                <div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
+                  <p>Kategory</p>
+                  {categories?.map((category: any) => (
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id={category.id}
+                        checked={categoryFilter.includes(category.id)}
+                        onCheckedChange={(e) =>
+                          handleChange("category", category.id, Boolean(e))
+                        }
+                      />
+                      <label
+                        htmlFor={category.id}
+                        className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      >
+                        {category.name}
+                      </label>
+                    </div>
+                  ))}
+                  <p className="mt-3">Status</p>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(1)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 1, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Menunggu Review
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(2)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 2, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Diterima
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(3)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 3, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Minta Update{" "}
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(4)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 4, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Ditolak
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </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;

app/[locale]/(protected)/admin/settings/popup/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import ContentListTable from "../banner/component/table";
+import BannerListTable from "../banner/component/banner-table";
+import PopUpList from "./component/table";
+import PopUpListTable from "./component/popup-table";
+
+export default function AdminPopup() {
+  const [selectedTab, setSelectedTab] = useState("content");
+
+  return (
+    <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("popup")}
+              className={` hover:text-white
+                ${
+                  selectedTab === "popup"
+                    ? "bg-black text-white "
+                    : "bg-white text-black "
+                }`}
+            >
+              Pop Up
+            </Button>
+          </div>
+        </div>
+
+        {selectedTab === "content" ? <PopUpList /> : <PopUpListTable />}
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/contributor/schedule/calendar-polri/component/calendar-polri-table.tsx

@@ -0,0 +1,349 @@
+"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 {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UploadIcon,
+} from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./columns";
+import { paginationSchedule } from "@/service/schedule/schedule";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { Link } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+import useTableColumns from "./columns";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+
+const CalendarPolriTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const t = useTranslations("Schedule");
+  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 [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [showData, setShowData] = React.useState("50");
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const [limit, setLimit] = React.useState(10);
+  const [search, setSearch] = React.useState<string>("");
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const columns = useTableColumns();
+  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,
+    },
+  });
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page, showData, search, statusFilter]);
+
+  async function fetchData() {
+    try {
+      const res = await paginationSchedule(
+        showData,
+        page - 1,
+        1,
+        search,
+        statusFilter
+      );
+      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 : ", contentData);
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  const handleStatusCheckboxChange = (statusId: number) => {
+    const updatedFilter = statusFilter.includes(statusId)
+      ? statusFilter.filter((id) => id !== statusId)
+      : [...statusFilter, statusId];
+
+    setStatusFilter(updatedFilter);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value); // Perbarui state search
+    table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+  };
+
+  return (
+    <div>
+      <CardHeader className="border-b border-solid border-default-200 mb-6">
+        <CardTitle>
+          <div className="flex items-center">
+            <div className="flex-1 text-xl font-medium text-default-900">
+              {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>
+            </div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <div className="w-full overflow-x-auto">
+        <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row justify-between items-center px-3 gap-y-2">
+          <div className="w-full sm:w-[150px] md:w-[250px] lg:w-[250px]">
+            <InputGroup merged>
+              <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+                <Search className=" h-4 w-4 dark:text-white" />
+              </InputGroupText>
+              <Input
+                type="text"
+                placeholder="Search Title..."
+                className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+                value={search}
+                onChange={handleSearch}
+              />
+            </InputGroup>
+          </div>
+          <div className="flex flex-row items-center gap-3">
+            <div className="">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button size="md" variant="outline">
+                    1 - {showData} Data
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56 text-sm">
+                  <DropdownMenuRadioGroup
+                    value={showData}
+                    onValueChange={setShowData}
+                  >
+                    <DropdownMenuRadioItem value="10">
+                      1 - 10 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">
+                      1 - 50 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">
+                      1 - 100 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">
+                      1 - 250 Data
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <div className="">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto" size="md">
+                    Filter <ChevronDown />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="end"
+                  className="w-64 h-[150px] overflow-y-auto"
+                >
+                  <div className="flex flex-row justify-between my-1 mx-1">
+                    <p>Filter</p>
+                  </div>
+
+                  <Label className="ml-2 mt-2">Status</Label>
+                  <div className="flex items-center px-4 py-1">
+                    <input
+                      type="checkbox"
+                      id="status-1"
+                      className="mr-2"
+                      checked={statusFilter.includes(1)}
+                      onChange={() => handleStatusCheckboxChange(1)}
+                    />
+                    <label htmlFor="status-1" className="text-sm">
+                      Menunggu Review
+                    </label>
+                  </div>
+                  <div className="flex items-center px-4 py-1">
+                    <input
+                      type="checkbox"
+                      id="status-2"
+                      className="mr-2"
+                      checked={statusFilter.includes(2)}
+                      onChange={() => handleStatusCheckboxChange(2)}
+                    />
+                    <label htmlFor="status-2" className="text-sm">
+                      Diterima
+                    </label>
+                  </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <div className="flex items-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto" size="md">
+                    Columns <ChevronDown />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {table
+                    .getAllColumns()
+                    .filter((column) => column.getCanHide())
+                    .map((column) => {
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={column.id}
+                          className="capitalize"
+                          checked={column.getIsVisible()}
+                          onCheckedChange={(value) =>
+                            column.toggleVisibility(!!value)
+                          }
+                        >
+                          {column.id}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </div>
+        <Table className="overflow-hidden mt-3">
+          <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}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CalendarPolriTable;

app/[locale]/(protected)/contributor/schedule/calendar-polri/component/columns.tsx

@@ -0,0 +1,183 @@
+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 { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
+
+  const columns: ColumnDef<any>[] = [
+    {
+      accessorKey: "no",
+      header: t("no"),
+      cell: ({ row }) => (
+        <div className="flex items-center gap-5">
+          <div className="flex-1 text-start">
+            <h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
+              {row.getValue("no")}
+            </h4>
+          </div>
+        </div>
+      ),
+    },
+
+    {
+      accessorKey: "title",
+      header: t("title"),
+      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
+        const title: string = row.getValue("title");
+        return (
+          <span className="whitespace-nowrap">
+            {title.length > 50 ? `${title.slice(0, 30)}...` : title}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "startDate",
+      header: t("start-date"),
+      cell: ({ row }) => (
+        <span className="whitespace-nowrap">{row.getValue("startDate")}</span>
+      ),
+    },
+    {
+      accessorKey: "endDate",
+      header: t("end-date"),
+      cell: ({ row }) => (
+        <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
+      ),
+    },
+    {
+      accessorKey: "time",
+      header: t("time"),
+      cell: ({ row }: { row: { original: any } }) => {
+        console.log("Row Original Data:", row.original);
+        const { startTime, endTime } = row.original;
+        return (
+          <span className="whitespace-nowrap">
+            {startTime || "N/A"} - {endTime || "N/A"}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "address",
+      header: t("address"),
+      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
+        const address: string = row.getValue("address");
+        return (
+          <span className="whitespace-nowrap">
+            {address.length > 50 ? `${address.slice(0, 40)}...` : address}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "statusName",
+      header: "Status",
+      cell: ({ row }) => {
+        const statusColors: Record<string, string> = {
+          diterima: "bg-green-100 text-green-600",
+          "menunggu review": "bg-orange-100 text-orange-600",
+        };
+
+        // Mengambil `statusName` dari data API
+        const status = row.getValue("statusName") as string;
+        const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
+
+        // Gunakan `statusName` untuk pencocokan
+        const statusStyles =
+          statusColors[statusName] || "bg-gray-100 text-gray-600";
+
+        return (
+          <Badge
+            className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
+          >
+            {status} {/* Tetap tampilkan nilai asli */}
+          </Badge>
+        );
+      },
+    },
+    {
+      accessorKey: "speaker",
+      header: t("speaker"),
+      cell: ({ row }: { row: { original: any } }) => {
+        console.log("Row Original Data:", row.original);
+        const { speakerTitle, speakerName } = row.original;
+        return (
+          <span className="whitespace-nowrap">
+            {speakerTitle || ""} {speakerName || ""}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "uploaderName",
+      header: t("source"),
+      cell: ({ row }) => (
+        <span className="whitespace-nowrap">
+          {row.getValue("uploaderName")}
+        </span>
+      ),
+    },
+
+    {
+      id: "actions",
+      accessorKey: "action",
+      header: t("action"),
+      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={`/contributor/schedule/press-conference/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" />
+                  Detail
+                </DropdownMenuItem>
+              </Link>
+              <Link
+                href={`/contributor/schedule/press-conference/update/${row.original.id}`}
+              >
+                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                  <SquarePen className="w-4 h-4 me-1.5" />
+                  Edit
+                </DropdownMenuItem>
+              </Link>
+              <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
+                <Trash2 className="w-4 h-4 me-1.5" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+
+  return columns;
+};
+
+export default useTableColumns;

app/[locale]/(protected)/contributor/schedule/calendar-polri/create/page.tsx

@@ -0,0 +1,17 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormPressConference from "@/components/form/schedule/press-conference-form";
+
+const CalendarPolriCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormPressConference />
+      </div>
+    </div>
+  );
+};
+
+export default CalendarPolriCreatePage;

app/[locale]/(protected)/contributor/schedule/calendar-polri/detail/[id]/page.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormPressConference from "@/components/form/schedule/press-conference-form";
+import FormDetailPressConference from "@/components/form/schedule/press-conference-detail-form";
+import { useParams } from "next/navigation";
+import { id } from "date-fns/locale";
+
+const CalendarPolriDetailPage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormDetailPressConference />
+      </div>
+    </div>
+  );
+};
+
+export default CalendarPolriDetailPage;

app/[locale]/(protected)/contributor/schedule/calendar-polri/layout.tsx

@@ -0,0 +1,9 @@
+export const metadata = {
+  title: "Press Conference",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;

app/[locale]/(protected)/contributor/schedule/calendar-polri/page.tsx

@@ -0,0 +1,21 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import PressConferenceTable from "../press-conference/components/presscon-table";
+import CalendarPolriTable from "./component/calendar-polri-table";
+
+const CalendarPolriPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <Card>
+          <CardContent className="p-0">
+            <CalendarPolriTable />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default CalendarPolriPage;

app/[locale]/(protected)/contributor/schedule/calendar-polri/update/[id]/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormPressConference from "@/components/form/schedule/press-conference-form";
+import FormDetailPressConference from "@/components/form/schedule/press-conference-detail-form";
+import { useParams } from "next/navigation";
+import { id } from "date-fns/locale";
+import FormUpdatePressConference from "@/components/form/schedule/press-conference-update-form";
+
+const CalendarPolriUpdatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormUpdatePressConference />
+      </div>
+    </div>
+  );
+};
+
+export default CalendarPolriUpdatePage;

app/[locale]/(protected)/contributor/schedule/live-report/component/columns.tsx

@@ -0,0 +1,183 @@
+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 { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
+
+  const columns: ColumnDef<any>[] = [
+    {
+      accessorKey: "no",
+      header: t("no"),
+      cell: ({ row }) => (
+        <div className="flex items-center gap-5">
+          <div className="flex-1 text-start">
+            <h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
+              {row.getValue("no")}
+            </h4>
+          </div>
+        </div>
+      ),
+    },
+
+    {
+      accessorKey: "title",
+      header: t("title"),
+      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
+        const title: string = row.getValue("title");
+        return (
+          <span className="whitespace-nowrap">
+            {title.length > 50 ? `${title.slice(0, 30)}...` : title}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "startDate",
+      header: t("start-date"),
+      cell: ({ row }) => (
+        <span className="whitespace-nowrap">{row.getValue("startDate")}</span>
+      ),
+    },
+    {
+      accessorKey: "endDate",
+      header: t("end-date"),
+      cell: ({ row }) => (
+        <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
+      ),
+    },
+    {
+      accessorKey: "time",
+      header: t("time"),
+      cell: ({ row }: { row: { original: any } }) => {
+        console.log("Row Original Data:", row.original);
+        const { startTime, endTime } = row.original;
+        return (
+          <span className="whitespace-nowrap">
+            {startTime || "N/A"} - {endTime || "N/A"}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "address",
+      header: t("address"),
+      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
+        const address: string = row.getValue("address");
+        return (
+          <span className="whitespace-nowrap">
+            {address.length > 50 ? `${address.slice(0, 40)}...` : address}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "statusName",
+      header: "Status",
+      cell: ({ row }) => {
+        const statusColors: Record<string, string> = {
+          diterima: "bg-green-100 text-green-600",
+          "menunggu review": "bg-orange-100 text-orange-600",
+        };
+
+        // Mengambil `statusName` dari data API
+        const status = row.getValue("statusName") as string;
+        const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
+
+        // Gunakan `statusName` untuk pencocokan
+        const statusStyles =
+          statusColors[statusName] || "bg-gray-100 text-gray-600";
+
+        return (
+          <Badge
+            className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
+          >
+            {status} {/* Tetap tampilkan nilai asli */}
+          </Badge>
+        );
+      },
+    },
+    {
+      accessorKey: "speaker",
+      header: t("speaker"),
+      cell: ({ row }: { row: { original: any } }) => {
+        console.log("Row Original Data:", row.original);
+        const { speakerTitle, speakerName } = row.original;
+        return (
+          <span className="whitespace-nowrap">
+            {speakerTitle || ""} {speakerName || ""}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "uploaderName",
+      header: t("source"),
+      cell: ({ row }) => (
+        <span className="whitespace-nowrap">
+          {row.getValue("uploaderName")}
+        </span>
+      ),
+    },
+
+    {
+      id: "actions",
+      accessorKey: "action",
+      header: t("action"),
+      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={`/contributor/schedule/press-conference/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" />
+                  Detail
+                </DropdownMenuItem>
+              </Link>
+              <Link
+                href={`/contributor/schedule/press-conference/update/${row.original.id}`}
+              >
+                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                  <SquarePen className="w-4 h-4 me-1.5" />
+                  Edit
+                </DropdownMenuItem>
+              </Link>
+              <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
+                <Trash2 className="w-4 h-4 me-1.5" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+
+  return columns;
+};
+
+export default useTableColumns;

app/[locale]/(protected)/contributor/schedule/live-report/component/live-report-table.tsx

@@ -0,0 +1,377 @@
+"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 {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UploadIcon,
+} from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./columns";
+import { paginationSchedule } from "@/service/schedule/schedule";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { Link } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+import useTableColumns from "./columns";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const LiveReportTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const t = useTranslations("Schedule");
+  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 [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [showData, setShowData] = React.useState("50");
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const [limit, setLimit] = React.useState(10);
+  const [search, setSearch] = React.useState<string>("");
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [selectedType, setSelectedType] = React.useState<string>("1");
+  const columns = useTableColumns();
+  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,
+    },
+  });
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page, showData, search, statusFilter, selectedType]);
+
+  async function fetchData() {
+    try {
+      const res = await paginationSchedule(
+        showData,
+        page - 1,
+        selectedType,
+        search,
+        statusFilter
+      );
+      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 : ", contentData);
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  const handleStatusCheckboxChange = (statusId: number) => {
+    const updatedFilter = statusFilter.includes(statusId)
+      ? statusFilter.filter((id) => id !== statusId)
+      : [...statusFilter, statusId];
+
+    setStatusFilter(updatedFilter);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value); // Perbarui state search
+    table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+  };
+
+  return (
+    <div>
+      <CardHeader className="border-b border-solid border-default-200 mb-6">
+        <CardTitle>
+          <div className="flex items-center">
+            <div className="flex-1 text-xl font-medium text-default-900">
+              {t("live-report")} {t("schedule")}
+            </div>
+            <div className="flex-none">
+              <Link href={"/contributor/schedule/live-report/create"}>
+                <Button color="primary" className="text-white">
+                  <UploadIcon size={18} className="mr-2" />
+                  {t("create-schedule")}
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <div className="w-full overflow-x-auto">
+        <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row justify-between items-center px-3 gap-y-2">
+          <div className="w-full sm:w-[150px] md:w-[250px] lg:w-[250px]">
+            <InputGroup merged>
+              <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+                <Search className=" h-4 w-4 dark:text-white" />
+              </InputGroupText>
+              <Input
+                type="text"
+                placeholder="Search Title..."
+                className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+                value={search}
+                onChange={handleSearch}
+              />
+            </InputGroup>
+          </div>
+          <div className="flex flex-row items-center gap-3">
+            <div className="">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button size="md" variant="outline">
+                    1 - {showData} Data
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56 text-sm">
+                  <DropdownMenuRadioGroup
+                    value={showData}
+                    onValueChange={setShowData}
+                  >
+                    <DropdownMenuRadioItem value="10">
+                      1 - 10 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">
+                      1 - 50 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">
+                      1 - 100 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">
+                      1 - 250 Data
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <div className="border border-black rounded-md">
+              <Select
+                value={selectedType}
+                onValueChange={(value) => setSelectedType(value)}
+              >
+                <SelectTrigger className="w-[150px] text-black">
+                  <SelectValue placeholder="Tipe" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Tipe</SelectLabel>
+                    <SelectItem value="1">Konferensi Pers</SelectItem>
+                    <SelectItem value="2">Event</SelectItem>
+                    <SelectItem value="3">Pers Rilis</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto" size="md">
+                    Filter <ChevronDown />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="end"
+                  className="w-64 h-[150px] overflow-y-auto"
+                >
+                  <div className="flex flex-row justify-between my-1 mx-1">
+                    <p>Filter</p>
+                  </div>
+
+                  <Label className="ml-2 mt-2">Status</Label>
+                  <div className="flex items-center px-4 py-1">
+                    <input
+                      type="checkbox"
+                      id="status-1"
+                      className="mr-2"
+                      checked={statusFilter.includes(1)}
+                      onChange={() => handleStatusCheckboxChange(1)}
+                    />
+                    <label htmlFor="status-1" className="text-sm">
+                      Menunggu Review
+                    </label>
+                  </div>
+                  <div className="flex items-center px-4 py-1">
+                    <input
+                      type="checkbox"
+                      id="status-2"
+                      className="mr-2"
+                      checked={statusFilter.includes(2)}
+                      onChange={() => handleStatusCheckboxChange(2)}
+                    />
+                    <label htmlFor="status-2" className="text-sm">
+                      Diterima
+                    </label>
+                  </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <div className="flex items-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto" size="md">
+                    Columns <ChevronDown />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {table
+                    .getAllColumns()
+                    .filter((column) => column.getCanHide())
+                    .map((column) => {
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={column.id}
+                          className="capitalize"
+                          checked={column.getIsVisible()}
+                          onCheckedChange={(value) =>
+                            column.toggleVisibility(!!value)
+                          }
+                        >
+                          {column.id}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </div>
+        <Table className="overflow-hidden mt-3">
+          <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}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LiveReportTable;

app/[locale]/(protected)/contributor/schedule/live-report/create/page.tsx

@@ -0,0 +1,18 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormPressConference from "@/components/form/schedule/press-conference-form";
+import FormLiveReport from "@/components/form/schedule/live-report-form";
+
+const LiveReportCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormLiveReport />
+      </div>
+    </div>
+  );
+};
+
+export default LiveReportCreatePage;

app/[locale]/(protected)/contributor/schedule/live-report/detail/[id]/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormPressConference from "@/components/form/schedule/press-conference-form";
+import FormDetailPressConference from "@/components/form/schedule/press-conference-detail-form";
+import { useParams } from "next/navigation";
+import { id } from "date-fns/locale";
+import FormDetailLiveReport from "@/components/form/schedule/live-report-detail-form";
+
+const LiveReportDetailPage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormDetailLiveReport />
+      </div>
+    </div>
+  );
+};
+
+export default LiveReportDetailPage;

app/[locale]/(protected)/contributor/schedule/live-report/layout.tsx

@@ -0,0 +1,9 @@
+export const metadata = {
+  title: "Press Conference",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;

app/[locale]/(protected)/contributor/schedule/live-report/page.tsx

@@ -0,0 +1,22 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import PressConferenceTable from "../press-conference/components/presscon-table";
+import CalendarPolriTable from "./component/live-report-table";
+import LiveReportTable from "./component/live-report-table";
+
+const LiveReportPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <Card>
+          <CardContent className="p-0">
+            <LiveReportTable />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default LiveReportPage;

app/[locale]/(protected)/contributor/schedule/live-report/update/[id]/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormPressConference from "@/components/form/schedule/press-conference-form";
+import FormDetailPressConference from "@/components/form/schedule/press-conference-detail-form";
+import { useParams } from "next/navigation";
+import { id } from "date-fns/locale";
+import FormUpdatePressConference from "@/components/form/schedule/press-conference-update-form";
+import FormUpdateLiveReport from "@/components/form/schedule/live-report-update-form";
+
+const LiveReportUpdatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormUpdateLiveReport />
+      </div>
+    </div>
+  );
+};
+
+export default LiveReportUpdatePage;

app/[locale]/(protected)/contributor/schedule/press-conference/page.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import PressConferenceTable from "./components/presscon-table";
 
-const PressConferencePage = async () => {
+const CalendarPolriPage = async () => {
   return (
     <div>
       <SiteBreadcrumb />
@@ -18,4 +18,4 @@ const PressConferencePage = async () => {
   );
 };
 
-export default PressConferencePage;
+export default CalendarPolriPage;

app/[locale]/page.tsx

@@ -5,7 +5,6 @@ import Footer from "@/components/landing-page/footer";
 import Navbar from "@/components/landing-page/navbar";
 import { ReactLenis } from "@studio-freight/react-lenis";
 import MountedProvider from "@/providers/mounted.provider";
-
 import HeroNew from "@/components/landing-page/hero-new";
 
 const Home = ({ params: { locale } }: { params: { locale: string } }) => {

components/form/schedule/live-report-detail-form.tsx

@@ -0,0 +1,407 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import { Switch } from "@/components/ui/switch";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CalendarIcon, Clock1, Locate, MapPin, User2 } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { addDays, format, parseISO, setDate } from "date-fns";
+import { DateRange } from "react-day-picker";
+import TimePicker from "react-time-picker";
+import "react-time-picker/dist/TimePicker.css";
+import "react-clock/dist/Clock.css";
+import MapHome from "@/components/maps/MapHome";
+import { Textarea } from "@/components/ui/textarea";
+import { error, loading } from "@/lib/swal";
+import Cookies from "js-cookie";
+import {
+  detailSchedule,
+  listScheduleNext,
+  listScheduleToday,
+  postSchedule,
+} from "@/service/schedule/schedule";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { formatDateToIndonesian } from "@/utils/globals";
+import { formatDate } from "@fullcalendar/core/index.js";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  level: z.string().min(1, { message: "Judul diperlukan" }),
+  name: z.string().min(1, { message: "Judul diperlukan" }),
+  location: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface Detail {
+  id: number;
+  title: string;
+  address: string;
+  speakerTitle: string;
+  speakerName: string;
+  addressLat: number;
+  addressLong: number;
+}
+
+export default function FormDetailLiveReport() {
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const router = useRouter();
+  const [isLiveStreamingEnabled, setIsLiveStreamingEnabled] = useState(false);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const [startTime, setStartTime] = useState("08:00");
+  const [endTime, setEndTime] = useState("09:00");
+  const [date, setDate] = useState<DateRange | undefined>();
+  const [todayList, setTodayList] = useState([]);
+  const [nextDayList, setNextDayList] = useState([]);
+
+  const [detail, setDetail] = useState<Detail>();
+  const [refresh, setRefresh] = useState(false);
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+    defaultValues: {
+      location: "",
+    },
+  });
+
+  async function getDataByDate() {
+    const resToday = await listScheduleToday();
+    const today = resToday?.data?.data;
+    setTodayList(today);
+    const resNext = await listScheduleNext();
+    const next = resNext?.data?.data;
+
+    setNextDayList(next);
+  }
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailSchedule(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+        if (details) {
+          setDate({
+            from: parseISO(details.startDate),
+            to: parseISO(details.endDate),
+          });
+        }
+        if (details) {
+          setStartTime(details.startTime);
+          setEndTime(details.endTime);
+        }
+        getDataByDate();
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const handleStartTime = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setStartTime(e.target.value);
+  };
+
+  const handleEndTime = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEndTime(e.target.value);
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-2">
+      <Card className="w-full lg:w-9/12">
+        <div className="px-6 py-6">
+          <p className="text-lg font-semibold mb-3">Form Konferensi Pers</p>
+          {detail !== undefined ? (
+            <div className=" gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2">
+                <Label>Judul Kegiatan</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      type="text"
+                      value={detail?.title}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+                {errors.title?.message && (
+                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                )}
+              </div>
+              <div className="flex flex-row items-center">
+                <div className="mt-6">
+                  <Label>Live Streaming</Label>
+                  <div className="flex items-center gap-3">
+                    <p>Aktifkan fitur live streaming</p>
+                    <Switch
+                      defaultChecked={isLiveStreamingEnabled}
+                      color="primary"
+                      id="c2"
+                      onCheckedChange={(checked) =>
+                        setIsLiveStreamingEnabled(checked)
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {isLiveStreamingEnabled && (
+                <div className="mt-1">
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="Masukan ID youtube"
+                      />
+                    )}
+                  />
+                  {errors.title?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.title.message}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between mt-6">
+                <div className="flex flex-col space-y-2">
+                  <Label className="mr-3 mb-1">Tanggal</Label>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        id="date"
+                        variant={"outline"}
+                        className={cn(
+                          "w-[280px] lg:w-[250px] justify-start text-left font-normal px-0 md:px-0 lg:px-4",
+                          !date && "text-muted-foreground"
+                        )}
+                      >
+                        <CalendarIcon size={15} className="mr-3" />
+                        {date?.from ? (
+                          date.to ? (
+                            <>
+                              {format(date.from, "LLL dd, y")} -{" "}
+                              {format(date.to, "LLL dd, y")}
+                            </>
+                          ) : (
+                            format(date.from, "LLL dd, y")
+                          )
+                        ) : (
+                          <span>Pick a date</span>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        initialFocus
+                        mode="range"
+                        defaultMonth={date?.from}
+                        selected={date}
+                        onSelect={setDate}
+                        numberOfMonths={1}
+                      />
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="title">Rentang Waktu</Label>
+                  <div>
+                    <div className="flex flex-row items-center">
+                      <div className="col-6">
+                        <Input
+                          value={startTime}
+                          type="time"
+                          onChange={handleStartTime}
+                        />
+                      </div>
+                      <div className="col-6">
+                        <Input
+                          value={endTime}
+                          type="time"
+                          onChange={handleEndTime}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="mt-6">
+                {/* Kirim setValue ke MapHome */}
+                <MapHome
+                  draggable
+                  setLocation={(location) => setValue("location", location)}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="location"
+                  render={({ field }) => (
+                    <Textarea
+                      rows={3}
+                      value={detail?.address}
+                      onChange={field.onChange}
+                      placeholder="Masukan lokasi"
+                    />
+                  )}
+                />
+                <div className="invalid-feedback">
+                  {errors.location?.message}
+                </div>
+              </div>
+              <p className="text-sm my-2 font-semiboldc mt-6">
+                DI SAMPAIKAN OLEH
+              </p>
+              <div className="flex flex-col ">
+                <div className="mt-1 space-y-2">
+                  <Label>Nama Pangkat</Label>
+                  <Controller
+                    control={control}
+                    name="level"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={detail?.speakerTitle}
+                        onChange={field.onChange}
+                        placeholder="Masukan Nama Pangkat"
+                      />
+                    )}
+                  />
+                  {errors.level?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.level.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="flex flex-col my-3">
+                <div className="mt-1 space-y-2">
+                  <Label>Nama Lengkap</Label>
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={detail?.speakerName}
+                        onChange={field.onChange}
+                        placeholder="Masukan Nama Lengkap"
+                      />
+                    )}
+                  />
+                  {errors.name?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.name.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            ""
+          )}
+          {/* Submit Button
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                Submit
+              </Button>
+            </div> */}
+        </div>
+      </Card>
+      <Card className="w-full lg:w-3/12">
+        <Accordion type="single" collapsible>
+          {/* Jadwal Hari Ini */}
+          <AccordionItem value="today">
+            <AccordionTrigger className="font-semibold">
+              Jadwal Hari Ini
+            </AccordionTrigger>
+            <AccordionContent>
+              {todayList?.length > 0 ? (
+                <ul className="list-disc ml-4">
+                  {todayList.map((item: any, index) => (
+                    <li key={index} className="py-1">
+                      {item.name}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="text-gray-500">Tidak ada jadwal hari ini</p>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+
+          {/* Jadwal Selanjutnya */}
+          <AccordionItem value="next">
+            <AccordionTrigger className="font-semibold">
+              Jadwal Selanjutnya
+            </AccordionTrigger>
+            <AccordionContent>
+              {nextDayList?.length > 0 ? (
+                <div className="list-disc ">
+                  {nextDayList.map((item: any, index) => (
+                    <div key={index} className="">
+                      <li className="text-base font-semibold">{item.title}</li>
+                      <p className="text-sm ml-5 flex my-2">
+                        <CalendarIcon size={20} />
+                        {formatDate(item?.startDate)}-
+                        {formatDate(item?.endDate)}
+                      </p>
+                      <p className="text-sm ml-5 flex my-2">
+                        <Clock1 size={20} />
+                        {item?.startTime}-{item?.endTime}
+                      </p>
+                      <p className="text-sm ml-5 flex items-center my-2">
+                        <MapPin size={50} />
+                        {item?.address}
+                      </p>
+                      <p className="text-sm ml-5">Disampaikan oleh:</p>
+                      <p className="text-sm ml-5 flex my-2">
+                        <User2 />
+                        {item?.speakerTitle} {item?.speakerName}
+                      </p>
+                    </div>
+                    // <p>{item.startDate}</p>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-gray-500">Tidak ada jadwal selanjutnya</p>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </Card>
+    </div>
+  );
+}

components/form/schedule/live-report-form.tsx

@@ -0,0 +1,384 @@
+"use client";
+import React, { useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { Switch } from "@/components/ui/switch";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { addDays, format, setDate } from "date-fns";
+import { DateRange } from "react-day-picker";
+import TimePicker from "react-time-picker";
+import "react-time-picker/dist/TimePicker.css";
+import "react-clock/dist/Clock.css";
+import { register } from "module";
+import MapHome from "@/components/maps/MapHome";
+import { Textarea } from "@/components/ui/textarea";
+import { error } from "@/lib/swal";
+import Cookies from "js-cookie";
+import { postSchedule } from "@/service/schedule/schedule";
+import { useRouter } from "@/i18n/routing";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  level: z.string().min(1, { message: "Judul diperlukan" }),
+  name: z.string().min(1, { message: "Judul diperlukan" }),
+  location: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+export default function FormLiveReport() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  const [isLiveStreamingEnabled, setIsLiveStreamingEnabled] = useState(false);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const [startTime, setStartTime] = useState("08:00");
+  const [endTime, setEndTime] = useState("09:00");
+  const [scheduleTypeId, setScheduleTypeId] = React.useState<string>("1");
+
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2024, 0, 1),
+  });
+
+  const handleStartTime = (e: any) => {
+    setStartTime(e.target.value);
+  };
+
+  const handleEndTime = (e: any) => {
+    setEndTime(e.target.value);
+  };
+  // State for various form fields
+
+  const [assignmentType, setAssignmentType] = useState("mediahub");
+  const [assignmentCategory, setAssignmentCategory] = useState("publication");
+
+  const [selectedTarget, setSelectedTarget] = useState("all");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+    defaultValues: {
+      location: "",
+    },
+  });
+
+  const save = async (data: TaskSchema) => {
+    const requestData = {
+      title: data.title,
+      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
+      startDate: date?.from ? format(date.from, "yyyy-MM-dd") : null,
+      endDate: date?.to ? format(date.to, "yyyy-MM-dd") : null,
+      isYoutube: isLiveStreamingEnabled,
+      scheduleTypeId: Number(scheduleTypeId),
+    };
+
+    console.log("Form Data Submitted:", requestData);
+
+    const response = await postSchedule(requestData);
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
+
+    Cookies.set("scheduleId", response?.data?.data.id, {
+      expires: 1,
+    });
+
+    // Optional: Use Swal for success feedback
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/contributor/schedule/live-report");
+    });
+  };
+
+  const onSubmit = (data: TaskSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-2">
+      <Card className="w-full lg:w-9/12">
+        <div className="px-6 py-6">
+          <p className="text-lg font-semibold mb-3">Form Konferensi Pers</p>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className=" gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2">
+                <Label>Judul Kegiatan</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      size={"md"}
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Masukan Judul"
+                    />
+                  )}
+                />
+                {errors.title?.message && (
+                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                )}
+              </div>
+              <div className="flex flex-row items-center">
+                <div className="mt-4 mb-3">
+                  <Label>Live Streaming</Label>
+                  <div className="flex items-center gap-3">
+                    <Label>Aktifkan fitur live streaming</Label>
+                    <Switch
+                      defaultChecked={isLiveStreamingEnabled}
+                      color="primary"
+                      id="c2"
+                      onCheckedChange={(checked) =>
+                        setIsLiveStreamingEnabled(checked)
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {isLiveStreamingEnabled && (
+                <div className="mb-2 mt-1">
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="Masukan ID youtube"
+                      />
+                    )}
+                  />
+                  {errors.title?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.title.message}
+                    </p>
+                  )}
+                </div>
+              )}
+              <div className="flex flex-col space-y-2">
+                <Label className="mr-3 mb-1">Tipe</Label>
+                <Select onValueChange={(value) => setScheduleTypeId(value)}>
+                  <SelectTrigger className="w-full ">
+                    <SelectValue placeholder="Masukan Tipe" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>Tipe</SelectLabel>
+                      <SelectItem value="1">Konferensi Pers</SelectItem>
+                      <SelectItem value="2">Event</SelectItem>
+                      <SelectItem value="3">Pers Rilis</SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col lg:flex-row mb-4 mt-2 items-start lg:items-center justify-between">
+                <div className="flex flex-col space-y-2">
+                  <Label className="mr-3 mb-1">Tanggal</Label>
+                  <Popover>
+                    <PopoverTrigger asChild className="px-0">
+                      <Button
+                        size="md"
+                        id="date"
+                        variant={"outline"}
+                        className={cn(
+                          "w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
+                          !date && "text-muted-foreground"
+                        )}
+                      >
+                        <CalendarIcon size={15} className="mr-3" />
+                        {date?.from ? (
+                          date.to ? (
+                            <>
+                              {format(date.from, "LLL dd, y")} -{" "}
+                              {format(date.to, "LLL dd, y")}
+                            </>
+                          ) : (
+                            format(date.from, "LLL dd, y")
+                          )
+                        ) : (
+                          <span>Pick a date</span>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        initialFocus
+                        mode="range"
+                        defaultMonth={date?.from}
+                        selected={date}
+                        onSelect={setDate}
+                        numberOfMonths={1}
+                      />
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="title">Rentang Waktu</Label>
+                  <div className="">
+                    <div className="flex flex-row items-center">
+                      <div className="col-6">
+                        <Input
+                          defaultValue="08:00"
+                          type="time"
+                          onChange={(e) => handleStartTime(e)}
+                        />
+                      </div>
+                      <div className="col-6">
+                        <Input
+                          defaultValue="09:00"
+                          type="time"
+                          onChange={(e) => handleEndTime(e)}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div>
+                {/* Kirim setValue ke MapHome */}
+                <MapHome
+                  draggable
+                  setLocation={(location) => setValue("location", location)}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="location"
+                  render={({ field }) => (
+                    <Textarea
+                      rows={3}
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Masukan lokasi"
+                    />
+                  )}
+                />
+                <div className="invalid-feedback">
+                  {errors.location?.message}
+                </div>
+              </div>
+              <p className="text-sm mt-4 font-semibold">DI SAMPAIKAN OLEH</p>
+              <div className="flex flex-col ">
+                <div className="mt-1 space-y-2">
+                  <Label>Nama Pangkat</Label>
+                  <Controller
+                    control={control}
+                    name="level"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="Masukan Nama Pangkat"
+                      />
+                    )}
+                  />
+                  {errors.level?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.level.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="flex flex-col my-3">
+                <div className="mt-1 space-y-2">
+                  <Label>Nama Lengkap</Label>
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="Masukan Nama Lengkap"
+                      />
+                    )}
+                  />
+                  {errors.name?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.name.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                Submit
+              </Button>
+            </div>
+          </form>
+        </div>
+      </Card>
+      <Card className="w-full lg:w-3/12">
+        <div className="px-3 py-3">Jadwal Selanjutnya</div>
+      </Card>
+    </div>
+  );
+}

components/form/schedule/live-report-update-form.tsx

@@ -0,0 +1,409 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import { Switch } from "@/components/ui/switch";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { addDays, format, parseISO, setDate } from "date-fns";
+import { DateRange } from "react-day-picker";
+import TimePicker from "react-time-picker";
+import "react-time-picker/dist/TimePicker.css";
+import "react-clock/dist/Clock.css";
+import MapHome from "@/components/maps/MapHome";
+import { Textarea } from "@/components/ui/textarea";
+import { error, loading } from "@/lib/swal";
+import Cookies from "js-cookie";
+import { detailSchedule, postSchedule } from "@/service/schedule/schedule";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  level: z.string().min(1, { message: "Judul diperlukan" }),
+  name: z.string().min(1, { message: "Judul diperlukan" }),
+  location: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface Detail {
+  id: number;
+  title: string;
+  address: string;
+  speakerTitle: string;
+  speakerName: string;
+  addressLat: number;
+  addressLong: number;
+}
+
+export default function FormUpdateLiveReport() {
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const router = useRouter();
+  const MySwal = withReactContent(Swal);
+  const [isLiveStreamingEnabled, setIsLiveStreamingEnabled] = useState(false);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const [startTime, setStartTime] = useState("08:00");
+  const [endTime, setEndTime] = useState("09:00");
+  const [date, setDate] = useState<DateRange | undefined>();
+
+  const [detail, setDetail] = useState<Detail>();
+  const [refresh, setRefresh] = useState(false);
+  const [location, setLocation] = useState("");
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+    defaultValues: {
+      location: "",
+    },
+  });
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailSchedule(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+        if (details) {
+          setDate({
+            from: parseISO(details.startDate),
+            to: parseISO(details.endDate),
+          });
+        }
+        if (details) {
+          setStartTime(details.startTime);
+          setEndTime(details.endTime);
+          setLocation(details.address);
+        }
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const handleStartTime = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setStartTime(e.target.value);
+  };
+
+  const handleEndTime = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEndTime(e.target.value);
+  };
+
+  const handleLocationChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setLocation(value);
+    setValue("location", value);
+  };
+
+  const save = async (data: TaskSchema) => {
+    const requestData: {
+      id?: number;
+      title: string;
+      address: string;
+      speakerTitle: string;
+      speakerName: string;
+      startTime: string;
+      endTime: string;
+      addressLat: string;
+      addressLong: string;
+      startDate: string | null;
+      endDate: string | null;
+      isYoutube: boolean;
+      scheduleTypeId: number;
+    } = {
+      title: data.title,
+      address: data.location,
+      speakerTitle: data.level,
+      speakerName: data.name,
+      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,
+      scheduleTypeId: 1,
+    };
+
+    if (id) {
+      requestData.id = parseInt(id, 10);
+    }
+
+    console.log("Form Data Submitted:", requestData);
+
+    const response = await postSchedule(requestData);
+
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
+
+    Cookies.set("scheduleId", response?.data?.data.id, {
+      expires: 1,
+    });
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/en/contributor/schedule/press-conference");
+    });
+  };
+
+  const onSubmit = (data: TaskSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-2">
+      <Card className="w-full lg:w-9/12">
+        <div className="px-6 py-6">
+          <p className="text-lg font-semibold mb-3">Form Konferensi Pers</p>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            {detail !== undefined ? (
+              <div className=" gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2">
+                  <Label>Judul Kegiatan</Label>
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        type="text"
+                        defaultValue={detail?.title}
+                        onChange={field.onChange}
+                      />
+                    )}
+                  />
+                  {errors.title?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.title.message}
+                    </p>
+                  )}
+                </div>
+                <div className="flex flex-row items-center">
+                  <div className="mt-5">
+                    <Label>Live Streaming</Label>
+                    <div className="flex items-center gap-3">
+                      <p>Aktifkan fitur live streaming</p>
+                      <Switch
+                        defaultChecked={isLiveStreamingEnabled}
+                        color="primary"
+                        id="c2"
+                        onCheckedChange={(checked) =>
+                          setIsLiveStreamingEnabled(checked)
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {isLiveStreamingEnabled && (
+                  <div className="mt-1">
+                    <Controller
+                      control={control}
+                      name="title"
+                      render={({ field }) => (
+                        <Input
+                          size={"md"}
+                          type="text"
+                          value={field.value}
+                          onChange={field.onChange}
+                          placeholder="Masukan ID youtube"
+                        />
+                      )}
+                    />
+                    {errors.title?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.title.message}
+                      </p>
+                    )}
+                  </div>
+                )}
+
+                <div className="flex flex-col lg:flex-row mt-3 items-start lg:items-center justify-between">
+                  <div className="flex flex-col space-y-2">
+                    <Label className="mr-3 mb-1">Tanggal</Label>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          id="date"
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] lg:w-[250px] justify-start text-left font-normal px-0 md:px-0 lg:px-4",
+                            !date && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon size={15} className="mr-3" />
+                          {date?.from ? (
+                            date.to ? (
+                              <>
+                                {format(date.from, "LLL dd, y")} -{" "}
+                                {format(date.to, "LLL dd, y")}
+                              </>
+                            ) : (
+                              format(date.from, "LLL dd, y")
+                            )
+                          ) : (
+                            <span>Pick a date</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0" align="start">
+                        <Calendar
+                          initialFocus
+                          mode="range"
+                          defaultMonth={date?.from}
+                          selected={date}
+                          onSelect={setDate}
+                          numberOfMonths={1}
+                        />
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="title">Rentang Waktu</Label>
+                    <div>
+                      <div className="flex flex-row items-center">
+                        <div className="col-6">
+                          <Input
+                            value={startTime}
+                            type="time"
+                            onChange={handleStartTime}
+                          />
+                        </div>
+                        <div className="col-6">
+                          <Input
+                            value={endTime}
+                            type="time"
+                            onChange={handleEndTime}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <MapHome
+                    draggable
+                    setLocation={(location) => {
+                      setLocation(location);
+                      setValue("location", location);
+                    }}
+                  />
+                </div>
+                <div>
+                  <Controller
+                    control={control}
+                    name="location"
+                    render={({ field }) => (
+                      <Textarea
+                        rows={3}
+                        value={location}
+                        onChange={handleLocationChange}
+                        placeholder="Masukan lokasi"
+                      />
+                    )}
+                  />
+                  <div className="invalid-feedback">
+                    {errors.location?.message}
+                  </div>
+                </div>
+                <p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
+                <div className="flex flex-col ">
+                  <div className="mt-1 space-y-2">
+                    <Label>Nama Pangkat</Label>
+                    <Controller
+                      control={control}
+                      name="level"
+                      render={({ field }) => (
+                        <Input
+                          size={"md"}
+                          type="text"
+                          defaultValue={detail?.speakerTitle}
+                          onChange={field.onChange}
+                          placeholder="Masukan Nama Pangkat"
+                        />
+                      )}
+                    />
+                    {errors.level?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.level.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex flex-col my-3">
+                  <div className="mt-1 space-y-2">
+                    <Label>Nama Lengkap</Label>
+                    <Controller
+                      control={control}
+                      name="name"
+                      render={({ field }) => (
+                        <Input
+                          size={"md"}
+                          type="text"
+                          defaultValue={detail?.speakerName}
+                          onChange={field.onChange}
+                          placeholder="Masukan Nama Lengkap"
+                        />
+                      )}
+                    />
+                    {errors.name?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.name.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              ""
+            )}
+            {/* Submit Button */}
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                Submit
+              </Button>
+            </div>
+          </form>
+        </div>
+      </Card>
+      <Card className="w-full lg:w-3/12">
+        <div className="px-3 py-3">Jadwal Selanjutnya</div>
+      </Card>
+    </div>
+  );
+}

lib/menus.ts

@@ -180,24 +180,38 @@ export function getMenuList(pathname: string, t: any): Group[] {
             icon: "uil:schedule",
             submenus: [
               {
-                href: "/contributor/schedule/press-conference",
+                href: "/contributor/schedule/live-report",
-                label: t("press-conference"),
+                label: t("live-report"),
-                active: pathname.includes("/schedule/press-conference"),
+                active: pathname.includes("/schedule/live-report"),
                 icon: "heroicons:arrow-trending-up",
                 children: [],
               },
+              // {
+              //   href: "/contributor/schedule/press-conference",
+              //   label: t("press-conference"),
+              //   active: pathname.includes("/schedule/press-conference"),
+              //   icon: "heroicons:arrow-trending-up",
+              //   children: [],
+              // },
+              // {
+              //   href: "/contributor/schedule/event",
+              //   label: "event",
+              //   active: pathname.includes("/schedule/event"),
+              //   icon: "heroicons:shopping-cart",
+              //   children: [],
+              // },
+              // {
+              //   href: "/contributor/schedule/press-release",
+              //   label: t("press-release"),
+              //   active: pathname.includes("/schedule/press-release"),
+              //   icon: "heroicons:shopping-cart",
+              //   children: [],
+              // },
               {
-                href: "/contributor/schedule/event",
+                href: "/contributor/schedule/calendar-polri",
-                label: "event",
+                label: t("calendar-polri"),
-                active: pathname.includes("/schedule/event"),
+                active: pathname.includes("/schedule/calendar-polri"),
-                icon: "heroicons:shopping-cart",
+                icon: "heroicons:arrow-trending-up",
-                children: [],
-              },
-              {
-                href: "/contributor/schedule/press-release",
-                label: t("press-release"),
-                active: pathname.includes("/schedule/press-release"),
-                icon: "heroicons:shopping-cart",
                 children: [],
               },
             ],
@@ -271,20 +285,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
             active: pathname.includes("/settinng"),
             icon: "material-symbols:settings",
             submenus: [
-              {
+              // {
-                href: "/admin/settings/category",
+              //   href: "/admin/settings/category",
-                label: t("category"),
+              //   label: t("category"),
-                active: pathname === "/admin/settings/category",
+              //   active: pathname === "/admin/settings/category",
-                icon: "heroicons:arrow-trending-up",
+              //   icon: "heroicons:arrow-trending-up",
-                children: [],
+              //   children: [],
-              },
+              // },
-              {
+              // {
-                href: "/admin/settings/tag",
+              //   href: "/admin/settings/tag",
-                label: "Tag",
+              //   label: "Tag",
-                active: pathname === "/admin/settings/tag",
+              //   active: pathname === "/admin/settings/tag",
-                icon: "heroicons:arrow-trending-up",
+              //   icon: "heroicons:arrow-trending-up",
-                children: [],
+              //   children: [],
-              },
+              // },
               {
                 href: "/admin/settings/banner",
                 label: "Banner",
@@ -292,6 +306,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
                 icon: "heroicons:arrow-trending-up",
                 children: [],
               },
+              {
+                href: "/admin/settings/popup",
+                label: "Pop Up",
+                active: pathname === "/admin/settings/popup",
+                icon: "heroicons:arrow-trending-up",
+                children: [],
+              },
+              {
+                href: "/admin/settings/iklan",
+                label: "Iklan",
+                active: pathname === "/admin/settings/iklan",
+                icon: "heroicons:arrow-trending-up",
+                children: [],
+              },
               // {
               //   href: "/admin/settings/feedback",
               //   label: "Feedback",
@@ -1865,20 +1893,6 @@ export function getMenuList(pathname: string, t: any): Group[] {
               active: pathname.includes("/settinng"),
               icon: "material-symbols:settings",
               submenus: [
-                {
-                  href: "/admin/settings/category",
-                  label: t("category"),
-                  active: pathname === "/admin/settings/category",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "/admin/settings/tag",
-                  label: "Tag",
-                  active: pathname === "/admin/settings/tag",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
                 {
                   href: "/admin/settings/banner",
                   label: "Banner",
@@ -1887,30 +1901,16 @@ export function getMenuList(pathname: string, t: any): Group[] {
                   children: [],
                 },
                 {
-                  href: "/admin/settings/feedback",
+                  href: "/admin/settings/popup",
-                  label: "Feedback",
+                  label: "Pop Up",
-                  active: pathname === "/admin/settings/feedback",
+                  active: pathname === "/admin/settings/popup",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
                 {
-                  href: "/admin/settings/faq",
+                  href: "/admin/settings/iklan",
-                  label: "FAQ",
+                  label: "Iklan",
-                  active: pathname === "/admin/settings/faq",
+                  active: pathname === "/admin/settings/iklan",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "https://nat-mediahub.polri.go.id/",
-                  label: "Mediahub 2022",
-                  active: pathname === "/admin/settings/mediahub-2022",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "/admin/settings/privacy",
-                  label: t("privacy"),
-                  active: pathname === "/admin/settings/privacy",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
@@ -2323,20 +2323,6 @@ export function getMenuList(pathname: string, t: any): Group[] {
               active: pathname.includes("/settinng"),
               icon: "material-symbols:settings",
               submenus: [
-                {
-                  href: "/admin/settings/category",
-                  label: t("category"),
-                  active: pathname === "/admin/settings/category",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "/admin/settings/tag",
-                  label: "Tag",
-                  active: pathname === "/admin/settings/tag",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
                 {
                   href: "/admin/settings/banner",
                   label: "Banner",
@@ -2345,30 +2331,16 @@ export function getMenuList(pathname: string, t: any): Group[] {
                   children: [],
                 },
                 {
-                  href: "/admin/settings/feedback",
+                  href: "/admin/settings/popup",
-                  label: "Feedback",
+                  label: "Pop Up",
-                  active: pathname === "/admin/settings/feedback",
+                  active: pathname === "/admin/settings/popup",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
                 {
-                  href: "/admin/settings/faq",
+                  href: "/admin/settings/iklan",
-                  label: "FAQ",
+                  label: "Iklan",
-                  active: pathname === "/admin/settings/faq",
+                  active: pathname === "/admin/settings/iklan",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "https://nat-mediahub.polri.go.id/",
-                  label: "Mediahub 2022",
-                  active: pathname === "/admin/settings/mediahub-2022",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "/admin/settings/privacy",
-                  label: t("privacy"),
-                  active: pathname === "/admin/settings/privacy",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
@@ -2596,20 +2568,6 @@ export function getMenuList(pathname: string, t: any): Group[] {
               active: pathname.includes("/settinng"),
               icon: "material-symbols:settings",
               submenus: [
-                {
-                  href: "/admin/settings/category",
-                  label: t("category"),
-                  active: pathname === "/admin/settings/category",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "/admin/settings/tag",
-                  label: "Tag",
-                  active: pathname === "/admin/settings/tag",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
                 {
                   href: "/admin/settings/banner",
                   label: "Banner",
@@ -2618,30 +2576,16 @@ export function getMenuList(pathname: string, t: any): Group[] {
                   children: [],
                 },
                 {
-                  href: "/admin/settings/feedback",
+                  href: "/admin/settings/popup",
-                  label: "Feedback",
+                  label: "Pop Up",
-                  active: pathname === "/admin/settings/feedback",
+                  active: pathname === "/admin/settings/popup",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
                 {
-                  href: "/admin/settings/faq",
+                  href: "/admin/settings/iklan",
-                  label: "FAQ",
+                  label: "Iklan",
-                  active: pathname === "/admin/settings/faq",
+                  active: pathname === "/admin/settings/iklan",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "https://nat-mediahub.polri.go.id/",
-                  label: "Mediahub 2022",
-                  active: pathname === "/admin/settings/mediahub-2022",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "/admin/settings/privacy",
-                  label: t("privacy"),
-                  active: pathname === "/admin/settings/privacy",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },

messages/en.json

@@ -342,7 +342,9 @@
     "contact": "Contact",
     "ptt": "PTT",
     "web-chat": "Web-Chat",
-    "setting-tracking": "Media Tracking"
+    "setting-tracking": "Media Tracking",
+    "calendar-polri": "Calendar Polri",
+    "live-report": "Live Report"
   },
   "Changelog": {
     "version": "Version's",
@@ -597,7 +599,9 @@
     "press-conference": "Press Conference",
     "press-release": "Press Release",
     "create-schedule": "Create Schedule",
-    "event": "event"
+    "event": "event",
+    "live-report": "Live Report",
+    "calendar-polri": "Calendar Polri"
   },
   "Blog": {
     "table": "Table",

messages/in.json

@@ -343,7 +343,9 @@
     "contact": "kontak",
     "ptt": "PTT",
     "web-chat": "Web-Chat",
-    "setting-tracking": "Media Tracking"
+    "setting-tracking": "Media Tracking",
+    "calendar-polri": "Kalender Polri",
+    "live-report": "Live Report"
   },
   "Changelog": {
     "version": "Version's",
@@ -598,7 +600,9 @@
     "press-conference": "Konferensi Pers",
     "press-release": "Pers Rilis",
     "create-schedule": "Buat Jadwal",
-    "event": "event"
+    "event": "event",
+    "live-report": "Live Report",
+    "calendar-polri": "Kalender Polri"
   },
   "Blog": {
     "table": "Tabel",