Merge branch 'dev-rama' of https://gitlab.com/hanifsalafi/mediahub_redesign

app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx

@@ -17,12 +17,15 @@ import { EventContentArg } from "@fullcalendar/core";
 import EventModal from "./event-modal";
 import { useTranslations } from "next-intl";
 import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting";
+import dayjs from "dayjs";
 const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
 interface CalendarViewProps {
   events: CalendarEvent[];
   categories: CalendarCategory[];
 }
 
+const INITIAL_YEAR = dayjs().format("YYYY");
+const INITIAL_MONTH = dayjs().format("M");
 export interface CalendarEvent {
   id: string;
   title: string;
@@ -80,6 +83,18 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
     { title: "Create New theme", id: "104", tag: "etc" },
   ]);
 
+  useEffect(() => {
+    getCalendarEvents();
+  });
+  const getCalendarEvents = async () => {
+    const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, "");
+    console.log("ress", res);
+
+    if (res.error) {
+      return false;
+    }
+  };
+
   useEffect(() => {
     setSelectedCategory(categories?.map((c) => c.value));
   }, [events, categories]);
@@ -251,14 +266,14 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
               />
             </div>
 
-            <div id="external-events" className=" space-y-1.5 mt-6 px-4">
+            {/* <div id="external-events" className=" space-y-1.5 mt-6 px-4">
               <p className="text-sm font-medium text-default-700 mb-3">
                 {t("shortDesc")}
               </p>
               {dragEvents.map((event) => (
                 <ExternalDraggingevent key={event.id} event={event} />
               ))}
-            </div>
+            </div> */}
             <div className="py-4 text-default-800  font-semibold text-xs uppercase mt-4 mb-2 px-4">
               {t("filter")}
             </div>

app/[locale]/(protected)/contributor/agenda-setting/data.ts

@@ -1,17 +1,31 @@
+import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting";
 import { faker } from "@faker-js/faker";
+import dayjs from "dayjs";
 
 const date = new Date();
 const prevDay = new Date().getDate() - 1;
 const nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
+const INITIAL_YEAR = dayjs().format("YYYY");
+const INITIAL_MONTH = dayjs().format("M");
 
 // prettier-ignore
 const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1)
 // prettier-ignore
 const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1)
+
+export const getCalendarEvents = async () => {
+  const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, "");
+  if (res.error) {
+    return false;
+  }
+  console.log("ress", res.data.data);
+  return res?.data?.data;
+};
+
 export const calendarEvents = [
   {
     id: faker.string.uuid(),
-    title: "All Day Event",
+    title: "aaaAll Day Event",
     start: date,
     end: nextDay,
     allDay: false,

app/[locale]/(protected)/contributor/agenda-setting/utils.ts

@@ -2,10 +2,10 @@ import { calendarEvents, categories } from "./data";
 
 // get events
 export const getEvents = async () => {
-    return calendarEvents;
+  return calendarEvents;
 };
 
 // get categories
 export const getCategories = async () => {
-    return categories;
+  return categories;
-}
+};

app/[locale]/(protected)/curator/content-production/layout.tsx

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

app/[locale]/(protected)/curator/content-production/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import ContentProductionVisualization from "@/components/visualization/content-production";
+
+export default function ContentProduction() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <ContentProductionVisualization />
+    </div>
+  );
+}

app/[locale]/(protected)/curator/pattern-relation/layout.tsx

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

app/[locale]/(protected)/curator/pattern-relation/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import PatternRelationVisualization from "@/components/visualization/pattern-relation-viz";
+
+export default function PatternRelation() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <PatternRelationVisualization />
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx

@@ -0,0 +1,75 @@
+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 { htmlToString } from "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "title",
+    header: "Judul Perencanaan",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "createdByName",
+    header: "Nama Pembuat",
+    cell: ({ row }) => <span>{row.getValue("createdByName")}</span>,
+  },
+  {
+    accessorKey: "description",
+    header: "Deskripsi",
+    cell: ({ row }) => <span>{htmlToString(row.getValue("description"))}</span>,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("status")}</span>,
+  },
+
+  {
+    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={`/curator/task-plan/mediahub/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/curator/task-plan/mediahub/components/table.tsx

@@ -0,0 +1,183 @@
+"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,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  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 "./columns";
+
+const TaskPlanMediahubTable = (props: {
+  data: any;
+  totalPage: number;
+  totalData: number;
+}) => {
+  const { data, totalPage, totalData } = props;
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  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: 10,
+  });
+  const [page, setPage] = React.useState(1);
+  const [limit, setLimit] = React.useState(10);
+
+  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, limit, data]);
+
+  async function fetchData() {
+    // try {
+    // const res = await ticketingPagination("", limit, page - 1);
+    // const data = res.data?.data;
+    console.log("datgaa", data);
+    const contentData = data;
+    contentData.forEach((item: any, index: number) => {
+      item.no = (page - 1) * limit + index + 1;
+    });
+
+    console.log("contentData : ", contentData);
+
+    setDataTable(contentData);
+    // setTotalData(data?.totalElements);
+    // } catch (error) {
+    //   console.error("Error fetching tasks:", error);
+    // }
+  }
+
+  return (
+    <div className="w-full overflow-x-auto">
+      <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>
+  );
+};
+
+export default TaskPlanMediahubTable;

app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx

@@ -0,0 +1,436 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+const FormSchema = z.object({
+  date: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+  output: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
+  unit: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
+  type: z.enum(["publication", "amplification", "contra"], {
+    required_error: "Required",
+  }),
+});
+
+const items = [
+  {
+    id: "video",
+    label: "Audio Visual",
+  },
+  {
+    id: "image",
+    label: "Foto",
+  },
+  {
+    id: "audio",
+    label: "Audio",
+  },
+  {
+    id: "text",
+    label: "Text",
+  },
+];
+
+const units = [
+  {
+    id: "mabes",
+    label: "Mabes Polri",
+  },
+  {
+    id: "polda",
+    label: "Polda",
+  },
+  {
+    id: "polres",
+    label: "Polres",
+  },
+];
+export default function CreateMonthly() {
+  const MySwal = withReactContent(Swal);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      unit: [],
+      output: [],
+      detail: "",
+    },
+  });
+  const editor = useRef(null);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    console.log("data", data);
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      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);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    console.log("data", data);
+  };
+
+  const output = form.watch("output");
+
+  const isAllChecked = items.every((item) => output?.includes(item.id));
+
+  const unit = form.watch("unit");
+
+  const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
+
+  const handleAllCheckedChange = (checked: boolean | string) => {
+    if (checked) {
+      form.setValue(
+        "output",
+        items.map((item) => item.id)
+      );
+    } else {
+      form.setValue("output", []);
+    }
+  };
+
+  const handleItemCheckedChange = (id: string, checked: boolean | string) => {
+    form.setValue(
+      "output",
+      checked ? [...output, id] : output.filter((value) => value !== id)
+    );
+  };
+
+  const handleAllUnitCheckedChange = (checked: boolean | string) => {
+    if (checked) {
+      form.setValue(
+        "unit",
+        units.map((item) => item.id)
+      );
+    } else {
+      form.setValue("unit", []);
+    }
+  };
+
+  const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
+    form.setValue(
+      "unit",
+      checked ? [...unit, id] : unit.filter((value) => value !== id)
+    );
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row justify-center gap-5 mt-10">
+          <Link
+            href="/curator/task-plan/mediahub/create-monthly"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Bulanan
+          </Link>
+          <Link
+            href="/curator/task-plan/mediahub/create-weekly"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Mingguan
+          </Link>
+
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
+            Harian
+          </div>
+        </div>
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="output"
+                render={() => (
+                  <FormItem>
+                    <div className="mb-4">
+                      <FormLabel className="text-sm">Output Tugas</FormLabel>
+                    </div>
+                    <div className="flex flex-row gap-3 items-center ">
+                      <div className="flex items-center gap-3">
+                        <Checkbox
+                          id="all"
+                          checked={isAllChecked}
+                          // indeterminate={isSomeChecked && !isAllChecked}
+                          onCheckedChange={(checked) =>
+                            handleAllCheckedChange(checked)
+                          }
+                        />
+                        <label htmlFor="all" className="text-sm">
+                          Semua
+                        </label>
+                      </div>
+
+                      {items.map((item) => (
+                        <FormField
+                          key={item.id}
+                          control={form.control}
+                          name="output"
+                          render={({ field }) => {
+                            return (
+                              <FormItem
+                                key={item.id}
+                                className="flex flex-row items-start space-x-3 space-y-0"
+                              >
+                                <FormControl>
+                                  <Checkbox
+                                    checked={output?.includes(item.id)}
+                                    onCheckedChange={(checked) =>
+                                      handleItemCheckedChange(item.id, checked)
+                                    }
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.label}
+                                </FormLabel>
+                              </FormItem>
+                            );
+                          }}
+                        />
+                      ))}
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="unit"
+                render={() => (
+                  <FormItem>
+                    <div className="mb-4">
+                      <FormLabel className="text-sm">Pelaksana Tugas</FormLabel>
+                    </div>
+                    <div className="flex flex-row gap-3 items-center ">
+                      <div className="flex items-center gap-3">
+                        <Checkbox
+                          id="all"
+                          checked={isAllUnitChecked}
+                          onCheckedChange={(checked) =>
+                            handleAllUnitCheckedChange(checked)
+                          }
+                        />
+                        <label htmlFor="all" className="text-sm">
+                          Semua
+                        </label>
+                      </div>
+
+                      {units.map((item) => (
+                        <FormField
+                          key={item.id}
+                          control={form.control}
+                          name="unit"
+                          render={({ field }) => {
+                            return (
+                              <FormItem
+                                key={item.id}
+                                className="flex flex-row items-start space-x-3 space-y-0"
+                              >
+                                <FormControl>
+                                  <Checkbox
+                                    checked={unit?.includes(item.id)}
+                                    disabled={
+                                      item.id === "polres" &&
+                                      !unit.includes("polda")
+                                    }
+                                    onCheckedChange={(checked) =>
+                                      handleUnitCheckedChange(item.id, checked)
+                                    }
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.label}
+                                </FormLabel>
+                              </FormItem>
+                            );
+                          }}
+                        />
+                      ))}
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Jenis Penugasan</FormLabel>
+                    <FormControl>
+                      <RadioGroup
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                        className="flex flex-row gap-3"
+                      >
+                        <FormItem className="flex items-center space-x-3 space-y-0">
+                          <FormControl>
+                            <RadioGroupItem value="publication" />
+                          </FormControl>
+                          <FormLabel className="font-normal">
+                            Publikasi
+                          </FormLabel>
+                        </FormItem>
+                        <FormItem className="flex items-center space-x-3 space-y-0">
+                          <FormControl>
+                            <RadioGroupItem value="amplification" />
+                          </FormControl>
+                          <FormLabel className="font-normal">
+                            Amplifikasi
+                          </FormLabel>
+                        </FormItem>
+                        <FormItem className="flex items-center space-x-3 space-y-0">
+                          <FormControl>
+                            <RadioGroupItem value="contra" />
+                          </FormControl>
+                          <FormLabel className="font-normal">Kontra</FormLabel>
+                        </FormItem>
+                      </RadioGroup>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="date"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Tanggal</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value ? (
+                            format(field.value, "PPP")
+                          ) : (
+                            <span>Masukkan Tanggal</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="single"
+                          selected={field.value}
+                          onSelect={field.onChange}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button type="submit" variant="outline" color="destructive">
+                  Cancel
+                </Button>
+                <Button type="submit" color="primary">
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx

@@ -0,0 +1,227 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { error } from "@/config/swal";
+import { savePlanning } from "@/service/agenda-setting/agenda-setting";
+
+const FormSchema = z.object({
+  month: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function CreateMonthly() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+  const editor = useRef(null);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      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);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      planningTypeId: 1,
+      title: data.title,
+      time: "3",
+      description: data.detail,
+      username: "",
+      date: new Date(data.month).getMonth() + 1,
+      status: "Open",
+    };
+    console.log("req", reqData, data.month);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  const handleMonthSelect = (selectedDate: Date | undefined) => {
+    if (!selectedDate) return;
+    const newDate = new Date(
+      selectedDate.getFullYear(),
+      selectedDate.getMonth(),
+      1
+    );
+    form.setValue("month", newDate);
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row justify-center gap-5 mt-10">
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
+            Bulanan
+          </div>
+          <Link
+            href="/curator/task-plan/mediahub/create-weekly"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Mingguan
+          </Link>
+          <Link
+            href="/curator/task-plan/mediahub/create-daily"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Harian
+          </Link>
+        </div>
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Bulanan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="month"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Bulan</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value ? (
+                            format(field.value, "MMMM yyyy")
+                          ) : (
+                            <span>Masukkan Bulan</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="single"
+                          selected={field.value}
+                          onSelect={handleMonthSelect}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button type="submit" variant="outline" color="destructive">
+                  Cancel
+                </Button>
+                <Button type="submit" color="primary">
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx

@@ -0,0 +1,232 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { error } from "@/config/swal";
+import { getOnlyDate } from "@/utils/globals";
+import { savePlanning } from "@/service/agenda-setting/agenda-setting";
+
+const FormSchema = z.object({
+  week: z.object({
+    from: z.date({
+      required_error: "Start date (from) is required",
+    }),
+    to: z.date({
+      required_error: "End date (to) is required",
+    }),
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function CreateMonthly() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+  const editor = useRef(null);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      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);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      planningTypeId: 1,
+      title: data.title,
+      time: "2",
+      description: data.detail,
+      username: "",
+      date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`,
+      status: "Open",
+    };
+    console.log("req", reqData);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row justify-center gap-5 mt-10">
+          <Link
+            href="/curator/task-plan/mediahub/create-monthly"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Bulanan
+          </Link>
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
+            Mingguan
+          </div>
+
+          <Link
+            href="/curator/task-plan/mediahub/create-daily"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Harian
+          </Link>
+        </div>
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Mingguan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="week"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Tanggal</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value?.from ? (
+                            field.value.to ? (
+                              <>
+                                {format(field.value.from, "LLL dd, y")} -{" "}
+                                {format(field.value.to, "LLL dd, y")}
+                              </>
+                            ) : (
+                              format(field.value.from, "LLL dd, y")
+                            )
+                          ) : (
+                            <span>Masukkan Tanggal</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="range"
+                          selected={field.value}
+                          onSelect={field.onChange}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button type="submit" variant="outline" color="destructive">
+                  Cancel
+                </Button>
+                <Button type="submit" color="primary">
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/detail/[id]/page.tsx

@@ -0,0 +1,270 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { close, loading } from "@/config/swal";
+import { getWeeklyPlanList } from "@/service/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/service/planning/planning";
+import { useParams } from "next/navigation";
+import dayjs from "dayjs";
+import { useEffect, useRef, useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import JoditEditor from "jodit-react";
+
+export default function DetailTaskPlanMediahub() {
+  const params = useParams();
+  const id = params?.id;
+  const editor = useRef(null);
+
+  const [planningData, setPlanningData] = useState<any>();
+
+  const [type, setType] = useState("");
+
+  const [weeklyList, setWeeklyList] = useState<any>([]);
+  const [weeklySelected, setWeeklySelected] = useState();
+
+  const [taskOutput, setTaskOutput] = useState<any>([]);
+  const [destination, setDestination] = useState<any>([]);
+  const [listDest, setListDest] = useState([]);
+  const [topDestination, setTopDestination] = useState<any>([]);
+
+  useEffect(() => {
+    initFetch();
+  }, [id]);
+
+  async function initFetch() {
+    if (id != undefined) {
+      loading();
+      const res = await getPlanningById(id);
+      close();
+
+      if (res?.data?.data != undefined) {
+        const data = res?.data?.data;
+        console.log("Data :", data);
+        setPlanningData(data);
+        setAssignedTopLevel(data?.assignedToTopLevel);
+        setArrayDestination(data?.assignedToLevel);
+        setArrayTaskOutput(data?.fileTypeOutput);
+        setType(String(data?.assignmentTypeId));
+      }
+    }
+  }
+
+  function setArrayDestination(assignedToLevel: any) {
+    if (assignedToLevel?.length > 0) {
+      const arrayDestination = [];
+      const arrayDest = assignedToLevel.split(",");
+
+      for (const element of arrayDest) {
+        arrayDestination.push(element);
+      }
+
+      setDestination(arrayDestination);
+    }
+  }
+
+  function setAssignedTopLevel(assignedToTopLevel: any) {
+    if (assignedToTopLevel?.length > 0) {
+      const arrayTopLevel = [];
+      const arrayTop = assignedToTopLevel.split(",");
+
+      for (const element of arrayTop) {
+        arrayTopLevel.push(Number(element));
+      }
+
+      setTopDestination(arrayTopLevel);
+    }
+  }
+
+  function setArrayTaskOutput(output: any) {
+    if (output?.length > 0) {
+      const arrayOutput = [];
+      const arrOutput = output.split(",");
+
+      for (const element of arrOutput) {
+        arrayOutput.push(Number(element));
+      }
+
+      setTaskOutput(arrayOutput);
+    }
+  }
+
+  useEffect(() => {
+    getWeeklyPlanning();
+  }, [planningData]);
+
+  async function getWeeklyPlanning() {
+    const TODAY = dayjs().format("YYYY-MM-DD");
+    const res = await getWeeklyPlanList(planningData?.date || TODAY, 1);
+
+    if (res.data !== null) {
+      const rawUser = res.data?.data;
+      const optionArr = rawUser.map((option: any) => ({
+        id: option.id,
+        label: option.title,
+        value: option.id,
+      }));
+      console.log("res", optionArr);
+
+      setWeeklyList(optionArr);
+    }
+  }
+  return (
+    <>
+      <SiteBreadcrumb />
+      <div className="text-black flex flex-col gap-4">
+        <p className="text-lg">Perencanaan Mediahub</p>
+        <p className="text-sm">Judul Perencanaan</p>
+        <Input value={planningData?.title} readOnly />
+        <p className="text-sm">Output Tugas</p>
+        <div className="flex flex-row gap-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={taskOutput ? taskOutput.length == 4 : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Semua
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={taskOutput ? taskOutput.includes(2) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Audio Visual
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={taskOutput ? taskOutput.includes(4) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Audio
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={taskOutput ? taskOutput.includes(1) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Foto
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={taskOutput ? taskOutput.includes(3) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Text
+            </label>
+          </div>
+        </div>
+        <p className="text-sm">Pelaksana Tugas</p>
+        <div className="flex flex-row gap-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={topDestination ? topDestination.includes(0) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Semua Unit
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={topDestination ? topDestination.includes(1) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Mabes Polri
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={topDestination ? topDestination.includes(2) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Polda
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={topDestination ? topDestination.includes(3) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Polres
+            </label>
+          </div>
+        </div>
+        <p className="text-sm">Jenis Penugasan</p>
+        <RadioGroup className="flex flex-row" disabled>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="1" id="1" checked={type === "1"} />
+            <Label htmlFor="1">Publikasi {type}</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="2" id="2" checked={type === "2"} />
+            <Label htmlFor="2">Amplifikasi</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="3" id="3" checked={type === "3"} />
+            <Label htmlFor="3">Kontra</Label>
+          </div>
+        </RadioGroup>
+        <p className="text-sm">Tanggal</p>
+        <Input value={planningData?.date} className="w-fit" readOnly />
+        <p className="text-sm">Penugasan Mingguan</p>
+        <Input value={weeklyList[0]?.label} readOnly />
+        <JoditEditor
+          ref={editor}
+          value={planningData?.description}
+          className="dark:text-black"
+          config={{ readonly: true, toolbar: false }}
+        />
+      </div>
+    </>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/layout.tsx

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

app/[locale]/(protected)/curator/task-plan/mediahub/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import ListViewTable from "@/components/table/task-plan/list-view-table";
+import SingleViewTable from "@/components/table/task-plan/single-view-table";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "@/i18n/routing";
+import { useState } from "react";
+
+export default function TaskPlanMediaHub() {
+  const router = useRouter();
+  const [view, setView] = useState("single");
+  return (
+    <>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-between">
+          <Button
+            onClick={() =>
+              view === "single" ? setView("list") : setView("single")
+            }
+          >
+            {view == "single" ? "List" : "Single"} View
+          </Button>
+          <Button
+            color="primary"
+            onClick={() =>
+              router.push("/curator/task-plan/mediahub/create-monthly")
+            }
+          >
+            Buat Perencaan
+          </Button>
+        </div>
+        {view == "single" ? <SingleViewTable /> : <ListViewTable />}
+      </div>
+    </>
+  );
+}

app/[locale]/(protected)/curator/task-plan/medsos-mediahub/layout.tsx

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

app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx

@@ -0,0 +1,9 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+export default function TaskPlanMedsosMediaHub() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+    </div>
+  );
+}

app/[locale]/(protected)/dashboard/page.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import { StatisticsBlock } from "@/components/blocks/statistics-block";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -7,6 +7,12 @@ import { useTranslations } from "next-intl";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { UploadIcon } from "lucide-react";
+
+import Cookies from "js-cookie";
+import { useEffect } from "react";
+import { getCookiesDecrypt } from "@/lib/utils";
+import DashboardVisualization from "@/components/visualization/dashboard-viz";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
 import TaskTable from "../contributor/task/components/task-table";
 import PressConferenceTable from "../contributor/schedule/press-release/components/pressrilis-table";
 import BlogTable from "../contributor/blog/components/blog-table";
@@ -16,7 +22,14 @@ import { Link } from "@/components/navigation";
 
 const DashboardPage = () => {
   const t = useTranslations("AnalyticsDashboard");
-  return (
+  const roleId = getCookiesDecrypt("urie");
+
+  return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
+    <div>
+      <SiteBreadcrumb />
+      <DashboardVisualization />
+    </div>
+  ) : (
     <div>
       <div className="my-3">
         <Tabs defaultValue="routine-task" className="w-full">

app/[locale]/(public)/audio/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/footer";
+import Footer from "@/components/landing-page/Footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/contact/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 
 import { redirect } from "@/components/navigation";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
-import Footer from "@/components/landing-page/footer";
+import Footer from "@/components/landing-page/Footer";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/document/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/footer";
+import Footer from "@/components/landing-page/Footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/faqs/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 
 import { redirect } from "@/components/navigation";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
-import Footer from "@/components/landing-page/footer";
+import Footer from "@/components/landing-page/Footer";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/feedback/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 
 import { redirect } from "@/components/navigation";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
-import Footer from "@/components/landing-page/footer";
+import Footer from "@/components/landing-page/Footer";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/image/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/footer";
+import Footer from "@/components/landing-page/Footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/indeks/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/footer";
+import Footer from "@/components/landing-page/Footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/schedule/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/footer";
+import Footer from "@/components/landing-page/Footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/video/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/footer";
+import Footer from "@/components/landing-page/Footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/globals.css

@@ -34,8 +34,6 @@
     --warning: 16 93% 70%;
     --warning-foreground: 33.3 100% 96.5%;
 
-
-
     --success: 154 52% 55%;
     --success-foreground: 138.5 76.5% 96.7%;
 
@@ -85,7 +83,6 @@
   }
 
   .dark {
-
     --background: 222.2 47.4% 11.2%;
     --foreground: 210 40% 98%;
 
@@ -94,7 +91,6 @@
 
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    
 
     --card: 215 27.9% 16.9%;
     --card-foreground: 210 40% 98%;
@@ -166,19 +162,16 @@
 .dashcode-app-codeVmapWarning path {
   @apply fill-warning;
 }
-.dashcode-app-codeVmapWarning path  .svg-map__location[aria-checked="true"] {
+.dashcode-app-codeVmapWarning path .svg-map__location[aria-checked="true"] {
-    @apply fill-warning;
+  @apply fill-warning;
 }
 .dashcode-app-codeVmapSuccess path {
   @apply fill-success;
-
 }
-.dashcode-app-codeVmapSuccess path .svg-map__location[aria-checked="true"]  {
+.dashcode-app-codeVmapSuccess path .svg-map__location[aria-checked="true"] {
-    @apply fill-success;
+  @apply fill-success;
 }
 
-
-
 @layer base {
   * {
     @apply border-border;
@@ -208,7 +201,6 @@
     padding-right: 0px !important;
   }
 
-
   .no-scrollbar::-webkit-scrollbar {
     width: 0px;
   }
@@ -216,7 +208,6 @@
   .no-scrollbar::-webkit-scrollbar-thumb {
     background-color: transparent;
   }
-
 }
 
 .logo-box-3 {
@@ -227,15 +218,23 @@
   @apply flex flex-col items-center justify-center;
 }
 
-
 .has-sticky-header::after {
   position: absolute;
   z-index: -10;
   --tw-backdrop-blur: blur(12px);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
+    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   --tw-content: "";
   content: var(--tw-content);
-  background: linear-gradient(180deg, rgba(var(--v-theme-background)) 44%, rgba(var(--v-theme-background)) 73%, rgba(var(--v-theme-background)));
+  background: linear-gradient(
+    180deg,
+    rgba(var(--v-theme-background)) 44%,
+    rgba(var(--v-theme-background)) 73%,
+    rgba(var(--v-theme-background))
+  );
   background-repeat: repeat;
   block-size: 5.5rem;
   inset-block-start: -2.5rem;
@@ -248,10 +247,19 @@
   position: absolute;
   z-index: -10;
   --tw-backdrop-blur: blur(12px);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
+    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   --tw-content: "";
   content: var(--tw-content);
-  background: linear-gradient(180deg, rgba(var(--v-theme-background)) 44%, rgba(var(--v-theme-background)) 73%, rgba(var(--v-theme-background)));
+  background: linear-gradient(
+    180deg,
+    rgba(var(--v-theme-background)) 44%,
+    rgba(var(--v-theme-background)) 73%,
+    rgba(var(--v-theme-background))
+  );
   background-repeat: repeat;
   block-size: 5.5rem;
   inset-block-start: 1.5rem;
@@ -365,7 +373,7 @@
   @apply hidden;
 }
 
-.dashcode-app-calendar .fc .fc-list-sticky .fc-list-day>* {
+.dashcode-app-calendar .fc .fc-list-sticky .fc-list-day > * {
   @apply bg-default-50;
 }
 
@@ -373,12 +381,11 @@
   @apply pt-0;
 }
 
-.dashcode-app-calendar .fc-timegrid-event-harness>.fc-timegrid-event {
+.dashcode-app-calendar .fc-timegrid-event-harness > .fc-timegrid-event {
   @apply static;
 }
 
 @media (max-width: 981px) {
-
   .dashcode-app-calendar .fc-button-group,
   .dashcode-app-calendar .fc .fc-toolbar {
     display: block !important;
@@ -445,14 +452,13 @@
   @apply bg-success border-none text-primary-foreground text-center px-2 font-medium text-sm;
 }
 
-.dashcode-app-calendar .dark  {
+.dashcode-app-calendar .dark {
   @apply bg-card-foreground border-none text-primary-foreground px-2 font-medium text-sm;
 }
 
-
 /* react select */
 
- .dashcode-app .react-select .react-select.is-invalid .select__control {
+.dashcode-app .react-select .react-select.is-invalid .select__control {
   border-color: none !important;
 }
 
@@ -473,10 +479,13 @@
 }
 
 .dashcode-app .react-select .select__menu .select__option {
-  @apply  hover:bg-default/10;
+  @apply hover:bg-default/10;
 }
 
-.dashcode-app .react-select .select__menu .select__option.select__option--is-selected {
+.dashcode-app
+  .react-select
+  .select__menu
+  .select__option.select__option--is-selected {
   @apply bg-default dark:bg-default-200;
 }
 
@@ -492,11 +501,16 @@
   @apply text-default-500;
 }
 
-.dashcode-app .react-select .react-select__control.select__control--is-disabled {
+.dashcode-app
+  .react-select
+  .react-select__control.select__control--is-disabled {
   @apply cursor-not-allowed;
 }
 
-.dashcode-app .react-select .react-select__control .select__indicator-separator {
+.dashcode-app
+  .react-select
+  .react-select__control
+  .select__indicator-separator {
   @apply bg-default-50 text-default-800 placeholder:text-opacity-60;
 }
 
@@ -504,7 +518,12 @@
   @apply cursor-pointer text-default-600;
 }
 
-.dashcode-app .react-select .has-error .react-select__control .select__indicator svg {
+.dashcode-app
+  .react-select
+  .has-error
+  .react-select__control
+  .select__indicator
+  svg {
   @apply text-destructive;
 }
 
@@ -520,9 +539,9 @@
   @apply fill-default-foreground;
 }
 
-html[dir=rtl] .react-select .select__loading-indicator {
+html[dir="rtl"] .react-select .select__loading-indicator {
   flex-direction: row-reverse;
-} 
+}
 
 /* quil editor */
 .ql-container {
@@ -540,4 +559,18 @@ html[dir=rtl] .react-select .select__loading-indicator {
   width: 100%;
 }
 
+.custom-scrollbar-table::-webkit-scrollbar {
+  width: 1px;
+}
 
+.custom-scrollbar-table::-webkit-scrollbar-track {
+  background: #e5e7eb;
+}
+
+.custom-scrollbar-table::-webkit-scrollbar-thumb {
+  background: #6b7280;
+}
+
+.custom-scrollbar-table::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}

app/[locale]/page.tsx

@@ -5,8 +5,8 @@ import NewContent from "@/components/landing-page/new-content";
 import PopularContent from "@/components/landing-page/popular-content";
 import ContentCategory from "@/components/landing-page/content-category";
 import Coverage from "@/components/landing-page/coverage";
-import Hero from "@/components/landing-page/hero";
+import Hero from "@/components/landing-page/Hero";
-import Footer from "@/components/landing-page/footer";
+import Footer from "@/components/landing-page/Footer";
 import Division from "@/components/landing-page/division";
 import Navbar from "@/components/landing-page/navbar";
 import { ReactLenis } from "@studio-freight/react-lenis";

components/page-title.tsx

@@ -1,8 +1,8 @@
 "use client";
-import React from "react";
+import React, { useEffect } from "react";
 import DateRangePicker from "@/components/date-range-picker";
 import { usePathname } from "@/components/navigation";
-import { cn } from "@/lib/utils";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 
 const PageTitle = ({
   title,
@@ -13,8 +13,14 @@ const PageTitle = ({
 }) => {
   const pathname = usePathname();
   const name = pathname?.split("/").slice(1).join(" ");
+  const roleId = getCookiesDecrypt("urie");
 
-  return (
+  useEffect(() => {
+    console.log("role", roleId);
+  }, [roleId]);
+  return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
+    ""
+  ) : (
     <div
       className={cn(
         "flex flex-wrap gap-4 items-center justify-between",

components/partials/footer/index.tsx

@@ -1,75 +1,61 @@
-"use client"
+import React from "react";
-
+import FooterContent from "./footer-content";
-import React from 'react'
+import { Link } from "@/components/navigation";
-import FooterContent from './footer-content'
+import Image from "next/image";
-import { Link } from "@/components/navigation"
-import Image from 'next/image'
 import { Icon } from "@/components/ui/icon";
 
 const DashCodeFooter = () => {
-    
+  return (
-    return (
+    <FooterContent>
-        <FooterContent>
+      <div className=" md:flex  justify-between text-default-600 hidden">
-            <div className=' md:flex  justify-between text-default-600 hidden'>
+        <div className="text-center ltr:md:text-start rtl:md:text-right text-sm"></div>
-                <div className="text-center ltr:md:text-start rtl:md:text-right text-sm">
+        <div className="ltr:md:text-right rtl:md:text-end text-center text-sm">
-                </div>
+          COPYRIGHT &copy; {new Date().getFullYear()} Media Hub, All rights
-                <div className="ltr:md:text-right rtl:md:text-end text-center text-sm">
+          Reserved
-                    COPYRIGHT &copy; {new Date().getFullYear()} Media Hub, All rights Reserved
+        </div>
-                </div>
+      </div>
-            </div>
+      <div className="flex md:hidden justify-around items-center">
-            <div className='flex md:hidden justify-around items-center'>
+        <Link href="/app/chat" className="text-default-600">
-                <Link href="/app/chat" className="text-default-600">
+          <div>
-                    <div>
+            <span className="relative cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center mb-1">
-                        <span
+              <Icon icon="heroicons-outline:mail" />
-                            className="relative cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center mb-1"
+              <span className="absolute right-[5px] lg:top-0 -top-2 h-4 w-4 bg-red-500 text-[8px] font-semibold flex flex-col items-center justify-center rounded-full text-white z-[99]">
-                        >
+                10
-                            <Icon icon="heroicons-outline:mail" />
+              </span>
-                            <span className="absolute right-[5px] lg:top-0 -top-2 h-4 w-4 bg-red-500 text-[8px] font-semibold flex flex-col items-center justify-center rounded-full text-white z-[99]">
+            </span>
-                                10
+            <span className="block text-xs text-default-600">Messages</span>
-                            </span>
+          </div>
-                        </span>
+        </Link>
-                        <span
+        <Link
-                            className="block text-xs text-default-600"
+          href="profile"
-                        >
+          className="relative bg-card bg-no-repeat backdrop-filter backdrop-blur-[40px] rounded-full footer-bg dark:bg-default-300 h-[65px] w-[65px] z-[-1] -mt-[40px] flex justify-center items-center"
-                            Messages
+        >
-                        </span>
+          <div className="h-[50px] w-[50px] rounded-full relative left-[0px] top-[0px] custom-dropshadow">
-                    </div>
+            <Image
-                </Link>
+              src={"https://netidhub.com/assets/img/user-avatar.png"}
-                <Link
+              alt={"Image"}
-                    href="profile"
+              width={50}
-                    className="relative bg-card bg-no-repeat backdrop-filter backdrop-blur-[40px] rounded-full footer-bg dark:bg-default-300 h-[65px] w-[65px] z-[-1] -mt-[40px] flex justify-center items-center"
+              height={50}
-                >
+              className="w-full h-full rounded-full border-2"
-                    <div className="h-[50px] w-[50px] rounded-full relative left-[0px] top-[0px] custom-dropshadow">
+            />
-                        <Image
+          </div>
-                            src={"https://netidhub.com/assets/img/user-avatar.png"}
+        </Link>
-                            alt={"Image"}
+        <Link href="notifications">
-                            width={50}
+          <div>
-                            height={50}
+            <span className="relative cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center mb-1">
-                            className="w-full h-full rounded-full border-2"
+              <Icon icon="heroicons-outline:bell" />
-                        />
+              <span className="absolute right-[17px] lg:top-0 -top-2 h-4 w-4 bg-red-500 text-[8px] font-semibold flex flex-col items-center justify-center rounded-full text-white z-[99]">
-                    </div>
+                2
-                </Link>
+              </span>
-                <Link href="notifications">
+            </span>
-                    <div>
+            <span className="block text-xs text-default-600">
-                        <span
+              Notifications
-                            className="relative cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center mb-1"
+            </span>
-                        >
+          </div>
-                            <Icon icon="heroicons-outline:bell" />
+        </Link>
-                            <span className="absolute right-[17px] lg:top-0 -top-2 h-4 w-4 bg-red-500 text-[8px] font-semibold flex flex-col items-center justify-center rounded-full text-white z-[99]">
+      </div>
-                                2
+    </FooterContent>
-                            </span>
+  );
-                        </span>
+};
-                        <span
-                            className="block text-xs text-default-600"
-                        >
-                            Notifications
-                        </span>
-                    </div>
-                </Link>
-            </div>
 
-        </FooterContent>
+export default DashCodeFooter;
-    )
-}
-
-export default DashCodeFooter

components/partials/header/profile-info.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,9 +15,16 @@ import {
 import { Icon } from "@/components/ui/icon";
 import Image from "next/image";
 import { Link } from "@/i18n/routing";
-import React from "react";
+import { Button } from "@/components/ui/button";
+import Cookies from "js-cookie";
+import { useEffect } from "react";
 
 const ProfileInfo = () => {
+  const username = Cookies.get("state");
+  const picture = Cookies.get("profile_picture");
+  useEffect(() => {
+    console.log("us", username);
+  }, [username]);
 
   return (
     <div className="md:block hidden">
@@ -24,15 +32,15 @@ const ProfileInfo = () => {
         <DropdownMenuTrigger asChild className=" cursor-pointer">
           <div className=" flex items-center gap-3  text-default-800 ">
             <Image
-              src={"https://netidhub.com/assets/img/user-avatar.png"}
+              src={"/images/avatar/icon-avatar-1.png"}
-              alt={"Image"}
+              alt={username as string}
               width={36}
               height={36}
               className="rounded-full"
             />
 
             <div className="text-sm font-medium  capitalize lg:block hidden  ">
-              UserName
+              {username}
             </div>
             <span className="text-base  me-2.5 lg:inline-block hidden">
               <Icon icon="heroicons-outline:chevron-down"></Icon>
@@ -42,8 +50,8 @@ const ProfileInfo = () => {
         <DropdownMenuContent className="w-56 p-0" align="end">
           <DropdownMenuLabel className="flex gap-2 items-center mb-1 p-3">
             <Image
-              src={"https://netidhub.com/assets/img/user-avatar.png"}
+              src={"/images/avatar/icon-avatar-1.png"}
-              alt={"Image"}
+              alt={username as string}
               width={36}
               height={36}
               className="rounded-full"
@@ -51,13 +59,13 @@ const ProfileInfo = () => {
 
             <div>
               <div className="text-sm font-medium text-default-800 capitalize ">
-                Name
+                {username}
               </div>
               <Link
                 href="/dashboard"
                 className="text-xs text-default-600 hover:text-primary"
               >
-                Email
+                {username}
               </Link>
             </div>
           </DropdownMenuLabel>

components/table/task-plan/list-view-column.tsx

@@ -0,0 +1,133 @@
+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 { 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";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+  // {
+  //   accessorKey: "title",
+  //   header: "Judul Perencanaan",
+  //   cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  // },
+  {
+    accessorKey: "title",
+    header: "Judul Perencanaan",
+    cell: ({ row }) => {
+      const datas = row.original.subPlanningList;
+      return (
+        <Dialog>
+          <DialogTrigger asChild>
+            <a className="cursor-pointer">{row.getValue("title")}</a>
+          </DialogTrigger>
+          <DialogContent size="md">
+            <DialogHeader>
+              <DialogTitle>Rencanaan Mingguan</DialogTitle>
+            </DialogHeader>
+            <table>
+              <tr>
+                <th className="text-left">Judul Perencanaan</th>
+                <th>Batas Waktu</th>
+                <th>Status</th>
+                <th>Aksi</th>
+              </tr>
+              {datas?.map((data: any) => (
+                <tr key={data.id}>
+                  <th className="text-left font-normal text-sm">
+                    {data.title}
+                  </th>
+                  <th className="font-normal text-sm">{data.date}</th>
+                  <th className="font-normal text-sm">{data.status}</th>
+                  <th className="flex justify-center text-sm">
+                    <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">
+                          Detail
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </th>
+                </tr>
+              ))}
+            </table>
+          </DialogContent>
+        </Dialog>
+      );
+    },
+  },
+  {
+    accessorKey: "date",
+    header: "Batas Waktu",
+    cell: ({ row }) => <span>{row.getValue("date")}</span>,
+  },
+
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("status")}</span>,
+  },
+
+  {
+    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">
+              Detail
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

components/table/task-plan/list-view-table.tsx

@@ -0,0 +1,179 @@
+"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,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  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 "./list-view-column";
+import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
+
+const ListViewTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  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: 10,
+  });
+  const [page, setPage] = React.useState(1);
+  const [limit, setLimit] = React.useState(10);
+  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,
+    },
+  });
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page, limit]);
+
+  async function fetchData() {
+    try {
+      const res = await getPlanningPagination(page - 1, "", 10, 1, 3);
+      const data = res.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * limit + index + 1;
+      });
+
+      console.log("contentData : ", data);
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  return (
+    <div className="w-full overflow-x-auto">
+      <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>
+  );
+};
+
+export default ListViewTable;

components/table/task-plan/single-view-table.tsx

@@ -0,0 +1,328 @@
+"use client";
+import dayjs from "dayjs";
+import { useEffect, useRef, useState } from "react";
+import utc from "dayjs/plugin/utc";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { close, loading } from "@/config/swal";
+import { useSearchParams } from "next/navigation";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
+
+import Image from "next/image";
+import { FreeMode, Navigation, Thumbs } from "swiper/modules";
+import { Swiper as SwiperType } from "swiper/types";
+import {
+  getMonthlyPlanList,
+  getPlanningDailyByTypeId,
+  getWeeklyPlanList,
+  getWeeklyPlanListByParentId,
+} from "@/service/agenda-setting/agenda-setting";
+import TaskPlanMediahubTable from "@/app/[locale]/(protected)/curator/task-plan/mediahub/components/table";
+
+const TODAY = dayjs().format("YYYY-MM-DD"); // Pastikan Anda mendefinisikan TODAY dengan format yang konsisten
+
+export default function SingleViewTable() {
+  const params = useSearchParams();
+  const [selectedMonthItem, setSelectedMonthItem] = useState<
+    string | undefined
+  >(undefined);
+  const [selectedWeekly, setSelectedWeekly] = useState<string | undefined>(
+    undefined
+  );
+  const [selectedDate, setSelectedDate] = useState<number>(
+    new Date(TODAY).getDate()
+  );
+  const [nowDate, setNowDate] = useState<string>(TODAY);
+
+  const INITIAL_YEAR = dayjs().format("YYYY");
+  const INITIAL_MONTH = dayjs().format("M");
+  const size = 20;
+
+  const page: string | undefined | null = params?.get("page");
+  const id: string | undefined | null = params?.get("id");
+  const pages = page ? Number(page) - 1 : 0;
+  const no = (size || 10) * pages;
+
+  const [selectedMonth, setSelectedMonth] = useState<dayjs.Dayjs>(
+    dayjs(new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1))
+  );
+
+  const [selectedMonthTitle, setSelectedMonthTitle] = useState<string>("");
+  const [days, setDays] = useState<any>([]);
+
+  const weekday = require("dayjs/plugin/weekday");
+  const weekOfYear = require("dayjs/plugin/weekOfYear");
+
+  dayjs.extend(utc);
+  dayjs.extend(weekday);
+  dayjs.extend(weekOfYear);
+
+  const [monthlyList, setMonthlyList] = useState([]);
+  const [weeklyList, setWeeklyList] = useState([]);
+  const [getData, setGetData] = useState<any>([]);
+  const [getTotalPage, setGetTotalPage] = useState<number>(1);
+  const [getTOtalData, setGetTotalData] = useState(0);
+
+  useEffect(() => {
+    createCalendar("START");
+  }, []);
+
+  function createDaysForCurrentMonth(
+    year: string,
+    month: string,
+    daysInMonth: number
+  ) {
+    const days: any = [];
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = dayjs(
+        new Date(parseInt(year), parseInt(month) - 1, day)
+      ).format("YYYY-MM-DD");
+      days.push({
+        date,
+        isCurrentMonth: true,
+        isToday: date === TODAY,
+      });
+    }
+    return days;
+  }
+
+  async function getMonthlyPlanning(dates: number) {
+    const res = await getMonthlyPlanList(dates, 1);
+    console.log("monthsss", res);
+    setMonthlyList(res.data?.data);
+  }
+
+  async function getWeeklyPlanning(
+    id: string | undefined,
+    date: number | undefined
+  ) {
+    if (id) {
+      const res = await getWeeklyPlanListByParentId(id, 1);
+      setWeeklyList(res.data?.data);
+    } else {
+      const res = await getWeeklyPlanList(date, 1, true);
+      setWeeklyList(res.data?.data);
+    }
+  }
+
+  function createCalendar(
+    year: string = INITIAL_YEAR,
+    month: string = INITIAL_MONTH
+  ) {
+    const state = year;
+
+    year = year === "START" ? INITIAL_YEAR : year;
+    setSelectedMonthTitle(
+      dayjs(new Date(parseInt(year), parseInt(month) - 1))
+        .utc()
+        .local()
+        .format("MMMM YYYY")
+    );
+
+    const currentMonthDays = createDaysForCurrentMonth(
+      year,
+      month,
+      dayjs(`${year}-${month}-01`).daysInMonth()
+    );
+
+    console.log("Month:", currentMonthDays);
+    getMonthlyPlanning(state === "START" ? TODAY : currentMonthDays[0]?.date);
+    getWeeklyPlanning(
+      undefined,
+      state === "START" ? TODAY : currentMonthDays[0]?.date
+    );
+
+    setDays(currentMonthDays);
+    console.log("currentMonthDays", currentMonthDays);
+  }
+
+  async function fetchData(
+    parentId: string | number | undefined,
+    date?: string
+  ) {
+    loading();
+    const response = await getPlanningDailyByTypeId(
+      pages,
+      size,
+      parentId || selectedWeekly,
+      date || nowDate || TODAY,
+      1
+    );
+
+    close();
+    setupData(response.data?.data);
+  }
+
+  function setupData(rawData: any) {
+    if (rawData != undefined) {
+      const dataContent = rawData?.content;
+      const data = [];
+
+      for (const [i, element] of dataContent.entries()) {
+        element.no = no + i + 1;
+        data.push(element);
+      }
+
+      setGetData(data);
+      setGetTotalPage(rawData?.totalPages);
+      setGetTotalData(rawData?.totalElements);
+    }
+  }
+
+  function getPrevMonth() {
+    const selectedMonthNew = dayjs(selectedMonth).subtract(1, "month");
+
+    createCalendar(
+      selectedMonthNew.format("YYYY"),
+      selectedMonthNew.format("M")
+    );
+    fetchData(undefined, selectedMonthNew?.format("YYYY-MM-DD"));
+    setSelectedMonth(selectedMonthNew);
+    setSelectedDate(1);
+  }
+
+  function getPresentMonth() {
+    const selectedMonthNew = dayjs(
+      new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1)
+    );
+
+    createCalendar(
+      selectedMonthNew.format("YYYY"),
+      selectedMonthNew.format("M")
+    );
+    fetchData(undefined, TODAY);
+    setSelectedDate(Number(dayjs().format("D")));
+    setSelectedMonth(selectedMonthNew);
+  }
+
+  function getNextMonth() {
+    const selectedMonthNew = dayjs(selectedMonth).add(1, "month");
+
+    createCalendar(
+      selectedMonthNew.format("YYYY"),
+      selectedMonthNew.format("M")
+    );
+    fetchData(undefined, selectedMonthNew?.format("YYYY-MM-DD"));
+    setSelectedMonth(selectedMonthNew);
+    setSelectedDate(1);
+  }
+  const onSelectedMonthItem = (id: string | undefined) => {
+    // fetchData(date)
+    setSelectedMonthItem(id);
+    getWeeklyPlanning(id, undefined);
+  };
+
+  const onSelectedWeekly = (id: string | undefined) => {
+    setSelectedWeekly(id);
+    fetchData(id);
+  };
+
+  const onSelectedDay = (day: number, date: string) => {
+    fetchData(undefined, date);
+    setSelectedDate(day);
+    setNowDate(date);
+  };
+  const removeSelection = () => {
+    setSelectedMonthItem(undefined);
+    setSelectedWeekly(undefined);
+  };
+
+  return (
+    <div className="border-2 rounded-sm p-4 flex gap-3 flex-col">
+      <div className="flex justify-between">
+        <div className="flex flex-row gap-2">
+          <a onClick={getPrevMonth} className="cursor-pointer">
+            <ChevronLeft />
+          </a>
+          <a onClick={getPresentMonth} className="cursor-pointer">
+            Today
+          </a>
+          <a onClick={getNextMonth} className="cursor-pointer">
+            <ChevronRight />
+          </a>
+        </div>
+        <p className="text-xl font-semibold">{selectedMonthTitle}</p>
+      </div>
+      <div className="flex justify-end">
+        <a
+          className="border-2 border-primary px-2 py-1 rounded-full text-[10px] text-primary cursor-pointer"
+          onClick={() => removeSelection()}
+        >
+          Hapus Pilihan
+        </a>
+      </div>
+      <div className="px-8 flex flex-col gap-2 text-sm">
+        <p className="font-semibold">Rencana Bulanan</p>
+        {monthlyList?.length > 0 ? (
+          <div className="flex flex-nowrap gap-3 flex-row">
+            {monthlyList?.map((item: any) => (
+              <div
+                key={item.id}
+                className={`rounded-full px-8 py-3 cursor-pointer ${
+                  selectedMonthItem === item.id
+                    ? "bg-sky-600 text-white "
+                    : "bg-sky-300"
+                }`}
+                onClick={() => onSelectedMonthItem(item.id)}
+              >
+                <p>{item.title}</p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="flex justify-center bg-slate-200 rounded-full py-1">
+            Rencana Bulanan Belum Tersedia
+          </div>
+        )}
+        <p className="font-semibold">Rencana Mingguan</p>
+        {weeklyList?.length > 0 ? (
+          <div className="flex flex-nowrap gap-3 flex-row">
+            {weeklyList?.map((item: any) => (
+              <a
+                key={item.id}
+                className={`bg-sky-300 rounded-full px-8 py-3 cursor-pointer ${
+                  selectedWeekly === item.id
+                    ? "bg-sky-600 text-white "
+                    : "bg-sky-300"
+                }`}
+                onClick={() => onSelectedWeekly(item.id)}
+              >
+                <p>{item.title}</p>
+              </a>
+            ))}
+          </div>
+        ) : (
+          <div className="flex justify-center bg-slate-200 rounded-full py-1">
+            Rencana Mingguan Belum Tersedia
+          </div>
+        )}
+        <p className="font-semibold">Rencana Harian</p>
+      </div>
+      <div className="custom-scrollbar-table flex flex-nowrap justify-between gap-2 overflow-x-auto">
+        {days.map((day: any) => (
+          <a
+            key={day.date}
+            className={`cursor-pointer px-2 ${
+              selectedDate == parseInt(day.date.split("-")[2], 10)
+                ? "border-b-2 border-primary text-primary"
+                : ""
+            }`}
+            onClick={() =>
+              onSelectedDay(parseInt(day.date.split("-")[2], 10), day.date)
+            }
+          >
+            {parseInt(day.date.split("-")[2], 10)}
+          </a>
+        ))}
+      </div>
+      <TaskPlanMediahubTable
+        data={getData}
+        totalPage={getTotalPage}
+        totalData={getTOtalData}
+      />
+    </div>
+  );
+}

components/visualization/content-production.tsx

@@ -0,0 +1,246 @@
+"use client";
+import Cookies from "js-cookie";
+import { useEffect, useState } from "react";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { generateTicket } from "@/service/tableau/tableau-service";
+import { Button } from "../ui/button";
+import { useTranslations } from "next-intl";
+
+export default function ContentProductionVisualization() {
+  const [hasMounted, setHasMounted] = useState(false);
+  const t = useTranslations("AnalyticsDashboard");
+  const levelName = getCookiesDecrypt("ulnae");
+  const poldaState = Cookies.get("state");
+  const provState = Cookies.get("state-prov");
+
+  const [ticket1, setTicket1] = useState("");
+  const [ticket2, setTicket2] = useState("");
+  const [ticket3, setTicket3] = useState("");
+  const [isInternational, setIsInternational] = useState([false, false, false]);
+
+  const baseUrl = "https://db-mediahub.polri.go.id/";
+  const url = "https://db-mediahub.polri.go.id/trusted/";
+
+  const view1 =
+    levelName == "MABES POLRI"
+      ? isInternational[0]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi-polda?provinsi-polda=${provState}&`;
+
+  const view2 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-publisher?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-publisher?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-publisher-polda?provinsi-polda=${poldaState}&`;
+
+  const view3 =
+    levelName == "MABES POLRI"
+      ? isInternational[2]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-waktu-akses-pengguna?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-waktu-akses-pengguna-polda?provinsi-polda=${poldaState}&`;
+
+  const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
+
+  useEffect(() => {
+    async function initState() {
+      const response1 = await generateTicket();
+      setTicket1(response1.data?.data);
+
+      const response2 = await generateTicket();
+      setTicket2(response2.data?.data);
+
+      const response3 = await generateTicket();
+      setTicket3(response3.data?.data);
+    }
+
+    initState();
+  }, [isInternational]);
+
+  // Hooks
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
+
+  const handleInternational = (index: number, val: boolean) => {
+    const updatedIsInternational = [...isInternational];
+
+    updatedIsInternational[index] = val;
+    setIsInternational(updatedIsInternational);
+  };
+
+  return (
+    <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
+      <p className="text-lg">
+        <b>
+          {isInternational[0]
+            ? "CREATORS WITH THE MOST PUBLISHED CONTENT"
+            : "KREATOR DENGAN PUBLISH KONTEN TERBANYAK"}
+        </b>
+      </p>
+      {levelName === "MABES POLRI" ? (
+        <div className="flex flex-col gap-1">
+          <p>{t("choose_category")}</p>
+          <div className="flex flex-row gap-1 border-2 w-fit">
+            <Button
+              onClick={() => handleInternational(0, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[0]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(0, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[0]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="my-5">
+        {ticket1 == "" ? (
+          <iframe
+            src={`${baseUrl + view1 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket1}/${view1}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+      <p className="text-lg">
+        <b>
+          {isInternational[1]
+            ? "CREATORS WITH THE MOST INTERACTION OF CONTENT"
+            : "KREATOR DENGAN INTERAKSI KONTEN TERBANYAK"}
+        </b>
+      </p>
+      {levelName === "MABES POLRI" ? (
+        <div className="flex flex-col gap-1">
+          <p>{t("choose_category")}</p>
+          <div className="flex flex-row gap-1 border-2 w-fit">
+            <Button
+              onClick={() => handleInternational(1, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[1]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(1, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[1]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="my-5">
+        {ticket2 == "" ? (
+          <iframe
+            src={`${baseUrl + view2 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket2}/${view2}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+      <p className="text-lg">
+        <b>
+          {isInternational[2]
+            ? "ACCESS TIME PER CONTENT / CATEGORY"
+            : "WAKTU AKSES PER KONTEN / KATEGORI"}
+        </b>
+      </p>
+      {levelName === "MABES POLRI" ? (
+        <div className="flex flex-col gap-1">
+          <p>{t("choose_category")}</p>
+          <div className="flex flex-row gap-1 border-2 w-fit">
+            <Button
+              onClick={() => handleInternational(2, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[2]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(2, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[1]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="my-5">
+        {ticket3 == "" ? (
+          <iframe
+            src={`${baseUrl + view3 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket3}/${view3}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

components/visualization/dashboard-viz.tsx

@@ -0,0 +1,248 @@
+"use client";
+import Cookies from "js-cookie";
+import { useEffect, useState } from "react";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { generateTicket } from "@/service/tableau/tableau-service";
+import { Button } from "../ui/button";
+import { useTranslations } from "next-intl";
+
+export default function DashboardVisualization() {
+  const levelName = getCookiesDecrypt("ulnae");
+  const poldaState = Cookies.get("state");
+  const t = useTranslations("AnalyticsDashboard");
+
+  const [ticket1, setTicket1] = useState("");
+  const [ticket2, setTicket2] = useState("");
+  const [ticket3, setTicket3] = useState("");
+  const [isInternational, setIsInternational] = useState([false, false, false]);
+  const baseUrl = "https://analytic.sitani.info/";
+  const url = "https://analytic.sitani.info/trusted/";
+
+  const view1 =
+    levelName == "MABES POLRI"
+      ? isInternational[0]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-monitor?"
+        : "views/2023_09_MediaHUB-Viz-POLDA-content-monitor_Rev100/db-content-monitor?"
+      : `views/2023_09_MediaHUB-Viz-ADMIN-POLDA-content-monitor_Rev100/db-content-monitor?provinsi-polda=${poldaState}&`;
+
+  const view2 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-interaction-konten?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-content-interaction-konten?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-content-interaction-konten-polda?provinsi-polda=${poldaState}&`;
+
+  const view3 =
+    levelName == "MABES POLRI"
+      ? isInternational[2]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-penugasan?"
+        : "views/2023_09_db-penugasan_rev100/db-penugasan?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-penugasan-polda?provinsi-polda=${poldaState}&`;
+
+  const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
+
+  useEffect(() => {
+    async function initState() {
+      const response1 = await generateTicket();
+      setTicket1(response1.data?.data);
+      console.log("response", response1);
+      const response2 = await generateTicket();
+      setTicket2(response2.data?.data);
+
+      const response3 = await generateTicket();
+      setTicket3(response3.data?.data);
+    }
+
+    initState();
+  }, [isInternational]);
+
+  const handleInternational = (index: number, val: boolean) => {
+    const updatedIsInternational = [...isInternational];
+
+    updatedIsInternational[index] = val;
+    setIsInternational(updatedIsInternational);
+  };
+
+  useEffect(() => {
+    async function fetchUrl() {
+      console.log("Fetch tableau");
+      const urlView = `${url + ticket1}/${view1}${param}`;
+      console.log("Fetch tableau ", urlView);
+      const urlRender = await fetch(urlView)
+        .then((response) => {
+          console.log("Tableau res : ", response);
+        })
+        .catch((error) => {
+          console.log("Tableau error: ", error);
+        });
+    }
+
+    fetchUrl();
+  }, [ticket1]);
+
+  return (
+    <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
+      <p className="text-lg">
+        <b>
+          {isInternational[0]
+            ? "COMMULATION OF USERS, CONTENTS AND INTERACTIONS"
+            : "KUMULASI PENGGUNA, KONTEN, DAN INTERAKSI"}
+        </b>
+      </p>
+      {levelName === "MABES POLRI" ? (
+        <div className="flex flex-col gap-1">
+          <p>{t("choose_category")}</p>
+          <div className="flex flex-row gap-1 border-2 w-fit">
+            <Button
+              onClick={() => handleInternational(0, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[0]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(0, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[0]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="my-5">
+        {ticket1 == "" ? (
+          <iframe
+            src={`${baseUrl + view1 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket1}/${view1}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+      <p className="text-lg">
+        <b>
+          {isInternational[1]
+            ? "ADDITION OF CONTENT AND INTERACTION"
+            : "PENAMBAHAN KONTEN DAN INTERAKSI"}
+        </b>
+      </p>
+      {levelName === "MABES POLRI" ? (
+        <div className="flex flex-col gap-1">
+          <p>{t("choose_category")}</p>
+          <div className="flex flex-row gap-1 border-2 w-fit">
+            <Button
+              onClick={() => handleInternational(1, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[1]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(1, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[1]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="my-5">
+        {ticket2 == "" ? (
+          <iframe
+            src={`${baseUrl + view2 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket2}/${view2}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+      <p className="text-lg">
+        <b>{isInternational[2] ? "ASSIGNMENT" : "PENUGASAN"}</b>
+      </p>
+      {levelName === "MABES POLRI" ? (
+        <div className="flex flex-col gap-1">
+          <p>{t("choose_category")}</p>
+          <div className="flex flex-row gap-1 border-2 w-fit">
+            <Button
+              onClick={() => handleInternational(2, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[2]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(2, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[1]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="my-5">
+        {ticket3 == "" ? (
+          <iframe
+            src={`${baseUrl + view3 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket3}/${view3}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

components/visualization/pattern-relation-viz.tsx

@@ -0,0 +1,312 @@
+"use client";
+import Cookies from "js-cookie";
+import { useEffect, useState } from "react";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { generateTicket } from "@/service/tableau/tableau-service";
+import { Button } from "../ui/button";
+import { useTranslations } from "next-intl";
+
+export default function PatternRelationVisualization() {
+  const [hasMounted, setHasMounted] = useState(false);
+  const t = useTranslations("AnalyticsDashboard");
+  const levelName = getCookiesDecrypt("ulnae");
+  const poldaState = Cookies.get("state");
+  const provState = Cookies.get("state-prov");
+
+  const [ticket1, setTicket1] = useState("");
+  const [ticket2, setTicket2] = useState("");
+  const [ticket3, setTicket3] = useState("");
+  const [ticket4, setTicket4] = useState("");
+  const [isInternational, setIsInternational] = useState([false, false, false]);
+
+  const baseUrl = "https://db-mediahub.polri.go.id/";
+  const url = "https://db-mediahub.polri.go.id/trusted/";
+
+  const view1 =
+    levelName == "MABES POLRI"
+      ? isInternational[0]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-top10?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-top10?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-top10-polda?provinsi-polda=${provState}&`;
+
+  const view2 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-polda?provinsi-polda=${poldaState}&`;
+
+  const view3 =
+    levelName == "MABES POLRI"
+      ? isInternational[2]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori-top10?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori-top10?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori-top10-polda?provinsi-polda=${poldaState}&`;
+
+  const view4 =
+    levelName == "MABES POLRI"
+      ? isInternational[3]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori-polda?provinsi-polda=${poldaState}&`;
+
+  const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
+
+  useEffect(() => {
+    async function initState() {
+      const response1 = await generateTicket();
+      setTicket1(response1.data?.data);
+
+      const response2 = await generateTicket();
+      setTicket2(response2.data?.data);
+
+      const response3 = await generateTicket();
+      setTicket3(response3.data?.data);
+
+      const response4 = await generateTicket();
+      setTicket4(response4.data?.data);
+    }
+
+    initState();
+  }, [isInternational]);
+
+  // Hooks
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
+
+  const handleInternational = (index: number, val: boolean) => {
+    const updatedIsInternational = [...isInternational];
+
+    updatedIsInternational[index] = val;
+    setIsInternational(updatedIsInternational);
+  };
+
+  return (
+    <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
+      <p className="text-lg">
+        <b>
+          {isInternational[0]
+            ? "INTERACTION OF THE MOST POPULAR CONTENT AND TITLES"
+            : "INTERAKSI KONTEN DAN JUDUL TERPOPULER"}
+        </b>
+      </p>
+      {levelName === "MABES POLRI" ? (
+        <div className="flex flex-col gap-1">
+          <p>{t("choose_category")}</p>
+          <div className="flex flex-row gap-1 border-2 w-fit">
+            <Button
+              onClick={() => handleInternational(0, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[0]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(0, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[0]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="my-5">
+        {ticket1 == "" ? (
+          <iframe
+            src={`${baseUrl + view1 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket1}/${view1}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+      <p className="text-lg">
+        <b>
+          {isInternational[1]
+            ? "INTERACTION OF CONTENT AND ACCESS TIME"
+            : "INTERAKSI KONTEN DAN WAKTU AKSES"}
+        </b>
+      </p>
+      {levelName === "MABES POLRI" ? (
+        <div className="flex flex-col gap-1">
+          <p>{t("choose_category")}</p>
+          <div className="flex flex-row gap-1 border-2 w-fit">
+            <Button
+              onClick={() => handleInternational(1, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[1]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(1, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[1]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="my-5">
+        {ticket2 == "" ? (
+          <iframe
+            src={`${baseUrl + view2 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket2}/${view2}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+      <p className="text-lg">
+        <b>
+          {isInternational[2]
+            ? "INTERACTION OF THE MOST POPULAR CATEGORIES AND TITLES"
+            : "INTERAKSI KATEGORI DAN JUDUL TERPOPULER"}
+        </b>
+      </p>
+      {levelName === "MABES POLRI" ? (
+        <div className="flex flex-col gap-1">
+          <p>{t("choose_category")}</p>
+          <div className="flex flex-row gap-1 border-2 w-fit">
+            <Button
+              onClick={() => handleInternational(2, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[2]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(2, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[1]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="my-5">
+        {ticket3 == "" ? (
+          <iframe
+            src={`${baseUrl + view3 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket3}/${view3}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+      <p className="text-lg">
+        <b>
+          {isInternational[3]
+            ? "INTERACTIONS OF CATEGORY AND ACCESS TIME"
+            : "INTERAKSI KATEGORI DAN WAKTU AKSES"}
+        </b>
+      </p>
+      {levelName === "MABES POLRI" ? (
+        <div className="flex flex-col gap-1">
+          <p>{t("choose_category")}</p>
+          <div className="flex flex-row gap-1 border-2 w-fit">
+            <Button
+              onClick={() => handleInternational(3, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[2]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(3, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[1]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="my-5">
+        {ticket4 == "" ? (
+          <iframe
+            src={`${baseUrl + view4 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket4}/${view4}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

messages/en.json

@@ -20,7 +20,9 @@
     "invested_amount": "Invested amount",
     "last_28_days": "Last 28 days",
     "last_months": "Last months",
-    "last_year": "Last year"
+    "last_year": "Last year",
+    "choose_category": "Choose Category",
+    "international": "International"
   },
   "BankingDashboard": {
     "widget_title": "Good evening",
@@ -121,7 +123,6 @@
     "ratings": "ratings",
     "view_less": "View Less",
     "add_to_cart": "Add to Cart"
-    
   },
   "Menu": {
     "dashboard": "Dashboard",
@@ -221,14 +222,14 @@
     "input": "Input",
     "textarea": "Textarea",
     "select": "Select",
-    "reactSelect":"React Select",
+    "reactSelect": "React Select",
     "slider": "Slider",
     "switch": "Switch",
     "inputGroup": "Input Group",
-    "inputLayout":"Input Layout",
+    "inputLayout": "Input Layout",
-    "inputMask":"Input Mask",
+    "inputMask": "Input Mask",
-    "inputFile":"File Input",
+    "inputFile": "File Input",
-    "formValidation":"Form Validation",
+    "formValidation": "Form Validation",
     "radio": "Radio",
     "checkbox": "Checkbox",
     "inputOtp": "Input Otp",

messages/in.json

@@ -20,7 +20,9 @@
     "invested_amount": "Invested amount",
     "last_28_days": "Last 28 days",
     "last_months": "Last months",
-    "last_year": "Last year"
+    "last_year": "Last year",
+    "choose_category": "Pilih Kategori",
+    "international": "Internasional"
   },
   "BankingDashboard": {
     "widget_title": "Good evening",
@@ -121,7 +123,6 @@
     "ratings": "ratings",
     "view_less": "View Less",
     "add_to_cart": "Add to Cart"
-    
   },
   "Menu": {
     "dashboard": "Dashboard",
@@ -221,14 +222,14 @@
     "input": "Input",
     "textarea": "Textarea",
     "select": "Select",
-    "reactSelect":"React Select",
+    "reactSelect": "React Select",
     "slider": "Slider",
     "switch": "Switch",
     "inputGroup": "Input Group",
-    "inputLayout":"Input Layout",
+    "inputLayout": "Input Layout",
-    "inputMask":"Input Mask",
+    "inputMask": "Input Mask",
-    "inputFile":"File Input",
+    "inputFile": "File Input",
-    "formValidation":"Form Validation",
+    "formValidation": "Form Validation",
     "radio": "Radio",
     "checkbox": "Checkbox",
     "inputOtp": "Input Otp",

next.config.mjs

@@ -38,10 +38,11 @@ const nextConfig = {
         protocol: "https",
         hostname: "i.pravatar.cc",
       },
+      { protocol: "https", hostname: "netidhub.com" },
       {
         protocol: "https",
         hostname: "netidhub.com",
-      }
+      },
     ],
   },
 };

service/agenda-setting/agenda-setting.ts

@@ -2,7 +2,7 @@ import { getAPIInterceptor, postAPIInterceptor } from "@/config/api";
 
 export async function getAgendaSettingsById(id: any) {
   const url = `agenda-settings?id=${id}`;
-  return getAPIInterceptor({ url });
+  return getAPIInterceptor(url);
 }
 
 export async function getAgendaSettingsList(year = "", month = "", type = "") {
@@ -14,3 +14,52 @@ export async function saveAgendaSettings(data: any) {
   const url = `agenda-settings`;
   return postAPIInterceptor(url, data);
 }
+
+export async function getPlanningDailyByTypeId(
+  page: number,
+  size = 10,
+  parentId: any,
+  date: string,
+  typeId: number
+) {
+  const url = `planning/pagination/daily?enablePage=1&size=${size}&page=${page}&date=${date}&typeId=${typeId}${
+    parentId ? `&parentId=${parentId}` : ""
+  }`;
+  return getAPIInterceptor(url);
+}
+
+export async function getMonthlyPlanList(dates: number, typeId: number) {
+  const url = `planning/monthly/list?date=${dates}&typeId=${typeId}`;
+  return getAPIInterceptor(url);
+}
+
+export async function getWeeklyPlanList(
+  dates: number | undefined,
+  typeId: number,
+  isMonthly = false
+) {
+  const url = `planning/weekly/list?date=${dates}&typeId=${typeId}&isMonthly=${isMonthly}`;
+  return getAPIInterceptor(url);
+}
+
+export async function getWeeklyPlanListByParentId(id: string, typeId: number) {
+  const url = `planning/weekly/list?parentId=${id}&typeId=${typeId}`;
+  return getAPIInterceptor(url);
+}
+
+export async function getPlanningPagination(
+  page: number,
+  title = "",
+  size = 10,
+  typeId: number,
+  time: number,
+  parentId = ""
+) {
+  const url = `planning/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&typeId=${typeId}&time=${time}&parentId=${parentId}`;
+  return getAPIInterceptor(url);
+}
+
+export async function savePlanning(data: any) {
+  const url = "planning";
+  return postAPIInterceptor(url, data);
+}

service/tableau/tableau-service.ts

@@ -0,0 +1,50 @@
+"use client";
+import axios from "axios";
+import Cookies from "js-cookie";
+import qs from "qs";
+
+import { data } from "@/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/data";
+import { url } from "inspector";
+
+const baseURL = "https://netidhub.com/api/";
+const tokenAuth = Cookies.get("access_token")
+  ? Cookies.get("access_token")
+  : null;
+import { getAPIInterceptor } from "@/config/api";
+import axiosInterceptor from "@/config/axiosInterceptor";
+
+export async function postAPIInterceptorTableau(url: string, data?: any) {
+  const response = await axiosInterceptor
+    .post(url, data)
+    .catch((error) => error.response);
+
+  if (response?.status === 401) {
+    Object.keys(Cookies.get()).forEach((cookieName) => {
+      Cookies.remove(cookieName);
+    });
+    window.location.href = "/";
+  } else if (response?.status > 300 && response?.status !== 401) {
+    return {
+      error: true,
+      message: response?.data?.message,
+      data: null,
+    };
+  } else if (response?.data?.success) {
+    return {
+      error: false,
+      message: "success",
+      data: response?.data,
+    };
+  }
+
+  return {
+    error: true,
+    message: response?.data?.message,
+    data: null,
+  };
+}
+
+export async function generateTicket() {
+  const url = "/admin/tableau-ticket";
+  return postAPIInterceptorTableau(url);
+}

utils/globals.tsx

@@ -1,8 +1,6 @@
 import { format } from "date-fns";
 import { id, tr } from "date-fns/locale";
 
-
-
 export const generateLocalizedPath = (href: string, locale: string): string => {
   if (href.startsWith(`/${locale}`)) {
     return href;
@@ -10,7 +8,11 @@ export const generateLocalizedPath = (href: string, locale: string): string => {
   return `/${locale}${href}`;
 };
 
-export function textEllipsis(str: string, maxLength: number, { side = "end", ellipsis = "..." } = {}) {
+export function textEllipsis(
+  str: string,
+  maxLength: number,
+  { side = "end", ellipsis = "..." } = {}
+) {
   if (str !== undefined && str?.length > maxLength) {
     switch (side) {
       case "start":
@@ -21,7 +23,7 @@ export function textEllipsis(str: string, maxLength: number, { side = "end", ell
     }
   }
   return str;
-};
+}
 
 export function formatDateToIndonesian(d: Date) {
   try {
@@ -31,3 +33,33 @@ export function formatDateToIndonesian(d: Date) {
     return "";
   }
 }
+
+export function htmlToString(str: string) {
+  if (str == undefined || str == null) {
+    return "";
+  }
+  return (
+    str
+      .replaceAll(/<style[^>]*>.*<\/style>/gm, "")
+      // Remove script tags and content
+      .replaceAll(/<script[^>]*>.*<\/script>/gm, "")
+      // Replace &nbsp,&ndash
+      .replaceAll("&nbsp;", "")
+      .replaceAll("&ndash;", "-")
+      // Replace quotation mark
+      .replaceAll("&ldquo;", '"')
+      .replaceAll("&rdquo;", '"')
+      // Remove all opening, closing and orphan HTML tags
+      .replaceAll(/<[^>]+>/gm, "")
+      // Remove leading spaces and repeated CR/LF
+      .replaceAll(/([\n\r]+ +)+/gm, "")
+  );
+}
+
+export function getOnlyDate(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+
+  return `${year}-${month}-${day}`;
+}