feat:supervisor menu

2025-01-10 19:52:04 +07:00 · 2025-01-10 19:52:04 +07:00 · 4c97305f6e
parent 474ec7a313
commit 4c97305f6e
23 changed files with 1096 additions and 413 deletions
--- a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
+++ b/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
@ -64,7 +64,7 @@ import {
  listTicketingInternal,
 } from "@/service/communication/communication";

-const EscalationTable = () => {
+const CollaborationTable = () => {
  const router = useRouter();
  const searchParams = useSearchParams();

@ -254,4 +254,4 @@ const EscalationTable = () => {
  );
 };

-export default EscalationTable;
+export default CollaborationTable;
--- a/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
+++ b/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
@ -62,7 +62,7 @@ import {
 import { listTicketingInternal } from "@/service/communication/communication";
 import { Link } from "@/components/navigation";

-const TableAudio = () => {
+const InternalTable = () => {
  const router = useRouter();
  const searchParams = useSearchParams();

@ -260,4 +260,4 @@ const TableAudio = () => {
  );
 };

-export default TableAudio;
+export default InternalTable;
--- a/app/[locale]/(protected)/shared/communication/page.tsx
+++ b/app/[locale]/(protected)/shared/communication/page.tsx
@ -1,7 +1,6 @@
 "use client";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import InternalTable from "./internal/components/internal-table";
 import SiteBreadcrumb from "@/components/site-breadcrumb";

 import CollaborationTable from "./collaboration/components/collabroation-table";
@ -10,6 +9,7 @@ import { useState } from "react";
 import { Link, useRouter } from "@/i18n/routing";
 import { PlusIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import InternalTable from "./internal/components/internal-table";

 const CommunicationPage = () => {
  const [tab, setTab] = useState("Komunikasi");
--- a/app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx
@ -36,22 +36,35 @@ import {
  TrendingDown,
  TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils";
+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 { getFaqList } from "@/service/master/faq";
-import columns from "./column";
+import columns from "./columns";
+import {
+  listDataAudio,
+  listDataImage,
+  listDataVideo,
+} from "@/service/content/content";
+import {
+  getTicketingCollaborationPagination,
+  getTicketingEscalationPagination,
+  listTicketingInternal,
+} from "@/service/communication/communication";

-const FaqTable = () => {
+const CollaborationSpvTable = () => {
  const router = useRouter();
  const searchParams = useSearchParams();

@ -64,13 +77,17 @@ const FaqTable = () => {
  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: 10,
+    pageSize: Number(showData),
  });
  const [page, setPage] = React.useState(1);
  const [totalPage, setTotalPage] = React.useState(1);
-  const [limit, setLimit] = React.useState(10);
+  const [search, setSearch] = React.useState<string>("");
+
+  const roleId = getCookiesDecrypt("urie");

  const table = useReactTable({
    data: dataTable,
@ -94,62 +111,99 @@ const FaqTable = () => {
  });

  React.useEffect(() => {
-    const pageFromUrl = searchParams?.get('page');
+    const pageFromUrl = searchParams?.get("page");
    if (pageFromUrl) {
      setPage(Number(pageFromUrl));
    }
-  }, [searchParams]); 
+  }, [searchParams]);

  React.useEffect(() => {
    fetchData();
-  }, [page, limit]);
+  }, [page, showData]);
+
+  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 getFaqList();
-      const contentData = res?.data?.data;
+      const res = await getTicketingCollaborationPagination(
+        page - 1,
+        showData,
+        search
+      );
+      const data = res?.data?.data;
+      const contentData = data?.content;
      contentData.forEach((item: any, index: number) => {
-        item.no = (page - 1) * limit + index + 1;
+        item.no = (page - 1) * Number(showData) + index + 1;
      });
-
      console.log("contentData : ", contentData);
-
      setDataTable(contentData);
-      setTotalData(contentData?.totalElements || contentData?.length);
-      setTotalPage(contentData?.totalPages || 1);
+      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 px-6">
-        <div>
+      <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..."
+              placeholder="Search pertanyaan..."
              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 className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
-        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="md" variant="outline">
+              1 - {showData} Data
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56 text-sm">
+            <DropdownMenuRadioGroup
+              value={showData}
+              onValueChange={setShowData}
+            >
+              <DropdownMenuRadioItem value="10">
+                1 - 10 Data
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="20">
+                1 - 20 Data
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="25">
+                1 - 25 Data
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="50">
+                1 - 50 Data
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
      </div>
+
      <Table className="overflow-hidden mt-3">
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
@ -191,9 +245,13 @@ const FaqTable = () => {
          )}
        </TableBody>
      </Table>
-      <TablePagination table={table} totalData={totalData} totalPage={totalPage} visiblePageCount={5} />
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
    </div>
  );
 };

-export default FaqTable;
+export default CollaborationSpvTable;
--- a/app/[locale]/(protected)/supervisor/communications/collaboration/components/column.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/collaboration/components/column.tsx
@ -1,76 +0,0 @@
-
-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";
-
-const columns: ColumnDef<any>[] = [
-  {
-    accessorKey: "no",
-    header: "No",
-    cell: ({ row }) => <span>{row.getValue("no")}</span>,
-  },
-  {
-    accessorKey: "question",
-    header: "Question",
-    cell: ({ row }) => <span>{row.getValue("question")}</span>,
-  },
-  {
-    accessorKey: "answer",
-    header: "Answer",
-    cell: ({ row }) => <span>{row.getValue("answer")}</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;
--- a/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx
@ -0,0 +1,114 @@
+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, useRouter } from "@/i18n/routing";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "Nos",
+    cell: ({ row }) => <span> {row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "title",
+    header: "Pertanyaan",
+    cell: ({ row }) => (
+      <span className="normal-case"> {row.getValue("title")}</span>
+    ),
+  },
+  {
+    accessorKey: "commentFromUserName",
+    header: "CreateBy",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("commentFromUserName")}</span>
+    ),
+  },
+  {
+    accessorKey: "Type",
+    header: "Channel",
+    cell: ({ row }) => {
+      const type = row.original.type;
+      return <span className="normal-case">{type?.name || "N/A"}</span>;
+    },
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Waktu",
+    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: "isActive",
+    header: "Status",
+    cell: ({ row }) => {
+      const isActive = row.getValue("isActive") as boolean; // Ambil nilai isActive
+      const status = isActive ? "Open" : "Closed"; // Tentukan teks berdasarkan isActive
+      const statusStyles = isActive
+        ? "bg-green-100 text-green-600" // Gaya untuk "Open"
+        : "bg-red-100 text-red-600"; // Gaya untuk "Closed"
+
+      return (
+        <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>
+      );
+    },
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const router = useRouter();
+      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
+              onClick={() =>
+                router.push(
+                  `/supervisor/communications/forward/detail/${row.original.id}`
+                )
+              }
+              className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none items-center"
+            >
+              <Eye className="w-4 h-4 me-1.5" />
+              Detail
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;
--- a/app/[locale]/(protected)/supervisor/communications/collaboration/create/page.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/collaboration/create/page.tsx
@ -0,0 +1,15 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormCollaboration from "@/components/form/communication/collaboration-form";
+
+const CollaborationCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormCollaboration />
+      </div>
+    </div>
+  );
+};
+
+export default CollaborationCreatePage;
--- a/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx
@ -0,0 +1,143 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import Select, { MultiValue } from "react-select";
+
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useEffect, useState } from "react";
+import { Separator } from "@/components/ui/separator";
+import {
+  getCuratorUser,
+  saveCollaborationTeams,
+} from "@/service/communication/communication";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, loading } from "@/config/swal";
+import { useParams } from "next/navigation";
+import { useToast } from "@/components/ui/use-toast";
+import { stringify } from "querystring";
+
+const assigneeOptions = [
+  { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
+  { value: "sovo", label: "Sovo Haldar", image: "/images/avatar/av-2.svg" },
+  {
+    value: "rakibul",
+    label: "Rakibul Islam",
+    image: "/images/avatar/av-3.svg",
+  },
+  { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
+];
+export default function UsersCard(props: { team: any; fetchData: () => void }) {
+  const params = useParams();
+  const id = params?.id;
+  const [openSearch, setOpenSearch] = useState(false);
+  const [selectedUsers, setSelectedUsers] = useState<any>([]);
+  const [allUser, setAllUser] = useState([]);
+  const MySwal = withReactContent(Swal);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    async function getUser() {
+      const res = await getCuratorUser();
+
+      if (res?.data !== null) {
+        const rawUser = res?.data?.data?.content;
+        const optionArr: any = [];
+
+        rawUser.map((option: any) => {
+          optionArr.push({
+            id: option.id,
+            label: option.username,
+            value: option.id,
+          });
+        });
+
+        setAllUser(optionArr);
+      }
+    }
+    getUser();
+  }, []);
+
+  const inviteHandle = () => {
+    MySwal.fire({
+      title: "Undang Pengguna Ke Kolom Diskusi?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        inviteUser();
+      }
+    });
+  };
+
+  async function inviteUser() {
+    const userId: any = [];
+
+    selectedUsers?.map((user: any) => {
+      userId.push(user.id);
+    });
+    loading();
+    const res = await saveCollaborationTeams(String(id), userId);
+
+    if (res?.error) {
+      toast({ title: stringify(res?.message) });
+      return false;
+    }
+    close();
+
+    toast({ title: "Berhasil menambahkan user" });
+    props.fetchData();
+  }
+
+  return (
+    <div className="flex flex-col bg-white p-4 rounded-t-xl w-[30%]">
+      <div className="flex justify-between items-center mb-3">
+        <div className="flex flex-row gap-3 items-center">
+          <p>Kolaborator</p>
+          <p className="p-2 rounded-full bg-slate-300 w-5 h-5 flex justify-center items-center">
+            {props?.team?.length}
+          </p>
+        </div>
+        <a onClick={() => setOpenSearch(!openSearch)}>
+          <Icon icon="material-symbols:search" width={24} />
+        </a>
+      </div>
+      {openSearch && (
+        <div className="flex flex-col">
+          <Select
+            className="react-select my-2 transition-shadow"
+            classNamePrefix="select"
+            options={allUser}
+            isMulti
+            onChange={(selectedOption) => setSelectedUsers(selectedOption)}
+            placeholder="Select users"
+          />
+          {selectedUsers?.length > 0 && (
+            <div className="flex justify-end">
+              <Button color="primary" size="sm" onClick={inviteHandle}>
+                Invie
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+      <div className="mt-3 flex flex-col gap-2">
+        {props?.team?.map((list: any) => (
+          <div key={list.id} className="flex flex-col">
+            <div className="flex flex-row gap-2 items-center">
+              <Icon icon="qlementine-icons:user-16" width={36} />
+              <div className="flex flex-col">
+                <p className="text-sm">{list?.fullname}</p>
+                <p className="text-xs">{list?.username}</p>
+              </div>
+            </div>
+            <Separator className="my-2" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/page.tsx
@ -0,0 +1,202 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import { close, loading } from "@/config/swal";
+import {
+  deleteCollabDiscussion,
+  getCollabDiscussion,
+  getCuratorUser,
+  getTicketCollaborationTeams,
+  saveCollabDiscussion,
+} from "@/service/communication/communication";
+import {
+  getLocaleTimestamp,
+  htmlToString,
+  textEllipsis,
+} from "@/utils/globals";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useParams } from "next/navigation";
+import { stringify } from "querystring";
+import { useEffect, useState } from "react";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import UsersCard from "./component/users-card";
+
+export default function CollaborationPage() {
+  const params = useParams();
+  const id = params?.id;
+  const { toast } = useToast();
+
+  const [detailTickets, setDetailTickets] = useState<any>();
+  const [teams, setTeams] = useState([]);
+  const [listDiscussion, setListDiscussion] = useState([]);
+  const [replyValue, setReplyValue] = useState("");
+  const MySwal = withReactContent(Swal);
+
+  useEffect(() => {
+    async function getCollabTeam() {
+      if (id != undefined) {
+        const res = await getTicketCollaborationTeams(String(id));
+
+        if (res?.data !== null) {
+          console.log("response teams:", res);
+
+          setDetailTickets(res?.data?.data?.tickets);
+          setTeams(res?.data?.data?.userTeam);
+          console.log("userteam", res?.data?.data?.userTeam);
+        }
+      }
+    }
+
+    initState();
+    getCollabTeam();
+  }, [id]);
+
+  async function initState() {
+    if (id != undefined) {
+      loading();
+      const responseGet = await getCollabDiscussion(String(id));
+      console.log("get res data", responseGet?.data?.data);
+      close();
+      setListDiscussion(responseGet?.data?.data);
+    }
+  }
+
+  async function deleteDataSuggestion(dataId: string | number) {
+    loading();
+    const response = await deleteCollabDiscussion(dataId);
+    console.log(response);
+    toast({
+      title: "Sukses hapus",
+    });
+    setReplyValue("");
+    close();
+    initState();
+  }
+
+  async function sendDiscussionParent() {
+    if (replyValue?.length > 0) {
+      loading();
+      const data = {
+        ticketId: id,
+        message: replyValue,
+        parentId: null,
+      };
+
+      const response = await saveCollabDiscussion(data);
+      if (response?.error) {
+        toast({
+          title: stringify(response?.message),
+        });
+        return false;
+      }
+      toast({
+        title: "Sukses Komen",
+      });
+      setReplyValue("");
+
+      close();
+      initState();
+    }
+  }
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-row gap-4 pt-6">
+        <div className="flex flex-col gap-4 w-[70%]">
+          <div className="bg-white flex flex-col rounded-t-xl">
+            <div className="flex flex-row gap-2 bg-slate-300 rounded-t-xl p-4 items-center">
+              <Icon icon="qlementine-icons:user-16" width={36} />
+              <div className="flex flex-col gap-1">
+                <div className="flex flex-row">
+                  <p className="text-sm">
+                    <span className="font-semibold">
+                      {detailTickets?.commentFromUserName}
+                    </span>{" "}
+                    mengirimkan komentar untuk
+                  </p>
+                  <a
+                    href={detailTickets?.feed?.permalink_url}
+                    className="font-weight-bold"
+                  >
+                    {textEllipsis(detailTickets?.feed?.message, 25)}
+                  </a>
+                </div>
+                <p className="text-xs">
+                  {" "}
+                  {`${new Date(detailTickets?.createdAt).getDate()}-${
+                    new Date(detailTickets?.createdAt).getMonth() + 1
+                  }-${new Date(
+                    detailTickets?.createdAt
+                  ).getFullYear()} ${new Date(
+                    detailTickets?.createdAt
+                  ).getHours()}:${new Date(
+                    detailTickets?.createdAt
+                  ).getMinutes()}`}
+                </p>
+              </div>
+            </div>
+            <div className="p-4"> {htmlToString(detailTickets?.message)}</div>
+          </div>
+          <div className="bg-white rounded-b-xl flex flex-col p-4">
+            <p className="font-bold text-sm">{listDiscussion?.length} Respon</p>
+            <Separator className="my-2" />
+
+            <div className="flex flex-col gap-2 max-h-[360px]">
+              {listDiscussion?.length > 1 ? (
+                listDiscussion?.map((data: any) => (
+                  <div key={data?.id} className="flex flex-col ">
+                    <div className="flex flex-row gap-2 items-center">
+                      <Icon icon="qlementine-icons:user-16" width={36} />
+                      <div className="flex flex-col w-full">
+                        <div className="flex justify-between items-center">
+                          <p className="text-sm font-semibold">
+                            {data?.messageFrom?.fullname}
+                          </p>
+                          <p className="text-xs">
+                            {getLocaleTimestamp(new Date(data?.createdAt))}
+                          </p>
+                        </div>
+                        <div className="flex justify-between items-center">
+                          <p className="text-sm">{data?.message}</p>
+                          <a
+                            onClick={() => deleteDataSuggestion(data?.id)}
+                            className="text-destructive cursor-pointer text-xs"
+                          >
+                            Hapus
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                    <Separator className="my-2" />
+                  </div>
+                ))
+              ) : (
+                <p>Belum Ada Tanggapan</p>
+              )}
+            </div>
+            <Textarea
+              value={replyValue}
+              onChange={(e) => setReplyValue(e.target.value)}
+            />
+            <div className="flex justify-end py-3">
+              <Button
+                className="w-fit"
+                color="primary"
+                size="sm"
+                type="button"
+                onClick={sendDiscussionParent}
+              >
+                Kirim
+              </Button>
+            </div>
+          </div>
+        </div>{" "}
+        <UsersCard team={teams} fetchData={() => initState()} />
+      </div>
+    </div>
+  );
+}
--- a/app/[locale]/(protected)/supervisor/communications/collaboration/page.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/collaboration/page.tsx
@ -1,37 +1,25 @@
 import SiteBreadcrumb from "@/components/site-breadcrumb";
-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 { Plus, PlusIcon } from "lucide-react";
+import { Link } from "@/i18n/routing";
+import CollaborationSpvTable from "../collaboration/components/collabroation-table";

 const FaqPage = async () => {
  return (
    <div>
      <SiteBreadcrumb />
-      <div className="space-y-4">
-        <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>
-        </Card>
+      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+        <div className="flex justify-between py-3">
+          <p className="text-lg">Kolaborasi</p>
+
+          <Link href="/supervisor/communications/collaboration/create">
+            <Button color="primary" size="md">
+              <PlusIcon />
+              Kolaborasi baru
+            </Button>
+          </Link>
+        </div>
+        <CollaborationSpvTable />
      </div>
    </div>
  );
--- a/app/[locale]/(protected)/supervisor/communications/forward/components/column.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/forward/components/column.tsx
@ -1,76 +0,0 @@
-
-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";
-
-const columns: ColumnDef<any>[] = [
-  {
-    accessorKey: "no",
-    header: "No",
-    cell: ({ row }) => <span>{row.getValue("no")}</span>,
-  },
-  {
-    accessorKey: "question",
-    header: "Question",
-    cell: ({ row }) => <span>{row.getValue("question")}</span>,
-  },
-  {
-    accessorKey: "answer",
-    header: "Answer",
-    cell: ({ row }) => <span>{row.getValue("answer")}</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;
--- a/app/[locale]/(protected)/supervisor/communications/forward/components/columns.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/forward/components/columns.tsx
@ -0,0 +1,110 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { 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: "Pertanyaan",
+    cell: ({ row }) => (
+      <span className="normal-case"> {row.getValue("title")}</span>
+    ),
+  },
+  {
+    accessorKey: "commentFromUserName",
+    header: "Penerima",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("commentFromUserName")}</span>
+    ),
+  },
+  {
+    accessorKey: "type",
+    header: "Penerima",
+    cell: ({ row }) => {
+      const type = row.original.type; // Akses properti category
+      return <span className="normal-case">{type?.name || "N/A"}</span>;
+    },
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Waktu",
+    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: "isActive",
+    header: "Status",
+    cell: ({ row }) => {
+      const isActive = row.getValue("isActive") as boolean; // Ambil nilai isActive
+      const status = isActive ? "Open" : "Closed"; // Tentukan teks berdasarkan isActive
+      const statusStyles = isActive
+        ? "bg-green-100 text-green-600" // Gaya untuk "Open"
+        : "bg-red-100 text-red-600"; // Gaya untuk "Closed"
+
+      return (
+        <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>
+      );
+    },
+  },
+
+  {
+    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/forward/detail/${row.original.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <Eye className="w-4 h-4 me-1.5" />
+                View
+              </DropdownMenuItem>
+            </Link>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;
--- a/app/[locale]/(protected)/supervisor/communications/forward/components/escalation-table.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/forward/components/escalation-table.tsx
@ -36,22 +36,34 @@ import {
  TrendingDown,
  TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils";
+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 { getFaqList } from "@/service/master/faq";
-import columns from "./column";
+import columns from "./columns";
+import {
+  listDataAudio,
+  listDataImage,
+  listDataVideo,
+} from "@/service/content/content";
+import {
+  getTicketingEscalationPagination,
+  listTicketingInternal,
+} from "@/service/communication/communication";

-const FaqTable = () => {
+const EscalationTable = () => {
  const router = useRouter();
  const searchParams = useSearchParams();

@ -64,13 +76,17 @@ const FaqTable = () => {
  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: 10,
+    pageSize: Number(showData),
  });
  const [page, setPage] = React.useState(1);
  const [totalPage, setTotalPage] = React.useState(1);
-  const [limit, setLimit] = React.useState(10);
+  const [search, setSearch] = React.useState<string>("");
+
+  const roleId = getCookiesDecrypt("urie");

  const table = useReactTable({
    data: dataTable,
@ -94,38 +110,66 @@ const FaqTable = () => {
  });

  React.useEffect(() => {
-    const pageFromUrl = searchParams?.get('page');
+    const pageFromUrl = searchParams?.get("page");
    if (pageFromUrl) {
      setPage(Number(pageFromUrl));
    }
-  }, [searchParams]); 
+  }, [searchParams]);

  React.useEffect(() => {
    fetchData();
-  }, [page, limit]);
+    setPagination({
+      pageIndex: 0,
+      pageSize: Number(showData),
+    });
+  }, [page, showData]);
+
+  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 getFaqList();
-      const contentData = res?.data?.data;
+      const res = await getTicketingEscalationPagination(
+        page - 1,
+        Number(showData),
+        search
+      );
+      const data = res?.data?.data;
+      const contentData = data?.content;
      contentData.forEach((item: any, index: number) => {
-        item.no = (page - 1) * limit + index + 1;
+        item.no = (page - 1) * Number(showData) + index + 1;
      });
-
      console.log("contentData : ", contentData);
-
      setDataTable(contentData);
-      setTotalData(contentData?.totalElements || contentData?.length);
-      setTotalPage(contentData?.totalPages || 1);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
    } catch (error) {
      console.error("Error fetching tasks:", error);
    }
  }

+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value); // Perbarui state search
+    table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+  };
+
  return (
    <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-6">
-        <div>
+      <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" />
@ -134,21 +178,39 @@ const FaqTable = () => {
              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 className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
-        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="md" variant="outline">
+              1 - {showData} Data
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56 text-sm">
+            <DropdownMenuRadioGroup
+              value={showData}
+              onValueChange={setShowData}
+            >
+              <DropdownMenuRadioItem value="10">
+                1 - 10 Data
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="20">
+                1 - 20 Data
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="25">
+                1 - 25 Data
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="50">
+                1 - 50 Data
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
      </div>
      <Table className="overflow-hidden mt-3">
        <TableHeader>
@ -191,9 +253,13 @@ const FaqTable = () => {
          )}
        </TableBody>
      </Table>
-      <TablePagination table={table} totalData={totalData} totalPage={totalPage} visiblePageCount={5} />
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
    </div>
  );
 };

-export default FaqTable;
+export default EscalationTable;
--- a/app/[locale]/(protected)/supervisor/communications/forward/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/forward/detail/[id]/page.tsx
@ -0,0 +1,19 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormTaskDetail from "@/components/form/task/task-detail-form";
+import FormDetailInternal from "@/components/form/communication/internal-detail-form";
+import FormDetailEscalation from "@/components/form/communication/escalation-detail-form";
+
+const EscalationDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormDetailEscalation />
+      </div>
+    </div>
+  );
+};
+
+export default EscalationDetailPage;
--- a/app/[locale]/(protected)/supervisor/communications/forward/page.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/forward/page.tsx
@ -1,37 +1,18 @@
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 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 EscalationTable from "./components/escalation-table";

 const FaqPage = async () => {
  return (
    <div>
      <SiteBreadcrumb />
-      <div className="space-y-4">
-        <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>
-        </Card>
+      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+        <div className="flex justify-between py-3">
+          <p className="text-lg">Eskalasi</p>
+        </div>
+        <EscalationTable />
      </div>
    </div>
  );
--- a/app/[locale]/(protected)/supervisor/communications/internal/components/column.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/internal/components/column.tsx
@ -1,76 +0,0 @@
-
-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";
-
-const columns: ColumnDef<any>[] = [
-  {
-    accessorKey: "no",
-    header: "No",
-    cell: ({ row }) => <span>{row.getValue("no")}</span>,
-  },
-  {
-    accessorKey: "question",
-    header: "Question",
-    cell: ({ row }) => <span>{row.getValue("question")}</span>,
-  },
-  {
-    accessorKey: "answer",
-    header: "Answer",
-    cell: ({ row }) => <span>{row.getValue("answer")}</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;
--- a/app/[locale]/(protected)/supervisor/communications/internal/components/columns.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/internal/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: "Pertanyaan",
+    cell: ({ row }) => (
+      <span className="normal-case"> {row.getValue("title")}</span>
+    ),
+  },
+  {
+    accessorKey: "createdBy",
+    header: "Pengirim",
+    cell: ({ row }) => {
+      const createdBy = row.original.createdBy; // Akses properti category
+      return (
+        <span className="normal-case">{createdBy?.fullname || "N/A"}</span>
+      );
+    },
+  },
+  {
+    accessorKey: "sendTo",
+    header: "Penerima",
+    cell: ({ row }) => {
+      const sendTo = row.original.sendTo; // Akses properti category
+      return <span className="normal-case">{sendTo?.fullname || "N/A"}</span>;
+    },
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Waktu",
+    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;
--- a/app/[locale]/(protected)/supervisor/communications/internal/components/internal-table.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/internal/components/internal-table.tsx
@ -35,23 +35,34 @@ import {
  Trash2,
  TrendingDown,
  TrendingUp,
+  UploadIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils";
+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 { getFaqList } from "@/service/master/faq";
-import columns from "./column";
+import columns from "./columns";
+import {
+  listDataAudio,
+  listDataImage,
+  listDataVideo,
+} from "@/service/content/content";
+import { listTicketingInternal } from "@/service/communication/communication";
+import { Link } from "@/components/navigation";

-const FaqTable = () => {
+const InternalSpvTable = () => {
  const router = useRouter();
  const searchParams = useSearchParams();

@ -64,13 +75,19 @@ const FaqTable = () => {
  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: 10,
+    pageSize: Number(showData),
  });
  const [page, setPage] = React.useState(1);
  const [totalPage, setTotalPage] = React.useState(1);
-  const [limit, setLimit] = React.useState(10);
+  const [search, setSearch] = React.useState<string>("");
+  const userId = getCookiesDecrypt("uie");
+  const userLevelId = getCookiesDecrypt("ulie");
+
+  const roleId = getCookiesDecrypt("urie");

  const table = useReactTable({
    data: dataTable,
@ -94,38 +111,63 @@ const FaqTable = () => {
  });

  React.useEffect(() => {
-    const pageFromUrl = searchParams?.get('page');
+    const pageFromUrl = searchParams?.get("page");
    if (pageFromUrl) {
      setPage(Number(pageFromUrl));
    }
-  }, [searchParams]); 
+  }, [searchParams]);

  React.useEffect(() => {
    fetchData();
-  }, [page, limit]);
+    setPagination({
+      pageIndex: 0,
+      pageSize: Number(showData),
+    });
+  }, [page, showData]);
+
+  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 getFaqList();
-      const contentData = res?.data?.data;
+      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) * limit + index + 1;
+        item.no = (page - 1) * Number(showData) + index + 1;
      });

      console.log("contentData : ", contentData);

      setDataTable(contentData);
-      setTotalData(contentData?.totalElements || contentData?.length);
-      setTotalPage(contentData?.totalPages || 1);
+      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 px-6">
-        <div>
+    <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" />
@ -134,21 +176,39 @@ const FaqTable = () => {
              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 className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
-        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="md" variant="outline">
+              1 - {showData} Data
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56 text-sm">
+            <DropdownMenuRadioGroup
+              value={showData}
+              onValueChange={setShowData}
+            >
+              <DropdownMenuRadioItem value="10">
+                1 - 10 Data
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="20">
+                1 - 20 Data
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="25">
+                1 - 25 Data
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="50">
+                1 - 50 Data
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
      </div>
      <Table className="overflow-hidden mt-3">
        <TableHeader>
@ -191,9 +251,13 @@ const FaqTable = () => {
          )}
        </TableBody>
      </Table>
-      <TablePagination table={table} totalData={totalData} totalPage={totalPage} visiblePageCount={5} />
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
    </div>
  );
 };

-export default FaqTable;
+export default InternalSpvTable;
--- a/app/[locale]/(protected)/supervisor/communications/internal/create/page.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/internal/create/page.tsx
@ -0,0 +1,15 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormInternal from "@/components/form/communication/internal-form";
+
+const InternalCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormInternal />
+      </div>
+    </div>
+  );
+};
+
+export default InternalCreatePage;
--- a/app/[locale]/(protected)/supervisor/communications/internal/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/internal/detail/[id]/page.tsx
@ -0,0 +1,18 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormTaskDetail from "@/components/form/task/task-detail-form";
+import FormDetailInternal from "@/components/form/communication/internal-detail-form";
+
+const InternalDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormDetailInternal />
+      </div>
+    </div>
+  );
+};
+
+export default InternalDetailPage;
--- a/app/[locale]/(protected)/supervisor/communications/internal/page.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/internal/page.tsx
@ -1,37 +1,27 @@
 import SiteBreadcrumb from "@/components/site-breadcrumb";
-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 { Link } from "@/i18n/routing";
+import { PlusIcon } from "lucide-react";
+import InternalSpvTable from "../internal/components/internal-table";

 const FaqPage = async () => {
  return (
    <div>
      <SiteBreadcrumb />
      <div className="space-y-4">
-        <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>
-        </Card>
+        <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+          <div className="flex justify-between py-3">
+            <p className="text-lg">Pertanyaan Internal</p>
+            <Link href="/supervisor/communications/internal/create">
+              <Button color="primary" size="md">
+                <PlusIcon />
+                Pertanyaan baru
+              </Button>
+            </Link>
+          </div>
+
+          <InternalSpvTable />
+        </div>
      </div>
    </div>
  );
--- a/app/[locale]/(protected)/supervisor/communications/internal/update/[id]/page.tsx
+++ b/app/[locale]/(protected)/supervisor/communications/internal/update/[id]/page.tsx
@ -0,0 +1,19 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormTaskDetail from "@/components/form/task/task-detail-form";
+import FormDetailInternal from "@/components/form/communication/internal-detail-form";
+import FormEditInternal from "@/components/form/communication/internal-edit-form";
+
+const InternalUpdatePage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormEditInternal />
+      </div>
+    </div>
+  );
+};
+
+export default InternalUpdatePage;
--- a/messages/in.json
+++ b/messages/in.json
@ -141,11 +141,11 @@
    "ticketing": "Ticketing",
    "knowledge-base": "Knowledge Base",
    "faq": "FAQ",
-    "questions": "Questions",
-    "internal": "Internal Questions",
-    "forward": "Forward",
-    "collaboration": "Collaboration",
-    "account-report": "Account Report",
+    "questions": "Pertanyaan Masuk",
+    "internal": "Pertanyaan Internal",
+    "forward": "Eskalasi",
+    "collaboration": "Kolaborasi",
+    "account-report": "Pelaporan Akun",
    "settings": "Pengaturan",
    "feedback": "Feedback",
    "content-production": "Produksi Konten",