merge dev-sabda

app/[locale]/(protected)/admin/add-experts/component/column.tsx

@@ -61,6 +61,12 @@ const columns: ColumnDef<any>[] = [
     cell: ({ row }) => <span>{row.getValue("experience")}</span>,
   },
 
+  {
+    accessorKey: "experience",
+    header: "Posisi",
+    cell: ({ row }) => <span>{row.getValue("experience")}</span>,
+  },
+
   {
     id: "actions",
     accessorKey: "action",

app/[locale]/(protected)/admin/add-experts/create/page.tsx

@@ -24,7 +24,13 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useEffect, useState } from "react";
-import { AdministrationLevelList, getListCompetencies, getListExperiences, saveUserInternal, saveUserRolePlacements } from "@/service/management-user/management-user";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListExperiences,
+  saveUserInternal,
+  saveUserRolePlacements,
+} from "@/service/management-user/management-user";
 import { loading } from "@/config/swal";
 
 const FormSchema = z.object({
@@ -58,7 +64,7 @@ export type Placements = {
   index: number;
   roleId?: string;
   userLevelId?: number;
-}
+};
 
 export default function AddExpertForm() {
   const MySwal = withReactContent(Swal);
@@ -67,7 +73,9 @@ export default function AddExpertForm() {
     resolver: zodResolver(FormSchema),
   });
   const [incrementId, setIncrementId] = useState(1);
-  const [placementRows, setPlacementRows] = useState<Placements[]>([{ index: 0, roleId: "", userLevelId: 0 }]);
+  const [placementRows, setPlacementRows] = useState<Placements[]>([
+    { index: 0, roleId: "", userLevelId: 0 },
+  ]);
   const [userCompetencies, setUserCompetencies] = useState<any>();
   const [userExperiences, setUserExperiences] = useState<any>();
   const [userLevels, setUserLevels] = useState<any>();
@@ -80,7 +88,7 @@ export default function AddExpertForm() {
     {
       id: "12",
       name: "Kurator",
-    }
+    },
   ];
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
@@ -113,12 +121,12 @@ export default function AddExpertForm() {
       userCompetencyId: data.skills,
       userExperienceId: data.experiences,
       companyName: data.company,
-    }
+    };
 
     loading();
     const res = await saveUserInternal(dataReq);
     const resData = res?.data?.data;
-    const userProfileId = resData.id;
+    const userProfileId = resData?.id;
 
     var placementArr: any[] = [];
     placementRows.forEach((row: any) => {
@@ -131,15 +139,14 @@ export default function AddExpertForm() {
 
     const dataReq2 = {
       userId: userProfileId,
-      placements: placementArr
+      placements: placementArr,
-    }
+    };
     const res2 = await saveUserRolePlacements(dataReq2);
     const resData2 = res2?.data?.data;
 
     success("/admin/add-experts");
   };
 
-  
   function success(redirect: string): void {
     MySwal.fire({
       title: '<p class="text-green-600 font-bold">Sukses</p>',
@@ -180,7 +187,6 @@ export default function AddExpertForm() {
     setUserLevels(levelsArr);
   }
 
-
   function successSubmit() {
     MySwal.fire({
       title: "Sukses",
@@ -194,7 +200,11 @@ export default function AddExpertForm() {
     });
   }
 
-  const handleSelectionChange = (index: number, type: "roleId" | "userLevelId", value: string) => {
+  const handleSelectionChange = (
+    index: number,
+    type: "roleId" | "userLevelId",
+    value: string
+  ) => {
     setPlacementRows((prevRows) =>
       prevRows.map((row) =>
         row.index === index ? { ...row, [type]: value } : row
@@ -202,7 +212,6 @@ export default function AddExpertForm() {
     );
   };
 
-
   const handleRemoveRow = (index: number) => {
     console.log(index);
     console.log(placementRows);
@@ -212,7 +221,10 @@ export default function AddExpertForm() {
   };
 
   const handleAddRow = () => {
-    setPlacementRows((prevRows: any) => [...prevRows, { index: incrementId, roleId: "", userLevelId: 0 }]);
+    setPlacementRows((prevRows: any) => [
+      ...prevRows,
+      { index: incrementId, roleId: "", userLevelId: 0 },
+    ]);
     setIncrementId((prevId) => prevId + 1);
   };
 
@@ -375,7 +387,11 @@ export default function AddExpertForm() {
             <FormLabel>Penempatan</FormLabel>
             {placementRows?.map((row: any) => (
               <div key={row.index} className="flex items-center gap-2 my-2">
-                <Select onValueChange={(e) => handleSelectionChange(row.index, "roleId", e)} >
+                <Select
+                  onValueChange={(e) =>
+                    handleSelectionChange(row.index, "roleId", e)
+                  }
+                >
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder="Pilih Role" />
@@ -389,7 +405,11 @@ export default function AddExpertForm() {
                     ))}
                   </SelectContent>
                 </Select>
-                <Select onValueChange={(e) => handleSelectionChange(row.index, "userLevelId", e)}>
+                <Select
+                  onValueChange={(e) =>
+                    handleSelectionChange(row.index, "userLevelId", e)
+                  }
+                >
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder="Pilih User Level" />
@@ -415,11 +435,7 @@ export default function AddExpertForm() {
                 )}
               </div>
             ))}
-            <Button
+            <Button type="button" size="md" onClick={() => handleAddRow()}>
-              type="button"
-              size="md"
-              onClick={() => handleAddRow()}
-            >
               Tambah
             </Button>
           </div>

app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx

@@ -1,15 +1,7 @@
-
 import * as React from "react";
-import {
+import { ColumnDef } from "@tanstack/react-table";
-  ColumnDef,
-} from "@tanstack/react-table";
 
-import {
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-  Eye,
-  MoreVertical,
-  SquarePen,
-  Trash2,
-} from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
   DropdownMenu,
@@ -27,50 +19,60 @@ const columns: ColumnDef<any>[] = [
     cell: ({ row }) => <span>{row.getValue("no")}</span>,
   },
   {
-    accessorKey: "question",
+    accessorKey: "report",
-    header: "Question",
+    header: "Pelapor",
-    cell: ({ row }) => <span>{row.getValue("question")}</span>,
+    cell: ({ row }) => <span>{row.getValue("report")}</span>,
   },
   {
-    accessorKey: "answer",
+    accessorKey: "reportDetail",
-    header: "Answer",
+    header: "Detail Laporan",
-    cell: ({ row }) => <span>{row.getValue("answer")}</span>,
+    cell: ({ row }) => <span>{row.getValue("reportDetail")}</span>,
   },
   {
-    id: "actions",
+    accessorKey: "reportAccount",
-    accessorKey: "action",
+    header: "Terlapor",
-    header: "Actions",
+    cell: ({ row }) => <span>{row.getValue("reportAccount")}</span>,
-    enableHiding: false,
-    cell: ({ row }) => {
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              size="icon"
-              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
-            >
-              <span className="sr-only">Open menu</span>
-              <MoreVertical className="h-4 w-4 text-default-800" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="p-0" align="end">
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Eye className="w-4 h-4 me-1.5" />
-              View
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <SquarePen className="w-4 h-4 me-1.5" />
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
-              <Trash2 className="w-4 h-4 me-1.5" />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      );
-    },
   },
+  {
+    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"
+  //           >
+  //             <span className="sr-only">Open menu</span>
+  //             <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">
+  //             <Eye className="w-4 h-4 me-1.5" />
+  //             View
+  //           </DropdownMenuItem>
+  //           <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+  //             <SquarePen className="w-4 h-4 me-1.5" />
+  //             Edit
+  //           </DropdownMenuItem>
+  //           <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
+  //             <Trash2 className="w-4 h-4 me-1.5" />
+  //             Delete
+  //           </DropdownMenuItem>
+  //         </DropdownMenuContent>
+  //       </DropdownMenu>
+  //     );
+  //   },
+  // },
 ];
 
 export default columns;

app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx

@@ -51,7 +51,7 @@ import TablePagination from "@/components/table/table-pagination";
 import { getFaqList } from "@/service/master/faq";
 import columns from "./column";
 
-const FaqTable = () => {
+const ReportTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -94,7 +94,7 @@ const FaqTable = () => {
   });
 
   React.useEffect(() => {
-    const pageFromUrl = searchParams?.get('page');
+    const pageFromUrl = searchParams?.get("page");
     if (pageFromUrl) {
       setPage(Number(pageFromUrl));
     }
@@ -191,9 +191,14 @@ const FaqTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination table={table} totalData={totalData} totalPage={totalPage} visiblePageCount={5} />
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+        visiblePageCount={5}
+      />
     </div>
   );
 };
 
-export default FaqTable;
+export default ReportTable;

app/[locale]/(protected)/supervisor/communications/account-report/page.tsx

@@ -3,35 +3,44 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import FaqTable from "./components/table";
 import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
+import { StatisticsBlock } from "@/components/blocks/statistics-block";
+import ReportTable from "./components/table";
 
 const FaqPage = async () => {
   return (
     <div>
       <SiteBreadcrumb />
       <div className="space-y-4">
+        <div className="flex items-center">
+          <div className="flex-1 text-xl font-medium text-default-900">
+            Pelaporan Akun
+          </div>
+          <div className="flex-none"></div>
+        </div>
         <Card>
-            <CardHeader className="border-b border-solid border-default-200 mb-6">
+          <CardContent className="p-4">
-                <CardTitle>
+            <div className="grid md:grid-cols-3   gap-4">
-                    <div className="flex items-center">
+              <StatisticsBlock
-                        <div className="flex-1 text-xl font-medium text-default-900">
+                total="64"
-                        FAQ Data
+                title="Total Pelaporan"
-                        </div>
+                className=" border shadow-none"
-                        <div className="flex-none">
+              />
-                        <Button
+              <StatisticsBlock
-                            fullWidth
+                title="Total Disetujui"
-                            size="md"
+                total="564"
-                        >
+                className=" border shadow-none"
-                            <Plus className="w-6 h-6 me-1.5"/>
+                chartColor="#FB8F65"
-                            New FAQ
+              />
-                        </Button>
+              <StatisticsBlock
-                        </div>
+                title="Pelaporan Pending"
-                    </div>
+                total="+5.0%"
-                </CardTitle>
+                className=" border shadow-none"
-            </CardHeader>
+                chartColor="#2563eb"
-            <CardContent className="p-0">
+              />
-                <FaqTable />
+            </div>
           </CardContent>
         </Card>
+        <ReportTable />
       </div>
     </div>
   );

app/[locale]/(protected)/supervisor/communications/contact/components/columns.tsx

@@ -0,0 +1,109 @@
+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 { format } from "date-fns";
+import { Link } from "@/components/navigation";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span> {row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "title",
+    header: "Nama",
+    cell: ({ row }) => (
+      <span className="normal-case"> {row.getValue("title")}</span>
+    ),
+  },
+  {
+    accessorKey: "phoneNumber",
+    header: "No.Telp",
+    cell: ({ row }) => {
+      const createdBy = row.original.createdBy; // Akses properti category
+      return (
+        <span className="normal-case">{createdBy?.fullname || "N/A"}</span>
+      );
+    },
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+    cell: ({ row }) => {
+      const sendTo = row.original.sendTo; // Akses properti category
+      return <span className="normal-case">{sendTo?.fullname || "N/A"}</span>;
+    },
+  },
+  {
+    accessorKey: "createdName",
+    header: "Admin",
+    cell: ({ row }) => {
+      const createdAt = row.getValue("createdAt") as
+        | string
+        | number
+        | undefined;
+
+      const formattedDate =
+        createdAt && !isNaN(new Date(createdAt).getTime())
+          ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
+          : "-";
+      return <span className="whitespace-nowrap">{formattedDate}</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"
+  //           >
+  //             <span className="sr-only">Open menu</span>
+  //             <MoreVertical className="h-4 w-4 text-default-800" />
+  //           </Button>
+  //         </DropdownMenuTrigger>
+  //         <DropdownMenuContent className="p-0" align="end">
+  //           <Link
+  //             href={`/supervisor/communications/internal/detail/${row.original.id}`}
+  //           >
+  //             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+  //               <Eye className="w-4 h-4 me-1.5" />
+  //               View
+  //             </DropdownMenuItem>
+  //           </Link>
+  //           <Link
+  //             href={`/supervisor/communications/internal/update/${row.original.id}`}
+  //           >
+  //             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+  //               <SquarePen className="w-4 h-4 me-1.5" />
+  //               Edit
+  //             </DropdownMenuItem>
+  //           </Link>
+  //           <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
+  //             <Trash2 className="w-4 h-4 me-1.5" />
+  //             Delete
+  //           </DropdownMenuItem>
+  //         </DropdownMenuContent>
+  //       </DropdownMenu>
+  //     );
+  //   },
+  // },
+];
+
+export default columns;

app/[locale]/(protected)/supervisor/communications/contact/components/contact-table.tsx

@@ -0,0 +1,299 @@
+"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,
+  UploadIcon,
+} from "lucide-react";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { paginationBlog } from "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./columns";
+import {
+  listDataAudio,
+  listDataImage,
+  listDataVideo,
+} from "@/service/content/content";
+import { listTicketingInternal } from "@/service/communication/communication";
+import { Link } from "@/components/navigation";
+import { Card } from "nextra-theme-docs";
+import { CardContent } from "@/components/ui/card";
+
+const ContactTable = () => {
+  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 [showData, setShowData] = React.useState("10");
+
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const [search, setSearch] = React.useState<string>("");
+  const userId = getCookiesDecrypt("uie");
+  const userLevelId = getCookiesDecrypt("ulie");
+  const [activeCategory, setActiveCategory] = React.useState<string | null>(
+    null
+  );
+
+  const roleId = getCookiesDecrypt("urie");
+
+  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();
+  //   setPagination({
+  //     pageIndex: 0,
+  //     pageSize: Number(showData),
+  //   });
+  // }, [page, showData]);
+  React.useEffect(() => {
+    if (activeCategory) {
+      fetchData();
+      setPagination({
+        pageIndex: 0,
+        pageSize: Number(showData),
+      });
+    }
+  }, [page, showData, activeCategory]);
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  async function doneTyping() {
+    fetchData();
+  }
+
+  // async function fetchData() {
+  //   try {
+  //     const res = await listTicketingInternal(
+  //       page - 1,
+  //       Number(showData),
+  //       search
+  //     );
+  //     const data = res?.data?.data;
+  //     const contentData = data?.content;
+  //     contentData.forEach((item: any, index: number) => {
+  //       item.no = (page - 1) * Number(showData) + index + 1;
+  //     });
+
+  //     console.log("contentData : ", contentData);
+
+  //     setDataTable(contentData);
+  //     setTotalData(data?.totalElements);
+  //     setTotalPage(data?.totalPages);
+  //   } catch (error) {
+  //     console.error("Error fetching tasks:", error);
+  //   }
+  // }
+
+  async function fetchData() {
+    try {
+      const res = await listTicketingInternal(
+        page - 1,
+        Number(showData),
+        search,
+        activeCategory
+      );
+      const data = res?.data?.data;
+      const contentData = data?.content || [];
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * Number(showData) + index + 1;
+      });
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  return (
+    <div className="w-full overflow-x-auto ">
+      <div className="flex justify-between items-center">
+        <div className="mt-3 flex flex-row items-center gap-2">
+          <InputGroup merged>
+            <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+              <Search className=" h-4 w-4 dark:text-white" />
+            </InputGroupText>
+            <Input
+              type="text"
+              placeholder="Search Judul..."
+              className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onKeyUp={handleKeyUp}
+            />
+          </InputGroup>
+        </div>
+      </div>
+      <div className="flex flex-row items-center justify-around my-3">
+        {["Polda", "Satker Humas", "Satker Mabes"].map((category, index) => (
+          <CardContent
+            key={index}
+            className="shadow-lg border p-2 cursor-pointer"
+            onClick={() => setActiveCategory(category)}
+          >
+            <div className="flex flex-col gap-3 text-center py-5 w-[250px]">
+              <p className="text-3xl font-bold">
+                {index === 0 ? 34 : index === 1 ? 1 : 43}
+              </p>
+              <p>{category}</p>
+              <p className="text-blue-700">Lihat Kontak</p>
+            </div>
+          </CardContent>
+        ))}
+      </div>
+      {activeCategory && (
+        <div>
+          <Table className="overflow-hidden mt-3">
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id} className="bg-default-200">
+                  {headerGroup.headers.map((header) => (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                    className="h-[75px]"
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+          <TablePagination
+            table={table}
+            totalData={totalData}
+            totalPage={totalPage}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ContactTable;

app/[locale]/(protected)/supervisor/communications/contact/create/page.tsx

@@ -0,0 +1,359 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useEffect, useState } from "react";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListExperiences,
+  saveUserInternal,
+  saveUserRolePlacements,
+} from "@/service/management-user/management-user";
+import { loading } from "@/config/swal";
+import { Label } from "@/components/ui/label";
+
+const FormSchema = z.object({
+  name: z.string({
+    required_error: "Required",
+  }),
+  username: z.string({
+    required_error: "Required",
+  }),
+  password: z.string({
+    required_error: "Required",
+  }),
+  phoneNumber: z.string({
+    required_error: "Required",
+  }),
+  email: z.string({
+    required_error: "Required",
+  }),
+  skills: z.string({
+    required_error: "Required",
+  }),
+  experiences: z.string({
+    required_error: "Required",
+  }),
+  company: z.string({
+    required_error: "Required",
+  }),
+});
+
+export type Placements = {
+  index: number;
+  roleId?: string;
+  userLevelId?: number;
+};
+
+export default function AddContactForm() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+  const [incrementId, setIncrementId] = useState(1);
+  const [placementRows, setPlacementRows] = useState<Placements[]>([
+    { index: 0, roleId: "", userLevelId: 0 },
+  ]);
+  const [userCompetencies, setUserCompetencies] = useState<any>();
+  const [userExperiences, setUserExperiences] = useState<any>();
+  const [userLevels, setUserLevels] = useState<any>();
+
+  const roleSelection = [
+    {
+      id: "11",
+      name: "Polda",
+    },
+    {
+      id: "12",
+      name: "Satker Humas",
+    },
+    {
+      id: "13",
+      name: "Satker Mabes",
+    },
+  ];
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    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 dataReq = {
+      firstName: data.name,
+      username: data.username,
+      email: data.email,
+      password: data.password,
+      adress: "",
+      roleId: "EXP-ID",
+      phoneNumber: data.phoneNumber,
+      userCompetencyId: data.skills,
+      userExperienceId: data.experiences,
+      companyName: data.company,
+    };
+
+    loading();
+    const res = await saveUserInternal(dataReq);
+    const resData = res?.data?.data;
+    const userProfileId = resData?.id;
+
+    var placementArr: any[] = [];
+    placementRows.forEach((row: any) => {
+      placementArr.push({
+        roleId: Number(row.roleId),
+        userLevelId: Number(row.userLevelId),
+        userProfileId: userProfileId,
+      });
+    });
+
+    const dataReq2 = {
+      userId: userProfileId,
+      placements: placementArr,
+    };
+    const res2 = await saveUserRolePlacements(dataReq2);
+    const resData2 = res2?.data?.data;
+
+    success("/admin/add-experts");
+  };
+
+  function success(redirect: string): void {
+    MySwal.fire({
+      title: '<p class="text-green-600 font-bold">Sukses</p>',
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: '<span class="text-white">OK</span>',
+      allowOutsideClick: false,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push(redirect);
+      }
+    });
+  }
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/add-experts");
+      }
+    });
+  }
+
+  const handleSelectionChange = (
+    index: number,
+    type: "roleId" | "userLevelId",
+    value: string
+  ) => {
+    setPlacementRows((prevRows) =>
+      prevRows.map((row) =>
+        row.index === index ? { ...row, [type]: value } : row
+      )
+    );
+  };
+
+  const handleRemoveRow = (index: number) => {
+    console.log(index);
+    console.log(placementRows);
+    const newPlacements = placementRows.filter((row) => row.index != index);
+    console.log(newPlacements);
+    setPlacementRows(newPlacements);
+  };
+
+  const handleAddRow = () => {
+    setPlacementRows((prevRows: any) => [
+      ...prevRows,
+      { index: incrementId, roleId: "", userLevelId: 0 },
+    ]);
+    setIncrementId((prevId) => prevId + 1);
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white rounded-sm p-4"
+        >
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <Input
+                  type="email"
+                  value={field.value}
+                  placeholder="Masukkan Nama Lengkap"
+                  onChange={field.onChange}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama Lengkap</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan Nama Lengkap"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>No. HP</FormLabel>
+                <Input
+                  type="number"
+                  value={field.value}
+                  placeholder="Masukkan Nama Lengkap"
+                  onChange={field.onChange}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <div className="mt-2 mb-0 pb-0">
+            <FormLabel>
+              Kategori Akun <span className="text-red-500">*</span>
+            </FormLabel>
+            <Select
+            // onValueChange={(e) =>
+            //   handleSelectionChange(row.index, "roleId", e)
+            // }
+            >
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Pilih Role" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {roleSelection?.map((item: any) => (
+                  <SelectItem key={item.id} value={String(item.id)}>
+                    {item.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username Admin</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan Nama Lengkap"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username Approver</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan Nama Lengkap"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username Kontributor</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan Nama Lengkap"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end gap-2 mt-4 pt-4">
+            <Link href="/supervisor/communications/contact">
+              <Button
+                size="md"
+                type="button"
+                variant="outline"
+                color="destructive"
+                className="text-xs"
+              >
+                Cancel
+              </Button>
+            </Link>
+            <Button size="md" type="submit" color="primary" className="text-xs">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/columns.tsx

@@ -0,0 +1,142 @@
+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 { format } from "date-fns";
+import { Link } from "@/components/navigation";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span> {row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "title",
+    header: "Nama",
+    cell: ({ row }) => (
+      <span className="normal-case"> {row.getValue("title")}</span>
+    ),
+  },
+  {
+    accessorKey: "phoneNumber",
+    header: "No.Telp",
+    cell: ({ row }) => {
+      const createdBy = row.original.createdBy; // Akses properti category
+      return (
+        <span className="normal-case">{createdBy?.fullname || "N/A"}</span>
+      );
+    },
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+    cell: ({ row }) => {
+      const sendTo = row.original.sendTo; // Akses properti category
+      return <span className="normal-case">{sendTo?.fullname || "N/A"}</span>;
+    },
+  },
+  {
+    accessorKey: "createdName",
+    header: "Admin",
+    cell: ({ row }) => {
+      const createdAt = row.getValue("createdAt") as
+        | string
+        | number
+        | undefined;
+
+      const formattedDate =
+        createdAt && !isNaN(new Date(createdAt).getTime())
+          ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
+          : "-";
+      return <span className="whitespace-nowrap">{formattedDate}</span>;
+    },
+  },
+
+  {
+    accessorKey: "approver",
+    header: "Approver",
+    cell: ({ row }) => {
+      const createdAt = row.getValue("createdAt") as
+        | string
+        | number
+        | undefined;
+
+      const formattedDate =
+        createdAt && !isNaN(new Date(createdAt).getTime())
+          ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
+          : "-";
+      return <span className="whitespace-nowrap">{formattedDate}</span>;
+    },
+  },
+  {
+    accessorKey: "contributor",
+    header: "Contributor",
+    cell: ({ row }) => {
+      const createdAt = row.getValue("createdAt") as
+        | string
+        | number
+        | undefined;
+
+      const formattedDate =
+        createdAt && !isNaN(new Date(createdAt).getTime())
+          ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
+          : "-";
+      return <span className="whitespace-nowrap">{formattedDate}</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"
+  //           >
+  //             <span className="sr-only">Open menu</span>
+  //             <MoreVertical className="h-4 w-4 text-default-800" />
+  //           </Button>
+  //         </DropdownMenuTrigger>
+  //         <DropdownMenuContent className="p-0" align="end">
+  //           <Link
+  //             href={`/supervisor/communications/internal/detail/${row.original.id}`}
+  //           >
+  //             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+  //               <Eye className="w-4 h-4 me-1.5" />
+  //               View
+  //             </DropdownMenuItem>
+  //           </Link>
+  //           <Link
+  //             href={`/supervisor/communications/internal/update/${row.original.id}`}
+  //           >
+  //             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+  //               <SquarePen className="w-4 h-4 me-1.5" />
+  //               Edit
+  //             </DropdownMenuItem>
+  //           </Link>
+  //           <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
+  //             <Trash2 className="w-4 h-4 me-1.5" />
+  //             Delete
+  //           </DropdownMenuItem>
+  //         </DropdownMenuContent>
+  //       </DropdownMenu>
+  //     );
+  //   },
+  // },
+];
+
+export default columns;

app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/contact-table.tsx

@@ -0,0 +1,293 @@
+"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,
+  UploadIcon,
+} from "lucide-react";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { paginationBlog } from "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./columns";
+import {
+  listDataAudio,
+  listDataImage,
+  listDataVideo,
+} from "@/service/content/content";
+import { listTicketingInternal } from "@/service/communication/communication";
+import { Link } from "@/components/navigation";
+import { Card } from "nextra-theme-docs";
+import { CardContent } from "@/components/ui/card";
+
+const ImportTable = () => {
+  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 [showData, setShowData] = React.useState("10");
+
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const [search, setSearch] = React.useState<string>("");
+  const userId = getCookiesDecrypt("uie");
+  const userLevelId = getCookiesDecrypt("ulie");
+  const [activeCategory, setActiveCategory] = React.useState<string | null>(
+    null
+  );
+
+  const [selectedFile, setSelectedFile] = React.useState(null);
+
+  const handleFileChange = (event: any) => {
+    const file = event.target.files[0];
+    setSelectedFile(file);
+  };
+
+  const roleId = getCookiesDecrypt("urie");
+
+  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();
+  //   setPagination({
+  //     pageIndex: 0,
+  //     pageSize: Number(showData),
+  //   });
+  // }, [page, showData]);
+  React.useEffect(() => {
+    if (activeCategory) {
+      fetchData();
+      setPagination({
+        pageIndex: 0,
+        pageSize: Number(showData),
+      });
+    }
+  }, [page, showData, activeCategory]);
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  async function doneTyping() {
+    fetchData();
+  }
+
+  // async function fetchData() {
+  //   try {
+  //     const res = await listTicketingInternal(
+  //       page - 1,
+  //       Number(showData),
+  //       search
+  //     );
+  //     const data = res?.data?.data;
+  //     const contentData = data?.content;
+  //     contentData.forEach((item: any, index: number) => {
+  //       item.no = (page - 1) * Number(showData) + index + 1;
+  //     });
+
+  //     console.log("contentData : ", contentData);
+
+  //     setDataTable(contentData);
+  //     setTotalData(data?.totalElements);
+  //     setTotalPage(data?.totalPages);
+  //   } catch (error) {
+  //     console.error("Error fetching tasks:", error);
+  //   }
+  // }
+
+  async function fetchData() {
+    try {
+      const res = await listTicketingInternal(
+        page - 1,
+        Number(showData),
+        search,
+        activeCategory
+      );
+      const data = res?.data?.data;
+      const contentData = data?.content || [];
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * Number(showData) + index + 1;
+      });
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  return (
+    <div className="w-full overflow-x-auto ">
+      <div className="flex">
+        <input
+          type="file"
+          id="fileInput"
+          onChange={handleFileChange}
+          className="p-2 border rounded-md"
+        />
+        {/* {selectedFile && (
+          <p className="text-sm text-gray-600">File: {selectedFile.name}</p>
+        )} */}
+      </div>
+      <div className="my-3">
+        <Button type="button" variant={"outline"} color="success">
+          Import Data
+        </Button>
+      </div>
+
+      <div>
+        <Table className="overflow-hidden mt-3">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="bg-default-200">
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  className="h-[75px]"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+        <TablePagination
+          table={table}
+          totalData={totalData}
+          totalPage={totalPage}
+        />
+      </div>
+      <div className="my-3">
+        <Link href="/supervisor/communications/contact">
+          <Button variant={"outline"} color="primary">
+            Kembali
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default ImportTable;

app/[locale]/(protected)/supervisor/communications/contact/import-contact/page.tsx

@@ -0,0 +1,24 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Link } from "@/i18n/routing";
+import { PlusIcon, User } from "lucide-react";
+import ContactTable from "../components/contact-table";
+import ImportTable from "./components/contact-table";
+
+const ImportPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <div className="w-full overflow-x-auto p-4 rounded-sm space-y-3">
+          <div className="flex justify-between py-3 border rounded-md px-3">
+            <p className="text-lg font-semibold">Kontak</p>
+          </div>
+          <ImportTable />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImportPage;

app/[locale]/(protected)/supervisor/communications/contact/layout.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Dashboard Media Hub",
+  description: "Dashboard Media Hub.",
+};
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;

app/[locale]/(protected)/supervisor/communications/contact/page.tsx

@@ -0,0 +1,42 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Link } from "@/i18n/routing";
+import { PlusIcon, User } from "lucide-react";
+import InternalSpvTable from "../internal/components/internal-table";
+import ContactTable from "./components/contact-table";
+
+const ContactPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <div className="w-full overflow-x-auto p-4 rounded-sm space-y-3">
+          <div className="flex justify-between py-3 border rounded-md px-3">
+            <p className="text-lg font-semibold">Kontak</p>
+          </div>
+          <div className="flex justify-between py-3">
+            <p className="text-lg pl-3 font-semibold">Semua Kontak</p>
+            <div>
+              <Link href="/supervisor/communications/contact/import-contact">
+                <Button color="success" size="md">
+                  <PlusIcon />
+                  Import
+                </Button>
+              </Link>{" "}
+              <Link href="/supervisor/communications/contact/create">
+                <Button color="primary" size="md">
+                  <User />
+                  Tambah Kontak
+                </Button>
+              </Link>
+            </div>
+          </div>
+
+          <ContactTable />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactPage;

app/[locale]/(protected)/supervisor/communications/web-chat/page.tsx

@@ -0,0 +1,197 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Search } from "lucide-react";
+
+const messages = [
+  { name: "Miles Esther", initials: "ME", time: "06.00" },
+  { name: "Flores Juanita", initials: "FJ", time: "06.00" },
+  { name: "Henry Arthur", initials: "HA", time: "06.00" },
+  { name: "Polres Jakarta Selatan", initials: "PJ", time: "06.00" },
+];
+
+const WebChatPage = () => {
+  const [selectedChat, setSelectedChat] = useState<any>(null);
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        {!selectedChat ? (
+          // Tampilan daftar pesan
+          <>
+            <div className="flex justify-between py-3 border rounded-md px-3">
+              <p className="text-lg font-semibold">Web Chat</p>
+            </div>
+            <div className="flex flex-row justify-start rounded-lg ">
+              <div className="flex flex-row items-center">
+                <Input placeholder="Cari..." className=" w-[200px] mr-3" />
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <Button variant="default" size="md" color="primary">
+                      Add
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent className="max-w-[350px] bg-black text-white rounded-lg p-4">
+                    <DialogHeader>
+                      <DialogTitle className="text-lg font-bold text-white">
+                        New Chat
+                      </DialogTitle>
+                    </DialogHeader>
+                    <div className="relative">
+                      <Search
+                        className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                        size={16}
+                      />
+                      <Input
+                        placeholder="Search here..."
+                        className="w-full pl-10  text-white placeholder-gray-400 border-none rounded-md focus:ring-0"
+                      />
+                    </div>
+                    <div className="mt-4">
+                      <p className="text-sm font-semibold">+ Group Chat</p>
+                    </div>
+                    <div className="mt-4">
+                      <p className="text-sm text-gray-400">
+                        Frequently contacted
+                      </p>
+                      <div className="mt-2 space-y-2">
+                        <div className="flex items-center gap-3">
+                          <div className="w-10 h-10 flex items-center justify-center bg-white text-black font-bold rounded-full">
+                            ME
+                          </div>
+                          <span className="text-sm font-medium">
+                            Miles Esther
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-3">
+                          <div className="w-10 h-10 flex items-center justify-center bg-white text-black font-bold rounded-full">
+                            HA
+                          </div>
+                          <span className="text-sm font-medium">
+                            Henry Arthur
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+              </div>
+            </div>
+            <Card>
+              <CardContent className="p-4 bg-gray-100 rounded-lg">
+                <div className="space-y-4">
+                  {messages.map((msg: any, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between p-4 bg-white rounded-lg shadow cursor-pointer hover:bg-gray-200"
+                      onClick={() => setSelectedChat(msg)}
+                    >
+                      <div className="flex items-center gap-4">
+                        <div className="w-12 h-12 flex items-center justify-center bg-black text-white rounded-full text-lg font-bold">
+                          {msg.initials}
+                        </div>
+                        <div>
+                          <p className="font-bold text-lg">{msg.name}</p>
+                          <p className="text-gray-600 text-sm">
+                            ✅ Hallo, untuk patroli hari ini sudah bisa di akses
+                            di daily tasks, silahkan anda periksa
+                          </p>
+                        </div>
+                      </div>
+                      <p className="text-gray-500 text-sm">{msg.time}</p>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </>
+        ) : (
+          // Tampilan chat
+          <div>
+            <div className="flex justify-between py-3 border rounded-md px-3 my-3">
+              <p className="text-lg font-semibold">Web Chat</p>
+            </div>
+            <Card className="h-[100vh]">
+              <CardContent className="p-0 flex flex-col h-full">
+                {/* Header Chat */}
+                <div className="flex items-center bg-black text-white p-4">
+                  <button
+                    className="mr-4 text-white text-xl"
+                    onClick={() => setSelectedChat(null)}
+                  >
+                    ←
+                  </button>
+                  <div className="flex items-center gap-4">
+                    <div className="w-10 h-10 flex items-center justify-center bg-white text-black rounded-full text-lg font-bold">
+                      {selectedChat.initials}
+                    </div>
+                    <p className="font-bold text-lg">{selectedChat.name}</p>
+                  </div>
+                </div>
+
+                {/* Body Chat */}
+                <div className="flex-1 bg-gray-300 p-4 flex flex-col justify-end">
+                  <p className="text-center text-gray-500 mb-4">Today</p>
+
+                  {/* Pesan masuk */}
+                  <div className="flex items-start mb-4">
+                    <div className="bg-white p-3 rounded-lg shadow max-w-xs">
+                      Hallo, untuk patroli hari ini sudah bisa di akses di daily
+                      tasks, silahkan anda periksa
+                    </div>
+                    <p className="text-gray-500 text-xs ml-2">06.00</p>
+                  </div>
+
+                  {/* Pesan keluar */}
+                  <div className="flex items-end justify-end mb-4">
+                    <p className="text-gray-500 text-xs mr-2">06.00</p>
+                    <div className="bg-blue-500 text-white p-3 rounded-lg shadow max-w-xs">
+                      Hallo, bisakah mengirimkan rute patroli untuk hari ini?
+                    </div>
+                  </div>
+
+                  {/* Pesan keluar lainnya */}
+                  <div className="flex items-end justify-end mb-4">
+                    <p className="text-gray-500 text-xs mr-2">06.00</p>
+                    <div className="bg-blue-500 text-white p-3 rounded-lg shadow max-w-xs">
+                      Terima kasih banyak
+                    </div>
+                  </div>
+                </div>
+
+                {/* Input Chat */}
+                <div className="flex items-center p-4 bg-black">
+                  <Button className="bg-white text-black p-2 rounded-full mr-2">
+                    +
+                  </Button>
+                  <Input
+                    placeholder="Tulis pesan..."
+                    className="flex-1 rounded-lg"
+                  />
+                  <Button className="ml-2 bg-white text-black p-2 rounded-full">
+                    🎤
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default WebChatPage;

app/[locale]/auth/page.tsx

@@ -25,11 +25,23 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
           <div className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 relative z-[1] bg-default-50">
             <div className="max-w-[520px] pt-16 ps-20 ">
               <Link href="/" className="mb-6 inline-block">
-                <Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" />
+                <Image
+                  src="/assets/mediahub-logo.png"
+                  alt=""
+                  width={250}
+                  height={250}
+                  className="mb-10 w-full h-full"
+                />
               </Link>
             </div>
             <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
-              <Image src="/assets/vector-login.svg" alt="" width={300} height={300} className="mb-10 w-full h-full" />
+              <Image
+                src="/assets/vector-login.svg"
+                alt=""
+                width={300}
+                height={300}
+                className="mb-10 w-full h-full"
+              />
             </div>
           </div>
           <div className="flex-1 relative">
@@ -40,12 +52,12 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
                     <Logo />
                   </Link>
                 </div> */}
-                <div className="text-left 2xl:mb-10 mb-4 mt-10">
+                {/* <div className="text-left 2xl:mb-10 mb-4 mt-10">
                   <h4 className="font-semibold text-3xl text-left">{t("logInPlease")}</h4>
                   <div className="text-default-500 text-base">
                     {t("acc")} <span className="text-red-500">{t("reg")}</span>
                   </div>
-                </div>
+                </div> */}
                 <LoginForm />
                 {/* <div className="relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
                   <div className="absolute inline-block bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm text-default-500 font-normal">

components/form/content/spit-convert-form.tsx

@@ -813,7 +813,7 @@ export default function FormConvertSPIT() {
                   <Label className="text-xl">Penempatan file</Label>
                 </div>
                 {files?.length > 1 && (
-                  <div className="flex flex-wrap gap-2 mt-2">
+                  <div className="flex flex-wrap gap-2 mt-2 justify-center">
                     <div className="flex items-center space-x-2">
                       <Checkbox
                         id="all-content"
@@ -879,20 +879,12 @@ export default function FormConvertSPIT() {
                   >
                     <img
                       src={file.contentFile}
-                      className="w-[150px] rounded-md"
+                      className="w-[180px] rounded-md"
                     />
-                    <div className="flex flex-col gap-2 w-full">
+                    <div className="flex flex-col gap-2 w-full pl-4">
                       <div className="flex justify-between text-sm">
                         {file.fileName}
-                        {/* <a
-                                               onClick={() =>
-                                                 handleDeleteFileApproval(file.id)
-                                               }
-                                             >
-                                               <Icon icon="humbleicons:times" color="red" />
-                                             </a> */}
                       </div>
-
                       <div className="flex flex-wrap gap-2">
                         <div className="flex items-center space-x-2">
                           <Checkbox

components/landing-page/hero.tsx

@@ -5,9 +5,27 @@ import "swiper/css/navigation";
 import { getHeroData } from "@/service/landing/landing";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
 import { Skeleton } from "../ui/skeleton";
 import Image from "next/image";
+import { TabsList, TabsTrigger, TabsContent } from "@radix-ui/react-tabs";
+import { Input } from "postcss";
+import { Button } from "react-day-picker";
+import { Label } from "recharts";
+import {
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "../ui/card";
+import { Tabs } from "../ui/tabs";
 
 const Hero: React.FC = () => {
   const router = useRouter();
@@ -67,7 +85,10 @@ const Hero: React.FC = () => {
   <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
 </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined"
+      ? Buffer.from(str).toString("base64")
+      : window.btoa(str);
 
   return (
     <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 py-4 mx-auto w-auto mt-6">
@@ -91,18 +112,30 @@ const Hero: React.FC = () => {
                     alt="gambar-utama"
                     width={1920}
                     height={1080}
-                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                      shimmer(700, 475)
+                    )}`}
                     className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
                   />
 
                   <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
-                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
+                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
+                      {list?.categoryName}
+                    </span>
                     <Link href={`${locale}/image/detail/${list?.slug}`}>
-                      <h2 className="text-lg text-slate-500 dark:text-white font-bold mt-2">{list?.title}</h2>
+                      <h2 className="text-lg text-slate-500 dark:text-white font-bold mt-2">
+                        {list?.title}
+                      </h2>
                     </Link>
                     <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1 mt-1">
-                      {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
+                      {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                      {list?.timezone ? list?.timezone : "WIB"}|{" "}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1.2em"
+                        height="1.2em"
+                        viewBox="0 0 24 24"
+                      >
                         <path
                           fill="currentColor"
                           d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
@@ -165,16 +198,35 @@ const Hero: React.FC = () => {
             {heroData?.map((item: any) => (
               <li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
                 <div className="flex-shrink-0 w-24 rounded-lg">
-                  <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
+                  <Image
+                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                      shimmer(700, 475)
+                    )}`}
+                    width={720}
+                    height={480}
+                    src={item?.thumbnailLink}
+                    alt={item?.title}
+                    className="w-full h-[73px] object-cover rounded-lg"
+                  />
                 </div>
                 <div className="w-[280px] lg:w-auto">
-                  <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
+                  <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">
+                    {item?.categoryName}
+                  </span>
                   <Link href={`${locale}/image/detail/${item?.slug}`}>
-                    <h3 className="text-base font-bold mt-2  h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{item?.title}</h3>
+                    <h3 className="text-base font-bold mt-2  h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                      {item?.title}
+                    </h3>
                   </Link>
                   <p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
-                    {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}
+                    {formatDateToIndonesian(new Date(item?.createdAt))}{" "}
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                    {item?.timezone ? item?.timezone : "WIB"} |{" "}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="1.2em"
+                      height="1.2em"
+                      viewBox="0 0 24 24"
+                    >
                       <path
                         fill="currentColor"
                         d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"

components/landing-page/news-tickers.tsx

@@ -5,13 +5,11 @@ import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
 import { useEffect, useState } from "react";
 import { Icon } from "../ui/icon";
 import { useTranslations } from "next-intl";
-
 export default function NewsTicker() {
   const [article, setArticle] = useState<any>([]);
   const [currentNewsIndex, setCurrentNewsIndex] = useState<any>(0);
   const [animate, setAnimate] = useState(false);
   const t = useTranslations("LandingPage");
-
   useEffect(() => {
     async function getArticle() {
       const response = await getHeroData();
@@ -19,7 +17,6 @@ export default function NewsTicker() {
     }
     getArticle();
   }, []);
-
   const triggerAnimation = (newIndex: number) => {
     setAnimate(true);
     setTimeout(() => {
@@ -27,52 +24,78 @@ export default function NewsTicker() {
       setAnimate(false);
     }, 300);
   };
-
   const handlePrev = () => {
     const newIndex = (currentNewsIndex - 1 + article?.length) % article?.length;
     triggerAnimation(newIndex);
   };
-
   const handleNext = () => {
     const newIndex = (currentNewsIndex + 1) % article?.length;
     triggerAnimation(newIndex);
   };
-
   useEffect(() => {
     const interval = setInterval(() => {
       triggerAnimation((currentNewsIndex + 1) % article?.length);
     }, 7000);
-
     return () => clearInterval(interval);
   }, [article?.length]);
-
   return (
     <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50 border-[#bb3523] border-t-2">
+      {" "}
       <div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[10%]">
-        <span className="mr-2"></span> {t("breakingNews")}
+        {" "}
-        <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
+        <span className="mr-2"></span> {t("breakingNews")}{" "}
-      </div>
+        <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>{" "}
-      <div className={`w-full  px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
+      </div>{" "}
+      <div
+        className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
+          animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
+        }`}
+      >
+        {" "}
         {article?.length > 0 && (
           <>
-            <Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="hidden lg:block">
+            {" "}
-              <p className="text-sm lg:text-base">{article[currentNewsIndex]?.title}</p>
+            <Link
-            </Link>
+              href={`news/detail/${article[currentNewsIndex]?.id}`}
-            <Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="lg:hidden">
+              className="hidden lg:block"
-              <p className="text-sm lg:text-base">{textEllipsis(article[currentNewsIndex]?.title, 28)}</p>
+            >
-            </Link>
+              {" "}
-            <p className="text-xs">{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}</p>
+              <p className="text-sm lg:text-base">
+                {article[currentNewsIndex]?.title}
+              </p>{" "}
+            </Link>{" "}
+            <Link
+              href={`news/detail/${article[currentNewsIndex]?.id}`}
+              className="lg:hidden"
+            >
+              {" "}
+              <p className="text-sm lg:text-base">
+                {textEllipsis(article[currentNewsIndex]?.title, 28)}
+              </p>{" "}
+            </Link>{" "}
+            <p className="text-xs">
+              {formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}
+            </p>{" "}
           </>
-        )}
+        )}{" "}
-      </div>
+      </div>{" "}
       <div className="flex flex-row text-white h-full gap-[1px]">
-        <a className="bg-[#bb3523] h-full flex items-center" onClick={() => handlePrev()}>
+        {" "}
-          <Icon icon="ic:twotone-arrow-left" fontSize={30} />
+        <a
-        </a>
+          className="bg-[#bb3523] h-full flex items-center"
-        <a className="bg-[#bb3523] h-full flex items-center" onClick={() => handleNext()}>
+          onClick={() => handlePrev()}
-          <Icon icon="ic:twotone-arrow-right" fontSize={30} />
+        >
-        </a>
+          {" "}
-      </div>
+          <Icon icon="ic:twotone-arrow-left" fontSize={30} />{" "}
+        </a>{" "}
+        <a
+          className="bg-[#bb3523] h-full flex items-center"
+          onClick={() => handleNext()}
+        >
+          {" "}
+          <Icon icon="ic:twotone-arrow-right" fontSize={30} />{" "}
+        </a>{" "}
+      </div>{" "}
     </div>
   );
 }

components/partials/auth/login-form.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
@@ -11,12 +11,19 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { cn, setCookiesEncrypt } from "@/lib/utils";
 import { Loader2 } from "lucide-react";
-import { getProfile, login } from "@/service/auth";
+import { getProfile, login, requestOTP } from "@/service/auth";
 import { toast } from "sonner";
 import { useRouter } from "@/components/navigation";
 import { warning } from "@/lib/swal";
 import { Link } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { error, loading } from "@/config/swal";
 
 // Schema validasi menggunakan zod
 const schema = z.object({
@@ -38,6 +45,24 @@ const LoginForm = () => {
   const [passwordType, setPasswordType] = React.useState("password");
   const t = useTranslations("LandingPage");
 
+  const [isOtpStep, setIsOtpStep] = useState(false);
+  const [otpValue, setOtpValue] = useState("");
+  const [userIdentity] = useState();
+  const [email, setEmail] = useState();
+  const [category, setCategory] = useState("5");
+
+  const handleSignInClick = () => {
+    handleSendOTP();
+    setIsOtpStep(true);
+  };
+
+  const [otp1, setOtp1] = useState();
+  const [otp2, setOtp2] = useState();
+  const [otp3, setOtp3] = useState();
+  const [otp4, setOtp4] = useState();
+  const [otp5, setOtp5] = useState();
+  const [otp6, setOtp6] = useState();
+
   const togglePasswordType = () => {
     setPasswordType((prevType) =>
       prevType === "password" ? "text" : "password"
@@ -53,6 +78,40 @@ const LoginForm = () => {
     mode: "all",
   });
 
+  const handleTypeOTP = (event: any) => {
+    const { form } = event.target;
+    const index = [...form].indexOf(event.target);
+    form.elements[index + 1].focus();
+    event.preventDefault();
+  };
+
+  // const handleNextStep = () => {
+  //   setIsOtpStep(true);
+  // };
+
+  const handleSendOTP = async () => {
+    console.log(userIdentity, email);
+
+    console.log("UMUM");
+    if (email != "") {
+      const data = {
+        memberIdentity: null,
+        email: "",
+        category,
+      };
+
+      // loading();
+      const response = await requestOTP(data);
+
+      if (response.error) {
+        error(response.message);
+        return false;
+      }
+
+      close();
+    }
+  };
+
   // Fungsi submit form
   const onSubmit: SubmitHandler<LoginFormValues> = async (data) => {
     try {
@@ -202,77 +261,129 @@ const LoginForm = () => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="mt-5 2xl:mt-7 space-y-4">
-      <div className="space-y-2">
+      {!isOtpStep && (
-        <Label htmlFor="username" className="font-medium text-default-600">
+        <>
-          Username
+          <div className="text-left 2xl:mb-10 mb-4 mt-10">
-        </Label>
+            <h4 className="font-semibold text-3xl text-left">
-        <Input
+              {t("logInPlease")}
-          size="lg"
+            </h4>
-          disabled={isPending}
+            <div className="text-default-500 text-base">
-          {...register("username")}
+              {t("acc")} <span className="text-red-500">{t("reg")}</span>
-          id="username"
+            </div>
-          type="username"
-          className={cn("", {
-            "border-destructive": errors.username,
-          })}
-        />
-        {errors.username?.message && (
-          <div className="text-destructive mt-2 text-sm">
-            {errors.username.message}
           </div>
-        )}
+          <div className="space-y-2">
-      </div>
+            <Label htmlFor="username" className="font-medium text-default-600">
-
+              Username
-      <div className="mt-3.5 space-y-2">
+            </Label>
-        <Label htmlFor="password" className="mb-2 font-medium text-default-600">
+            <Input
-          {t("password")}
+              size="lg"
-        </Label>
+              disabled={isPending}
-        <div className="relative">
+              {...register("username")}
-          <Input
+              id="username"
-            size="lg"
+              type="text"
-            disabled={isPending}
+              className={cn("", {
-            {...register("password")}
+                "border-destructive": errors.username,
-            id="password"
+              })}
-            type={passwordType}
+            />
-            className="peer"
+            {errors.username?.message && (
-          />
+              <div className="text-destructive mt-2 text-sm">
-          <div
+                {errors.username.message}
-            className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer"
+              </div>
-            onClick={togglePasswordType}
-          >
-            {passwordType === "password" ? (
-              <Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" />
-            ) : (
-              <Icon
-                icon="heroicons:eye-slash"
-                className="w-5 h-5 text-default-400"
-              />
             )}
           </div>
-        </div>
-        {errors.password?.message && (
-          <div className="text-destructive mt-2 text-sm">
-            {errors.password.message}
-          </div>
-        )}
-      </div>
 
-      <div className="flex justify-between">
+          <div className="mt-3.5 space-y-2">
-        <div className="flex gap-2 items-center">
+            <Label htmlFor="password" className="font-medium text-default-600">
-          <Checkbox id="checkbox" defaultChecked />
+              {t("password")}
-          <Label htmlFor="checkbox">{t("rememberMe")}</Label>
+            </Label>
-        </div>
+            <div className="relative">
-        <Link
+              <Input
-          href="/auth/forgot-password"
+                size="lg"
-          className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
+                disabled={isPending}
-        >
+                {...register("password")}
-          {t("forgotPass")}
+                id="password"
-        </Link>
+                type="password"
-      </div>
+                className="peer"
-      <Button fullWidth disabled={isPending}>
+              />
-        {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            </div>
-        {isPending ? "Loading..." : "Sign In"}
+            {errors.password?.message && (
-      </Button>
+              <div className="text-destructive mt-2 text-sm">
+                {errors.password.message}
+              </div>
+            )}
+          </div>
+          <div className="flex justify-between">
+            <div className="flex gap-2 items-center">
+              <Checkbox id="checkbox" defaultChecked />
+              <Label htmlFor="checkbox">{t("rememberMe")}</Label>
+            </div>
+            <Link
+              href="/auth/forgot-password"
+              className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
+            >
+              {t("forgotPass")}
+            </Link>
+          </div>
+          <Button fullWidth onClick={handleSignInClick}>
+            Selanjutnya
+          </Button>
+        </>
+      )}
+
+      {isOtpStep && (
+        <>
+          <div className="text-left 2xl:mb-10 mb-4 mt-10">
+            <h4 className="font-semibold text-3xl text-left">
+              {t("pleaseEnterOtp")}
+            </h4>
+          </div>
+          <div className="flex justify-center mb-6">
+            <InputOTP maxLength={6} onChange={(e) => setOtpValue(e)}>
+              <InputOTPGroup>
+                <InputOTPSlot
+                  index={0}
+                  onChange={(e: any) => setOtp1(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+                <InputOTPSlot
+                  index={1}
+                  onChange={(e: any) => setOtp2(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+              </InputOTPGroup>
+              <InputOTPSeparator />
+              <InputOTPGroup>
+                <InputOTPSlot
+                  index={2}
+                  onChange={(e: any) => setOtp3(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+                <InputOTPSlot
+                  index={3}
+                  onChange={(e: any) => setOtp4(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+              </InputOTPGroup>
+              <InputOTPSeparator />
+              <InputOTPGroup>
+                <InputOTPSlot
+                  index={4}
+                  onChange={(e: any) => setOtp5(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+                <InputOTPSlot
+                  index={5}
+                  onChange={(e: any) => setOtp6(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+              </InputOTPGroup>
+            </InputOTP>
+          </div>
+          <Button fullWidth className="bg-red-500">
+            Sign in
+          </Button>
+        </>
+      )}
     </form>
   );
 };

lib/menus.ts

@@ -2312,6 +2312,70 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
+        {
+          groupLabel: "",
+          id: "settings",
+          menus: [
+            {
+              id: "settings",
+              href: "/admin/settings",
+              label: t("settings"),
+              active: pathname.includes("/settinng"),
+              icon: "material-symbols:settings",
+              submenus: [
+                {
+                  href: "/admin/settings/category",
+                  label: t("category"),
+                  active: pathname === "/admin/settings/category",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/tag",
+                  label: "Tag",
+                  active: pathname === "/admin/settings/tag",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/banner",
+                  label: "Banner",
+                  active: pathname === "/admin/settings/banner",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/feedback",
+                  label: "Feedback",
+                  active: pathname === "/admin/settings/feedback",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/faq",
+                  label: "FAQ",
+                  active: pathname === "/admin/settings/faq",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "https://nat-mediahub.polri.go.id/",
+                  label: "Mediahub 2022",
+                  active: pathname === "/admin/settings/mediahub-2022",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/privacy",
+                  label: t("privacy"),
+                  active: pathname === "/admin/settings/privacy",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
       ];
     } else if (Number(userParentLevelId) == 761) {
       menusSelected = [
@@ -2521,6 +2585,70 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
+        {
+          groupLabel: "",
+          id: "settings",
+          menus: [
+            {
+              id: "settings",
+              href: "/admin/settings",
+              label: t("settings"),
+              active: pathname.includes("/settinng"),
+              icon: "material-symbols:settings",
+              submenus: [
+                {
+                  href: "/admin/settings/category",
+                  label: t("category"),
+                  active: pathname === "/admin/settings/category",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/tag",
+                  label: "Tag",
+                  active: pathname === "/admin/settings/tag",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/banner",
+                  label: "Banner",
+                  active: pathname === "/admin/settings/banner",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/feedback",
+                  label: "Feedback",
+                  active: pathname === "/admin/settings/feedback",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/faq",
+                  label: "FAQ",
+                  active: pathname === "/admin/settings/faq",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "https://nat-mediahub.polri.go.id/",
+                  label: "Mediahub 2022",
+                  active: pathname === "/admin/settings/mediahub-2022",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/privacy",
+                  label: t("privacy"),
+                  active: pathname === "/admin/settings/privacy",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
       ];
     }
   } else if (Number(roleId) == 9) {
@@ -2606,6 +2734,13 @@ export function getMenuList(pathname: string, t: any): Group[] {
                 icon: "ri:chat-private-line",
                 children: [],
               },
+              {
+                href: "/supervisor/communications/contact",
+                label: t("contact"),
+                active: pathname.includes("/communications/contact"),
+                icon: "ri:share-forward-2-fill",
+                children: [],
+              },
               {
                 href: "/supervisor/communications/forward",
                 label: t("forward"),
@@ -2620,6 +2755,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
                 icon: "clarity:employee-group-line",
                 children: [],
               },
+
               {
                 href: "/supervisor/communications/account-report",
                 label: t("account-report"),
@@ -2627,6 +2763,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
                 icon: "uiw:user-delete",
                 children: [],
               },
+              {
+                href: "/supervisor/communications/ptt",
+                label: t("ptt"),
+                active: pathname.includes("/communications/ptt"),
+                icon: "clarity:employee-group-line",
+                children: [],
+              },
+              {
+                href: "/supervisor/communications/web-chat",
+                label: t("web-chat"),
+                active: pathname.includes("/communications/web-chat"),
+                icon: "clarity:employee-group-line",
+                children: [],
+              },
             ],
           },
         ],

messages/en.json

@@ -334,7 +334,10 @@
     "tags": "Tags",
     "add-tags": "Add Tags",
     "add": "Add",
-    "privacy": "Privacy Policy"
+    "privacy": "Privacy Policy",
+    "contact": "Contact",
+    "ptt": "PTT",
+    "web-chat": "Web-Chat"
   },
   "Changelog": {
     "version": "Version's",
@@ -420,6 +423,7 @@
     "audioSize": "Audio Size Options",
     "relatedPosts": "Related Posts",
     "logInPlease": "Please Log In to Your Account First",
+    "pleaseEnterOtp": "Please enter the OTP code first",
     "acc": "Don't have an account yet?",
     "reg": "Register",
     "password": "Password",

messages/in.json

@@ -335,7 +335,10 @@
     "tags": "Tag",
     "add-tags": "Tambah Tag",
     "add": "Tambah",
-    "privacy": "Kebijakan Privacy"
+    "privacy": "Kebijakan Privacy",
+    "contact": "kontak",
+    "ptt": "PTT",
+    "web-chat": "Web-Chat"
   },
   "Changelog": {
     "version": "Version's",
@@ -421,6 +424,7 @@
     "audioSize": "Opsi Ukuran Audio",
     "relatedPosts": "Post Terkait",
     "logInPlease": "Silahkan masuk ke akun Anda terlebih dahulu",
+    "pleaseEnterOtp": "Silahkan masukan Kode OTP terlebih dahulu",
     "acc": "Belum Punya Akun?",
     "reg": "Daftar",
     "password": "Kata Sandi",

service/communication/communication.ts

@@ -8,10 +8,11 @@ import { title } from "process";
 export async function listTicketingInternal(
   page: number,
   size: any,
-  title: string = ""
+  title: string = "",
+  category: any = "",
 ) {
   return await httpGetInterceptor(
-    `ticketing/internal/pagination?enablePage=1&size=${size}&page=${page}&title=${title}`
+    `ticketing/internal/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&category=${category}`
   );
 }