diff --git a/app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx b/app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx
index ee7f653b..0c2bd4db 100644
--- a/app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx
@@ -1,15 +1,7 @@
-
 import * as React from "react";
-import {
-  ColumnDef,
-} from "@tanstack/react-table";
+import { ColumnDef } from "@tanstack/react-table";
 
-import {
-  Eye,
-  MoreVertical,
-  SquarePen,
-  Trash2,
-} from "lucide-react";
+import { 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",
-    header: "Question",
-    cell: ({ row }) => <span>{row.getValue("question")}</span>,
+    accessorKey: "report",
+    header: "Pelapor",
+    cell: ({ row }) => <span>{row.getValue("report")}</span>,
   },
   {
-    accessorKey: "answer",
-    header: "Answer",
-    cell: ({ row }) => <span>{row.getValue("answer")}</span>,
+    accessorKey: "reportDetail",
+    header: "Detail Laporan",
+    cell: ({ row }) => <span>{row.getValue("reportDetail")}</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>
-      );
-    },
+    accessorKey: "reportAccount",
+    header: "Terlapor",
+    cell: ({ row }) => <span>{row.getValue("reportAccount")}</span>,
   },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("status")}</span>,
+  },
+  // {
+  //   id: "actions",
+  //   accessorKey: "action",
+  //   header: "Actions",
+  //   enableHiding: false,
+  //   cell: ({ row }) => {
+  //     return (
+  //       <DropdownMenu>
+  //         <DropdownMenuTrigger asChild>
+  //           <Button
+  //             size="icon"
+  //             className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+  //           >
+  //             <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;
\ No newline at end of file
+export default columns;
diff --git a/app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx b/app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx
index b8a5f027..f778cbbc 100644
--- a/app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx
+++ b/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,11 +94,11 @@ const FaqTable = () => {
   });
 
   React.useEffect(() => {
-    const pageFromUrl = searchParams?.get('page');
+    const pageFromUrl = searchParams?.get("page");
     if (pageFromUrl) {
       setPage(Number(pageFromUrl));
     }
-  }, [searchParams]); 
+  }, [searchParams]);
 
   React.useEffect(() => {
     fetchData();
@@ -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;
diff --git a/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx b/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx
index 8ba136f7..de1c0ef4 100644
--- a/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx
+++ b/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">
-                <CardTitle>
-                    <div className="flex items-center">
-                        <div className="flex-1 text-xl font-medium text-default-900">
-                        FAQ Data
-                        </div>
-                        <div className="flex-none">
-                        <Button
-                            fullWidth
-                            size="md"
-                        >
-                            <Plus className="w-6 h-6 me-1.5"/>
-                            New FAQ
-                        </Button>
-                        </div>
-                    </div>
-                </CardTitle>
-            </CardHeader>
-            <CardContent className="p-0">
-                <FaqTable />
+          <CardContent className="p-4">
+            <div className="grid md:grid-cols-3   gap-4">
+              <StatisticsBlock
+                total="64"
+                title="Total Pelaporan"
+                className=" border shadow-none"
+              />
+              <StatisticsBlock
+                title="Total Disetujui"
+                total="564"
+                className=" border shadow-none"
+                chartColor="#FB8F65"
+              />
+              <StatisticsBlock
+                title="Pelaporan Pending"
+                total="+5.0%"
+                className=" border shadow-none"
+                chartColor="#2563eb"
+              />
+            </div>
           </CardContent>
         </Card>
+        <ReportTable />
       </div>
     </div>
   );
diff --git a/app/[locale]/(protected)/supervisor/communications/contact/components/columns.tsx b/app/[locale]/(protected)/supervisor/communications/contact/components/columns.tsx
new file mode 100644
index 00000000..ff72d9ff
--- /dev/null
+++ b/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;
diff --git a/app/[locale]/(protected)/supervisor/communications/contact/components/contact-table.tsx b/app/[locale]/(protected)/supervisor/communications/contact/components/contact-table.tsx
new file mode 100644
index 00000000..733cd1ff
--- /dev/null
+++ b/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;
diff --git a/app/[locale]/(protected)/supervisor/communications/contact/create/page.tsx b/app/[locale]/(protected)/supervisor/communications/contact/create/page.tsx
new file mode 100644
index 00000000..ef2beaf4
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/columns.tsx b/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/columns.tsx
new file mode 100644
index 00000000..28aef6a4
--- /dev/null
+++ b/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;
diff --git a/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/contact-table.tsx b/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/contact-table.tsx
new file mode 100644
index 00000000..4961a02f
--- /dev/null
+++ b/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;
diff --git a/app/[locale]/(protected)/supervisor/communications/contact/import-contact/page.tsx b/app/[locale]/(protected)/supervisor/communications/contact/import-contact/page.tsx
new file mode 100644
index 00000000..cfa1b2d7
--- /dev/null
+++ b/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;
diff --git a/app/[locale]/(protected)/supervisor/communications/contact/layout.tsx b/app/[locale]/(protected)/supervisor/communications/contact/layout.tsx
new file mode 100644
index 00000000..5a0ee05c
--- /dev/null
+++ b/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;
diff --git a/app/[locale]/(protected)/supervisor/communications/contact/page.tsx b/app/[locale]/(protected)/supervisor/communications/contact/page.tsx
new file mode 100644
index 00000000..0f18abde
--- /dev/null
+++ b/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;
diff --git a/app/[locale]/(protected)/supervisor/communications/web-chat/page.tsx b/app/[locale]/(protected)/supervisor/communications/web-chat/page.tsx
new file mode 100644
index 00000000..687c615f
--- /dev/null
+++ b/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;
diff --git a/lib/menus.ts b/lib/menus.ts
index d03f9fd7..e999da9a 100644
--- a/lib/menus.ts
+++ b/lib/menus.ts
@@ -2734,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"),
@@ -2748,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"),
@@ -2755,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: [],
+              },
             ],
           },
         ],
diff --git a/messages/en.json b/messages/en.json
index 36d622b5..8f5f769b 100644
--- a/messages/en.json
+++ b/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",
diff --git a/messages/in.json b/messages/in.json
index 36199c24..8cc09c09 100644
--- a/messages/in.json
+++ b/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",
diff --git a/service/communication/communication.ts b/service/communication/communication.ts
index 40f95596..b70ab31a 100644
--- a/service/communication/communication.ts
+++ b/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}`
   );
 }