diff --git a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
index 00ba5260..e3312a26 100644
--- a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
+++ b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import ExternalDraggingevent from "./dragging-events";
 import { Calendar } from "@/components/ui/calendar";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Plus } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { EventContentArg } from "@fullcalendar/core";
@@ -19,6 +19,12 @@ import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting";
 import dayjs from "dayjs";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { CalendarCategory } from "./data";
+import { error } from "@/config/swal";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 
 const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
 interface CalendarViewProps {
@@ -26,6 +32,21 @@ interface CalendarViewProps {
   categories: CalendarCategory[];
 }
 
+export type CalendarEvent = {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+  createBy: string;
+  createdByName: string;
+  allDay: boolean;
+  extendedProps: {
+    calendar: string;
+    description: string;
+  };
+};
+
+
 const INITIAL_YEAR = dayjs().format("YYYY");
 const INITIAL_MONTH = dayjs().format("M");
 
@@ -42,6 +63,33 @@ export interface AgendaSettingsAPIResponse {
   updatedAt: string;
   createdById: number | null;
 }
+  
+interface YearlyData {
+  january?: Event[];
+  february?: Event[];
+  march?: Event[];
+  april?: Event[];
+  may?: Event[];
+  june?: Event[];
+  july?: Event[];
+  august?: Event[];
+  september?: Event[];
+  october?: Event[];
+  november?: Event[];
+  december?: Event[];
+}
+
+interface MonthCardProps {
+  monthId: keyof YearlyData;
+  label: string;
+}
+
+interface ListItemProps {
+  item: any;
+  text: string
+  createdBy: string;
+  bgColor: string;
+}
 
 interface APIResponse {
   error: boolean;
@@ -63,6 +111,8 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   // event canvas state
   const [sheetOpen, setSheetOpen] = useState<boolean>(false);
   const [date, setDate] = React.useState<Date>(new Date());
+  const [activeView, setActiveView] = useState("dayGridMonth");
+  const [yearlyData, setYearlyData] = useState();
 
   const [dragEvents] = useState([
     { title: "New Event Planning", id: "101", tag: "business" },
@@ -75,6 +125,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
 
   useEffect(() => {
     getCalendarEvents();
+    getYearlyEvents();
   }, []);
 
   const getCalendarEvents = async () => {
@@ -82,6 +133,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
     console.log("API Response:", res);
 
     if (res?.error) {
+      error(res?.message);
       return;
     }
 
@@ -105,6 +157,15 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
     console.log("event", events);
   };
 
+  const getYearlyEvents = async () => {
+    const res = await getAgendaSettingsList(INITIAL_YEAR, '', '');
+      if (res?.error) {
+          error(res.message);
+          return false;
+      }
+      setYearlyData(res?.data?.data);
+  }
+
   useEffect(() => {
     setSelectedCategory(categories?.map((c) => c.value));
   }, [categories]);
@@ -212,11 +273,13 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
 
   // event click
   const handleEventClick = (arg: any) => {
+    console.log("Event Click ", arg);
     setSelectedEventDate(null);
     setSheetOpen(true);
     setApiEvents(arg);
     wait().then(() => (document.body.style.pointerEvents = "auto"));
   };
+
   // handle close modal
   const handleCloseModal = () => {
     setSheetOpen(false);
@@ -225,6 +288,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   };
   const handleDateClick = (arg: any) => {
     setSheetOpen(true);
+    console.log("Date :", arg);
     setSelectedEventDate(arg);
     setApiEvents([]);
     wait().then(() => (document.body.style.pointerEvents = "auto"));
@@ -266,6 +330,142 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
     }
   };
 
+  const handleDateChange = (startDate: string, endDate: string) => {
+    console.log(startDate + " - " + endDate);
+  };  
+
+  const handleViewChange = (viewType: string) => {
+    console.log(viewType);
+    setActiveView(viewType);
+  };  
+
+  const months: Array<{ id: keyof YearlyData; label: string }> = [
+    { id: 'january', label: 'Januari' },
+    { id: 'february', label: 'Februari' },
+    { id: 'march', label: 'Maret' },
+    { id: 'april', label: 'April' },
+    { id: 'may', label: 'Mei' },
+    { id: 'june', label: 'Juni' },
+    { id: 'july', label: 'Juli' },
+    { id: 'august', label: 'Agustus' },
+    { id: 'september', label: 'September' },
+    { id: 'october', label: 'Oktober' },
+    { id: 'november', label: 'November' },
+    { id: 'december', label: 'Desember' }
+  ];
+
+  const getEventColor = (type: Event['type']): string => {
+    const colors: Record<Event['type'], string> = {
+      mabes: 'bg-yellow-500',
+      polda: 'bg-blue-400',
+      polres: 'bg-slate-400',
+      international: 'bg-green-400'
+    };
+    return colors[type];
+  };
+
+  const handleClickListItem = (item: any) => {
+    const formattedEvent: CalendarEvent = {
+      id: item.id.toString(),
+      title: item.title,
+      start: new Date(item.startDate),
+      end: new Date(item.endDate),
+      createBy: "Mabes Polri - Approver", // Sesuaikan dengan data yang sebenarnya jika ada
+      createdByName: item.createdByName,
+      allDay: true,
+      extendedProps: {
+        calendar: item.agendaType,
+        description: item.description
+      }
+    };
+    const finalEvent: any = {
+      event: formattedEvent
+    }
+    
+    console.log("Event click custom : ", finalEvent);
+
+    setSelectedEventDate(null);
+    setSheetOpen(true);
+    setApiEvents(finalEvent);
+    wait().then(() => (document.body.style.pointerEvents = "auto"));
+  }
+
+  const ListItem: React.FC<ListItemProps> = ({ item, text, createdBy, bgColor }) => (
+    <div className={`w-full p-1 mb-2 rounded-md text-white text-sm ${bgColor}`} onClick={() => handleClickListItem(item)}>
+      <p className="ml-1">{text}</p>
+      <p className="ml-1 text-xs text-start mt-2">
+        Create By: {createdBy}
+      </p>
+    </div>
+  );
+
+  const MonthCard: React.FC<MonthCardProps> = (props: any) => {
+    const { monthId, label } = props;  
+    const events: any = yearlyData?.[monthId];
+    const displayedEvents = events?.slice(0, 3);
+    const hasMoreEvents = events?.length > 3;
+    return (
+      <div className="flex-1 bg-white rounded-lg shadow-sm border border-gray-200 pb-3 mr-1">
+        <div className="py-3">
+          <h4 className="font-bold text-center">{label}</h4>
+        </div>
+        
+        <div className="px-2">
+          {events?.length === 0 ? (
+            <div className="mt-1 py-2 rounded-lg bg-white border border-black">
+              <p className="text-center">Belum ada data</p>
+            </div>
+          ) : (
+            <>
+              {displayedEvents?.map((event: any, index: number) => (
+                <ListItem 
+                  key={index}
+                  item={event}
+                  text={event.title}
+                  createdBy={event.createdByName}
+                  bgColor={getEventColor(event.agendaType)}
+                />
+              ))}
+              
+              {hasMoreEvents && (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button className="w-full" size="sm">
+                      Lihat lebih banyak
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    side="top"
+                    className="p-0 overflow-hidden bg-transparent shadow-none border-none"
+                  >
+                    <Card>
+                      <CardHeader className="bg-default p-2 rounded-t-lg">
+                        <CardTitle className="text-default-foreground text-base py-0">{label}</CardTitle>
+                      </CardHeader>
+                      <CardContent className="p-2 text-sm">
+                        <div className="max-h-[300px] overflow-y-auto border rounded-md border-gray-300 p-2">
+                          {events.map((event: any, index: number) => (
+                            <ListItem 
+                              key={index}
+                              item={event}
+                              text={event.title}
+                              createdBy={event.createdByName}
+                              bgColor={getEventColor(event.agendaType)}
+                            />
+                          ))}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </PopoverContent>
+                </Popover>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    );
+  };
+
   return (
     <>
       <div className="grid grid-cols-12 gap-6 divide-x  divide-border">
@@ -344,7 +544,13 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
               headerToolbar={{
                 left: "prev,next today",
                 center: "title",
-                right: "dayGridMonth,listWeek,",
+                right: "listYear,dayGridMonth,listMonth",
+              }}
+              views={{
+                listYear: {
+                  type: "dayGridMonth",
+                  buttonText: "Year",
+                },
               }}
               events={displayedEvents}
               editable={true}
@@ -358,9 +564,47 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
               eventClassNames={handleClassName}
               dateClick={handleDateClick}
               eventClick={handleEventClick}
-              initialView="dayGridMonth"
+              initialView="listYear"
               eventContent={renderEventContent}
+              viewDidMount={(info) => handleViewChange(info.view.type)}
+              datesSet={(info: any) => {
+                console.log(info);
+                handleDateChange(info.view.currentStart, info.view.currentEnd);
+                handleViewChange(info.view.type);
+              }}
+              viewClassNames={activeView === "listYear" ? "hide-calendar-grid" : ""}
             />
+
+            {activeView === "listYear" && (
+              <div className="custom-ui">
+                <div className="flex gap-1 mt-1">
+                  {months.slice(0, 3).map(month => (
+                    <MonthCard key={month.id} monthId={month.id} label={month.label} />
+                  ))}
+                </div>
+
+                {/* Second Row */}
+                <div className="flex gap-1 mt-1">
+                  {months.slice(3, 6).map(month => (
+                    <MonthCard key={month.id} monthId={month.id} label={month.label} />
+                  ))}
+                </div>
+
+                {/* Third Row */}
+                <div className="flex gap-1 mt-1">
+                  {months.slice(6, 9).map(month => (
+                    <MonthCard key={month.id} monthId={month.id} label={month.label} />
+                  ))}
+                </div>
+
+                {/* Fourth Row */}
+                <div className="flex gap-1 mt-1">
+                  {months.slice(9, 12).map(month => (
+                    <MonthCard key={month.id} monthId={month.id} label={month.label} />
+                  ))}
+                </div>
+              </div>
+            )}
           </CardContent>
         </Card>
       </div>
@@ -376,17 +620,3 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
 };
 
 export default CalendarView;
-
-export type CalendarEvent = {
-  id: string;
-  title: string;
-  start: Date;
-  end: Date;
-  createBy: string;
-  createdByName: string;
-  allDay: boolean;
-  extendedProps: {
-    calendar: string;
-    description: string;
-  };
-};
diff --git a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
index 00e002c8..3b7a5036 100644
--- a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
+++ b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
@@ -147,6 +147,8 @@ const EventModal = ({
     }
     fetchPoldaPolres();
     console.log("Event", event);
+
+    console.log("Event click modal : ", event);
   }, [agendaType]);
 
   const handleCheckboxChange = (levelId: number) => {
@@ -299,6 +301,7 @@ const EventModal = ({
     const file = new File([blob], "voiceNote.webm", { type: "audio/webm" });
     setAudioFile(file);
   };
+  
   const handleDeleteAudio = () => {
     // Remove the audio file by setting state to null
     setAudioFile(null);
diff --git a/app/[locale]/(protected)/curator/feedback/page.tsx b/app/[locale]/(protected)/curator/feedback/page.tsx
new file mode 100644
index 00000000..5986ffc6
--- /dev/null
+++ b/app/[locale]/(protected)/curator/feedback/page.tsx
@@ -0,0 +1,95 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Progress } from "@/components/ui/progress";
+import { getUserFeedbacks } from "@/service/master/faq";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { stringify } from "querystring";
+import { useEffect, useState } from "react";
+
+export default function UserFeedback() {
+  const [listData, setListData] = useState<any>([]);
+
+  useEffect(() => {
+    initState();
+  }, []);
+  async function initState() {
+    const response = await getUserFeedbacks();
+    console.log("ssss", response?.data?.data);
+    setListData(response?.data?.data);
+  }
+
+  const renderStar = (count: number) => {
+    const mapped = [1, 2, 3, 4, 5];
+    return (
+      <div className="flex flex-row gap-3 items-center">
+        {mapped?.map((row) =>
+          row < count + 1 ? (
+            <Icon key={row} icon="emojione:star" width={33} />
+          ) : (
+            <Icon key={row} icon="emojione-monotone:star" width={33} />
+          )
+        )}
+      </div>
+    );
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-2 bg-white p-4">
+        <p className="text-lg">Hasil Feedback</p>
+        <div className="grid grid-cols-2 gap-5">
+          {listData?.map(
+            (list: any) =>
+              list?.avgScore !== "NaN" && (
+                <div
+                  key={list?.id}
+                  className="flex flex-col gap-2 bg-gray-100 rounded-md p-5"
+                >
+                  <div className="flex flex-row gap-3 items-center">
+                    <p className="text-3xl">{parseInt(list?.avgScore)}</p>
+                    {renderStar(parseInt(list?.avgScore))}
+                  </div>
+                  <p className="font-semibold">{list?.question}</p>
+                  <div className="flex flex-row gap-3 items-center">
+                    <p className="w-[120px]">Penilaian 5</p>
+                    <Progress
+                      value={parseInt(list?.score5)}
+                      className="w-[70%]"
+                    />
+                  </div>
+                  <div className="flex flex-row gap-3 items-center">
+                    <p className="w-[120px]">Penilaian 4</p>
+                    <Progress
+                      value={parseInt(list?.score4)}
+                      className="w-[70%]"
+                    />
+                  </div>
+                  <div className="flex flex-row gap-3 items-center">
+                    <p className="w-[120px]">Penilaian 3</p>
+                    <Progress
+                      value={parseInt(list?.score3)}
+                      className="w-[70%]"
+                    />
+                  </div>
+                  <div className="flex flex-row gap-3 items-center">
+                    <p className="w-[120px]">Penilaian 2</p>
+                    <Progress
+                      value={parseInt(list?.score2)}
+                      className="w-[70%]"
+                    />
+                  </div>
+                  <div className="flex flex-row gap-3 items-center">
+                    <p className="w-[120px]">Penilaian 1</p>
+                    <Progress
+                      value={parseInt(list?.score1)}
+                      className="w-[70%]"
+                    />
+                  </div>
+                </div>
+              )
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx b/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
index d778a510..719a3ca8 100644
--- 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;
diff --git a/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/page.tsx b/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/page.tsx
index 73d182c9..9d755830 100644
--- a/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/page.tsx
@@ -69,7 +69,10 @@ export default function CollaborationPage() {
     loading();
     const response = await deleteCollabDiscussion(dataId);
     console.log(response);
-
+    toast({
+      title: "Sukses hapus",
+    });
+    setReplyValue("");
     close();
     initState();
   }
@@ -79,7 +82,7 @@ export default function CollaborationPage() {
       loading();
       const data = {
         ticketId: id,
-        replyValue,
+        message: replyValue,
         parentId: null,
       };
 
diff --git a/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx b/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx
index a8af3677..753f3e80 100644
--- a/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx
+++ b/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx
@@ -100,14 +100,6 @@ const columns: ColumnDef<any>[] = [
                 View
               </DropdownMenuItem>
             </Link>
-            <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>
       );
diff --git a/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx b/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
index 859559c4..86480b65 100644
--- 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;
diff --git a/app/[locale]/(protected)/shared/communication/page.tsx b/app/[locale]/(protected)/shared/communication/page.tsx
index c45afc38..393e33e4 100644
--- 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");
diff --git a/app/[locale]/(protected)/supervisor/communications/internal/components/table.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx
similarity index 62%
rename from app/[locale]/(protected)/supervisor/communications/internal/components/table.tsx
rename to app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx
index b8a5f027..3827d234 100644
--- a/app/[locale]/(protected)/supervisor/communications/internal/components/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;
diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/components/column.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/components/column.tsx
deleted file mode 100644
index ee7f653b..00000000
--- a/app/[locale]/(protected)/supervisor/communications/collaboration/components/column.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx
new file mode 100644
index 00000000..bf46ca80
--- /dev/null
+++ 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;
diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/create/page.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/create/page.tsx
new file mode 100644
index 00000000..259779ac
--- /dev/null
+++ 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;
diff --git 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
new file mode 100644
index 00000000..53c2db0c
--- /dev/null
+++ 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>
+  );
+}
diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/page.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/page.tsx
new file mode 100644
index 00000000..9d755830
--- /dev/null
+++ 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>
+  );
+}
diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/page.tsx b/app/[locale]/(protected)/supervisor/communications/collaboration/page.tsx
index 8ba136f7..889b11bc 100644
--- 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>
   );
diff --git a/app/[locale]/(protected)/supervisor/communications/forward/components/column.tsx b/app/[locale]/(protected)/supervisor/communications/forward/components/column.tsx
deleted file mode 100644
index ee7f653b..00000000
--- a/app/[locale]/(protected)/supervisor/communications/forward/components/column.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/supervisor/communications/forward/components/columns.tsx b/app/[locale]/(protected)/supervisor/communications/forward/components/columns.tsx
new file mode 100644
index 00000000..38041e2e
--- /dev/null
+++ 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;
diff --git a/app/[locale]/(protected)/supervisor/communications/forward/components/table.tsx b/app/[locale]/(protected)/supervisor/communications/forward/components/escalation-table.tsx
similarity index 60%
rename from app/[locale]/(protected)/supervisor/communications/forward/components/table.tsx
rename to app/[locale]/(protected)/supervisor/communications/forward/components/escalation-table.tsx
index b8a5f027..b4bbbaa7 100644
--- a/app/[locale]/(protected)/supervisor/communications/forward/components/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;
diff --git a/app/[locale]/(protected)/supervisor/communications/forward/detail/[id]/page.tsx b/app/[locale]/(protected)/supervisor/communications/forward/detail/[id]/page.tsx
new file mode 100644
index 00000000..eaad7e96
--- /dev/null
+++ 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;
diff --git a/app/[locale]/(protected)/supervisor/communications/forward/page.tsx b/app/[locale]/(protected)/supervisor/communications/forward/page.tsx
index 8ba136f7..f9507ca5 100644
--- 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>
   );
diff --git a/app/[locale]/(protected)/supervisor/communications/internal/components/column.tsx b/app/[locale]/(protected)/supervisor/communications/internal/components/column.tsx
deleted file mode 100644
index ee7f653b..00000000
--- a/app/[locale]/(protected)/supervisor/communications/internal/components/column.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/supervisor/communications/internal/components/columns.tsx b/app/[locale]/(protected)/supervisor/communications/internal/components/columns.tsx
new file mode 100644
index 00000000..7b4f6446
--- /dev/null
+++ 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;
diff --git a/app/[locale]/(protected)/supervisor/communications/collaboration/components/table.tsx b/app/[locale]/(protected)/supervisor/communications/internal/components/internal-table.tsx
similarity index 61%
rename from app/[locale]/(protected)/supervisor/communications/collaboration/components/table.tsx
rename to app/[locale]/(protected)/supervisor/communications/internal/components/internal-table.tsx
index b8a5f027..3891e8e2 100644
--- a/app/[locale]/(protected)/supervisor/communications/collaboration/components/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;
diff --git a/app/[locale]/(protected)/supervisor/communications/internal/create/page.tsx b/app/[locale]/(protected)/supervisor/communications/internal/create/page.tsx
new file mode 100644
index 00000000..b66787ed
--- /dev/null
+++ 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;
diff --git a/app/[locale]/(protected)/supervisor/communications/internal/detail/[id]/page.tsx b/app/[locale]/(protected)/supervisor/communications/internal/detail/[id]/page.tsx
new file mode 100644
index 00000000..dce21c67
--- /dev/null
+++ 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;
diff --git a/app/[locale]/(protected)/supervisor/communications/internal/page.tsx b/app/[locale]/(protected)/supervisor/communications/internal/page.tsx
index 8ba136f7..9e447a49 100644
--- 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>
   );
diff --git a/app/[locale]/(protected)/supervisor/communications/internal/update/[id]/page.tsx b/app/[locale]/(protected)/supervisor/communications/internal/update/[id]/page.tsx
new file mode 100644
index 00000000..0f2efc81
--- /dev/null
+++ 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;
diff --git a/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/columns.tsx b/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/columns.tsx
new file mode 100644
index 00000000..e7a091b5
--- /dev/null
+++ b/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/columns.tsx
@@ -0,0 +1,164 @@
+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, usePathname, useRouter } from "@/i18n/routing";
+import { useToast } from "@/components/ui/use-toast";
+import { deleteDataFAQ } from "@/service/settings/settings";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { deleteQuestion } from "@/service/communication/communication";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span> {row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "message",
+    header: "Pertanyaan",
+    cell: ({ row }) => (
+      <span className="normal-case"> {row.getValue("message")}</span>
+    ),
+  },
+  {
+    accessorKey: "commentFromUserName",
+    header: "Penerima",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("commentFromUserName")}</span>
+    ),
+  },
+  {
+    accessorKey: "type",
+    header: "Channel",
+    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 }) => {
+      const pathname = usePathname();
+      const router = useRouter();
+      const { toast } = useToast();
+      const MySwal = withReactContent(Swal);
+
+      const questionDelete = async (id: string) => {
+        const response = await deleteQuestion(id);
+        console.log(response);
+        if (response?.error) {
+          toast({
+            title: "Error",
+            variant: "destructive",
+            description: "Gagal Delete",
+          });
+          return false;
+        }
+        toast({
+          title: "Sukses",
+          description: "Berhasil Delete",
+        });
+        router.push(`${pathname}?dataChange=true`);
+      };
+
+      const deleteValidation = async (id: string) => {
+        MySwal.fire({
+          title: "Delete Data",
+          text: "Apakah Anda yakin ingin menghapus data ini?",
+          icon: "warning",
+          showCancelButton: true,
+          cancelButtonColor: "#d33",
+          confirmButtonColor: "#3085d6",
+          confirmButtonText: "Delete",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            questionDelete(id);
+          }
+        });
+      };
+      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/update/${row?.original?.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none items-center">
+                Jawab
+              </DropdownMenuItem>
+            </Link>
+            <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 items-center">
+                Eskalasi
+              </DropdownMenuItem>
+            </Link>
+            <a onClick={() => deleteValidation(row?.original?.id)}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-red-500 focus:text-primary-foreground rounded-none items-center">
+                Delete
+              </DropdownMenuItem>
+            </a>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;
diff --git a/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/questions-table.tsx b/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/questions-table.tsx
new file mode 100644
index 00000000..98efd8e3
--- /dev/null
+++ b/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/questions-table.tsx
@@ -0,0 +1,320 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+} from "lucide-react";
+import { cn, 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 { useParams, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./columns";
+import {
+  listDataAudio,
+  listDataImage,
+  listDataVideo,
+} from "@/service/content/content";
+import {
+  getQuestionPagination,
+  getTicketingEscalationPagination,
+  listTicketingInternal,
+} from "@/service/communication/communication";
+import { usePathname, useRouter } from "@/i18n/routing";
+
+interface statisticType {
+  incomingTotal: number;
+  createdTicketTotal: number;
+  todayIncomingTotal: number;
+}
+
+const QuestionsTable = (props: {
+  statisticData: (data: statisticType) => void;
+}) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const params = useParams();
+  const title = params?.title;
+  const dataChange = searchParams?.get("dataChange");
+  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 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(() => {
+    if (dataChange) {
+      router.push(pathname);
+    }
+    fetchData();
+  }, [dataChange]);
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+    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() {
+    const typeNow =
+      title === "comment"
+        ? "1"
+        : title === "facebook"
+        ? "2"
+        : title === "instagram"
+        ? "3"
+        : title === "x"
+        ? "4"
+        : title === "youtube"
+        ? "5"
+        : title === "emergency"
+        ? "6"
+        : title === "email"
+        ? "7"
+        : title === "inbox"
+        ? "8"
+        : title === "whatsapp"
+        ? "9"
+        : title === "tiktok"
+        ? "10"
+        : "";
+
+    try {
+      const res = await getQuestionPagination(
+        search,
+        page - 1,
+        typeNow,
+        showData
+      );
+      const data = res?.data?.data;
+      const contentData = data?.page?.content;
+      console.log("contentDatassss : ", data);
+
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * Number(showData) + index + 1;
+      });
+      setDataTable(contentData);
+      props.statisticData(data?.statistic);
+      setTotalData(data?.page?.totalElements);
+      setTotalPage(data?.page?.totalPages);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  return (
+    <div className="w-full overflow-x-auto bg-white px-6 py-10">
+      <div className="text-xl capitalize flex flex-row gap-5 items-center">
+        {title == "all"
+          ? "Pertanyaan Masuk"
+          : title === "inbox"
+          ? "Pesan Masuk"
+          : title == "comment"
+          ? "Komentar Konten"
+          : title === "emergency"
+          ? "Emergency Issue"
+          : title}{" "}
+        <Badge color="secondary" className="text-xl font-normal">
+          {totalData}
+        </Badge>
+      </div>
+      <div className="flex justify-between items-center mt-6">
+        <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>
+        <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) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default QuestionsTable;
diff --git a/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx b/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx
new file mode 100644
index 00000000..6d5d7f86
--- /dev/null
+++ b/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Link } from "@/i18n/routing";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import QuestionsTable from "./components/questions-table";
+import { useState } from "react";
+
+interface statisticType {
+  incomingTotal: number;
+  createdTicketTotal: number;
+  todayIncomingTotal: number;
+}
+
+export default function Questions() {
+  const [statisticData, setStatisticData] = useState<statisticType>({
+    incomingTotal: 0,
+    createdTicketTotal: 0,
+    todayIncomingTotal: 0,
+  });
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row gap-4">
+          <div className="flex flex-col gap-4 w-[30%]">
+            <div className="flex flex-row gap-10 bg-white rounded-sm px-10 py-6 items-center">
+              <Icon icon="ion:ticket" width={56} />
+              <div className="flex flex-col gap-3">
+                <p className="text-3xl ">{statisticData.todayIncomingTotal}</p>
+                <p className="text-sm">Pertanyaan hari ini</p>
+              </div>
+            </div>
+            <div className="flex flex-row gap-10 bg-white rounded-sm px-10 py-6 items-center">
+              <Icon icon="ion:ticket" width={56} />
+              <div className="flex flex-col gap-3">
+                <p className="text-3xl ">{statisticData.incomingTotal}</p>
+                <p className="text-sm">Pertanyaan masuk</p>
+              </div>
+            </div>
+            <div className="flex flex-row gap-10 bg-white rounded-sm px-10 py-6 items-center">
+              <Icon icon="ion:ticket" width={56} />
+              <div className="flex flex-col gap-3">
+                <p className="text-3xl ">{statisticData.createdTicketTotal}</p>
+                <p className="text-sm">Tiket dibuat</p>
+              </div>
+            </div>
+          </div>
+          <div className="w-[70%] bg-white py-6 px-10 rounded-sm flex flex-col gap-5 text-sm">
+            <p>Pertanyaan masuk berdasarkan sumber:</p>
+            <div className="grid grid-cols-2 gap-8 text-[#2563eb]">
+              <Link
+                href="/supervisor/communications/questions/emergency"
+                className="flex items-center gap-3"
+              >
+                <Icon
+                  icon="material-symbols:emergency-home-rounded"
+                  width={24}
+                  color="#2563eb"
+                />
+                Emergency Issue
+              </Link>
+              <Link
+                href="/supervisor/communications/questions/email"
+                className="flex items-center gap-3"
+              >
+                <Icon icon="ic:baseline-email" width={22} color="#2563eb" />
+                Email
+              </Link>
+              <Link
+                href="/supervisor/communications/questions/facebook"
+                className="flex items-center gap-3"
+              >
+                <Icon icon="dashicons:facebook" width={24} color="#2563eb" />
+                Facebook
+              </Link>
+              <Link
+                href="/supervisor/communications/questions/x"
+                className="flex items-center gap-3"
+              >
+                <Icon icon="proicons:x-twitter" width={24} color="#2563eb" />X
+              </Link>
+              <Link
+                href="/supervisor/communications/questions/instagram"
+                className="flex items-center gap-3"
+              >
+                <Icon
+                  icon="ant-design:instagram-filled"
+                  width={24}
+                  color="#2563eb"
+                />
+                Instagram
+              </Link>
+              <Link
+                href="/supervisor/communications/questions/whatsapp"
+                className="flex items-center gap-3"
+              >
+                <Icon icon="ri:whatsapp-fill" width={24} color="#2563eb" />
+                Whatsapp
+              </Link>
+              <Link
+                href="/supervisor/communications/questions/youtube"
+                className="flex items-center gap-3"
+              >
+                <Icon icon="mdi:youtube" width={24} color="#2563eb" />
+                Youtube
+              </Link>
+              <Link
+                href="/supervisor/communications/questions/inbox"
+                className="flex items-center gap-3"
+              >
+                <Icon
+                  icon="material-symbols:inbox"
+                  width={24}
+                  color="#2563eb"
+                />
+                Pesan Masuk
+              </Link>
+              <Link
+                href="/supervisor/communications/questions/comment"
+                className="flex items-center gap-3"
+              >
+                <Icon
+                  icon="material-symbols-light:comment-rounded"
+                  width={24}
+                  color="#2563eb"
+                />
+                Komentar Konten
+              </Link>
+            </div>
+          </div>
+        </div>
+        <QuestionsTable statisticData={(data) => setStatisticData(data)} />
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/audio/detail/[slug]/page.tsx
index 277f956a..78e4b112 100644
--- a/app/[locale]/(public)/audio/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/audio/detail/[slug]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import NewContent from "@/components/landing-page/new-content";
@@ -10,7 +10,11 @@ import { BarWave } from "react-cssfx-loading";
 import { useToast } from "@/components/ui/use-toast";
 import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { close, error, loading } from "@/config/swal";
+import { close, error, loading, successCallback } from "@/config/swal";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 const DetailAudio = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -29,8 +33,17 @@ const DetailAudio = () => {
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
   const [imageSizeSelected, setImageSizeSelected] = useState("l");
-
   const userId = getCookiesDecrypt("uie");
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const id = searchParams?.get("id");
+  const [width, setWidth] = useState<any>();
+  const [content, setContent] = useState<any>([]);
+  const userRoleId = getCookiesDecrypt("urie");
+
+  let typeString = "video";
 
   useEffect(() => {
     initFetch();
@@ -41,6 +54,8 @@ const DetailAudio = () => {
     const response = await getDetail(String(slug));
     console.log("detailAudio", response);
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
+    setWidth(window.innerWidth);
+    setContent(response?.data.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -216,6 +231,59 @@ const DetailAudio = () => {
     { label: "XS", value: "800 x 450 px" },
   ];
 
+  const handleShare = (type: any, url: any) => {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      sendActivityLog(2);
+      sendActivityLog(4);
+      if (type == "wa" && width <= 768) {
+        window.open(`whatsapp://send?${url}`, "_blank");
+      } else if (type == "wa" && width > 768) {
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+      } else {
+        window.open(url);
+      }
+    }
+  };
+
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
+
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
   return (
     <>
       <div className="min-h-screen px-4 md:px-24 py-4">
@@ -310,6 +378,39 @@ const DetailAudio = () => {
               </svg>
               Download
             </button>
+
+            {/* Tombol Bagikan */}
+            <div className="flex flex-row py-3">
+              <p className="text-base font-semibold">Bagikan</p>
+              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
+                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              </a>
+              <Popover>
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <div className="flex flex-col">
+                    <h1 className="mb-2">Share Ke Email</h1>
+                    <div className="flex flex-col mb-2">
+                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                    </div>
+                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                      Kirim
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
           </div>
         </div>
       </div>
diff --git a/app/[locale]/(public)/content-management/download/page.tsx b/app/[locale]/(public)/content-management/download/page.tsx
index e86b44b2..f1ffbf31 100644
--- a/app/[locale]/(public)/content-management/download/page.tsx
+++ b/app/[locale]/(public)/content-management/download/page.tsx
@@ -12,7 +12,11 @@ import SidebarManagement from "@/components/landing-page/sidebar-management";
 import withReactContent from "sweetalert2-react-content";
 import { getCookiesDecrypt } from "@/lib/utils";
 import Swal from "sweetalert2";
-import { useToast } from "@/components/ui/use-toast";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 
 const Galery = (props: any) => {
   const [profile, setProfile] = useState<any>();
@@ -20,7 +24,6 @@ const Galery = (props: any) => {
   const router = useRouter();
   const MySwal = withReactContent(Swal);
   const searchParams = useSearchParams();
-  // const { id } = router.query;
   const page: any = searchParams?.get("page");
   const title = searchParams?.get("title");
   const category = searchParams?.get("category");
@@ -28,7 +31,6 @@ const Galery = (props: any) => {
   const { isInstitute, instituteId } = props;
   const userId = getCookiesDecrypt("uie");
   const userRoleId = getCookiesDecrypt("urie");
-
   const [totalContent, setTotalContent] = useState();
   const [categoryFilter] = useState([]);
   const [formatFilter] = useState([]);
@@ -42,6 +44,10 @@ const Galery = (props: any) => {
   const [refresh, setRefresh] = useState(false);
   const [, setCopySuccess] = useState("");
   const [, setWishlistId] = useState();
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const id = searchParams?.get("id");
 
   useEffect(() => {
     getDataVideo();
@@ -219,8 +225,44 @@ const Galery = (props: any) => {
     // toast.success("Link Berhasil Di Copy");
   };
 
-  const [hasMounted, setHasMounted] = useState(false);
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
 
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
+  const [hasMounted, setHasMounted] = useState(false);
   // Hooks
   useEffect(() => {
     setHasMounted(true);
@@ -236,10 +278,10 @@ const Galery = (props: any) => {
         <SidebarManagement />
         <div className="w-2/3 p-12">
           <div>
-            <h1 className="text-2xl font-semibold">Galeri Saya</h1>
+            <h1 className="text-2xl font-semibold mb-3">Galeri Saya</h1>
           </div>
-          <div className="flex flex-col p-4">
-            <div className="mx-auto w-full max-w-7xl justify-start flex px-5 flex-col lg:flex-row gap-5 mb-4">
+          <div className="flex flex-col">
+            <div className="mx-auto w-full max-w-7xl justify-start flex flex-col lg:flex-row gap-5 mb-4">
               <Tabs value={selectedTab} onValueChange={setSelectedTab}>
                 <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
                   <TabsTrigger
@@ -272,17 +314,54 @@ const Galery = (props: any) => {
                 </TabsList>
               </Tabs>
             </div>
-            <div className="px-0 lg:px-10">
+            <div className="">
               {selectedTab == "video" ? (
                 contentVideo?.length > 0 ? (
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                     {contentVideo?.map((video: any) => (
-                      <Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
-                        <CardContent className="flex flex-col  bg-black dark:bg-white w-full rounded-lg p-0">
-                          <Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
-                            <img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
-                            <div className="font-semibold p-4 text-white text-xs lg:text-sm  dark:text-black truncate w-full">{video?.mediaUpload?.title}</div>
-                          </Link>
+                      <Card key={video?.id}>
+                        <CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">
+                          <div>
+                            <Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
+                              <img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg " />
+                              <div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{video?.mediaUpload?.title}</div>
+                            </Link>
+                            <Popover>
+                              <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                                <a className="flex justify-end items-end place-items-end">
+                                  <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                                </a>
+                              </PopoverTrigger>
+                              <PopoverContent className="w-40">
+                                <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                                  <Popover>
+                                    <PopoverTrigger asChild>
+                                      <button className="w-full flex items-center gap-2">
+                                        <Icon icon="oi:share" fontSize={20} />
+                                        <p className="text-base font-semibold mb-3">Bagikan</p>
+                                      </button>
+                                    </PopoverTrigger>
+                                    <PopoverContent>
+                                      <div className="flex flex-col">
+                                        <h1 className="mb-2">Share Ke Email</h1>
+                                        <div className="flex flex-col mb-2">
+                                          <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                                          <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                                        </div>
+                                        <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                          Kirim
+                                        </Button>
+                                      </div>
+                                    </PopoverContent>
+                                  </Popover>
+                                </div>
+                                <a onClick={() => handleDelete(video?.id)} className="flex items-center gap-1  hover:text-red-800 w-full rounded-lg">
+                                  <Icon icon="fa:trash" fontSize={20} />
+                                  <p className="text-base  font-semibold">Hapus</p>
+                                </a>
+                              </PopoverContent>
+                            </Popover>
+                          </div>
                         </CardContent>
                       </Card>
                     ))}
@@ -296,11 +375,7 @@ const Galery = (props: any) => {
                 contentAudio?.length > 0 ? (
                   <div className=" grid grid-cols-1 gap-6 ">
                     {contentAudio?.map((audio: any) => (
-                      <Link
-                        href={`/audio/detail/${audio?.mediaUpload?.slug}`}
-                        key={audio?.id}
-                        className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
-                      >
+                      <div key={audio?.id} className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
                         <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
                           <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
                             <path
@@ -309,8 +384,10 @@ const Galery = (props: any) => {
                             />
                           </svg>
                         </div>
-                        <div className="flex flex-col  flex-1">
-                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{audio?.mediaUpload?.title}</div>
+                        <div className="flex flex-col object-cover flex-1">
+                          <Link href={`/audio/detail/${audio?.mediaUpload?.slug}`}>
+                            <div className="font-semibold text-gray-900 dark:text-white mt-1  text-sm">{audio?.mediaUpload?.title}</div>
+                          </Link>
                         </div>
                         <div className="flex items-center justify-center gap-3">
                           <div className="mt-2">
@@ -327,7 +404,42 @@ const Galery = (props: any) => {
                             </svg>
                           </div>
                         </div>
-                      </Link>
+                        <Popover>
+                          <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                            <a className="flex justify-end items-end place-items-end">
+                              <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                            </a>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-40">
+                            <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                              <Popover>
+                                <PopoverTrigger asChild>
+                                  <button className="w-full flex items-center gap-2">
+                                    <Icon icon="oi:share" fontSize={20} />
+                                    <p className="text-base font-semibold mb-3">Bagikan</p>
+                                  </button>
+                                </PopoverTrigger>
+                                <PopoverContent>
+                                  <div className="flex flex-col">
+                                    <h1 className="mb-2">Share Ke Email</h1>
+                                    <div className="flex flex-col mb-2">
+                                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                                    </div>
+                                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                      Kirim
+                                    </Button>
+                                  </div>
+                                </PopoverContent>
+                              </Popover>
+                            </div>
+                            <a onClick={() => handleDelete(audio?.id)} className="flex items-center gap-1  hover:text-red-800 w-full rounded-lg">
+                              <Icon icon="fa:trash" fontSize={20} />
+                              <p className="text-base  font-semibold">Hapus</p>
+                            </a>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
                     ))}
                   </div>
                 ) : (
@@ -339,12 +451,47 @@ const Galery = (props: any) => {
                 contentImage?.length > 0 ? (
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                     {contentImage?.map((image: any) => (
-                      <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
-                        <CardContent className="flex flex-col  bg-black dark:bg-white w-full rounded-lg p-0">
+                      <Card key={image?.id}>
+                        <CardContent className="flex flex-col bg-black dark:bg-white w-full h-full rounded-lg p-0">
                           <Link href={`/image/detail/${image?.mediaUpload?.slug}`}>
                             <img src={image?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
                             <div className="font-semibold p-4 text-white text-xs lg:text-sm  dark:text-black truncate w-full">{image?.mediaUpload?.title}</div>
                           </Link>
+                          <Popover>
+                            <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                              <a className="flex justify-end items-end place-items-end">
+                                <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                              </a>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-40">
+                              <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                                <Popover>
+                                  <PopoverTrigger asChild>
+                                    <button className="w-full flex items-center gap-2">
+                                      <Icon icon="oi:share" fontSize={20} />
+                                      <p className="text-base font-semibold mb-3">Bagikan</p>
+                                    </button>
+                                  </PopoverTrigger>
+                                  <PopoverContent>
+                                    <div className="flex flex-col">
+                                      <h1 className="mb-2">Share Ke Email</h1>
+                                      <div className="flex flex-col mb-2">
+                                        <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                                        <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                                      </div>
+                                      <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                        Kirim
+                                      </Button>
+                                    </div>
+                                  </PopoverContent>
+                                </Popover>
+                              </div>
+                              <a onClick={() => handleDelete(image?.id)} className="flex items-center gap-1  hover:text-red-800 w-full rounded-lg">
+                                <Icon icon="fa:trash" fontSize={20} />
+                                <p className="text-base  font-semibold">Hapus</p>
+                              </a>
+                            </PopoverContent>
+                          </Popover>
                         </CardContent>
                       </Card>
                     ))}
@@ -357,7 +504,7 @@ const Galery = (props: any) => {
               ) : contentDocument.length > 0 ? (
                 <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
                   {contentDocument?.map((document: any) => (
-                    <Link href={`/document/detail/${document?.mediaUpload?.slug}`} key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                    <div key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
                       <div className="flex items-center justify-center rounded-lg w-16 h-16">
                         <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path
@@ -368,7 +515,9 @@ const Galery = (props: any) => {
                       </div>
 
                       <div className="flex flex-col flex-1 gap-2">
-                        <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.mediaUpload?.title}</div>
+                        <Link href={`/document/detail/${document?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                          {document?.mediaUpload?.title}
+                        </Link>
                         <div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
                           <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
                             <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
@@ -376,7 +525,42 @@ const Galery = (props: any) => {
                           Download Dokumen
                         </div>
                       </div>
-                    </Link>
+                      <Popover>
+                        <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                          <a className="flex justify-end items-end place-items-end">
+                            <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                          </a>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-40">
+                          <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                            <Popover>
+                              <PopoverTrigger asChild>
+                                <button className="w-full flex items-center gap-2">
+                                  <Icon icon="oi:share" fontSize={20} />
+                                  <p className="text-base font-semibold mb-3">Bagikan</p>
+                                </button>
+                              </PopoverTrigger>
+                              <PopoverContent>
+                                <div className="flex flex-col">
+                                  <h1 className="mb-2">Share Ke Email</h1>
+                                  <div className="flex flex-col mb-2">
+                                    <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                                    <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                                  </div>
+                                  <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                    Kirim
+                                  </Button>
+                                </div>
+                              </PopoverContent>
+                            </Popover>
+                          </div>
+                          <a onClick={() => handleDelete(document?.id)} className="flex items-center gap-1  hover:text-red-800 w-full rounded-lg">
+                            <Icon icon="fa:trash" fontSize={20} />
+                            <p className="text-base  font-semibold">Hapus</p>
+                          </a>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
                   ))}
                 </div>
               ) : (
diff --git a/app/[locale]/(public)/content-management/galery/page.tsx b/app/[locale]/(public)/content-management/galery/page.tsx
index 797500b8..6bdaf09a 100644
--- a/app/[locale]/(public)/content-management/galery/page.tsx
+++ b/app/[locale]/(public)/content-management/galery/page.tsx
@@ -13,9 +13,12 @@ import withReactContent from "sweetalert2-react-content";
 import { getCookiesDecrypt } from "@/lib/utils";
 import Swal from "sweetalert2";
 import { useToast } from "@/components/ui/use-toast";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 
 const Galery = (props: any) => {
   const [profile, setProfile] = useState<any>();
@@ -23,7 +26,6 @@ const Galery = (props: any) => {
   const router = useRouter();
   const MySwal = withReactContent(Swal);
   const searchParams = useSearchParams();
-  // const { id } = router.query;
   const page: any = searchParams?.get("page");
   const title = searchParams?.get("title");
   const category = searchParams?.get("category");
@@ -45,6 +47,10 @@ const Galery = (props: any) => {
   const [refresh, setRefresh] = useState(false);
   const [, setCopySuccess] = useState("");
   const [, setWishlistId] = useState();
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const id = searchParams?.get("id");
 
   useEffect(() => {
     getDataVideo();
@@ -225,8 +231,44 @@ const Galery = (props: any) => {
     });
   };
 
-  const [hasMounted, setHasMounted] = useState(false);
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
 
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
+  const [hasMounted, setHasMounted] = useState(false);
   // Hooks
   useEffect(() => {
     setHasMounted(true);
@@ -244,8 +286,8 @@ const Galery = (props: any) => {
           <div>
             <h1 className="text-2xl font-semibold">Galeri {profile?.institute?.name}</h1>
           </div>
-          <div className="flex flex-col p-4">
-            <div className="mx-auto w-full max-w-7xl justify-start flex px-5 flex-col lg:flex-row gap-5 mb-4">
+          <div className="flex flex-col mt-4">
+            <div className="mx-auto w-full max-w-7xl justify-start flex flex-col lg:flex-row gap-5 mb-4">
               <Tabs value={selectedTab} onValueChange={setSelectedTab}>
                 <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
                   <TabsTrigger
@@ -278,7 +320,7 @@ const Galery = (props: any) => {
                 </TabsList>
               </Tabs>
             </div>
-            <div className="px-0 lg:px-10">
+            <div className="px-2">
               {selectedTab == "video" ? (
                 contentVideo?.length > 0 ? (
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -289,37 +331,42 @@ const Galery = (props: any) => {
                             <Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
                               <img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
                             </Link>
-
                             <div className="font-semibold p-4 text-white text-xs lg:text-sm  dark:text-black truncate w-full">{video?.mediaUpload?.title}</div>
-                            <DropdownMenu>
-                              <DropdownMenuTrigger className="flex items-center gap-1">
-                                <a>
+                            <Popover>
+                              <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                                <a className="flex justify-end items-end place-items-end">
                                   <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
                                 </a>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent>
-                                <DropdownMenuItem>
-                                  <button onClick={() => handleSaveWishlist(video?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                                    <Icon icon="material-symbols:bookmark-outline" fontSize={20} />
-                                    <p className="text-base font-semibold">Simpan</p>
-                                  </button>
-                                </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                  <Link href={`/content-management/rewrite/create/${video?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                                    <Icon icon="jam:write" fontSize={20} />
-                                    <p className="text-base  font-semibold">Content Rewrite</p>
-                                  </Link>
-                                </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                  <div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                                    <button onClick={() => copyToClip(video.mediaUpload?.slug)} className="w-full flex items-center gap-2">
-                                      <Icon icon="oi:share" fontSize={20} />
-                                      <p className="text-base  font-semibold">Bagikan</p>
-                                    </button>
-                                  </div>
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
+                              </PopoverTrigger>
+                              <PopoverContent className="w-40">
+                                <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                                  <Popover>
+                                    <PopoverTrigger asChild>
+                                      <button className="w-full flex items-center gap-2">
+                                        <Icon icon="oi:share" fontSize={20} />
+                                        <p className="text-base items-center font-semibold mb-3">Bagikan</p>
+                                      </button>
+                                    </PopoverTrigger>
+                                    <PopoverContent>
+                                      <div className="flex flex-col">
+                                        <h1 className="mb-2">Share Ke Email</h1>
+                                        <div className="flex flex-col mb-2">
+                                          <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                                          <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                                        </div>
+                                        <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                          Kirim
+                                        </Button>
+                                      </div>
+                                    </PopoverContent>
+                                  </Popover>
+                                </div>
+                                <a onClick={() => handleDelete(video?.id)} className="flex items-center gap-2 hover:text-red-800 w-full rounded-lg">
+                                  <Icon icon="fa:trash" fontSize={20} />
+                                  <p className="text-base font-semibold">Hapus</p>
+                                </a>
+                              </PopoverContent>
+                            </Popover>
                           </div>
                         </CardContent>
                       </Card>
@@ -361,35 +408,41 @@ const Galery = (props: any) => {
                             </svg>
                           </div>
                         </div>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger className="flex items-center gap-1">
-                            <a>
+                        <Popover>
+                          <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                            <a className="flex justify-end items-end place-items-end">
                               <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
                             </a>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent>
-                            <DropdownMenuItem>
-                              <button onClick={() => handleSaveWishlist(audio?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                                <Icon icon="material-symbols:bookmark-outline" fontSize={20} />
-                                <p className="text-base font-semibold">Simpan</p>
-                              </button>
-                            </DropdownMenuItem>
-                            <DropdownMenuItem>
-                              <Link href={`/content-management/rewrite/create/${audio?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                                <Icon icon="jam:write" fontSize={20} />
-                                <p className="text-base  font-semibold">Content Rewrite</p>
-                              </Link>
-                            </DropdownMenuItem>
-                            <DropdownMenuItem>
-                              <div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                                <button onClick={() => copyToClip(audio?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
-                                  <Icon icon="oi:share" fontSize={20} />
-                                  <p className="text-base  font-semibold">Bagikan</p>
-                                </button>
-                              </div>
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-40">
+                            <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                              <Popover>
+                                <PopoverTrigger asChild>
+                                  <button className="w-full flex items-center gap-2">
+                                    <Icon icon="oi:share" fontSize={20} />
+                                    <p className="text-base font-semibold mb-3">Bagikan</p>
+                                  </button>
+                                </PopoverTrigger>
+                                <PopoverContent>
+                                  <div className="flex flex-col">
+                                    <h1 className="mb-2">Share Ke Email</h1>
+                                    <div className="flex flex-col mb-2">
+                                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                                    </div>
+                                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                      Kirim
+                                    </Button>
+                                  </div>
+                                </PopoverContent>
+                              </Popover>
+                            </div>
+                            <a onClick={() => handleDelete(audio?.id)} className="flex items-center gap-1  hover:text-red-800 w-full rounded-lg">
+                              <Icon icon="fa:trash" fontSize={20} />
+                              <p className="text-base  font-semibold">Hapus</p>
+                            </a>
+                          </PopoverContent>
+                        </Popover>
                       </div>
                     ))}
                   </div>
@@ -402,41 +455,47 @@ const Galery = (props: any) => {
                 contentImage?.length > 0 ? (
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                     {contentImage?.map((image: any) => (
-                      <Card key={image?.id} className="">
+                      <Card key={image?.id}>
                         <CardContent className="flex flex-col  bg-black dark:bg-white w-full rounded-lg p-0">
                           <Link href={`/image/detail/${image?.mediaUpload?.slug}`}>
                             <img src={image?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
-                            <div className="font-semibold p-4 text-white text-xs lg:text-sm  dark:text-black truncate w-full">{image?.mediaUpload?.title}</div>
+                            <div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.mediaUpload?.title}</div>
                           </Link>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger className="flex items-center gap-1">
-                              <a>
+                          <Popover>
+                            <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                              <a className="flex justify-end items-end place-items-end">
                                 <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
                               </a>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent>
-                              <DropdownMenuItem>
-                                <button onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                                  <Icon icon="material-symbols:bookmark-outline" fontSize={20} />
-                                  <p className="text-base font-semibold">Simpan</p>
-                                </button>
-                              </DropdownMenuItem>
-                              <DropdownMenuItem>
-                                <Link href={`/content-management/rewrite/create/${image?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                                  <Icon icon="jam:write" fontSize={20} />
-                                  <p className="text-base  font-semibold">Content Rewrite</p>
-                                </Link>
-                              </DropdownMenuItem>
-                              <DropdownMenuItem>
-                                <div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                                  <button onClick={() => copyToClip(image?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
-                                    <Icon icon="oi:share" fontSize={20} />
-                                    <p className="text-base  font-semibold">Bagikan</p>
-                                  </button>
-                                </div>
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-40">
+                              <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                                <Popover>
+                                  <PopoverTrigger asChild>
+                                    <button className="w-full flex items-center gap-2">
+                                      <Icon icon="oi:share" fontSize={20} />
+                                      <p className="text-base font-semibold mb-3">Bagikan</p>
+                                    </button>
+                                  </PopoverTrigger>
+                                  <PopoverContent>
+                                    <div className="flex flex-col">
+                                      <h1 className="mb-2">Share Ke Email</h1>
+                                      <div className="flex flex-col mb-2">
+                                        <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                                        <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                                      </div>
+                                      <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                        Kirim
+                                      </Button>
+                                    </div>
+                                  </PopoverContent>
+                                </Popover>
+                              </div>
+                              <a onClick={() => handleDelete(image?.id)} className="flex items-center gap-1  hover:text-red-800 w-full rounded-lg">
+                                <Icon icon="fa:trash" fontSize={20} />
+                                <p className="text-base  font-semibold">Hapus</p>
+                              </a>
+                            </PopoverContent>
+                          </Popover>
                         </CardContent>
                       </Card>
                     ))}
@@ -470,35 +529,41 @@ const Galery = (props: any) => {
                           Download Dokumen
                         </div>
                       </div>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger className="flex items-center gap-1">
-                          <a>
+                      <Popover>
+                        <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                          <a className="flex justify-end items-end place-items-end">
                             <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
                           </a>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent>
-                          <DropdownMenuItem>
-                            <button onClick={() => handleSaveWishlist(document?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                              <Icon icon="material-symbols:bookmark-outline" fontSize={20} />
-                              <p className="text-base font-semibold">Simpan</p>
-                            </button>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <Link href={`/content-management/rewrite/create/${document?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                              <Icon icon="jam:write" fontSize={20} />
-                              <p className="text-base  font-semibold">Content Rewrite</p>
-                            </Link>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
-                              <button onClick={() => copyToClip(document?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
-                                <Icon icon="oi:share" fontSize={20} />
-                                <p className="text-base  font-semibold">Bagikan</p>
-                              </button>
-                            </div>
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-40">
+                          <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                            <Popover>
+                              <PopoverTrigger asChild>
+                                <button className="w-full flex items-center gap-2">
+                                  <Icon icon="oi:share" fontSize={20} />
+                                  <p className="text-base font-semibold mb-3">Bagikan</p>
+                                </button>
+                              </PopoverTrigger>
+                              <PopoverContent>
+                                <div className="flex flex-col">
+                                  <h1 className="mb-2">Share Ke Email</h1>
+                                  <div className="flex flex-col mb-2">
+                                    <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                                    <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                                  </div>
+                                  <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                    Kirim
+                                  </Button>
+                                </div>
+                              </PopoverContent>
+                            </Popover>
+                          </div>
+                          <a onClick={() => handleDelete(document?.id)} className="flex items-center gap-1  hover:text-red-800 w-full rounded-lg">
+                            <Icon icon="fa:trash" fontSize={20} />
+                            <p className="text-base  font-semibold">Hapus</p>
+                          </a>
+                        </PopoverContent>
+                      </Popover>
                     </div>
                   ))}
                 </div>
diff --git a/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx b/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx
index 9cba820d..4dca7923 100644
--- a/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx
+++ b/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx
@@ -35,7 +35,7 @@ const imageSchema = z.object({
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
 
-const page = (props: { states?: string }) => {
+const page = (props: any) => {
   const { states } = props;
   const MySwal = withReactContent(Swal);
   const router = useRouter();
@@ -255,7 +255,7 @@ const page = (props: { states?: string }) => {
     const maxRetries = 20;
 
     try {
-      const waitForStatusUpdate = async () => {
+      const waitForStatusUpdate: any = async () => {
         while (retryCount < maxRetries) {
           const res = await getDetailArticle(id);
           const articleData = res?.data?.data;
@@ -276,7 +276,7 @@ const page = (props: { states?: string }) => {
       const articleImagesData = articleData?.imagesUrl?.split(",");
       setValue("description", cleanArticleBody || "");
       setArticleBody(cleanArticleBody || "");
-      setDetailData(articleData);
+      setDetailArticle(articleData);
       setSelectedArticleId(id);
       setArticleImages(articleImagesData || []);
     } catch (error) {
@@ -404,7 +404,11 @@ const page = (props: { states?: string }) => {
                           {articleIds.map((id: any, index: any) => (
                             <p
                               key={index}
-                              className={`text-black m-1 ${selectedArticleId === id ? "bg-[#31ce36] cursor-pointer border border-[#31ce36]" : "bg-[#48abf7] cursor-pointer border border-[#48abf7]"}`}
+                              className={`text-black border border-black w-fit rounded-md p-3 m-1 ${
+                                selectedArticleId === id
+                                  ? "text-[#31ce36] w-fit p-3 hover:bg-[#31ce36] hover:text-white cursor-pointer border border-[#31ce36]"
+                                  : "text-[#48abf7] p-3 hover:text-white hover:bg-[#48abf7] w-fit cursor-pointer border border-[#48abf7]"
+                              }`}
                               onClick={() => handleArticleIdClick(id)}
                             >
                               {id}
@@ -429,7 +433,7 @@ const page = (props: { states?: string }) => {
                           )
                         }
                       />
-                      {articleBody === null || articleBody === "" ? <div className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</div> : ""}
+                      {articleBody === null || articleBody === "" ? <p className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</p> : ""}
                     </div>
                     <div className="flex flex-row gap-3">
                       <Button
@@ -441,7 +445,7 @@ const page = (props: { states?: string }) => {
                       >
                         Kembali
                       </Button>
-                      <Button type="submit"  className="border border-blue-500 bg-blue-500  text-white">
+                      <Button type="submit" className="border border-blue-500 bg-blue-500  text-white">
                         Simpan
                       </Button>
                     </div>
diff --git a/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx b/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx
index 74a90820..678343d5 100644
--- a/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx
+++ b/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx
@@ -4,7 +4,7 @@ import { close, error, loading } from "@/config/swal";
 import { useRouter } from "@/i18n/routing";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { getContentRewrite, getInfoProfile } from "@/service/landing/landing";
-import { useSearchParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
@@ -15,15 +15,17 @@ import { generateDataArticle } from "@/service/content/ai";
 import HeaderManagement from "@/components/landing-page/header-management";
 import SidebarManagement from "@/components/landing-page/sidebar-management";
 import { saveContentRewrite } from "@/service/content/content";
+import CustomEditor from "@/components/editor/custom-editor";
+import { Input } from "@/components/ui/input";
 
-const page = (props: any) => {
-  const { states } = props;
+const page = () => {
   const [profile, setProfile] = useState();
   const MySwal = withReactContent(Swal);
   const searchParams = useSearchParams();
   const router = useRouter();
   const [, setLoadingState] = useState(false);
-  const id: any = searchParams?.get("title");
+  const getParams = useParams();
+  const id: any = getParams?.id;
   const [content, setContent] = useState<any>([]);
   const [isFromSPIT, setIsFromSPIT] = useState(false);
   const [listSuggestion, setListSuggestion] = useState();
@@ -199,96 +201,95 @@ const page = (props: any) => {
             <div className="text-xl font-bold mb-5">Detail Content Rewrite</div>
             <div className="p-8 border border-black rounded-lg">
               <form method="POST" onSubmit={handleSubmit(onSubmit)}>
-                {/* {content && ( */}
-                <>
-                  <div className="w-full">
-                    <div className="mb-3">
-                      <p className="font-semibold">Judul</p>
-                    </div>
-                    <input
-                      type="text"
-                      className={`w-full p-2 border rounded-md mb-3 border-black ${errors.title ? "is-invalid" : ""}`}
-                      {...register("title", {
-                        value: content?.title,
-                      })}
-                      id="title"
-                      defaultValue={content?.title}
-                      // onChange={(e) => setSelectedTitle(e.target.value)}
-                    />
-                  </div>
-                  <div className="flex flex-col justify-between lg:flex-row">
-                    <div className="w-50%">
-                      <div className="mb-3">
-                        <p className="font-semibold">Main Keyword</p>
+                {content && (
+                  <>
+                    <div className="w-full">
+                      <div className="mb-1">
+                        <p className="font-bold text-base">Judul</p>
                       </div>
-                      <div>
-                        <input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} />
-                      </div>
-                    </div>
-                    <div className="w-50%">
-                      <div className="mb-3">
-                        <label htmlFor="title" className="font-semibold">
-                          Additional Keyword{" "}
-                        </label>
-                      </div>
-
-                      <input
-                        className="border mb-3 rounded-md p-2 border-black"
+                      <Input
                         type="text"
-                        id="additionalKeyword"
-                        name="additionalKeyword"
-                        // onChange={(e) =>
-                        //   setSelectedMainKeyword(e.target.value)
-                        // }
-                        placeholder="Masukan Additional Keyword disini!"
-                        defaultValue={content?.additionalKeyword}
+                        className={`w-full mb-3 ${errors.title ? "is-invalid" : ""}`}
+                        {...register("title", {
+                          value: content?.title,
+                        })}
+                        id="title"
+                        defaultValue={content?.title}
+                        // onChange={(e) => setSelectedTitle(e.target.value)}
                       />
                     </div>
-                  </div>
+                    <div className="flex justify-between gap-3 lg:flex-row">
+                      <div className="w-1/2">
+                        <div className="mb-1">
+                          <p className="font-semibold">Main Keyword</p>
+                        </div>
+                        <div>
+                          <Input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} />
+                        </div>
+                      </div>
+                      <div className="w-1/2">
+                        <div className="mb-1">
+                          <label htmlFor="title" className="font-semibold">
+                            Additional Keyword{" "}
+                          </label>
+                        </div>
+                        <Input
+                          className="border mb-3 rounded-md p-2 border-black"
+                          type="text"
+                          id="additionalKeyword"
+                          name="additionalKeyword"
+                          // onChange={(e) =>
+                          //   setSelectedMainKeyword(e.target.value)
+                          // }
+                          placeholder="Masukan Additional Keyword disini!"
+                          defaultValue={content?.additionalKeyword}
+                        />
+                      </div>
+                    </div>
 
-                  <div className="flex flex-col justify-between lg:flex-row">
-                    <div className="w-50%">
+                    <div className="flex gap-3 justify-between lg:flex-row">
+                      <div className="w-1/2">
+                        <div className="font-semibold mb-1">
+                          <label htmlFor="metaTitle">Meta Title</label>
+                        </div>
+                        <Input
+                          type="text"
+                          className="border rounded-md mb-3 p-2 border-black"
+                          id="metaTitle"
+                          name="metaTitle"
+                          // onChange={(e) =>
+                          //   setSelectedMainKeyword(e.target.value)
+                          // }
+                          placeholder="Masukan Meta Title disini!"
+                          defaultValue={content?.metaTitle}
+                        />
+                      </div>
+                      <div className="w-1/2">
+                        <div className="font-semibold mb-1">
+                          <label htmlFor="metaDescription">Meta Description</label>
+                        </div>
+                        <Input
+                          type="text"
+                          className="border rounded-md mb-3 p-2 border-black"
+                          id="metaDescription"
+                          name="metaDescription"
+                          // onChange={(e) =>
+                          //   setSelectedMainKeyword(e.target.value)
+                          // }
+                          placeholder="Masukan Meta Description disini!"
+                          defaultValue={content?.metaDescription}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="w-full">
                       <div className="font-semibold mb-3">
-                        <label htmlFor="metaTitle">Meta Title</label>
+                        <label htmlFor="description">Deskripsi Artikel</label>
+                        <CustomEditor onChange={(e: any) => {}} initialData={articleBody || ""} />
                       </div>
-                      <input
-                        type="text"
-                        className="border rounded-md mb-3 p-2 border-black"
-                        id="metaTitle"
-                        name="metaTitle"
-                        // onChange={(e) =>
-                        //   setSelectedMainKeyword(e.target.value)
-                        // }
-                        placeholder="Masukan Meta Title disini!"
-                        defaultValue={content?.metaTitle}
-                      />
                     </div>
-                    <div className="w-50%">
-                      <div className="font-semibold mb-3">
-                        <label htmlFor="metaDescription">Meta Description</label>
-                      </div>
-                      <input
-                        type="text"
-                        className="border rounded-md mb-3 p-2 border-black"
-                        id="metaDescription"
-                        name="metaDescription"
-                        // onChange={(e) =>
-                        //   setSelectedMainKeyword(e.target.value)
-                        // }
-                        placeholder="Masukan Meta Description disini!"
-                        defaultValue={content?.metaDescription}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="w-full">
-                    <div className="font-semibold mb-3">
-                      <label htmlFor="description">Deskripsi Artikel</label>
-                    </div>
-                    {articleBody === null || articleBody === "" ? <div className="w-full px-0 text-sm">Deskripsi tidak boleh kosong</div> : ""}
-                  </div>
-                </>
-                 {/* )}  */}
+                  </>
+                )}
               </form>
             </div>
           </div>
diff --git a/app/[locale]/(public)/content-management/rewrite/page.tsx b/app/[locale]/(public)/content-management/rewrite/page.tsx
index ec35c993..f9d1cf4a 100644
--- a/app/[locale]/(public)/content-management/rewrite/page.tsx
+++ b/app/[locale]/(public)/content-management/rewrite/page.tsx
@@ -11,8 +11,13 @@ import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { Card, CardContent } from "@/components/ui/card";
 import { Link } from "@/i18n/routing";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 
-const page = (props: any) => {
+const page = () => {
   const [, setProfile] = useState();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -21,23 +26,21 @@ const page = (props: any) => {
   const title = searchParams?.get("title");
   const category = searchParams?.get("category");
   const pages = page ? page - 1 : 0;
-
-  const { isInstitute, instituteId } = props;
   const userId = getCookiesDecrypt("uie");
   const userRoleId = getCookiesDecrypt("urie");
-
   const [, setGetTotalPage] = useState();
   const [totalContent, setTotalContent] = useState<any>();
   const [contentImage, setContentImage] = useState([]);
-
   const [categoryFilter] = useState([]);
   const [formatFilter] = useState([]);
   const [sortBy] = useState();
-
   const [refresh, setRefresh] = useState(false);
   const [, setCopySuccess] = useState("");
-
   const [, setWishlistId] = useState();
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const id = searchParams?.get("id");
 
   useEffect(() => {
     async function initState() {
@@ -153,6 +156,43 @@ const page = (props: any) => {
     }
   };
 
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
+
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
   return (
     <>
       <HeaderManagement />
@@ -162,16 +202,53 @@ const page = (props: any) => {
           <div>
             <h1 className="text-2xl font-semibold mb-4">Galeri Content Rewrite</h1>
           </div>
-          <div className="px-0 lg:px-10">
+          <div className="">
             {contentImage?.length > 0 ? (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {contentImage?.map((image: any) => (
-                  <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
+                  <Card key={image?.id}>
                     <CardContent className="flex flex-col  bg-black dark:bg-white w-full rounded-lg p-0">
-                      <Link href={`/content-management/rewrite/detail/${image.id}`}>
-                        <img src={image?.thumbnailUrl} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
+                      <div className="">
+                        <Link href={`/content-management/rewrite/detail/${image.id}`}>
+                          <img src={image?.thumbnailUrl} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
+                        </Link>
                         <div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.title}</div>
-                      </Link>
+                        <Popover>
+                          <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                            <a className="flex justify-end items-end place-items-end">
+                              <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                            </a>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-40">
+                            <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                              <Popover>
+                                <PopoverTrigger asChild>
+                                  <button className="w-full flex items-center gap-2">
+                                    <Icon icon="oi:share" fontSize={20} />
+                                    <p className="text-base font-semibold mb-3">Bagikan</p>
+                                  </button>
+                                </PopoverTrigger>
+                                <PopoverContent>
+                                  <div className="flex flex-col">
+                                    <h1 className="mb-2">Share Ke Email</h1>
+                                    <div className="flex flex-col mb-2">
+                                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                                    </div>
+                                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                      Kirim
+                                    </Button>
+                                  </div>
+                                </PopoverContent>
+                              </Popover>
+                            </div>
+                            <a onClick={() => handleDelete(image?.id)} className="flex items-center gap-1  hover:text-red-800 w-full rounded-lg">
+                              <Icon icon="fa:trash" fontSize={20} />
+                              <p className="text-base  font-semibold">Hapus</p>
+                            </a>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
                     </CardContent>
                   </Card>
                 ))}
diff --git a/app/[locale]/(public)/document/detail/[slug]/page.tsx b/app/[locale]/(public)/document/detail/[slug]/page.tsx
index d247839b..6548f80a 100644
--- a/app/[locale]/(public)/document/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/document/detail/[slug]/page.tsx
@@ -1,15 +1,19 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import NewContent from "@/components/landing-page/new-content";
 import { Textarea } from "@/components/ui/textarea";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
-import { close, error, loading } from "@/config/swal";
+import { close, error, loading, successCallback } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
 import { Link, useRouter } from "@/i18n/routing";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 const DetailDocument = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -29,8 +33,17 @@ const DetailDocument = () => {
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
   const [imageSizeSelected, setImageSizeSelected] = useState("l");
-
   const userId = getCookiesDecrypt("uie");
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const id = searchParams?.get("id");
+  const [width, setWidth] = useState<any>();
+  const [content, setContent] = useState<any>([]);
+  const userRoleId = getCookiesDecrypt("urie");
+
+  let typeString = "video";
 
   useEffect(() => {
     initFetch();
@@ -41,6 +54,8 @@ const DetailDocument = () => {
     const response = await getDetail(String(slug));
     console.log("detailDocument", response);
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
+    setWidth(window.innerWidth);
+    setContent(response?.data.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -216,6 +231,59 @@ const DetailDocument = () => {
     xhr.send();
   };
 
+  const handleShare = (type: any, url: any) => {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      sendActivityLog(2);
+      sendActivityLog(4);
+      if (type == "wa" && width <= 768) {
+        window.open(`whatsapp://send?${url}`, "_blank");
+      } else if (type == "wa" && width > 768) {
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+      } else {
+        window.open(url);
+      }
+    }
+  };
+
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
+
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
   return (
     <>
       <div className="px-4 md:px-24 py-4">
@@ -307,6 +375,39 @@ const DetailDocument = () => {
               </svg>
               Download
             </button>
+
+            {/* Tombol Bagikan */}
+            <div className="flex flex-row py-3">
+              <p className="text-base font-semibold">Bagikan</p>
+              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
+                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              </a>
+              <Popover>
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <div className="flex flex-col">
+                    <h1 className="mb-2">Share Ke Email</h1>
+                    <div className="flex flex-col mb-2">
+                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                    </div>
+                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                      Kirim
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
           </div>
         </div>
       </div>
diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx
index 9c84bf5e..10b24956 100644
--- a/app/[locale]/(public)/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx
@@ -1,15 +1,19 @@
 "use client";
 
 import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import NewContent from "@/components/landing-page/new-content";
 import { useToast } from "@/components/ui/use-toast";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { close, error, loading } from "@/config/swal";
+import { close, error, loading, successCallback } from "@/config/swal";
 import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
 import { Link, useRouter } from "@/i18n/routing";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 
 const DetailInfo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -29,8 +33,17 @@ const DetailInfo = () => {
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
   const [imageSizeSelected, setImageSizeSelected] = useState("l");
-
   const userId = getCookiesDecrypt("uie");
+  const [content, setContent] = useState<any>([]);
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const id = searchParams?.get("id");
+  const [width, setWidth] = useState<any>();
+  const userRoleId = getCookiesDecrypt("urie");
+
+  let typeString = "video";
 
   useEffect(() => {
     initFetch();
@@ -41,6 +54,8 @@ const DetailInfo = () => {
     const response = await getDetail(String(slug));
     console.log("detailImage", response);
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
+    setWidth(window.innerWidth);
+    setContent(response?.data.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -219,6 +234,59 @@ const DetailInfo = () => {
     xhr.send();
   };
 
+  const handleShare = (type: any, url: any) => {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      sendActivityLog(2);
+      sendActivityLog(4);
+      if (type == "wa" && width <= 768) {
+        window.open(`whatsapp://send?${url}`, "_blank");
+      } else if (type == "wa" && width > 768) {
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+      } else {
+        window.open(url);
+      }
+    }
+  };
+
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
+
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
   return (
     <>
       <div className="min-h-screen px-4 md:px-24 py-4">
@@ -296,7 +364,7 @@ const DetailInfo = () => {
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
                   <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={(e) => setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -321,6 +389,39 @@ const DetailInfo = () => {
               </svg>
               Download
             </button>
+
+            {/* Tombol Bagikan */}
+            <div className="flex flex-row py-3">
+              <p className="text-base font-semibold">Bagikan</p>
+              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
+                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              </a>
+              <Popover>
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <div className="flex flex-col">
+                    <h1 className="mb-2">Share Ke Email</h1>
+                    <div className="flex flex-col mb-2">
+                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                    </div>
+                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                      Kirim
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
           </div>
         </div>
       </div>
diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index b874433d..a7e9b1e7 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -486,7 +486,7 @@ const FilterPage = () => {
                   <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
                     <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                       <Link href={`/image/detail/${image?.slug}`}>
-                        <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
+                        <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
                         <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                           {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
                           {image?.clickCount}{" "}
diff --git a/app/[locale]/(public)/inbox/layout.tsx b/app/[locale]/(public)/inbox/layout.tsx
new file mode 100644
index 00000000..fab820cf
--- /dev/null
+++ b/app/[locale]/(public)/inbox/layout.tsx
@@ -0,0 +1,22 @@
+import LayoutProvider from "@/providers/layout.provider";
+import LayoutContentProvider from "@/providers/content.provider";
+import DashCodeSidebar from "@/components/partials/sidebar";
+import DashCodeFooter from "@/components/partials/footer";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeHeader from "@/components/partials/header";
+
+import { redirect } from "@/components/navigation";
+import Footer from "@/components/landing-page/footer";
+import Navbar from "@/components/landing-page/navbar";
+
+const layout = async ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  );
+};
+
+export default layout;
diff --git a/app/[locale]/(public)/inbox/page.tsx b/app/[locale]/(public)/inbox/page.tsx
new file mode 100644
index 00000000..f7626ff3
--- /dev/null
+++ b/app/[locale]/(public)/inbox/page.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { Link, usePathname } from "@/i18n/routing";
+import { getUserNotifications } from "@/service/landing/landing";
+import { getTimestamp } from "@/utils/globals";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+const InboxSection = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const isUpdate = pathname.includes("update");
+  const searchParams = useSearchParams();
+
+  const page: any = searchParams?.get("page");
+
+  const pages = page ? page - 1 : 0;
+
+  const [notifications, setNotifications] = useState([]);
+  const [getTotalData, setGetTotalData] = useState();
+  const [, setGetTotalPage] = useState();
+
+  useEffect(() => {
+    async function getNotif() {
+      const response = await getUserNotifications(pages, 2);
+      setNotifications(response?.data?.data?.content);
+      setGetTotalData(response?.data?.data?.totalElements);
+      setGetTotalPage(response?.data?.data?.totalPage);
+    }
+
+    async function getNotifUpdate() {
+      const response = await getUserNotifications(pages, 3);
+      setNotifications(response?.data?.data?.content);
+      setGetTotalData(response?.data?.data?.totalElements);
+      setGetTotalPage(response?.data?.data?.totalPage);
+    }
+
+    if (isUpdate) {
+      getNotifUpdate();
+    } else {
+      getNotif();
+    }
+  }, [pages]);
+
+  return (
+    <div className="max-w-6xl h-screen flex flex-col mx-auto p-4 lg:p-24 gap-5">
+      <div className="flex items-center justify-center mb-6">
+        <svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 24 24">
+          <g fill="#bb3523" fill-rule="evenodd" clip-rule="evenodd">
+            <path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" />
+            <path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21" />
+          </g>
+        </svg>{" "}
+        <h2 className="ml-4 text-[15px] lg:text-[32px] font-semibold text-gray-800">Pesan Masuk</h2>
+      </div>
+
+      <div className="flex flex-col justify-center items-center gap-3">
+        <div className="flex justify-center">
+          <div className="flex flex-row gap-10 items-center justify-center">
+            <div>
+              <p className="bg-[#bb3523] py-1 px-3 rounded-full">Pesan Masuk</p>
+            </div>
+            <Link href={`/inbox/update`}>Update</Link>
+          </div>
+        </div>
+        <div className="py-10 px-8 w-[400px] mt-3 border border-black rounded-lg flex flex-col">
+          <h1 className="mb-3 text-lg font-semibold">List Notifikasi</h1>
+          <div className="hover:bg-slate-200 rounded-md">
+            {notifications?.map((list: any) => (
+              <a className="flex flex-row items-center ml-1" href={"/" + list.redirectUrl}>
+                {(() => {
+                  switch (Number(list.notificationTypeId)) {
+                    case 2:
+                      return (
+                        <div className="text-[#bb3523]">
+                          {" "}
+                          <Icon icon="fa:comment" fontSize={25} />{" "}
+                        </div>
+                      );
+
+                    case 3:
+                      return (
+                        <div className="text-[#bb3523]">
+                          {" "}
+                          <Icon icon="fa:upload" fontSize={25} />{" "}
+                        </div>
+                      );
+
+                    case 4:
+                      return (
+                        <div className="text-[#bb3523]">
+                          {" "}
+                          <Icon icon="la:check-double" fontSize={25} />{" "}
+                        </div>
+                      );
+
+                    case 5:
+                      return (
+                        <div className="text-[#bb3523]">
+                          {" "}
+                          <Icon icon="fa:comments" fontSize={25} />{" "}
+                        </div>
+                      );
+
+                    case 6:
+                      return (
+                        <div className="text-[#bb3523]">
+                          {" "}
+                          <Icon icon="fa:tasks" fontSize={25} />{" "}
+                        </div>
+                      );
+
+                    case 7:
+                      return (
+                        <div className="text-[#bb3523]">
+                          {" "}
+                          <Icon icon="fa:pencil-square" fontSize={25} />{" "}
+                        </div>
+                      );
+
+                    case 8:
+                      return (
+                        <div className="text-[#bb3523]">
+                          {" "}
+                          <Icon icon="fa:times-circle" fontSize={25} />{" "}
+                        </div>
+                      );
+
+                    default:
+                      return (
+                        <div className="text-[#bb3523]">
+                          {" "}
+                          <Icon icon="fa:info-circle" fontSize={25} />{" "}
+                        </div>
+                      );
+                  }
+                })()}
+                <div className="ml-3">
+                  <span className="block">{list.message}</span>
+                  <span className="text-xs">{getTimestamp(new Date(list.createdAt))}</span>
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InboxSection;
diff --git a/app/[locale]/(public)/inbox/update/page.tsx b/app/[locale]/(public)/inbox/update/page.tsx
new file mode 100644
index 00000000..4f31e10a
--- /dev/null
+++ b/app/[locale]/(public)/inbox/update/page.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { Link, usePathname } from "@/i18n/routing";
+import { getUserNotifications } from "@/service/landing/landing";
+import { getTimestamp } from "@/utils/globals";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+const UpdateSection = () => {
+  const pathname = usePathname();
+  const isUpdate = pathname.includes("update");
+  const searchParams = useSearchParams();
+  const page: any = searchParams?.get("page");
+  const pages = page ? page - 1 : 0;
+
+  const [notifications, setNotifications] = useState([]);
+  const [getTotalData, setGetTotalData] = useState();
+  const [, setGetTotalPage] = useState();
+
+  useEffect(() => {
+    async function getNotif() {
+      const response = await getUserNotifications(pages, 2);
+      setNotifications(response?.data?.data?.content);
+      setGetTotalData(response?.data?.data?.totalElements);
+      setGetTotalPage(response?.data?.data?.totalPage);
+    }
+
+    async function getNotifUpdate() {
+      const response = await getUserNotifications(pages, 3);
+      setNotifications(response?.data?.data?.content);
+      setGetTotalData(response?.data?.data?.totalElements);
+      setGetTotalPage(response?.data?.data?.totalPage);
+    }
+
+    if (isUpdate) {
+      getNotifUpdate();
+    } else {
+      getNotif();
+    }
+  }, [pages]);
+
+  return (
+    <div className="max-w-6xl h-screen flex flex-col mx-auto p-4 lg:p-24 gap-5">
+      <div className="flex items-center justify-center mb-6">
+        <svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 24 24">
+          <g fill="#bb3523" fill-rule="evenodd" clip-rule="evenodd">
+            <path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" />
+            <path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21" />
+          </g>
+        </svg>{" "}
+        <h2 className="ml-4 text-[15px] lg:text-[32px] font-semibold text-gray-800">Update</h2>
+      </div>
+
+      <div className="flex flex-col items-center gap-3">
+        <div className="flex justify-center">
+          <div className="flex flex-row gap-10 items-center justify-center">
+            <div>
+              <Link href={`/inbox`}>Pesan Masuk</Link>
+            </div>
+            <div className="bg-[#bb3523] py-1 px-3 rounded-full">Update</div>
+          </div>
+        </div>
+        <div className="py-10 px-8 w-[400px] mt-3 border border-black rounded-lg flex flex-col">
+          <h1 className="mb-3 text-lg font-semibold">List Notifikasi</h1>
+          <div className="hover:bg-slate-200 rounded-md">
+            {notifications?.map((list: any) => (
+              <a className="flex flex-row items-center ml-1" href={"/" + list.redirectUrl}>
+                {(() => {
+                  switch (Number(list.notificationTypeId)) {
+                    case 2:
+                      return (
+                        <div className="text-red-500">
+                          {" "}
+                          <Icon icon="fa:comment" />{" "}
+                        </div>
+                      );
+
+                    case 3:
+                      return (
+                        <div className="text-red-500">
+                          {" "}
+                          <Icon icon="fa:upload" fontSize={25} />{" "}
+                        </div>
+                      );
+
+                    case 4:
+                      return (
+                        <div className="text-red-500">
+                          {" "}
+                          <Icon icon="la:check-double" />{" "}
+                        </div>
+                      );
+
+                    case 5:
+                      return (
+                        <div className="text-red-500">
+                          {" "}
+                          <Icon icon="fa:comments" />{" "}
+                        </div>
+                      );
+
+                    case 6:
+                      return (
+                        <div className="notif-icon notif-danger">
+                          {" "}
+                          <Icon icon="fa:tasks" />{" "}
+                        </div>
+                      );
+
+                    case 7:
+                      return (
+                        <div className="notif-icon notif-primary">
+                          {" "}
+                          <Icon icon="fa:pencil-square" />{" "}
+                        </div>
+                      );
+
+                    case 8:
+                      return (
+                        <div className="text-red-500">
+                          {" "}
+                          <Icon icon="fa:times-circle" />{" "}
+                        </div>
+                      );
+
+                    default:
+                      return (
+                        <div className="text-red-500">
+                          {" "}
+                          <Icon icon="fa:info-circle" />{" "}
+                        </div>
+                      );
+                  }
+                })()}
+                <div className="ml-3">
+                  <span className="block">{list.message}</span>
+                  <span className="text-xs">{getTimestamp(new Date(list.createdAt))}</span>
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateSection;
diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx
index 5b9f747a..747b61ea 100644
--- a/app/[locale]/(public)/video/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
@@ -9,8 +9,13 @@ import NewContent from "@/components/landing-page/new-content";
 import { Link, useRouter } from "@/i18n/routing";
 import { Textarea } from "@/components/ui/textarea";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { close, error, loading } from "@/config/swal";
+import { close, error, loading, successCallback } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
 
 const DetailVideo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -28,8 +33,17 @@ const DetailVideo = () => {
   const [isFromSPIT, setIsFromSPIT] = useState(false);
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
-
   const userId = getCookiesDecrypt("uie");
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const id = searchParams?.get("id");
+  const [width, setWidth] = useState<any>();
+  const [content, setContent] = useState<any>([]);
+  const userRoleId = getCookiesDecrypt("urie");
+
+  let typeString = "video";
 
   useEffect(() => {
     initFetch();
@@ -40,6 +54,8 @@ const DetailVideo = () => {
     const response = await getDetail(String(slug));
     console.log("detailVideo", response);
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
+    setWidth(window.innerWidth);
+    setContent(response?.data.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -216,6 +232,59 @@ const DetailVideo = () => {
     xhr.send();
   };
 
+  const handleShare = (type: any, url: any) => {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      sendActivityLog(2);
+      sendActivityLog(4);
+      if (type == "wa" && width <= 768) {
+        window.open(`whatsapp://send?${url}`, "_blank");
+      } else if (type == "wa" && width > 768) {
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+      } else {
+        window.open(url);
+      }
+    }
+  };
+
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: id?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
+
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
   return (
     <>
       <div className="px-4 md:px-24 py-4">
@@ -318,6 +387,39 @@ const DetailVideo = () => {
               </svg>
               Download
             </button>
+
+            {/* Tombol Bagikan */}
+            <div className="flex flex-row py-3">
+              <p className="text-base font-semibold">Bagikan</p>
+              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
+                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              </a>
+              <Popover>
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <div className="flex flex-col">
+                    <h1 className="mb-2">Share Ke Email</h1>
+                    <div className="flex flex-col mb-2">
+                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                    </div>
+                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                      Kirim
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
           </div>
         </div>
       </div>
diff --git a/app/[locale]/auth/page.tsx b/app/[locale]/auth/page.tsx
index 2c642a15..b627a490 100644
--- a/app/[locale]/auth/page.tsx
+++ b/app/[locale]/auth/page.tsx
@@ -19,8 +19,7 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
       <div className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full">
         <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
           <div
-            className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 
- relative z-[1] bg-default-50"
+            className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 relative z-[1] bg-default-50"
           >
             <div className="max-w-[520px] pt-16 ps-20 ">
               <Link href="/" className="mb-6 inline-block">
diff --git a/app/[locale]/auth/registration/page.tsx b/app/[locale]/auth/registration/page.tsx
new file mode 100644
index 00000000..be0dbe16
--- /dev/null
+++ b/app/[locale]/auth/registration/page.tsx
@@ -0,0 +1,1012 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import Image from "next/image";
+
+import { close, error, loading, registerConfirm } from "@/config/swal";
+import { Link, useRouter } from "@/i18n/routing";
+import { getDataByNIK, getDataByNRP, getDataJournalist, getDataPersonil, listCity, listDistricts, listInstitusi, listProvince, postRegistration, saveInstitutes } from "@/service/auth";
+import { requestOTP, verifyOTP } from "@/service/landing/landing";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useParams, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm, SubmitHandler } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import * as Yup from "yup";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp";
+import { Textarea } from "@/components/ui/textarea";
+import { Icon } from "@/components/ui/icon";
+import dynamic from "next/dynamic";
+import ReactPasswordChecklist from "react-password-checklist";
+
+type Inputs = {
+  example: string;
+  exampleRequired: string;
+};
+
+const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
+  ssr: false,
+});
+
+const page = () => {
+  const params = useParams();
+  const [stepOneActive] = useState(true);
+  const [stepTwoActive, setStepTwoActive] = useState(false);
+  const [stepThreeActive, setStepThreeActive] = useState(false);
+  const [typePass, setTypePass] = useState("password");
+  const [typePassConf, setTypePassConf] = useState("password");
+  const searchParams = useSearchParams();
+  const [formProfile, setFormProfile] = useState(false);
+  const [journalistCertificate, setJournalistCertificate] = useState();
+  const [personilNRP, setPersonilNRP] = useState();
+  const [journalistData, setJournalistData] = useState<any>();
+  const [personilData, setPersonilData] = useState<any>();
+  const [userIdentity] = useState();
+  const [userIdentityValidate, setUserIdentityValidate] = useState("");
+  const [email, setEmail] = useState<any>();
+  const [emailValidate, setEmailValidate] = useState("");
+  const [otpValidate, setOtpValidate] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordConf, setPasswordConf] = useState("");
+  const [city, setCity] = useState([]);
+  const [isValidPassword, setIsValidPassword] = useState(false);
+  const MySwal = withReactContent(Swal);
+  const [isCustomActive, setIsCustomActive] = useState(false);
+  const [institusi, setInstitusi] = useState();
+  const [customInstituteName, setCustomInstituteName] = useState("");
+  const [institusiAddress, setInstitusiAddress] = useState<any>();
+  const [institution, setInstitution] = useState<any>([]);
+  const [province, setProvince] = useState<any>([]);
+  const router = useRouter();
+  const category = searchParams?.get("category");
+  const [districts, setDistricts] = useState([]);
+  const [, setAssociation] = useState<any>();
+  const [warningPassConf] = useState();
+
+  const [otp1, setOtp1] = useState();
+  const [otp2, setOtp2] = useState();
+  const [otp3, setOtp3] = useState();
+  const [otp4, setOtp4] = useState();
+  const [otp5, setOtp5] = useState();
+  const [otp6, setOtp6] = useState();
+
+  const nMinuteSeconds = 60;
+  const nSecondInMiliseconds = 1000;
+  const [, setRefreshTimer] = useState(false);
+
+  const validationSchema = Yup.object().shape({
+    firstName: Yup.string().required("Nama Lengkap tidak boleh kosong"),
+    username: Yup.string().required("Username tidak boleh kosong"),
+    phoneNumber: Yup.string().required("Nomor Telepon tidak boleh kosong"),
+    address: Yup.string().required("Alamat tidak boleh kosong"),
+    email: Yup.string().required("Email tidak boleh kosong"),
+    provinsi: Yup.string().required("Provinsi tidak boleh kosong"),
+    kota: Yup.string().required("Kota tidak boleh kosong"),
+    kecamatan: Yup.string().required("Kecamatan tidak boleh kosong"),
+    password: Yup.string().required("Kata Sandi tidak boleh kosong"),
+    passwordConf: Yup.string().required("Konfirmasi Kata Sandi tidak boleh kosong"),
+  });
+
+  const formOptions = {
+    resolver: yupResolver(validationSchema),
+  };
+
+  const { register, handleSubmit, formState, setValue } = useForm<any>(formOptions);
+
+  const convertMinutesToMiliseconds = (minute: any) => minute * nMinuteSeconds * nSecondInMiliseconds;
+
+  const convertMilisecondsToHour = (miliseconds: any) => new Date(miliseconds).toISOString().slice(17, -5);
+
+  let [timerCount, setTimerCount] = useState(convertMinutesToMiliseconds(1));
+  let interval: any;
+
+  const showPass = () => {
+    setTypePass("text");
+  };
+
+  const hidePass = () => {
+    setTypePass("password");
+  };
+
+  const showPassConf = () => {
+    setTypePassConf("text");
+  };
+
+  const hidePassConf = () => {
+    setTypePassConf("password");
+  };
+
+  const setValUsername = (e: any) => {
+    const uname = e.replaceAll(/[^\w.-]/g, "");
+    setValue("username", uname.toLowerCase());
+  };
+
+  const setValPassword = (e: any) => {
+    setValue("password", e);
+    setPassword(e);
+  };
+
+  const setValPasswordConf = (e: any) => {
+    setPasswordConf(e);
+  };
+
+  const { errors }: any = formState;
+
+  async function save(data: any) {
+    // loading();
+    let institutionId = 1;
+
+    if (Number(category) == 6) {
+      const dataInstitution =
+        isCustomActive == true
+          ? {
+              name: customInstituteName,
+              address: institusiAddress,
+              categoryRoleId: Number(category),
+            }
+          : {
+              id: institusi,
+              address: institusiAddress,
+            };
+
+      console.log(dataInstitution);
+
+      const resInstitution = await saveInstitutes(dataInstitution);
+
+      institutionId = resInstitution?.data?.data?.id;
+      if (resInstitution?.error) {
+        error(resInstitution?.message);
+        return false;
+      }
+    }
+
+    // const sanitizedFirstName = sanitizeHtml(data.firstName);
+
+    //     if (sanitizedFirstName == "") {
+    //       error("Invalid Name");
+    //     } else {
+    //       const datas = {
+    //         firstName: sanitizedFirstName,
+    //         lastName: "",
+    //         username: data.username,
+    //         phoneNumber: data.phoneNumber,
+    //         email,
+    //         address: data.address,
+    //         memberIdentity: userIdentity,
+    //         provinceId: Number(data.provinsi),
+    //         cityId: Number(data.kota),
+    //         districtId: Number(data.kecamatan),
+    //         password: data.password,
+    //         instituteId: Number(institutionId),
+    //         roleId: Number(category),
+    //       };
+
+    //       const response = await postRegistration(datas);
+    //       console.log(response);
+    //       if (response?.error) {
+    //         error(response?.message);
+    //         return false;
+    //       }
+
+    //       registerConfirm();
+    //       return false;
+    //     }
+  }
+
+  const handleSendOTP = async () => {
+    console.log(userIdentity, email);
+    if (Number(category) == 6) {
+      // const journalist = await handleJournalistCertificate();
+      console.log(email, journalistCertificate);
+      if (email != "" && journalistCertificate != undefined) {
+        const data = {
+          memberIdentity: journalistCertificate,
+          email,
+          category: 6,
+        };
+
+        loading();
+        const response = await requestOTP(data);
+
+        if (response?.error) {
+          error(response.message);
+          return false;
+        }
+
+        close();
+        handleJournalistCertificate();
+        setStepTwoActive(true);
+      } else {
+        console.log("identity empty");
+        setUserIdentityValidate("Nomor identitas tidak boleh kosong");
+      }
+    } else if (Number(category) == 7) {
+      console.log(email, personilNRP);
+      if (email != "" && personilNRP != undefined) {
+        const data = {
+          memberIdentity: personilNRP,
+          email,
+          category: 7,
+        };
+
+        loading();
+        const response = await requestOTP(data);
+
+        if (response?.error) {
+          error(response?.message);
+          return false;
+        }
+
+        close();
+        handleDataNRP();
+        setStepTwoActive(true);
+      } else {
+        console.log("identity empty");
+        setUserIdentityValidate("Nomor identitas tidak boleh kosong");
+      }
+    } else {
+      console.log("UMUM");
+      if (email != "") {
+        const data = {
+          memberIdentity: null,
+          email,
+          category,
+        };
+
+        loading();
+        const response = await requestOTP(data);
+
+        if (response?.error) {
+          error(response?.message);
+          return false;
+        }
+
+        close();
+        setStepTwoActive(true);
+      }
+    }
+  };
+
+  const handleJournalistCertificate = async () => {
+    const response = await getDataJournalist(journalistCertificate);
+    const data = response?.data?.data;
+    console.log(data);
+    if (data) {
+      setJournalistData(data[0]);
+    }
+
+    console.log("Data jurnalis:", data);
+    return data;
+  };
+
+  const handleTypeOTP = (event: any) => {
+    const { form } = event.target;
+    const index = [...form].indexOf(event.target);
+    form.elements[index + 1].focus();
+    event.preventDefault();
+  };
+
+  const handleResendOTP = async () => {
+    const timer = convertMilisecondsToHour(timerCount);
+
+    if (timer == "00") {
+      handleSendOTP();
+      restartTimer();
+    }
+  };
+
+  function restartTimer() {
+    setTimerCount(60_000);
+    setRefreshTimer(true);
+    startInterval();
+  }
+
+  function startInterval() {
+    interval = setInterval(() => {
+      if (timerCount == 1000 && interval) {
+        clearInterval(interval);
+        console.log("Reset");
+      }
+
+      timerCount = timerCount == 0 ? 60_000 : timerCount;
+      setTimerCount((timerCount -= nSecondInMiliseconds));
+    }, nSecondInMiliseconds);
+  }
+
+  const handleDataNRP = async () => {
+    const response = await getDataPersonil(personilNRP);
+    const data = response?.data?.data;
+    setPersonilData(data);
+    console.log("Data personil:", data);
+    return data;
+  };
+
+  const handleInstituteOption = (e: any) => {
+    if (e.target.value == "0") {
+      setIsCustomActive(true);
+    } else {
+      setIsCustomActive(false);
+      setInstitusi(e.target.value);
+    }
+  };
+
+  //   const {
+  //     register,
+  //     handleSubmit,
+  //     watch,
+  //     formState: { errors },
+  //   } = useForm<Inputs>();
+  //   const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
+  //   console.log(watch("example"));
+
+  function setDataToForm() {
+    if (Number(category) == 6 && journalistData) {
+      setValue("firstName", journalistData.journalistName);
+      setValue("memberIdentity", journalistData.certNumber);
+      const selectedProvince = province.find((o: any) => o.provName == journalistData.province?.toUpperCase());
+
+      if (selectedProvince !== undefined) {
+        setValue("provinsi", selectedProvince.id);
+      }
+    } else if (Number(category) == 7 && personilData) {
+      setValue("firstName", personilData.lastName);
+      setValue("memberIdentity", personilData.nrp);
+    }
+  }
+
+  const checkEmail = (e: any) => {
+    const regEmail = /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/;
+
+    if (regEmail.test(e)) {
+      setEmailValidate("");
+      setEmail(e);
+    } else {
+      setEmailValidate("Email tidak valid");
+      setEmail("");
+    }
+  };
+
+  async function onSubmit(data: any) {
+    console.log("Submit");
+
+    if (isValidPassword) {
+      MySwal.fire({
+        title: "Buat akun",
+        text: "",
+        icon: "warning",
+        showCancelButton: true,
+        cancelButtonColor: "#d33",
+        confirmButtonColor: "#3085d6",
+        confirmButtonText: "Buat",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          save(data);
+        }
+      });
+    } else {
+      error("Kata Sandi harus sama");
+    }
+  }
+
+  const handleIdentity = async (e: any) => {
+    const id = e;
+    console.log(id);
+    await new Promise((resolve) => setTimeout(resolve, 2000)); // 2 sec
+    if (Number(category) == 5) {
+      const reqId =
+        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
+      const response = await getDataByNIK(reqId, id);
+      const data = response?.data?.data_return[0];
+
+      console.log(data);
+      if (data !== undefined) {
+        setValue("firstName", data.nama_lengkap);
+        setValue("address", data.alamat);
+        const selectedProvince = province.find((o: any) => o.provName == data.prov?.toUpperCase());
+
+        if (selectedProvince !== undefined) {
+          setValue("provinsi", selectedProvince.id);
+        }
+
+        const selectedCity: any = city.find((o: any) => o.cityName == data.kab_kota?.toUpperCase());
+
+        if (selectedCity !== undefined) {
+          setValue("kota", selectedCity?.id);
+        }
+
+        const selectedDistrict: any = districts.find((o: any) => o.disName == data.kec?.toUpperCase());
+
+        if (selectedDistrict !== undefined) {
+          setValue("kecamatan", selectedDistrict?.id);
+        }
+      }
+    } else if (Number(category) == 7) {
+      const reqId =
+        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
+      const response = await getDataByNRP(reqId, id);
+      const data = response?.data?.data_return[0];
+
+      console.log("Data :", data);
+      if (data !== undefined) {
+        setValue("firstName", data.nama);
+        setValue("address", data.lokasi);
+      }
+    }
+  };
+
+  const getCity = async (e: any) => {
+    const res = await listCity(e);
+    setCity(res?.data.data);
+  };
+
+  const getDistricts = async (e: any) => {
+    const res = await listDistricts(e);
+    setDistricts(res?.data.data);
+  };
+
+  const handleVerifyOTP = async () => {
+    const otp = `${otp1}${otp2}${otp3}${otp4}${otp5}${otp6}`;
+
+    if (email != "" && otp.length == 6) {
+      console.log("verify otp");
+      loading();
+      // const response = {
+      //   message: "success",
+      // };
+
+      const response = await verifyOTP(email, otp);
+      if (response?.error) {
+        error(response?.message);
+        return false;
+      }
+      close();
+      // console.log(response);
+      if (response?.message == "success") {
+        console.log("success");
+        setStepThreeActive(true);
+        setFormProfile(true);
+        setOtpValidate("");
+        setValue("email", email);
+        setValue("memberIdentity", userIdentity);
+        handleIdentity(userIdentity);
+        setDataToForm();
+      } else {
+        setOtpValidate("Kode OTP Tidak Valid");
+      }
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (category != undefined) {
+        const resInstiution = await listInstitusi(category);
+        const res = await listProvince();
+        setInstitution(resInstiution?.data.data);
+        setProvince(res?.data.data);
+      }
+    }
+
+    initState();
+  }, [category]);
+
+  useEffect(() => {
+    function initState() {
+      for (const element of institution) {
+        const { id } = element;
+
+        if (id == institusi) {
+          setInstitusiAddress(element.address);
+        }
+      }
+    }
+
+    initState();
+  }, [institusi]);
+
+  useEffect(() => {
+    async function initState() {
+      if (category != undefined) {
+        const resInstiution = await listInstitusi(category);
+        const res = await listProvince();
+        setInstitution(resInstiution?.data.data);
+        setProvince(res?.data.data);
+      }
+    }
+
+    initState();
+  }, [category]);
+
+  return (
+    <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
+      <div className="lg:block hidden flex-1 overflow-hidden bg-black text-[40px] leading-[48px] text-default-600 relative z-[1]">
+        <div className="max-w-[520px] pt-16 ps-20 ">
+          <Link href="/" className="mb-6 inline-block">
+            <Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" />
+          </Link>
+        </div>
+        <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
+          <Image src="/assets/vector-login.svg" alt="" width={300} height={300} className="mb-10 w-full h-full" />
+        </div>
+      </div>
+
+      <form
+        className="flex-1 bg-[#f7f7f7]"
+        onSubmit={handleSubmit(onSubmit)}
+        style={
+          Number(category) < 5
+            ? {
+                display: "none",
+              }
+            : {}
+        }
+      >
+        <div className="flex flex-col first-letter:mb-8 ">
+          <div className="flex flex-row justify-center py-10">
+            <ul className="flex flex-row items-center text-center">
+              <li>
+                <div className={`text-center text-black bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepOneActive ? "active bg-white  border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
+                  <span>
+                    <b className="items-center">1</b>
+                  </span>
+                </div>
+              </li>
+              <div className="w-16 h-1 z-[1] bg-[#f32d2d] "></div>
+              <li>
+                <div className={`text-center text-white bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepTwoActive ? "active bg-white border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
+                  <span>
+                    <b>2</b>
+                  </span>
+                </div>
+              </li>
+              <div className="w-16 h-1 bg-[#f32d2d]"></div>
+              <li>
+                <div className={`text-center text-white bg-[#f32d2d] h-[40px] w-[40px] borde rounded-full ${stepThreeActive ? "active bg-white  border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
+                  <span>
+                    <b>3</b>
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+
+          <div className="flex flex-row ">
+            <div
+              className="px-8 my-10 gap-3"
+              style={
+                stepTwoActive && !formProfile
+                  ? {
+                      display: "none",
+                    }
+                  : {}
+              }
+            >
+              <p className="text-4xl px-12 font-bold ">{stepThreeActive ? "Silahkan lengkapi data pengguna" : "Silahkan registrasi terlebih dahulu"}</p>
+              <p className="px-12">
+                Sudah memiliki akun?{" "}
+                <Link href="/auth" className="text-red-500">
+                  <b>Masuk</b>
+                </Link>
+              </p>
+            </div>
+            <div
+              style={
+                !stepTwoActive || (stepOneActive && stepThreeActive)
+                  ? {
+                      display: "none",
+                    }
+                  : {}
+              }
+            >
+              <h2 className="text-black px-12">
+                <b>Masukkan Kode OTP</b>
+              </h2>
+              <p className="text-red-500 px-12">Silahkan cek inbox atau kotak spam pada email Anda.</p>
+            </div>
+          </div>
+
+          <div className={`flex flex-col gap-3 px-12 ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
+            <div
+              className=" flex flex-col px-8 "
+              style={
+                Number(category) == 6
+                  ? {}
+                  : {
+                      display: "none",
+                    }
+              }
+            >
+              <label htmlFor="association" className="mb-3">
+                <b>Jenis Keanggotaan</b> <span className="text-red-500">*</span>
+              </label>
+              <select className={`py-3 rounded-md border border-black ${errors.association ? "block" : ""}`} {...register("association")} id="association" onChange={(e) => setAssociation(e.target.value)}>
+                <option disabled selected>
+                  Pilih Asosiasi
+                </option>
+                <option value="PWI" key="1">
+                  PWI (Persatuan Wartawan Indonesia)
+                </option>
+                <option value="IJTI" key="2">
+                  IJTI (Ikatan Jurnalis Televisi Indonesia)
+                </option>
+                <option value="PFI" key="3">
+                  PFI (Pewarta Foto Indonesia)
+                </option>
+                <option value="AJI" key="4">
+                  AJI (Asosiasi Jurnalis Indonesia)
+                </option>
+                <option value="Wartawan" key="5">
+                  Identitas Lainnya
+                </option>
+              </select>
+              <div className="hidden w-full mt-[0.25rem] text-lg text-[#dc3545]">{errors.association?.message}</div>
+            </div>
+
+            {Number(category) == 7 ? (
+              <div className="px-8">
+                <label htmlFor="userIdentity" className="mb-3">
+                  <b>Nomor Registrasi Polri (NRP)</b> <span className="text-red-500">*</span>
+                </label>
+                <Input className="mt-3" autoComplete="off" placeholder="Masukan Nomor Registrasi Polri Anda" type="text" onChange={(event: any) => setPersonilNRP(event.target.value)} />
+                <p className="text-red-500">{userIdentityValidate}</p>
+              </div>
+            ) : (
+              ""
+            )}
+            {Number(category) == 6 ? (
+              <div
+                className="px-8 mb-3"
+                style={
+                  Number(category) == 6
+                    ? {}
+                    : {
+                        display: "none",
+                      }
+                }
+              >
+                <label htmlFor="journalistCertificate">
+                  <b>Nomor Sertifikasi Wartawan</b> <span className="text-red-500">*</span>
+                </label>
+                <Input className="rounded-md py-3" autoComplete="off" placeholder="Masukan Nomor Sertifikasi" type="text" onChange={(event: any) => setJournalistCertificate(event.target.value)} />
+              </div>
+            ) : (
+              ""
+            )}
+            <div className="flex flex-col w-full px-8 gap-2">
+              <label htmlFor="email">
+                <b>Email</b> <span className="text-red-500">*</span>
+              </label>
+              <Input className="w-full" autoComplete="off" placeholder="Masukan Email Anda" type="email" onChange={(event) => checkEmail(event.target.value)} />
+              <p className="text-sm text-red-500 mt-1">{emailValidate}</p>
+            </div>
+          </div>
+
+          <div className={`flex flex-row mt-4 px-12 ${!stepTwoActive || stepThreeActive ? "hidden" : ""}`}>
+            <div className="flex justify-center">
+              <InputOTP maxLength={6}>
+                <InputOTPGroup>
+                  <InputOTPSlot index={0} onChange={(e: any) => setOtp1(e.target.value)} onKeyUp={handleTypeOTP} />
+                  <InputOTPSlot index={1} onChange={(e: any) => setOtp2(e.target.value)} onKeyUp={handleTypeOTP} />
+                </InputOTPGroup>
+                <InputOTPSeparator />
+                <InputOTPGroup>
+                  <InputOTPSlot index={2} onChange={(e: any) => setOtp3(e.target.value)} onKeyUp={handleTypeOTP} />
+                  <InputOTPSlot index={3} onChange={(e: any) => setOtp4(e.target.value)} onKeyUp={handleTypeOTP} />
+                </InputOTPGroup>
+                <InputOTPSeparator />
+                <InputOTPGroup>
+                  <InputOTPSlot index={4} onChange={(e: any) => setOtp5(e.target.value)} onKeyUp={handleTypeOTP} />
+                  <InputOTPSlot index={5} onChange={(e: any) => setOtp6(e.target.value)} onKeyUp={handleTypeOTP} />
+                </InputOTPGroup>
+              </InputOTP>
+            </div>
+            <p className="text-red-500">
+              <b>{otpValidate}</b>
+            </p>
+            <div className="flex justify-between mt-4">
+              <a className="mr-1 w-full text-base cursor-pointer" onClick={() => handleResendOTP()}>
+                Kirim Ulang ({convertMilisecondsToHour(timerCount)})
+              </a>
+              <a className="text-red-500 ml-1 w-[75%] cursor-pointer" onClick={() => handleVerifyOTP()}>
+                Lanjut
+              </a>
+            </div>
+          </div>
+
+          <div className={`flex flex-row my-4 px-12 ${formProfile == false ? "hidden" : ""}`}>
+            <div>
+              {Number(category) == 6 || Number(category) == 7 ? (
+                <div className="">
+                  <label className="">
+                    <b>{`${Number(category) == 6 ? "Nomor Sertifikasi Wartawan" : "NRP"}`}</b> <span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    type="text"
+                    autoComplete="off"
+                    className={` ${errors.memberIdentity ? "block" : ""}`}
+                    {...register("memberIdentity")}
+                    placeholder="Masukan Nomor Identitas"
+                    onChange={(e) => handleIdentity(e.target.value)}
+                    disabled
+                  />
+                  <div className="text-red-500">{errors.memberIdentity?.message}</div>
+                </div>
+              ) : (
+                ""
+              )}
+              <div className="">
+                <label className="">
+                  <b>Nama Lengkap</b> <span className="text-red-500">*</span>
+                </label>
+                <Input type="text" autoComplete="off" className={` ${errors.firstName ? "block" : ""}`} {...register("firstName")} placeholder="Masukan Nama Lengkap Anda" />
+                <div className="text-red-500">{errors.firstName?.message}</div>
+              </div>
+              <div className="">
+                <label className="">
+                  <b>Username</b> <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  type="text"
+                  autoComplete="off"
+                  className={`form-control ${errors.username ? "block" : ""}`}
+                  {...register("username")}
+                  placeholder="Masukan Username"
+                  onChange={(e) => {
+                    setValUsername(e.target.value.trim());
+                  }}
+                  onPaste={(e: any) => {
+                    setValUsername(e.target.value.trim());
+                  }}
+                  onCopy={(e: any) => {
+                    setValUsername(e.target.value.trim());
+                  }}
+                />
+                <div className="text-red-500">{errors.username?.message}</div>
+              </div>
+              <div className="">
+                <label className="">
+                  <b>Email</b> <span className="text-red-500">*</span>
+                </label>
+                <Input type="email" autoComplete="off" className={` ${errors.email ? "block" : ""}`} {...register("email")} placeholder="Masukan Email Anda" disabled />
+                <div className="text-red-500">{errors.email?.message}</div>
+              </div>
+            </div>
+            <div className="">
+              <label className="form-label">
+                <b>No. HP</b> <span className="text-red-500">*</span>
+              </label>
+              <input type="number" autoComplete="off" className={` ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder="Masukan Nomor Telepon Anda" />
+              <div className="text-red-500">{errors.phoneNumber?.message}</div>
+            </div>
+            <div className="">
+              <label htmlFor="address" className="">
+                <b>Alamat</b> <span className="text-red-500">*</span>
+              </label>
+              <Textarea className={`form-control ${errors.address ? "block" : ""}`} {...register("address")} placeholder="Masukan Alamat Lengkap Anda" rows={3} />
+              <div className="text-red-500">{errors.address?.message}</div>
+            </div>
+            {Number(category) == 6 ? (
+              <div>
+                <div className="">
+                  <label htmlFor="provinsi">
+                    <b>Pilih Institusi</b> <span className="text-red-500">*</span>
+                  </label>
+                  <select className="" id="provinsi" onChange={(event) => handleInstituteOption(event)}>
+                    <option disabled selected>
+                      Pilih Institusi
+                    </option>
+                    {institution.map((row: any) => (
+                      <option value={row.id} key={row.id}>
+                        {row?.name}
+                      </option>
+                    ))}
+                    <option value="0" key="0">
+                      Nama Institusi Lainnya
+                    </option>
+                  </select>
+                </div>
+                <div
+                  className=""
+                  style={
+                    isCustomActive == false
+                      ? {
+                          display: "none",
+                        }
+                      : {}
+                  }
+                >
+                  <label htmlFor="alamat" className="">
+                    <b>Nama Institusi</b> <span className="text-red-500">*</span>
+                  </label>
+                  <input className="" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} />
+                </div>
+                <div className="">
+                  <label htmlFor="alamat" className="">
+                    <b>Alamat Institusi</b> <span className="text-red-500">*</span>
+                  </label>
+                  <Textarea className="" placeholder="Masukan Alamat Lengkap Institusi Anda" rows={3} value={institusiAddress} onChange={(event) => setInstitusiAddress(event.target.value)} />
+                </div>
+              </div>
+            ) : (
+              ""
+            )}
+            <div className="">
+              <label htmlFor="provinsi">
+                <b>Provinsi</b> <span className="text-red-500">*</span>
+              </label>
+              <select className={` ${errors.provinsi ? "block" : ""}`} {...register("provinsi")} id="provinsi" name="provinsi" onChange={(event) => getCity(event.target.value)}>
+                <option disabled selected>
+                  Pilih Provinsi
+                </option>
+                {province?.map((row: any) => (
+                  <option value={row.id} key={row.id}>
+                    {row.provName}
+                  </option>
+                ))}
+              </select>
+              <div className="text-red-500">{errors.provinsi?.message}</div>
+            </div>
+            <div className="">
+              <label htmlFor="kota">
+                <b>Kota/Kabupaten</b> <span className="text-red-500">*</span>
+              </label>
+              <select className={` ${errors.kota ? "block" : ""}`} {...register("kota")} id="kota" onChange={(event) => getDistricts(event.target.value)}>
+                <option disabled selected>
+                  Pilih Kota/Kabupaten
+                </option>
+                {city?.map((row: any) => (
+                  <option value={row.id} key={row.id}>
+                    {row.cityName}
+                  </option>
+                ))}
+              </select>
+              <div className="text-red-500">{errors.kota?.message}</div>
+            </div>
+            <div className="">
+              <label htmlFor="kecamatan">
+                <b>Kecamatan</b> <span className="text-red-500">*</span>
+              </label>
+              <select className={` ${errors.kecamatan ? "block" : ""}`} {...register("kecamatan")} id="kecamatan">
+                <option disabled selected>
+                  Pilih Kecamatan
+                </option>
+                {districts?.map((row: any) => (
+                  <option value={row.id} key={row.id}>
+                    {row.disName}
+                  </option>
+                ))}
+              </select>
+              <div className="text-red-500">{errors.kecamatan?.message}</div>
+            </div>
+            <div className="">
+              <label htmlFor="password" className="">
+                <b>Kata Sandi</b> <span className="text-red-500">*</span>
+              </label>
+              <Input
+                type={typePass}
+                autoComplete="off"
+                className={` ${errors.password ? "block" : ""}`}
+                {...register("password")}
+                placeholder="Masukan Kata Sandi"
+                onChange={(e) => {
+                  setValPassword(e.target.value.trim());
+                }}
+                onPaste={(e: any) => {
+                  setValPassword(e.target.value.trim());
+                }}
+                onCopy={(e: any) => {
+                  setValPassword(e.target.value.trim());
+                }}
+                required
+              />
+              <div className="text-red-500">{errors.password?.message}</div>
+              <a className={`text-black  ${typePass == "text" ? "hidden" : ""}`} onClick={showPass}>
+                <Icon icon="fa:eye" />
+              </a>
+              <a className={`text-black ${typePass == "password" ? "hidden" : ""}`} onClick={hidePass}>
+                <Icon icon="fa:eye-slash" />
+              </a>
+            </div>
+            <div className="">
+              <label htmlFor="password" className="">
+                <b>Konfirmasi Kata Sandi</b> <span className="text-red-500">*</span>
+              </label>
+              <input
+                type={typePassConf}
+                autoComplete="off"
+                className={` ${errors.passwordConf ? "block" : ""}`}
+                {...register("passwordConf")}
+                placeholder="Masukan Kata Sandi"
+                onChange={(e) => {
+                  setValPasswordConf(e.target.value.trim());
+                }}
+                onPaste={(e: any) => {
+                  setValPasswordConf(e.target.value.trim());
+                }}
+                onCopy={(e: any) => {
+                  setValPasswordConf(e.target.value.trim());
+                }}
+                required
+              />
+              <div className="text-red-500">{warningPassConf}</div>
+              <a className={`text-black ${typePassConf == "text" ? "hidden" : ""}`} onClick={showPassConf}>
+                <Icon icon="fa:eye" />
+              </a>
+              <a className={`text-dark show-pass ${typePassConf == "password" ? "hidden" : ""}`} onClick={hidePassConf}>
+                <Icon icon="fa:eye-slash" />
+              </a>
+            </div>
+            <div className="form-group">
+              <PasswordChecklist
+                rules={["minLength", "specialChar", "number", "capital", "match"]}
+                minLength={8}
+                value={password}
+                valueAgain={passwordConf}
+                onChange={(isValid: any) => {
+                  setIsValidPassword(isValid);
+                }}
+                messages={{
+                  minLength: "Password harus lebih dari 8 karakter",
+                  specialChar: "Password harus memiliki spesial karakter",
+                  number: "Password harus memiliki angka",
+                  capital: "Password harus memiliki huruf kapital",
+                  match: "Password sama",
+                }}
+              />
+            </div>
+          </div>
+
+          <div
+            className="flex flex-col mt-8 mb-2 px-12"
+            style={
+              (stepOneActive && !stepTwoActive) || stepThreeActive
+                ? {}
+                : {
+                    display: "none",
+                  }
+            }
+          >
+            <div className="text-center mb-2">
+              <p>
+                Dengan mendaftar, saya telah menyetujui <br />{" "}
+                <a href="/privacy" target="_blank" className="text-red-500">
+                  <b>Syarat dan Ketentuan</b>
+                </a>{" "}
+                serta{" "}
+                <a href="/privacy" target="_blank" className="text-red-500">
+                  <b>Kebijakan Privasi</b>
+                </a>
+              </p>
+            </div>
+            <div className={`mb-5 mt-7 w-full text-center flex justify-center ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
+              <a className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-full" onClick={() => handleSendOTP()}>
+                Kirim OTP
+              </a>
+            </div>
+          </div>
+          <div
+            className="flex flex-row mt-2 mb-4"
+            style={
+              formProfile == false
+                ? {
+                    display: "none",
+                  }
+                : {}
+            }
+          >
+            <div className="text-center">
+              <button type="submit" className="border border-red-500 text-red-500">
+                Daftar
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default page;
diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index a23bf3b4..18ad9f8a 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -577,4 +577,9 @@ html[dir="rtl"] .react-select .select__loading-indicator {
 
 .ck-editor__editable_inline {
   min-height: 200px;
-}
\ No newline at end of file
+}
+
+/* Hide FullCalendar grid elements */
+.fc-view-harness:has(.hide-calendar-grid) {
+  display: none;
+}
diff --git a/components/form/communication/escalation-detail-form.tsx b/components/form/communication/escalation-detail-form.tsx
index 43c17abd..bcddc3ec 100644
--- a/components/form/communication/escalation-detail-form.tsx
+++ b/components/form/communication/escalation-detail-form.tsx
@@ -26,6 +26,8 @@ import {
   saveTicketInternalReply,
 } from "@/service/communication/communication";
 import { Textarea } from "@/components/ui/textarea";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Link } from "@/i18n/routing";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -34,33 +36,6 @@ const taskSchema = z.object({
   }),
 });
 
-export type escalationDetail = {
-  id: number;
-  title: string;
-  createdAt: string;
-  commentFromUserName: string;
-  message: string;
-  createdBy: {
-    id: number;
-    fullname: string;
-  };
-  sendTo: {
-    id: number;
-    fullname: string;
-  };
-  status: {
-    id: number;
-    name: string;
-  };
-  priority: {
-    id: number;
-    name: string;
-  };
-  description: string;
-  narration: string;
-  is_active: string;
-};
-
 export type replyDetail = {
   id: number;
   message: string;
@@ -79,7 +54,7 @@ export default function FormDetailEscalation() {
   const MySwal = withReactContent(Swal);
   const { id } = useParams() as { id: string };
 
-  const [detail, setDetail] = useState<escalationDetail>();
+  const [detail, setDetail] = useState<any>();
   const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
   const [replyVisible, setReplyVisible] = useState(false);
   const [replyMessage, setReplyMessage] = useState("");
@@ -165,121 +140,134 @@ export default function FormDetailEscalation() {
   };
 
   return (
-    <Card>
-      <div className="px-6 py-6">
-        <div className="flex">
-          <div className="flex flex-col mt-6 w-full mb-3">
-            {detail !== undefined && (
-              <div key={detail?.id} className="bg-slate-300  rounded-md">
-                <p className="px-3 py-3 bg-slate-300 rounded-md text-lg font-semibold">
-                  Ticket #{detail.id}
-                </p>
-                <div className="flex flex-row gap-3 mt-3 bg-blue-300 py-2 px-2">
-                  <Avatar>
-                    <AvatarImage
-                      src={"/images/avatar/avatar-3.png"}
-                      alt={`mabes`}
-                    />
-                  </Avatar>
-                  <div>
-                    <p>
-                      <span className="font-bold">
-                        {detail?.commentFromUserName}
-                      </span>{" "}
-                      mengirimkan pesan untuk{" "}
-                      <span className="font-bold">{detail?.message}</span>
-                    </p>
-                    <p>{detail?.createdAt}</p>
-                  </div>
+    <div>
+      <div className="flex">
+        <div className="flex flex-col mt-6 w-full mb-3">
+          {detail !== undefined && (
+            <div key={detail?.id} className="bg-slate-300  rounded-md">
+              <p className="p-5 bg-slate-300 rounded-md text-lg font-semibold">
+                Ticket #{detail.id}
+              </p>
+              <div className="flex flex-row gap-3 bg-sky-100 p-5 items-center">
+                <Icon icon="qlementine-icons:user-16" width={36} />
+
+                <div>
+                  <p>
+                    <span className="font-bold">
+                      {detail?.commentFromUserName}
+                    </span>
+                    {` `}
+                    mengirimkan pesan untuk{` `}
+                    <Link
+                      href={
+                        detail?.feed
+                          ? detail?.feed?.permalink_url == undefined
+                            ? detail?.feedUrl
+                            : detail?.feed?.permalink_url
+                          : ""
+                      }
+                      target="_blank"
+                      className="font-bold"
+                    >
+                      {detail?.message}
+                    </Link>
+                  </p>
+                  <p className="text-xs">
+                    {`${new Date(detail?.createdAt).getDate()}-${
+                      new Date(detail?.createdAt).getMonth() + 1
+                    }-${new Date(detail?.createdAt).getFullYear()} ${new Date(
+                      detail?.createdAt
+                    ).getHours()}:${new Date(detail?.createdAt).getMinutes()}`}
+                  </p>
                 </div>
-                <p className="pl-3 bg-white">{detail.message}</p>
               </div>
-            )}
+              <p className="p-5 bg-white">{detail.message}</p>
+            </div>
+          )}
+        </div>
+      </div>
+      {detail !== undefined && (
+        <div className="gap-5 mb-5 w-full border mt-3 rounded-md bg-white">
+          <div className="space-y-2 px-3 mt-3">
+            <Label>Judul</Label>
+            <Controller
+              control={control}
+              name="title"
+              render={({ field }) => (
+                <Input
+                  size="md"
+                  type="text"
+                  value={detail?.title}
+                  onChange={field.onChange}
+                  placeholder="Enter Title"
+                />
+              )}
+            />
+            {/* {errors.title?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.title.message}
+                  </p>
+                )} */}
+          </div>
+          <div className="mt-5 px-3">
+            <Label>Prioritas</Label>
+            <Select
+              onValueChange={setSelectedPriority}
+              value={detail?.priority?.name}
+            >
+              <SelectTrigger size="md" className="w-3/12">
+                <SelectValue placeholder="Pilih" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="Low">Low</SelectItem>
+                <SelectItem value="Medium">Medium</SelectItem>
+                <SelectItem value="High">High</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2 px-3 mt-3">
+            <Label>Description</Label>
+            <Controller
+              control={control}
+              name="title"
+              render={({ field }) => (
+                <Textarea
+                  value={detail?.description}
+                  onChange={field.onChange}
+                  placeholder="Enter Title"
+                />
+              )}
+            />
+            {/* {errors.title?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.title.message}
+                  </p>
+                )} */}
+          </div>
+          <div className="mt-4 px-3 mb-3">
+            <Label htmlFor="replyMessage">Tulis Pesan</Label>
+            <textarea
+              id="replyMessage"
+              className="w-full h-24 border rounded-md p-2"
+              value={replyMessage}
+              onChange={(e) => setReplyMessage(e.target.value)}
+              placeholder="Tulis pesan di sini..."
+            />
+            <div className="flex justify-end gap-3 mt-2">
+              <Button
+                onClick={() => setReplyVisible(false)}
+                color="default"
+                variant="outline"
+              >
+                Batal
+              </Button>
+              <Button onClick={handleSendReply} color="primary">
+                Kirim
+              </Button>
+            </div>
           </div>
         </div>
-        {detail !== undefined && (
-          <div className="gap-5 mb-5 w-full border mt-3 rounded-md">
-            <div className="space-y-2 px-3 mt-3">
-              <Label>Judul</Label>
-              <Controller
-                control={control}
-                name="title"
-                render={({ field }) => (
-                  <Input
-                    size="md"
-                    type="text"
-                    value={detail?.title}
-                    onChange={field.onChange}
-                    placeholder="Enter Title"
-                  />
-                )}
-              />
-              {/* {errors.title?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.title.message}
-                  </p>
-                )} */}
-            </div>
-            <div className="mt-5 px-3">
-              <Label>Prioritas</Label>
-              <Select
-                onValueChange={setSelectedPriority}
-                value={detail?.priority?.name}
-              >
-                <SelectTrigger size="md" className="w-3/12">
-                  <SelectValue placeholder="Pilih" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="Low">Low</SelectItem>
-                  <SelectItem value="Medium">Medium</SelectItem>
-                  <SelectItem value="High">High</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2 px-3 mt-3">
-              <Label>Description</Label>
-              <Controller
-                control={control}
-                name="title"
-                render={({ field }) => (
-                  <Textarea
-                    value={detail?.description}
-                    onChange={field.onChange}
-                    placeholder="Enter Title"
-                  />
-                )}
-              />
-              {/* {errors.title?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.title.message}
-                  </p>
-                )} */}
-            </div>
-            <div className="mt-4 px-3 mb-3">
-              <Label htmlFor="replyMessage">Tulis Pesan</Label>
-              <textarea
-                id="replyMessage"
-                className="w-full h-24 border rounded-md p-2"
-                value={replyMessage}
-                onChange={(e) => setReplyMessage(e.target.value)}
-                placeholder="Tulis pesan di sini..."
-              />
-              <div className="flex justify-end gap-3 mt-2">
-                <Button
-                  onClick={() => setReplyVisible(false)}
-                  color="default"
-                  variant="outline"
-                >
-                  Batal
-                </Button>
-                <Button onClick={handleSendReply} color="primary">
-                  Kirim
-                </Button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </Card>
+      )}
+    </div>
   );
 }
diff --git a/components/form/communication/internal-detail-form.tsx b/components/form/communication/internal-detail-form.tsx
index 310b8ca6..5363f28a 100644
--- a/components/form/communication/internal-detail-form.tsx
+++ b/components/form/communication/internal-detail-form.tsx
@@ -24,6 +24,7 @@ import {
   getTicketingInternalDiscussion,
   saveTicketInternalReply,
 } from "@/service/communication/communication";
+import { Icon } from "@iconify/react/dist/iconify.js";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -36,6 +37,7 @@ export type taskDetail = {
   id: number;
   title: string;
   createdAt: string;
+  referenceNumber: string | number;
   createdBy: {
     id: number;
     fullname: string;
@@ -161,132 +163,132 @@ export default function FormDetailInternal() {
   };
 
   return (
-    <Card>
-      <div className="px-6 py-6">
-        <div className="mt-4 flex flex-row items-center gap-3">
-          <Button onClick={handleReply} color="default" variant={"outline"}>
-            Balas
-          </Button>
+    <div className="py-5">
+      <div className="mt-4 flex flex-row items-center gap-3">
+        <Button onClick={handleReply} color="default" variant={"outline"}>
+          Balas
+        </Button>
 
-          <Button color="default" variant={"outline"}>
-            Hapus
-          </Button>
-        </div>
+        <Button color="default" variant={"outline"}>
+          Hapus
+        </Button>
+      </div>
 
-        {replyVisible && (
-          <div className="mt-4">
-            <Label htmlFor="replyMessage">Tulis Pesan</Label>
-            <textarea
-              id="replyMessage"
-              className="w-full h-24 border rounded-md p-2"
-              value={replyMessage}
-              onChange={(e) => setReplyMessage(e.target.value)}
-              placeholder="Tulis pesan di sini..."
-            />
-            <div className="flex justify-end gap-3 mt-2">
-              <Button
-                onClick={() => setReplyVisible(false)}
-                color="default"
-                variant="outline"
-              >
-                Batal
-              </Button>
-              <Button onClick={handleSendReply} color="primary">
-                Kirim
-              </Button>
+      <div className="flex flex-row gap-5 mt-5">
+        <div className="flex flex-col w-[70%]">
+          {replyVisible && (
+            <div className="">
+              <textarea
+                id="replyMessage"
+                className="w-full h-24 border rounded-md p-2"
+                value={replyMessage}
+                onChange={(e) => setReplyMessage(e.target.value)}
+                placeholder="Tulis pesan di sini..."
+              />
+              <div className="flex justify-end gap-3 my-2">
+                <Button
+                  onClick={() => setReplyVisible(false)}
+                  color="default"
+                  variant="outline"
+                >
+                  Batal
+                </Button>
+                <Button onClick={handleSendReply} color="primary">
+                  Kirim
+                </Button>
+              </div>
             </div>
-          </div>
-        )}
-        <div className="flex flex-row justify-between ">
-          <div className="flex flex-col mt-6 w-7/12">
+          )}
+          <div className="border rounded-t-xl">
+            <p className="p-4 bg-slate-300 rounded-t-xl text-lg font-semibold">
+              Ticket #{detail?.referenceNumber}
+            </p>
             {ticketReply?.map((list) => (
-              <div key={list.id} className="bg-slate-300  rounded-md border">
-                <p className="px-3 pt-3 bg-slate-300 rounded-md text-lg font-semibold">
-                  Ticket #{list.id}
-                </p>
-                <div className="flex flex-row gap-3 mt-3 bg-blue-300 py-2 px-2">
-                  <Avatar>
-                    <AvatarImage
-                      src={"/images/avatar/avatar-3.png"}
-                      alt={`mabes`}
-                    />
-                  </Avatar>
+              <div key={list.id} className="flex flex-col">
+                <div className="flex flex-row gap-3 bg-sky-100 p-4 items-center">
+                  <Icon icon="qlementine-icons:user-16" width={36} />
                   <div>
                     <p>
-                      <span className="font-bold">
+                      <span className="font-bold text-sm">
                         {list?.messageFrom?.fullname}
                       </span>{" "}
                       mengirimkan pesan untuk{" "}
-                      <span className="font-bold">
+                      <span className="font-bold text-sm">
                         {list?.messageTo?.fullname}
                       </span>
                     </p>
-                    <p>{list?.createdAt}</p>
+                    <p className="text-xs">
+                      {`${new Date(list?.createdAt).getDate()}-${
+                        new Date(list?.createdAt).getMonth() + 1
+                      }-${new Date(list?.createdAt).getFullYear()} ${new Date(
+                        list?.createdAt
+                      ).getHours()}:${new Date(list?.createdAt).getMinutes()}`}
+                    </p>
                   </div>
                 </div>
-                <p className="pl-3 bg-white py-2">{list.message}</p>
+                <p className="p-4 bg-white text-sm">{list.message}</p>
               </div>
             ))}
           </div>
-          {detail !== undefined && (
-            <div className="gap-5 mb-5 w-3/12 border mt-3 rounded-md">
-              <Label className="ml-3 mt-3">Properties</Label>
-              <div className="space-y-2 px-3">
-                <Label>Judul</Label>
-                <Controller
-                  control={control}
-                  name="title"
-                  render={({ field }) => (
-                    <Input
-                      size="md"
-                      type="text"
-                      value={detail?.title}
-                      onChange={field.onChange}
-                      placeholder="Enter Title"
-                    />
-                  )}
-                />
-                {/* {errors.title?.message && (
+        </div>
+        {detail !== undefined && (
+          <div className="gap-5 mb-5 w-[30%] border bg-white rounded-md">
+            <p className="mx-3 mt-3">Properties</p>
+            <div className="space-y-2 px-3">
+              <Label>Judul</Label>
+              <Controller
+                control={control}
+                name="title"
+                render={({ field }) => (
+                  <Input
+                    size="md"
+                    type="text"
+                    value={detail?.title}
+                    onChange={field.onChange}
+                    placeholder="Enter Title"
+                  />
+                )}
+              />
+              {/* {errors.title?.message && (
                   <p className="text-red-400 text-sm">
                     {errors.title.message}
                   </p>
                 )} */}
-              </div>
-              <div className="mt-5 px-3">
-                <Label>Prioritas</Label>
-                <Select
-                  onValueChange={setSelectedPriority}
-                  value={detail?.priority?.name}
-                >
-                  <SelectTrigger size="md">
-                    <SelectValue placeholder="Pilih" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Low">Low</SelectItem>
-                    <SelectItem value="Medium">Medium</SelectItem>
-                    <SelectItem value="High">High</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="mt-5 px-3 mb-3">
-                <Label>Status</Label>
-                <Select
-                  onValueChange={setSelectedStatus}
-                  value={detail?.status?.name}
-                >
-                  <SelectTrigger size="md">
-                    <SelectValue placeholder="Pilih" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Open">Open</SelectItem>
-                    <SelectItem value="Close">Close</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
             </div>
-          )}
-        </div>
+            <div className="mt-5 px-3">
+              <Label>Prioritas</Label>
+              <Select
+                onValueChange={setSelectedPriority}
+                value={detail?.priority?.name}
+              >
+                <SelectTrigger size="md">
+                  <SelectValue placeholder="Pilih" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Low">Low</SelectItem>
+                  <SelectItem value="Medium">Medium</SelectItem>
+                  <SelectItem value="High">High</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="mt-5 px-3 mb-3">
+              <Label>Status</Label>
+              <Select
+                onValueChange={setSelectedStatus}
+                value={detail?.status?.name}
+              >
+                <SelectTrigger size="md">
+                  <SelectValue placeholder="Pilih" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Open">Open</SelectItem>
+                  <SelectItem value="Close">Close</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        )}
       </div>
-    </Card>
+    </div>
   );
 }
diff --git a/components/form/communication/internal-edit-form.tsx b/components/form/communication/internal-edit-form.tsx
index 4bb2a89d..34fc4dc2 100644
--- a/components/form/communication/internal-edit-form.tsx
+++ b/components/form/communication/internal-edit-form.tsx
@@ -26,6 +26,8 @@ import {
   saveTicketInternalReply,
 } from "@/service/communication/communication";
 import { Textarea } from "@/components/ui/textarea";
+import { htmlToString } from "@/utils/globals";
+import { Icon } from "@iconify/react/dist/iconify.js";
 
 const taskSchema = z.object({
   // description: z.string().min(2, {
@@ -33,30 +35,6 @@ const taskSchema = z.object({
   // }),
 });
 
-export type taskDetail = {
-  id: number;
-  title: string;
-  createdAt: string;
-  createdBy: {
-    id: number;
-    fullname: string;
-  };
-  sendTo: {
-    id: number;
-    fullname: string;
-  };
-  status: {
-    id: number;
-    name: string;
-  };
-  priority: {
-    id: number;
-    name: string;
-  };
-  description: string;
-  is_active: string;
-};
-
 export type replyDetail = {
   id: number;
   message: string;
@@ -76,13 +54,14 @@ export default function FormEditInternal() {
   const { id } = useParams() as { id: string };
   const router = useRouter();
 
-  const [detail, setDetail] = useState<taskDetail>();
+  const [detail, setDetail] = useState<any>();
   const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
   const [replyVisible, setReplyVisible] = useState(false);
   const [replyMessage, setReplyMessage] = useState("");
   const [selectedPriority, setSelectedPriority] = useState("");
   const [selectedStatus, setSelectedStatus] = useState("");
   const [selectedTarget, setSelectedTarget] = useState("");
+  const [description, setDescription] = useState("");
   type TaskSchema = z.infer<typeof taskSchema>;
 
   const {
@@ -98,6 +77,10 @@ export default function FormEditInternal() {
       if (id) {
         const response = await getTicketingInternalDetail(id);
         setDetail(response?.data?.data);
+        setSelectedPriority(response?.data?.data?.priority?.name);
+        console.log("sadad", response?.data?.data);
+        setSelectedStatus(response?.data?.data?.status?.name);
+        setDescription(htmlToString(response?.data?.data?.message));
       }
     }
     initState();
@@ -206,56 +189,51 @@ export default function FormEditInternal() {
   };
 
   return (
-    <Card>
-      <div className="px-6 py-6">
-        <div className="mt-4 flex flex-row items-center gap-3">
-          <Button onClick={handleReply} color="default" variant={"outline"}>
-            Balas
-          </Button>
+    <div className="py-5">
+      <div className="mt-4 flex flex-row items-center gap-3">
+        <Button onClick={handleReply} color="default" variant={"outline"}>
+          Balas
+        </Button>
 
-          <Button color="default" variant={"outline"}>
-            Hapus
-          </Button>
-        </div>
+        <Button color="default" variant={"outline"}>
+          Hapus
+        </Button>
+      </div>
 
-        {replyVisible && (
-          <div className="mt-4">
-            <Label htmlFor="replyMessage">Tulis Pesan</Label>
-            <textarea
-              id="replyMessage"
-              className="w-full h-24 border rounded-md p-2"
-              value={replyMessage}
-              onChange={(e) => setReplyMessage(e.target.value)}
-              placeholder="Tulis pesan di sini..."
-            />
-            <div className="flex justify-end gap-3 mt-2">
-              <Button
-                onClick={() => setReplyVisible(false)}
-                color="default"
-                variant="outline"
-              >
-                Batal
-              </Button>
-              <Button onClick={handleSendReply} color="primary">
-                Kirim
-              </Button>
+      <div className="flex flex-row gap-5 mt-5">
+        <div className="flex flex-col w-[70%]">
+          {replyVisible && (
+            <div>
+              <textarea
+                id="replyMessage"
+                className="w-full h-24 border rounded-md p-2"
+                value={replyMessage}
+                onChange={(e) => setReplyMessage(e.target.value)}
+                placeholder="Tulis pesan di sini..."
+              />
+              <div className="flex justify-end gap-3 mt-2">
+                <Button
+                  onClick={() => setReplyVisible(false)}
+                  color="default"
+                  variant="outline"
+                >
+                  Batal
+                </Button>
+                <Button onClick={handleSendReply} color="primary">
+                  Kirim
+                </Button>
+              </div>
             </div>
-          </div>
-        )}
-        <div className="flex flex-row justify-between ">
-          <div className="flex flex-col mt-6 w-7/12">
+          )}
+          <div className="border rounded-t-xl">
+            <p className="p-4 bg-slate-300 rounded-t-xl text-lg font-semibold">
+              Ticket #{detail?.referenceNumber}
+            </p>
             {ticketReply?.map((list) => (
-              <div key={list.id} className="bg-slate-300  rounded-md border">
-                <p className="px-3 pt-3 bg-slate-300 rounded-md text-lg font-semibold">
-                  Ticket #{list.id}
-                </p>
-                <div className="flex flex-row gap-3 mt-3 bg-blue-300 py-2 px-2">
-                  <Avatar>
-                    <AvatarImage
-                      src={"/images/avatar/avatar-3.png"}
-                      alt={`mabes`}
-                    />
-                  </Avatar>
+              <div key={list.id} className="flex flex-col">
+                <div className="flex flex-row gap-3 bg-sky-100 p-4 items-center">
+                  <Icon icon="qlementine-icons:user-16" width={36} />
+
                   <div>
                     <p>
                       <span className="font-bold">
@@ -266,98 +244,96 @@ export default function FormEditInternal() {
                         {list?.messageTo?.fullname}
                       </span>
                     </p>
-                    <p>{list?.createdAt}</p>
+                    <p className="text-xs">{`${new Date(
+                      list?.createdAt
+                    ).getDate()}-${
+                      new Date(list?.createdAt).getMonth() + 1
+                    }-${new Date(list?.createdAt).getFullYear()} ${new Date(
+                      list?.createdAt
+                    ).getHours()}:${new Date(
+                      list?.createdAt
+                    ).getMinutes()}`}</p>
                   </div>
                 </div>
                 <p className="pl-3 bg-white py-2">{list.message}</p>
               </div>
             ))}
           </div>
-          {detail !== undefined && (
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <div className="gap-5 mb-5 w-full border mt-3 rounded-md">
-                <Label className="ml-3 mt-3">Properties</Label>
-                <div className="space-y-2 px-3">
-                  <Label>Judul</Label>
-                  <Controller
-                    control={control}
-                    name="title"
-                    render={({ field }) => (
-                      <Input
-                        size="md"
-                        type="text"
-                        value={detail?.title}
-                        onChange={field.onChange}
-                        placeholder="Enter Title"
-                      />
-                    )}
-                  />
-                  {/* {errors.title?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.title.message}
-                  </p>
-                )} */}
-                </div>
-                <div className="mt-5 px-3">
-                  <Label>Prioritas</Label>
-                  <Select
-                    onValueChange={setSelectedPriority}
-                    value={detail?.priority?.name}
-                  >
-                    <SelectTrigger size="md">
-                      <SelectValue placeholder="Pilih" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="Low">Low</SelectItem>
-                      <SelectItem value="Medium">Medium</SelectItem>
-                      <SelectItem value="High">High</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="mt-5 px-3 mb-3">
-                  <Label>Status</Label>
-                  <Select
-                    onValueChange={setSelectedStatus}
-                    value={detail?.status?.name}
-                  >
-                    <SelectTrigger size="md">
-                      <SelectValue placeholder="Pilih" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="1">Open</SelectItem>
-                      <SelectItem value="2">Close</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-2 px-3">
-                  <Label>Description</Label>
-                  <Controller
-                    control={control}
-                    name="description"
-                    render={({ field }) => (
-                      <Textarea
-                        value={detail?.description}
-                        onChange={field.onChange}
-                        placeholder="Enter description"
-                      />
-                    )}
-                  />
-                  {/* {errors.title?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.title.message}
-                  </p>
-                )} */}
-                </div>
-                <div className="flex justify-end mt-3 mr-3">
-                  <Button type="submit" color="primary">
-                    Update
-                  </Button>
-                </div>
-              </div>
-            </form>
-          )}
         </div>
+        {detail !== undefined && (
+          <form onSubmit={handleSubmit(onSubmit)} className="w-[30%]">
+            <div className="gap-5 mb-5  border bg-white rounded-xl">
+              <p className="mx-3 mt-3">Properties</p>
+              <div className="space-y-2 px-3">
+                <Label>Judul</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={detail?.title}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {/* {errors.title?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.title.message}
+                  </p>
+                )} */}
+              </div>
+              <div className="mt-5 px-3">
+                <Label>Prioritas</Label>
+                <Select
+                  onValueChange={setSelectedPriority}
+                  value={selectedPriority}
+                >
+                  <SelectTrigger size="md">
+                    <SelectValue placeholder="Pilih" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Low">Low</SelectItem>
+                    <SelectItem value="Medium">Medium</SelectItem>
+                    <SelectItem value="High">High</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="mt-5 px-3 mb-3">
+                <Label>Status</Label>
+                <Select
+                  onValueChange={setSelectedStatus}
+                  value={selectedStatus}
+                >
+                  <SelectTrigger size="md">
+                    <SelectValue placeholder="Pilih" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Open">Open</SelectItem>
+                    <SelectItem value="Close">Close</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2 px-3">
+                <Label>Description</Label>
+
+                <Textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="Enter description"
+                />
+              </div>
+              <div className="flex justify-end mt-3 mr-3">
+                <Button type="submit" color="primary">
+                  Update
+                </Button>
+              </div>
+            </div>
+          </form>
+        )}
       </div>
-    </Card>
+    </div>
   );
 }
diff --git a/components/form/content/audio-detail-form.tsx b/components/form/content/audio-detail-form.tsx
index 67b396d8..865e600a 100644
--- a/components/form/content/audio-detail-form.tsx
+++ b/components/form/content/audio-detail-form.tsx
@@ -56,6 +56,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import { error } from "@/lib/swal";
 import dynamic from "next/dynamic";
 import WavesurferPlayer from "@wavesurfer/react";
+import WaveSurfer from "wavesurfer.js";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -141,14 +142,21 @@ export default function FormAudioDetail() {
   const [audioPlaying, setAudioPlaying] = useState<any>(null);
 
   const waveSurferRef = useRef<any>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
+
+  
+  const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
+  const [isPlaying, setIsPlaying] = useState(false)
+
+
+  const onReady = (ws: any) => {
+    setWavesurfer(ws)
+    setIsPlaying(false);
+  }
 
   const onPlayPause = () => {
-    if (waveSurferRef.current) {
-      waveSurferRef.current.playPause();
-      setIsPlaying(!isPlaying);
-    }
-  };
+    wavesurfer && wavesurfer.playPause();
+  }
+
 
   let fileTypeId = "4";
 
@@ -452,10 +460,12 @@ export default function FormAudioDetail() {
                     {detailThumb?.map((url: any, index: number) => (
                       <div key={url.id}>
                         <WavesurferPlayer
-                          ref={waveSurferRef}
                           height={500}
                           waveColor="red"
                           url={url}
+                          onReady={onReady}
+                          onPlay={() => setIsPlaying(true)}
+                          onPause={() => setIsPlaying(false)}
                         />
                       </div>
                     ))}
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 8106dde2..0dfcf42c 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -42,7 +42,13 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { listRole } from "@/service/landing/landing";
+import { getUserNotifications, listRole } from "@/service/landing/landing";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 
 type Detail = {
   id: number;
@@ -59,6 +65,7 @@ type Detail = {
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false);
+  const [inboxOpen, setInboxOpen] = useState(false);
   const router = useRouter();
   const params = useParams();
   const locale = params?.locale;
@@ -77,6 +84,10 @@ const Navbar = () => {
   const [role, setRole] = useState<any>();
   const [menuActive, setMenuActive] = useState<string>();
   const [category, setCategory] = useState<any>();
+  const [notifications, setNotifications] = useState([]);
+  const [isMessageActive, setIsMessageActive] = useState(true);
+  const [notificationsUpdate, setNotificationsUpdate] = useState([]);
+  const [selectedTab, setSelectedTab] = useState("image");
 
   let prefixPath = poldaName
     ? `/polda/${poldaName}`
@@ -104,12 +115,44 @@ const Navbar = () => {
     setIsOpen(false);
   };
 
+  useEffect(() => {
+    async function initState() {
+      setMenuActive(menu);
+      const res = await listRole();
+      setRole(res?.data?.data);
+    }
+
+    async function getNotif() {
+      if (roleId != undefined) {
+        const response = await getUserNotifications(0, 2);
+        setNotifications(response?.data?.data?.content);
+        console.log("respon:", response);
+      }
+    }
+
+    async function getNotifUpdate() {
+      if (roleId != undefined) {
+        const response = await getUserNotifications(0, 3);
+        setNotificationsUpdate(response?.data?.data?.content);
+        console.log("Notiffff:", response);
+      }
+    }
+
+    initState();
+    getNotif();
+    getNotifUpdate();
+  }, []);
+
+  const test = () => {
+    console.log(notifications);
+  };
+
   useEffect(() => {
     async function initState() {
       const response = await getInfoProfile();
       if (!response?.error) {
         const details = response?.data?.data;
-
+        setInboxOpen(details);
         setDetail(details);
         console.log("data", details);
       }
@@ -121,39 +164,6 @@ const Navbar = () => {
     console.log("Satkkeeer : ", satkerName);
   }, []);
 
-  useEffect(() => {
-    async function initState() {
-      setMenuActive(menu);
-      const res = await listRole();
-      setRole(res?.data?.data);
-    }
-
-    // async function getNotif() {
-    //   if (roleId != undefined) {
-    //     const response = await getUserNotifications(0, 2);
-    //     setNotifications(response?.data?.data?.content);
-    //     console.log("respon:", response);
-    //   }
-    // }
-
-    // async function getNotifUpdate() {
-    //   if (roleId != undefined) {
-    //     const response = await getUserNotifications(0, 3);
-    //     setNotificationsUpdate(response?.data?.data?.content); // console.log("respon:", response);
-    //   }
-    // }
-
-    // async function getPolritvStatus() {
-    //   const response = await getYtPolritvStatus();
-    //   console.log("Polritv status :", response?.data?.message);
-    //   setIsPolriTvOnline(response.data?.message == "Online");
-    // }
-
-    initState();
-    // getNotif();
-    // getNotifUpdate();
-  }, []);
-
   const handleChange = (e: any) => {
     setSearch(e.target.value);
   };
@@ -214,7 +224,7 @@ const Navbar = () => {
           <NavigationMenu>
             <NavigationMenuList>
               <NavigationMenuItem>
-                <NavigationMenuTrigger className="">
+                <NavigationMenuTrigger>
                   <a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer">
                     <svg
                       className="mx-2 dark:"
@@ -232,12 +242,12 @@ const Navbar = () => {
                     {t("content")}
                   </a>
                 </NavigationMenuTrigger>
-                <NavigationMenuContent className=" rounded-md overflow-hidden w-">
+                <NavigationMenuContent className="flex flex-col place-content-start rounded-md overflow-hidden ">
                   <NavigationMenuLink
                     onClick={() => router.push(prefixPath + "/image/filter")}
-                    className="flex place-items-start gap-1.5 p-2"
+                    className="flex place-items-start gap-1.5 p-2 w-36"
                   >
-                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                    <p className="text-slate-600  dark:text-white hover:text-[#bb3523] flex flex-row items-center py-2 cursor-pointer">
                       <FiImage className="mr-2" />
                       {t("image")}
                     </p>
@@ -248,29 +258,25 @@ const Navbar = () => {
                   >
                     {pathname?.split("/")[1] == "in" ? (
                       <>
-                        <p className="text-slate-600 text-sm dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-0 py-2 cursor-pointer">
+                        <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                           <FiYoutube className="mr-2" />
                           {t("video")}
                         </p>
                       </>
                     ) : (
                       <>
-                        <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                        <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                           <FiYoutube className="mr-2" />
                           {t("video")}
                         </p>
                       </>
                     )}
-                    {/* <p className="text-slate-600 text-sm dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-0 py-2 cursor-pointer">
-                      <FiYoutube className="mr-2" />
-                      {t("video")}
-                    </p> */}
                   </NavigationMenuLink>
                   <NavigationMenuLink
                     onClick={() => router.push(prefixPath + "/document/filter")}
                     className="flex place-items-start gap-1.5 p-2"
                   >
-                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                    <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                       <FiFile className="mr-2" />
                       {t("text")}
                     </p>
@@ -279,7 +285,7 @@ const Navbar = () => {
                     onClick={() => router.push(prefixPath + "/audio/filter")}
                     className="flex place-items-start gap-1.5 p-2 "
                   >
-                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                    <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                       <FiMusic className="mr-2" />
                       {t("audio")}{" "}
                     </p>
@@ -335,10 +341,10 @@ const Navbar = () => {
             </NavigationMenuList>
           </NavigationMenu>
 
-          <Link href="#" className="flex items-center space-x-1 text-red-600">
+          {/* <Link href="#" className="flex items-center space-x-1 text-red-600">
             <span className="w-2 h-2 bg-red-500 rounded-full"></span>
             <span className="font-medium">{t("live")}</span>
-          </Link>
+          </Link> */}
           <div className="flex items-center space-x-1  ">
             <a href="https://tvradio.polri.go.id/">
               <img
@@ -431,76 +437,226 @@ const Navbar = () => {
           roleId === "6" ||
           roleId === "7" ||
           roleId === "8" ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild className="cursor-pointer">
-                {detail !== undefined ? (
-                  <div className="flex items-center gap-3 text-default-800">
-                    <Image
-                      src={"/assets/avatar-profile.png"}
-                      alt={"Image"}
-                      width={36}
-                      height={36}
-                      className="rounded-full"
+            <>
+              {/* Inbox */}
+              <Popover>
+                <PopoverTrigger asChild>
+                  <a className="cursor-pointer" onClick={() => test()}>
+                    {" "}
+                    <Icon
+                      icon="basil:envelope-outline"
+                      color="black"
+                      width="30"
                     />
-                    <div>
-                      <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">
-                        {detail?.fullname}
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent className=" p-0 flex flex-col mt-2" align="end">
+                  <Tabs
+                    value={selectedTab}
+                    onValueChange={setSelectedTab}
+                    className="flex flex-col"
+                  >
+                    <TabsList className="grid grid-cols-2 lg:flex lg:flex-row">
+                      <TabsTrigger value="notif-tab">
+                        <a
+                          className={`flex items-center justify-center cursor-pointer gap-4 rounded-lg p-3 text-sm mr-4 ${
+                            selectedTab === "notif-tab"
+                              ? "bg-[#bb3523] text-white"
+                              : "bg-gray-200 text-black"
+                          }`}
+                          id="notif-tab"
+                          data-toggle="tab"
+                          role="tab"
+                          aria-controls="notif"
+                          aria-selected="true"
+                          onClick={() => setIsMessageActive(true)}
+                        >
+                          Pesan Masuk
+                        </a>
+                      </TabsTrigger>
+                      <TabsTrigger value="notifupdate-tab">
+                        <a
+                          className={`flex items-center cursor-pointer gap-4 rounded-lg p-3 text-sm mr-4 ${
+                            selectedTab === "notifupdate-tab"
+                              ? "bg-[#bb3523] text-white"
+                              : "bg-gray-200 text-black"
+                          }`}
+                          id="notifupdate-tab"
+                          data-toggle="tab"
+                          role="tab"
+                          aria-controls="notifupdate"
+                          aria-selected="false"
+                          onClick={() => setIsMessageActive(false)}
+                        >
+                          Update(
+                          {notificationsUpdate?.length})
+                        </a>
+                      </TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="notif-tab">
+                      <div className="flex flex-col justify-center my-3">
+                        {notifications?.map((list: any) => (
+                          <a
+                            className="flex flex-row"
+                            href={list.redirectUrl}
+                            key={list.id}
+                          >
+                            <div className="ml-4">
+                              <img
+                                src="/assets/avatar-profile.png"
+                                alt="..."
+                                className="w-8 items-center mr-3"
+                              />
+                            </div>
+                            <div className="">
+                              <div className="text-wrap text-left">
+                                {list?.message}
+                              </div>
+                              <div>
+                                <small>
+                                  {`${new Date(list?.createdAt).getDate()}/${
+                                    new Date(list?.createdAt).getMonth() + 1
+                                  }/${new Date(
+                                    list?.createdAt
+                                  ).getFullYear()} ${new Date(
+                                    list?.createdAt
+                                  ).getHours()}:${new Date(
+                                    list?.createdAt
+                                  ).getMinutes()}`}{" "}
+                                </small>
+                              </div>
+                            </div>
+                          </a>
+                        ))}
+                        <Link href="/inbox" legacyBehavior>
+                          <p
+                            className="text-[15px] text-center py-2"
+                            role="button"
+                          >
+                            Lihat semua
+                          </p>
+                        </Link>
                       </div>
-                      <p className="text-xs whitespace-nowrap overflow-hidden truncate">
-                        ({detail?.fullname})
-                      </p>
+                    </TabsContent>
+                    <TabsContent value="notifupdate-tab">
+                      <div className="">
+                        {notificationsUpdate?.map((list: any) => (
+                          <a
+                            className="flex flex-row"
+                            href={list.redirectUrl}
+                            key={list.id}
+                          >
+                            <div className="ml-4">
+                              <img
+                                src="/assets/avatar-profile.png"
+                                alt="..."
+                                className="w-8 items-center mr-3"
+                              />
+                            </div>
+                            <div className="">
+                              <div className="text-wrap text-left">
+                                {list?.message}
+                              </div>
+                              <div>
+                                <small>
+                                  {`${new Date(list?.createdAt).getDate()}/${
+                                    new Date(list?.createdAt).getMonth() + 1
+                                  }/${new Date(
+                                    list?.createdAt
+                                  ).getFullYear()} ${new Date(
+                                    list?.createdAt
+                                  ).getHours()}:${new Date(
+                                    list?.createdAt
+                                  ).getMinutes()}`}{" "}
+                                </small>
+                              </div>
+                            </div>
+                          </a>
+                        ))}
+                        <Link href="/inbox/update" legacyBehavior>
+                          <p
+                            className="text-[15px] text-center py-2"
+                            role="button"
+                          >
+                            Lihat semua
+                          </p>
+                        </Link>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </PopoverContent>
+              </Popover>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild className="cursor-pointer">
+                  {detail !== undefined ? (
+                    <div className="flex items-center gap-3 text-default-800">
+                      <Image
+                        src={"/assets/avatar-profile.png"}
+                        alt={"Image"}
+                        width={36}
+                        height={36}
+                        className="rounded-full"
+                      />
+                      <div>
+                        <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">
+                          {detail?.fullname}
+                        </div>
+                        <p className="text-xs whitespace-nowrap overflow-hidden truncate">
+                          ({detail?.fullname})
+                        </p>
+                      </div>
+                      <span className="text-base me-2.5 lg:inline-block hidden">
+                        <Icon icon="heroicons-outline:chevron-down"></Icon>
+                      </span>
                     </div>
-                    <span className="text-base me-2.5 lg:inline-block hidden">
-                      <Icon icon="heroicons-outline:chevron-down"></Icon>
-                    </span>
-                  </div>
-                ) : (
-                  ""
-                )}
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56 p-0" align="end">
-                <DropdownMenuGroup>
-                  {[
-                    {
-                      name: "Profile & Settings",
-                      icon: "heroicons:user",
-                      href: "/profile",
-                    },
-                    {
-                      name: "Kelola Konten",
-                      icon: "stash:save-ribbon-duotone",
-                      href: "/content-management/galery",
-                    },
-                  ].map((item, index) => (
-                    <Link
-                      href={item.href}
-                      key={`info-menu-${index}`}
-                      className="cursor-pointer"
-                    >
-                      <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
-                        <Icon icon={item.icon} className="w-4 h-4" />
-                        {item.name}
-                      </DropdownMenuItem>
-                    </Link>
-                  ))}
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
-                  <div>
-                    <Link href={"/"}>
-                      <button
-                        type="submit"
-                        className="w-full flex items-center gap-2"
-                        onClick={onLogout}
+                  ) : (
+                    ""
+                  )}
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56 p-0" align="end">
+                  <DropdownMenuGroup>
+                    {[
+                      {
+                        name: "Profile & Settings",
+                        icon: "heroicons:user",
+                        href: "/profile",
+                      },
+                      {
+                        name: "Kelola Konten",
+                        icon: "stash:save-ribbon-duotone",
+                        href: "/content-management/galery",
+                      },
+                    ].map((item, index) => (
+                      <Link
+                        href={item.href}
+                        key={`info-menu-${index}`}
+                        className="cursor-pointer"
                       >
-                        <Icon icon="heroicons:power" className="w-4 h-4" />
-                        {t("logOut")}
-                      </button>
-                    </Link>
-                  </div>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+                        <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
+                          <Icon icon={item.icon} className="w-4 h-4" />
+                          {item.name}
+                        </DropdownMenuItem>
+                      </Link>
+                    ))}
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
+                    <div>
+                      <Link href={"/"}>
+                        <button
+                          type="submit"
+                          className="w-full flex items-center gap-2"
+                          onClick={onLogout}
+                        >
+                          <Icon icon="heroicons:power" className="w-4 h-4" />
+                          {t("logOut")}
+                        </button>
+                      </Link>
+                    </div>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </>
           ) : roleId === "2" ||
             roleId === "3" ||
             roleId === "4" ||
@@ -509,77 +665,221 @@ const Navbar = () => {
             roleId === "11" ||
             roleId === "12" ||
             roleId === "13" ? (
-            // Dropdown menu for roleId === 3
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild className="cursor-pointer">
-                {detail !== undefined ? (
-                  <div className="flex items-center gap-3 text-default-800">
-                    <Image
-                      src={"/assets/avatar-profile.png"}
-                      alt={"Image"}
-                      width={36}
-                      height={36}
-                      className="rounded-full"
+            <>
+              {/* Inbox */}
+              <Popover>
+                <PopoverTrigger asChild>
+                  <a className="cursor-pointer" onClick={() => test()}>
+                    {" "}
+                    <Icon
+                      icon="basil:envelope-outline"
+                      color="black"
+                      width="30"
                     />
-                    <div>
-                      <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">
-                        {detail?.fullname}
-                      </div>
-                      <p className="text-xs whitespace-nowrap overflow-hidden truncate">
-                        ({detail?.fullname})
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent
+                  className=" p-0 h-32 flex flex-col mt-2"
+                  align="end"
+                >
+                  <Tabs
+                    value={selectedTab}
+                    onValueChange={setSelectedTab}
+                    className="flex flex-row"
+                  >
+                    <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
+                      <TabsTrigger value="notif-tab">
+                        <a
+                          className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${
+                            isMessageActive ? "active" : ""
+                          }`}
+                          id="notif-tab"
+                          data-toggle="tab"
+                          role="tab"
+                          aria-controls="notif"
+                          aria-selected="true"
+                          onClick={() => setIsMessageActive(true)}
+                        >
+                          Pesan Masuk
+                        </a>
+                      </TabsTrigger>
+                      <TabsTrigger value="notifupdate-tab">
+                        <a
+                          className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${
+                            isMessageActive ? "" : "active"
+                          }`}
+                          id="notifupdate-tab"
+                          data-toggle="tab"
+                          role="tab"
+                          aria-controls="notifupdate"
+                          aria-selected="false"
+                          onClick={() => setIsMessageActive(false)}
+                        >
+                          Update(
+                          {notificationsUpdate?.length})
+                        </a>
+                      </TabsTrigger>
+                    </TabsList>
+                  </Tabs>
+                  <div
+                    className={`flex justify-center my-3 ${
+                      isMessageActive ? "active" : ""
+                    }`}
+                  >
+                    {notifications?.map((list: any) => (
+                      <a className="" href={list.redirectUrl} key={list.id}>
+                        <div className="">
+                          <img
+                            src="/assets/avatar-profile.png"
+                            alt="..."
+                            className=""
+                          />
+                        </div>
+                        <div className="">
+                          <div className="text-wrap text-left">
+                            {list?.message}
+                          </div>
+                          <div>
+                            <small>
+                              {`${new Date(list?.createdAt).getDate()}/${
+                                new Date(list?.createdAt).getMonth() + 1
+                              }/${new Date(
+                                list?.createdAt
+                              ).getFullYear()} ${new Date(
+                                list?.createdAt
+                              ).getHours()}:${new Date(
+                                list?.createdAt
+                              ).getMinutes()}`}{" "}
+                            </small>
+                          </div>
+                        </div>
+                      </a>
+                    ))}
+                    <Link href="/inbox" legacyBehavior>
+                      <p className="text-[15px] py-2" role="button">
+                        Lihat semua
                       </p>
-                    </div>
-                    <span className="text-base me-2.5 lg:inline-block hidden">
-                      <Icon icon="heroicons-outline:chevron-down"></Icon>
-                    </span>
-                  </div>
-                ) : (
-                  ""
-                )}
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56 p-0" align="end">
-                <DropdownMenuGroup>
-                  {[
-                    {
-                      name: "Profile & Settings",
-                      icon: "heroicons:user",
-                      href: "/profile",
-                    },
-                    {
-                      name: "Dashboard",
-                      icon: "material-symbols:dashboard",
-                      href: "/dashboard",
-                    },
-                  ].map((item, index) => (
-                    <Link
-                      href={item.href}
-                      key={`info-menu-${index}`}
-                      className="cursor-pointer"
-                    >
-                      <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
-                        <Icon icon={item.icon} className="w-4 h-4" />
-                        {item.name}
-                      </DropdownMenuItem>
                     </Link>
-                  ))}
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
-                  <div>
-                    <Link href={"/"}>
-                      <button
-                        type="submit"
-                        className="w-full flex items-center gap-2"
-                        onClick={onLogout}
+                  </div>
+                  <div
+                    className={`flex flex-col justify-center my-3 ${
+                      isMessageActive ? "active" : ""
+                    }`}
+                  >
+                    {notificationsUpdate?.map((list: any) => (
+                      <a
+                        className="flex flex-row"
+                        href={list.redirectUrl}
+                        key={list.id}
                       >
-                        <Icon icon="heroicons:power" className="w-4 h-4" />
-                        {t("logOut")}
-                      </button>
+                        <div className="ml-4">
+                          <img
+                            src="/assets/avatar-profile.png"
+                            alt="..."
+                            className="w-8 items-center mr-3"
+                          />
+                        </div>
+                        <div className="">
+                          <div className="text-wrap text-left">
+                            {list?.message}
+                          </div>
+                          <div>
+                            <small>
+                              {`${new Date(list?.createdAt).getDate()}/${
+                                new Date(list?.createdAt).getMonth() + 1
+                              }/${new Date(
+                                list?.createdAt
+                              ).getFullYear()} ${new Date(
+                                list?.createdAt
+                              ).getHours()}:${new Date(
+                                list?.createdAt
+                              ).getMinutes()}`}{" "}
+                            </small>
+                          </div>
+                        </div>
+                      </a>
+                    ))}
+                    <Link href="/inbox" legacyBehavior>
+                      <p className="text-[15px] text-center py-2" role="button">
+                        Lihat semua
+                      </p>
                     </Link>
                   </div>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+                </PopoverContent>
+              </Popover>
+
+              {/* // Dropdown menu for roleId === 3 */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild className="cursor-pointer">
+                  {detail !== undefined ? (
+                    <div className="flex items-center gap-3 text-default-800">
+                      <Image
+                        src={"/assets/avatar-profile.png"}
+                        alt={"Image"}
+                        width={36}
+                        height={36}
+                        className="rounded-full"
+                      />
+                      <div>
+                        <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">
+                          {detail?.fullname}
+                        </div>
+                        <p className="text-xs whitespace-nowrap overflow-hidden truncate">
+                          ({detail?.fullname})
+                        </p>
+                      </div>
+                      <span className="text-base me-2.5 lg:inline-block hidden">
+                        <Icon icon="heroicons-outline:chevron-down"></Icon>
+                      </span>
+                    </div>
+                  ) : (
+                    ""
+                  )}
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56 p-0" align="end">
+                  <DropdownMenuGroup>
+                    {[
+                      {
+                        name: "Profile & Settings",
+                        icon: "heroicons:user",
+                        href: "/profile",
+                      },
+                      {
+                        name: "Dashboard",
+                        icon: "material-symbols:dashboard",
+                        href: "/dashboard",
+                      },
+                    ].map((item, index) => (
+                      <Link
+                        href={item.href}
+                        key={`info-menu-${index}`}
+                        className="cursor-pointer"
+                      >
+                        <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
+                          <Icon icon={item.icon} className="w-4 h-4" />
+                          {item.name}
+                        </DropdownMenuItem>
+                      </Link>
+                    ))}
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
+                    <div>
+                      <Link href={"/"}>
+                        <button
+                          type="submit"
+                          className="w-full flex items-center gap-2"
+                          onClick={onLogout}
+                        >
+                          <Icon icon="heroicons:power" className="w-4 h-4" />
+                          {t("logOut")}
+                        </button>
+                      </Link>
+                    </div>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </>
           ) : (
             // Masuk and Daftar buttons for roleId === null
             <div className="flex justify-center items-center mx-3 gap-5">
diff --git a/components/landing-page/sidebar-management.tsx b/components/landing-page/sidebar-management.tsx
index 185f244c..3175c533 100644
--- a/components/landing-page/sidebar-management.tsx
+++ b/components/landing-page/sidebar-management.tsx
@@ -65,7 +65,7 @@ const SidebarManagement = () => {
   // Render
   if (!hasMounted) return null;
   return (
-    <div className="p-12 w-1/3">
+    <div className="p-12 w-1/3 ">
       <div className="border rounded-2xl border-black m-4">
         <h1 className="text-xl p-5">Tentang Saya</h1>
         <div>
@@ -94,7 +94,7 @@ const SidebarManagement = () => {
         </div>
       </div>
 
-      <div className="p-4">
+      <div className="p-4 gap-1">
         <Link href="/content-management/galery" className="mb-3">
           <div className={`${pathname?.includes("/content-management/galery") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
             <div className="flex items-center gap-2 text-lg">
diff --git a/lib/menus.ts b/lib/menus.ts
index c9fbef40..d64cb3a7 100644
--- a/lib/menus.ts
+++ b/lib/menus.ts
@@ -2176,7 +2176,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
             icon: "icon-park-outline:communication",
             submenus: [
               {
-                href: "/supervisor/communications/questions",
+                href: "/supervisor/communications/questions/all",
                 label: t("questions"),
                 active: pathname.includes("/communications/questions"),
                 icon: "solar:inbox-line-outline",
diff --git a/messages/in.json b/messages/in.json
index 719b4f88..38ddf0d2 100644
--- 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",
diff --git a/package-lock.json b/package-lock.json
index a10b4781..dcc24562 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -139,6 +139,7 @@
         "tus-js-client": "^4.2.3",
         "use-places-autocomplete": "^4.0.1",
         "vaul": "^0.9.1",
+        "wavesurfer.js": "^7.8.15",
         "yup": "^1.6.1",
         "zod": "^3.23.8"
       },
@@ -158,7 +159,6 @@
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
         "postcss": "^8",
-        "react-wavesurfer.js": "0.0.5",
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
       }
@@ -844,6 +844,11 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/@dschoon/react-waves/node_modules/wavesurfer.js": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-4.6.0.tgz",
+      "integrity": "sha512-+nn6VD86pTtRu9leVNXoIGOCMJyaTNsKNy9v+SfUsYo+SxLCQvEzrZZ/eKMImqspsk+BX1V1xlY4FRkHswu3fA=="
+    },
     "node_modules/@emoji-mart/data": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.2.1.tgz",
@@ -14271,17 +14276,6 @@
         "react": "^16.0.0"
       }
     },
-    "node_modules/react-wavesurfer.js": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/react-wavesurfer.js/-/react-wavesurfer.js-0.0.5.tgz",
-      "integrity": "sha512-KLjNTKS25xfsTWrJd+knXF5wFH8CRu7repXSeDSjh4zhj27QbNL5jtcK8pNl82/kcoTeB0fZvtCcxPreEE8dQw==",
-      "dev": true,
-      "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "wavesurfer.js": "^5.2.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -17165,9 +17159,9 @@
       }
     },
     "node_modules/wavesurfer.js": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-4.6.0.tgz",
-      "integrity": "sha512-+nn6VD86pTtRu9leVNXoIGOCMJyaTNsKNy9v+SfUsYo+SxLCQvEzrZZ/eKMImqspsk+BX1V1xlY4FRkHswu3fA=="
+      "version": "7.8.15",
+      "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-7.8.15.tgz",
+      "integrity": "sha512-fWNnQt5BEGzuoJ7HRxfvpT1rOEI1AmCGPZ/+7QDkDVN/m2vIBeLVQ+5vENRMz1YwvZ/u1No0UV492/o8G++KXQ=="
     },
     "node_modules/web-namespaces": {
       "version": "2.0.1",
diff --git a/package.json b/package.json
index 55a9b1f5..0da9578b 100644
--- a/package.json
+++ b/package.json
@@ -140,6 +140,7 @@
     "tus-js-client": "^4.2.3",
     "use-places-autocomplete": "^4.0.1",
     "vaul": "^0.9.1",
+    "wavesurfer.js": "^7.8.15",
     "yup": "^1.6.1",
     "zod": "^3.23.8"
   },
@@ -159,7 +160,6 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",
-    "react-wavesurfer.js": "0.0.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a28b863e..5a82f140 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@dnd-kit/sortable':
         specifier: ^8.0.0
         version: 8.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+      '@dschoon/react-waves':
+        specifier: ^4.0.3
+        version: 4.0.3(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@emoji-mart/data':
         specifier: ^1.2.1
         version: 1.2.1
@@ -52,88 +55,88 @@ importers:
         version: 5.1.0(react@18.3.1)
       '@radix-ui/react-accordion':
         specifier: ^1.1.2
-        version: 1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-alert-dialog':
         specifier: ^1.0.5
-        version: 1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-aspect-ratio':
         specifier: ^1.0.3
-        version: 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-avatar':
         specifier: ^1.0.4
-        version: 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-checkbox':
         specifier: ^1.0.4
-        version: 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-collapsible':
         specifier: ^1.0.3
-        version: 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-context-menu':
         specifier: ^2.2.1
-        version: 2.2.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.2.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dialog':
         specifier: ^1.0.5
-        version: 1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-direction':
         specifier: ^1.1.0
         version: 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.6
-        version: 2.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-hover-card':
         specifier: ^1.0.7
-        version: 1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-label':
         specifier: ^2.1.0
-        version: 2.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-menubar':
         specifier: ^1.1.1
-        version: 1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-navigation-menu':
         specifier: ^1.2.0
-        version: 1.2.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-popover':
         specifier: ^1.0.7
-        version: 1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-progress':
         specifier: ^1.0.3
-        version: 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-radio-group':
         specifier: ^1.1.3
-        version: 1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-scroll-area':
         specifier: ^1.0.5
-        version: 1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-select':
         specifier: ^2.0.0
-        version: 2.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-separator':
         specifier: ^1.1.0
-        version: 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slider':
         specifier: ^1.1.2
-        version: 1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.1.0
         version: 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-switch':
         specifier: ^1.0.3
-        version: 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tabs':
         specifier: ^1.1.0
-        version: 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toast':
         specifier: ^1.2.1
-        version: 1.2.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.2.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle':
         specifier: ^1.0.3
-        version: 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle-group':
         specifier: ^1.0.4
-        version: 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: ^1.0.7
-        version: 1.1.6(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.1.6(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@reach/combobox':
         specifier: ^0.18.0
         version: 0.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -176,6 +179,9 @@ importers:
       '@vercel/analytics':
         specifier: ^1.3.1
         version: 1.4.1(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+      '@wavesurfer/react':
+        specifier: ^1.0.8
+        version: 1.0.8(react@18.3.1)(wavesurfer.js@7.8.15)
       apexcharts:
         specifier: ^3.49.2
         version: 3.54.1
@@ -199,7 +205,7 @@ importers:
         version: 2.1.1
       cmdk:
         specifier: ^1.0.0
-        version: 1.0.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       cookie:
         specifier: ^1.0.2
         version: 1.0.2
@@ -287,6 +293,9 @@ importers:
       react-apexcharts:
         specifier: ^1.4.1
         version: 1.7.0(apexcharts@3.54.1)(react@18.3.1)
+      react-audio-player:
+        specifier: ^0.17.0
+        version: 0.17.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-audio-voice-recorder:
         specifier: ^2.2.0
         version: 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -326,6 +335,9 @@ importers:
       react-loading-skeleton:
         specifier: ^3.5.0
         version: 3.5.0(react@18.3.1)
+      react-password-checklist:
+        specifier: ^1.8.1
+        version: 1.8.1(react@18.3.1)
       react-player:
         specifier: ^2.16.0
         version: 2.16.0(react@18.3.1)
@@ -349,7 +361,7 @@ importers:
         version: 15.6.1(react@18.3.1)
       react-time-picker:
         specifier: ^7.0.0
-        version: 7.0.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.0.0(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-voice-recorder:
         specifier: ^2.1.2
         version: 2.1.2(react@18.3.1)
@@ -388,7 +400,10 @@ importers:
         version: 4.0.1(react@18.3.1)
       vaul:
         specifier: ^0.9.1
-        version: 0.9.9(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 0.9.9(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      wavesurfer.js:
+        specifier: ^7.8.15
+        version: 7.8.15
       yup:
         specifier: ^1.6.1
         version: 1.6.1
@@ -811,6 +826,14 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
+  '@dschoon/react-waves@4.0.3':
+    resolution: {integrity: sha512-QlygFXBarpdRB/JhFaHkpqOVHfgmODShVkvB96g4JBIidDhhuWidfrudQSo9PxhQnLjAhSlxJjg+8ct7K8TCWw==}
+    engines: {node: '>=8', yarn: ^1.9.4}
+    peerDependencies:
+      prop-types: ^15.7.2
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0
+      react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0
+
   '@emnapi/runtime@1.3.1':
     resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
 
@@ -1104,6 +1127,10 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@jest/types@26.6.2':
+    resolution: {integrity: sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==}
+    engines: {node: '>= 10.14.2'}
+
   '@jridgewell/gen-mapping@0.3.8':
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
@@ -2127,6 +2154,18 @@ packages:
   '@types/htmlparser2@3.10.7':
     resolution: {integrity: sha512-ycBs4PNr9rY9XFFp4WkP+M1UcO49ahn0+9b24cmIY6KWy0w35rW0G8+JTTe9Rp6Wnyqn5SEHZrhCBMa0TIOxBw==}
 
+  '@types/istanbul-lib-coverage@2.0.6':
+    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+
+  '@types/istanbul-lib-report@3.0.3':
+    resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
+
+  '@types/istanbul-reports@3.0.4':
+    resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
+
+  '@types/jest@26.0.24':
+    resolution: {integrity: sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==}
+
   '@types/jquery@3.5.32':
     resolution: {integrity: sha512-b9Xbf4CkMqS02YH8zACqN1xzdxc3cO735Qe5AbSUFmyOiaWAbcpqh9Wna+Uk0vgACvoQHpWDg2rGdHkYPLmCiQ==}
 
@@ -2161,6 +2200,9 @@ packages:
     resolution: {integrity: sha512-gnBXM8rP1mnCgT1uE2z8SnpFTKRWReJlhbZLZkOLq/CH1ifvTNwjIVtXvsywTy1dwVklf+y/MB0Eh6FOa94yrg==}
     deprecated: This is a stub types definition. next provides its own type definitions, so you do not need this installed.
 
+  '@types/node@14.18.63':
+    resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==}
+
   '@types/node@20.17.10':
     resolution: {integrity: sha512-/jrvh5h6NXhEauFFexRin69nA0uHJ5gwk4iDivp/DeoEua3uwCUto6PC86IpRITBOs4+6i2I56K5x5b6WYGXHA==}
 
@@ -2173,6 +2215,11 @@ packages:
   '@types/qs@6.9.17':
     resolution: {integrity: sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==}
 
+  '@types/react-dom@16.9.25':
+    resolution: {integrity: sha512-ZK//eAPhwft9Ul2/Zj+6O11YR6L4JX0J2sVeBC9Ft7x7HFN7xk7yUV/zDxqV6rjvqgl6r8Dq7oQImxtyf/Mzcw==}
+    peerDependencies:
+      '@types/react': ^16.0.0
+
   '@types/react-geocode@0.2.4':
     resolution: {integrity: sha512-vkDID5kZwYRplECuUtAbPnRN9XyrzE+9lxl0VBV+h7pFDOc6hn+0xieswO7Wrzne/J9HstA3Nlb6OeMuuQxjuw==}
 
@@ -2190,12 +2237,18 @@ packages:
     peerDependencies:
       '@types/react': '*'
 
+  '@types/react@16.14.62':
+    resolution: {integrity: sha512-BWf7hqninZav6nerxXj+NeZT/mTpDeG6Lk2zREHAy63CrnXoOGPGtNqTFYFN/sqpSaREDP5otVV88axIXmKfGA==}
+
   '@types/react@18.3.18':
     resolution: {integrity: sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==}
 
   '@types/rtl-detect@1.0.3':
     resolution: {integrity: sha512-qpstuHivwg/HoXxRrBo5/r/OVx5M2SkqJpVu2haasdLctt+jMGHWjqdbI0LL7Rk2wRmN/UHdHK4JZg9RUMcvKA==}
 
+  '@types/scheduler@0.16.8':
+    resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
+
   '@types/sizzle@2.3.9':
     resolution: {integrity: sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==}
 
@@ -2205,6 +2258,12 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
+  '@types/yargs-parser@21.0.3':
+    resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
+
+  '@types/yargs@15.0.19':
+    resolution: {integrity: sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==}
+
   '@typescript-eslint/parser@7.2.0':
     resolution: {integrity: sha512-5FKsVcHTk6TafQKQbuIVkXq58Fnbkd2wDL4LB7AURN7RUOu1utVP+G8+6u3ZhEroW3DF6hyo3ZEXxgKgp4KeCg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2265,6 +2324,12 @@ packages:
       vue-router:
         optional: true
 
+  '@wavesurfer/react@1.0.8':
+    resolution: {integrity: sha512-YowJcynQTTC1oWBWlxr7IkZn9QlYfvOC2rYqOvVA2DwBh+nMEoZca7718disoFNnnX7/NzTKqZd/VuWI5RbhMQ==}
+    peerDependencies:
+      react: ^19.0.0
+      wavesurfer.js: '>=7.8.11'
+
   '@wojtekmaj/date-utils@1.5.1':
     resolution: {integrity: sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==}
 
@@ -2880,6 +2945,10 @@ packages:
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
+  diff-sequences@26.6.2:
+    resolution: {integrity: sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==}
+    engines: {node: '>= 10.14.2'}
+
   diff@5.2.0:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
@@ -3759,6 +3828,14 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
+  jest-diff@26.6.2:
+    resolution: {integrity: sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==}
+    engines: {node: '>= 10.14.2'}
+
+  jest-get-type@26.3.0:
+    resolution: {integrity: sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==}
+    engines: {node: '>= 10.14.2'}
+
   jiti@1.21.7:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
@@ -4550,6 +4627,10 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  pretty-format@26.6.2:
+    resolution: {integrity: sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==}
+    engines: {node: '>= 10'}
+
   prismjs@1.27.0:
     resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
     engines: {node: '>=6'}
@@ -4617,6 +4698,12 @@ packages:
       apexcharts: '>=4.0.0'
       react: '>=0.13'
 
+  react-audio-player@0.17.0:
+    resolution: {integrity: sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+
   react-audio-visualize@1.2.0:
     resolution: {integrity: sha512-rfO5nmT0fp23gjU0y2WQT6+ZOq2ZsuPTMphchwX1PCz1Di4oaIr6x7JZII8MLrbHdG7UB0OHfGONTIsWdh67kQ==}
     peerDependencies:
@@ -4714,6 +4801,9 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
@@ -4729,6 +4819,11 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
+  react-password-checklist@1.8.1:
+    resolution: {integrity: sha512-QHIU/OejxoH4/cIfYLHaHLb+yYc8mtL0Vr4HTmULxQg3ZNdI9Ni/yYf7pwLBgsUh4sseKCV/GzzYHWpHqejTGw==}
+    peerDependencies:
+      react: '>16.0.0-alpha || >17.0.0-alpha || >18.0.0-alpha'
+
   react-player@2.16.0:
     resolution: {integrity: sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==}
     peerDependencies:
@@ -5385,6 +5480,11 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
+  typescript@4.9.5:
+    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+
   typescript@5.7.2:
     resolution: {integrity: sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==}
     engines: {node: '>=14.17'}
@@ -5563,6 +5663,12 @@ packages:
   warning@4.0.3:
     resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
 
+  wavesurfer.js@4.6.0:
+    resolution: {integrity: sha512-+nn6VD86pTtRu9leVNXoIGOCMJyaTNsKNy9v+SfUsYo+SxLCQvEzrZZ/eKMImqspsk+BX1V1xlY4FRkHswu3fA==}
+
+  wavesurfer.js@7.8.15:
+    resolution: {integrity: sha512-fWNnQt5BEGzuoJ7HRxfvpT1rOEI1AmCGPZ/+7QDkDVN/m2vIBeLVQ+5vENRMz1YwvZ/u1No0UV492/o8G++KXQ==}
+
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
@@ -6415,6 +6521,18 @@ snapshots:
       react: 18.3.1
       tslib: 2.8.1
 
+  '@dschoon/react-waves@4.0.3(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@types/jest': 26.0.24
+      '@types/node': 14.18.63
+      '@types/react': 16.14.62
+      '@types/react-dom': 16.9.25(@types/react@16.14.62)
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      typescript: 4.9.5
+      wavesurfer.js: 4.6.0
+
   '@emnapi/runtime@1.3.1':
     dependencies:
       tslib: 2.8.1
@@ -6724,6 +6842,14 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
+  '@jest/types@26.6.2':
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/istanbul-reports': 3.0.4
+      '@types/node': 20.17.10
+      '@types/yargs': 15.0.19
+      chalk: 4.1.2
+
   '@jridgewell/gen-mapping@0.3.8':
     dependencies:
       '@jridgewell/set-array': 1.2.1
@@ -6899,69 +7025,74 @@ snapshots:
 
   '@radix-ui/primitive@1.1.1': {}
 
-  '@radix-ui/react-accordion@1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-accordion@1.2.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collapsible': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-collection': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collapsible': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-alert-dialog@1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-alert-dialog@1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-dialog': 1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-arrow@1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-arrow@1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-aspect-ratio@1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-aspect-ratio@1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-avatar@1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-avatar@1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-checkbox@1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-checkbox@1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
@@ -6969,32 +7100,35 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-collapsible@1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-collapsible@1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-collection@1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-collection@1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
   '@radix-ui/react-compose-refs@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
@@ -7002,18 +7136,19 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@radix-ui/react-context-menu@2.2.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-context-menu@2.2.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-menu': 2.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
   '@radix-ui/react-context@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
@@ -7021,18 +7156,18 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@radix-ui/react-dialog@1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dialog@1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       aria-hidden: 1.2.4
@@ -7041,6 +7176,7 @@ snapshots:
       react-remove-scroll: 2.6.2(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
   '@radix-ui/react-direction@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
@@ -7048,31 +7184,33 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@radix-ui/react-dismissable-layer@1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dismissable-layer@1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-dropdown-menu@2.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dropdown-menu@2.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-menu': 2.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
   '@radix-ui/react-focus-guards@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
@@ -7080,31 +7218,33 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@radix-ui/react-focus-scope@1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-hover-card@1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-hover-card@1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
   '@radix-ui/react-id@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
@@ -7113,30 +7253,31 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@radix-ui/react-label@2.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-label@2.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-menu@2.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-menu@2.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       aria-hidden: 1.2.4
@@ -7145,58 +7286,61 @@ snapshots:
       react-remove-scroll: 2.6.2(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-menubar@1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-menubar@1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-menu': 2.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-navigation-menu@1.2.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-navigation-menu@1.2.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-popover@1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-popover@1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       aria-hidden: 1.2.4
@@ -7205,14 +7349,15 @@ snapshots:
       react-remove-scroll: 2.6.2(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-popper@1.2.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-popper@1.2.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-arrow': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
@@ -7222,17 +7367,19 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-portal@1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-portal@1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-presence@1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-presence@1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
@@ -7240,33 +7387,36 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-primitive@2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-primitive@2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-progress@1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-progress@1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-radio-group@1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-radio-group@1.2.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
@@ -7274,84 +7424,89 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-roving-focus@1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-roving-focus@1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-scroll-area@1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-scroll-area@1.2.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/number': 1.1.0
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-select@2.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-select@2.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/number': 1.1.0
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       aria-hidden: 1.2.4
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-remove-scroll: 2.6.2(@types/react@18.3.18)(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-separator@1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-separator@1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-slider@1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-slider@1.2.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/number': 1.1.0
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
@@ -7360,6 +7515,7 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
   '@radix-ui/react-slot@1.1.1(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
@@ -7368,12 +7524,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@radix-ui/react-switch@1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-switch@1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.18)(react@18.3.1)
@@ -7381,83 +7537,89 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-tabs@1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-tabs@1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-toast@1.2.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toast@1.2.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-toggle-group@1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toggle-group@1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toggle': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-toggle@1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toggle@1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
-  '@radix-ui/react-tooltip@1.1.6(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-tooltip@1.1.6(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.3(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot': 1.1.1(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
   '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
@@ -7505,13 +7667,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
-  '@radix-ui/react-visually-hidden@1.1.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-visually-hidden@1.1.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
   '@radix-ui/rect@1.1.0': {}
 
@@ -7732,6 +7895,21 @@ snapshots:
       '@types/node': 20.17.10
       domhandler: 2.4.2
 
+  '@types/istanbul-lib-coverage@2.0.6': {}
+
+  '@types/istanbul-lib-report@3.0.3':
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.6
+
+  '@types/istanbul-reports@3.0.4':
+    dependencies:
+      '@types/istanbul-lib-report': 3.0.3
+
+  '@types/jest@26.0.24':
+    dependencies:
+      jest-diff: 26.6.2
+      pretty-format: 26.6.2
+
   '@types/jquery@3.5.32':
     dependencies:
       '@types/sizzle': 2.3.9
@@ -7772,6 +7950,8 @@ snapshots:
       - react-dom
       - sass
 
+  '@types/node@14.18.63': {}
+
   '@types/node@20.17.10':
     dependencies:
       undici-types: 6.19.8
@@ -7782,6 +7962,15 @@ snapshots:
 
   '@types/qs@6.9.17': {}
 
+  '@types/react-dom@16.9.25(@types/react@16.14.62)':
+    dependencies:
+      '@types/react': 16.14.62
+
+  '@types/react-dom@16.9.25(@types/react@18.3.18)':
+    dependencies:
+      '@types/react': 18.3.18
+    optional: true
+
   '@types/react-geocode@0.2.4': {}
 
   '@types/react-google-recaptcha@2.1.9':
@@ -7801,6 +7990,12 @@ snapshots:
     dependencies:
       '@types/react': 18.3.18
 
+  '@types/react@16.14.62':
+    dependencies:
+      '@types/prop-types': 15.7.14
+      '@types/scheduler': 0.16.8
+      csstype: 3.1.3
+
   '@types/react@18.3.18':
     dependencies:
       '@types/prop-types': 15.7.14
@@ -7808,12 +8003,20 @@ snapshots:
 
   '@types/rtl-detect@1.0.3': {}
 
+  '@types/scheduler@0.16.8': {}
+
   '@types/sizzle@2.3.9': {}
 
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
 
+  '@types/yargs-parser@21.0.3': {}
+
+  '@types/yargs@15.0.19':
+    dependencies:
+      '@types/yargs-parser': 21.0.3
+
   '@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.7.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 7.2.0
@@ -7861,6 +8064,11 @@ snapshots:
       next: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
 
+  '@wavesurfer/react@1.0.8(react@18.3.1)(wavesurfer.js@7.8.15)':
+    dependencies:
+      react: 18.3.1
+      wavesurfer.js: 7.8.15
+
   '@wojtekmaj/date-utils@1.5.1': {}
 
   '@yr/monotone-cubic-spline@1.0.3': {}
@@ -8243,11 +8451,11 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  cmdk@1.0.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  cmdk@1.0.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@radix-ui/react-dialog': 1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       use-sync-external-store: 1.4.0(react@18.3.1)
@@ -8599,6 +8807,8 @@ snapshots:
 
   didyoumean@1.2.2: {}
 
+  diff-sequences@26.6.2: {}
+
   diff@5.2.0: {}
 
   dir-glob@3.0.1:
@@ -9695,6 +9905,15 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  jest-diff@26.6.2:
+    dependencies:
+      chalk: 4.1.2
+      diff-sequences: 26.6.2
+      jest-get-type: 26.3.0
+      pretty-format: 26.6.2
+
+  jest-get-type@26.3.0: {}
+
   jiti@1.21.7: {}
 
   jodit-react@4.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -10769,6 +10988,13 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  pretty-format@26.6.2:
+    dependencies:
+      '@jest/types': 26.6.2
+      ansi-regex: 5.0.1
+      ansi-styles: 4.3.0
+      react-is: 17.0.2
+
   prismjs@1.27.0: {}
 
   prismjs@1.29.0: {}
@@ -10839,6 +11065,12 @@ snapshots:
       prop-types: 15.8.1
       react: 18.3.1
 
+  react-audio-player@0.17.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-audio-visualize@1.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -10904,7 +11136,7 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
-  react-fit@2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-fit@2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       detect-element-overflow: 1.4.2
       react: 18.3.1
@@ -10912,6 +11144,7 @@ snapshots:
       warning: 4.0.3
     optionalDependencies:
       '@types/react': 18.3.18
+      '@types/react-dom': 16.9.25(@types/react@18.3.18)
 
   react-geocode@0.2.3:
     dependencies:
@@ -10935,6 +11168,8 @@ snapshots:
 
   react-is@16.13.1: {}
 
+  react-is@17.0.2: {}
+
   react-is@18.3.1: {}
 
   react-leaflet@4.2.1(leaflet@1.9.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -10948,6 +11183,10 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  react-password-checklist@1.8.1(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-player@2.16.0(react@18.3.1):
     dependencies:
       deepmerge: 4.3.1
@@ -11049,7 +11288,7 @@ snapshots:
       react: 18.3.1
       refractor: 3.6.0
 
-  react-time-picker@7.0.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-time-picker@7.0.0(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@wojtekmaj/date-utils': 1.5.1
       clsx: 2.1.1
@@ -11058,7 +11297,7 @@ snapshots:
       react: 18.3.1
       react-clock: 5.1.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-dom: 18.3.1(react@18.3.1)
-      react-fit: 2.0.1(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-fit: 2.0.1(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       update-input-width: 1.4.2
     optionalDependencies:
       '@types/react': 18.3.18
@@ -11749,6 +11988,8 @@ snapshots:
       possible-typed-array-names: 1.0.0
       reflect.getprototypeof: 1.0.9
 
+  typescript@4.9.5: {}
+
   typescript@5.7.2: {}
 
   unbox-primitive@1.1.0:
@@ -11917,9 +12158,9 @@ snapshots:
 
   vanilla-colorful@0.7.2: {}
 
-  vaul@0.9.9(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  vaul@0.9.9(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@radix-ui/react-dialog': 1.1.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@16.9.25(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
@@ -11984,6 +12225,10 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  wavesurfer.js@4.6.0: {}
+
+  wavesurfer.js@7.8.15: {}
+
   web-namespaces@2.0.1: {}
 
   web-worker@1.3.0: {}
diff --git a/service/auth.ts b/service/auth.ts
index 56a86015..b385ae4f 100644
--- a/service/auth.ts
+++ b/service/auth.ts
@@ -81,4 +81,51 @@ export async function saveUser(data: any) {
   const url = "users/save";
   return httpPostInterceptor(url, data);
 }
+export async function saveInstitutes(data: any) {
+  const url = "public/users/save-institutes";
+  return httpPostInterceptor(url, data);
+}
+export async function postRegistration(data: any) {
+  const url = "public/users/save";
+  return httpPostInterceptor(url, data);
+}
 
+export async function getDataByNIK(reqid: any, nik: any) {
+  const url = `http://spitpolri.com/api/back_end/get_ktp?reqid=${reqid}&nik=${nik}`;
+  return getAPIDummy(url);
+}
+
+export async function listInstitusi(roleId: any) {
+  const url = `public/users/institutes?categoryRoleId=${roleId}`;
+  return httpGetInterceptor(url);
+}
+
+export async function listProvince() {
+  const url = "public/users/provinces";
+  return httpGetInterceptor(url);
+}
+
+export async function listCity(id: any) {
+  const url = `public/users/cities?provId=${id}`;
+  return httpGetInterceptor(url);
+}
+
+export async function listDistricts(id: any) {
+  const url = `public/users/districts?cityId=${id}`;
+  return httpGetInterceptor(url);
+}
+
+export async function getDataByNRP(reqid: any, nrp: any) {
+  const url = `http://spitpolri.com/api/back_end/get_nrp?reqid=${reqid}&nrp=${nrp}`;
+  return getAPIDummy(url);
+}
+
+export async function getDataJournalist(cert: any) {
+  const url = `public/users/search-journalist?cert=${cert}`;
+  return httpGetInterceptor({ url });
+}
+
+export async function getDataPersonil(nrp: any) {
+  const url = `public/users/search-personil?nrp=${nrp}`;
+  return httpGetInterceptor({ url });
+}
diff --git a/service/communication/communication.ts b/service/communication/communication.ts
index e58df702..fcb92b6e 100644
--- a/service/communication/communication.ts
+++ b/service/communication/communication.ts
@@ -100,3 +100,18 @@ export async function deleteCollabDiscussion(id: string | number) {
   const url = `ticketing/collaboration/discussion?id=${id}`;
   return httpDeleteInterceptor(url);
 }
+
+export async function getQuestionPagination(
+  title = "",
+  page: number,
+  typeId: string,
+  size: string
+) {
+  const url = `question/pagination?enablePage=1&size=${size}&title=${title}&page=${page}&typeId=${typeId}`;
+  return httpGetInterceptor(url);
+}
+
+export async function deleteQuestion(id: string | number) {
+  const url = `/question?id=${id}`;
+  return httpDeleteInterceptor(url);
+}
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index b2182f91..96159ff3 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -1,3 +1,4 @@
+import { httpPost } from "../http-config/http-base-service";
 import { httpDeleteInterceptor, httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
 
 export async function getHeroData() {
@@ -113,3 +114,17 @@ export async function getPublicSuggestionList(id: any) {
   const url = `media/public/suggestion?mediaId=${id}`;
   return httpGetInterceptor(url);
 }
+export async function verifyOTP(email: any, otp: any) {
+  const url = `public/users/verify-otp?email=${email}&otp=${otp}`;
+  return httpPostInterceptor(url);
+}
+
+export async function requestOTP(data: any) {
+  const url = "public/users/otp-request";
+  return httpPost(url, data);
+}
+
+export async function getUserNotifications(page = 0, typeId: any) {
+  const url = `notification/public/list?enablePage=1&page=${page}&typeId=${typeId}`;
+  return httpGetInterceptor(url);
+}
\ No newline at end of file
diff --git a/service/master/faq.ts b/service/master/faq.ts
index 66fa4856..4b6b209a 100644
--- a/service/master/faq.ts
+++ b/service/master/faq.ts
@@ -1,8 +1,11 @@
-import {
-  httpGetInterceptor,
-} from "../http-config/http-interceptor-service";
+import { httpGetInterceptor } from "../http-config/http-interceptor-service";
 
 export async function getFaqList() {
   const url = `master/faq/list`;
   return httpGetInterceptor(url);
-}
\ No newline at end of file
+}
+
+export async function getUserFeedbacks() {
+  const url = "feedback/list-all";
+  return httpGetInterceptor(url);
+}
diff --git a/service/media-tracking/media-tracking.ts b/service/media-tracking/media-tracking.ts
index a1469fc4..42a37d30 100644
--- a/service/media-tracking/media-tracking.ts
+++ b/service/media-tracking/media-tracking.ts
@@ -1,6 +1,11 @@
-import { httpGetInterceptor } from "../http-config/http-interceptor-service";
+import { httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
 
 export async function getMediaTrackingMonitoring(page: number, size: number) {
   const url = `cekmedsos/monitoring/pagination?page=${page}&size=${size}`;
   return httpGetInterceptor(url);
 }
+
+export async function sendMediaUploadToEmail(data: any) {
+  const url = "media/public/share-to-email";
+  return httpPostInterceptor(url, data);
+}
diff --git a/utils/globals.tsx b/utils/globals.tsx
index 9493c266..55e340de 100644
--- a/utils/globals.tsx
+++ b/utils/globals.tsx
@@ -100,3 +100,9 @@ export function getLocaleTime(d: Date) {
   const pad = (n: number, s = 2) => `${new Array(s).fill(0)}${n}`.slice(-s);
   return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
 }
+export function getTimestamp(d: Date) {
+  const pad = (n: any, s = 2) => `${new Array(s).fill(0)}${n}`.slice(-s);
+  return `${pad(d.getFullYear(), 4)}-${pad(d.getMonth() + 1)}-${pad(
+    d.getDate()
+  )} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
diff --git a/vendor/ckeditor5/node_modules/.bin/tsc b/vendor/ckeditor5/node_modules/.bin/tsc
index c4864b9a..0863208a 120000
--- a/vendor/ckeditor5/node_modules/.bin/tsc
+++ b/vendor/ckeditor5/node_modules/.bin/tsc
@@ -1,16 +1 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
-else 
-  exec node  "$basedir/../typescript/bin/tsc" "$@"
-fi
+../typescript/bin/tsc
\ No newline at end of file
diff --git a/vendor/ckeditor5/node_modules/.bin/tsc.cmd b/vendor/ckeditor5/node_modules/.bin/tsc.cmd
deleted file mode 100644
index 40bf1284..00000000
--- a/vendor/ckeditor5/node_modules/.bin/tsc.cmd
+++ /dev/null
@@ -1,17 +0,0 @@
-@ECHO off
-GOTO start
-:find_dp0
-SET dp0=%~dp0
-EXIT /b
-:start
-SETLOCAL
-CALL :find_dp0
-
-IF EXIST "%dp0%\node.exe" (
-  SET "_prog=%dp0%\node.exe"
-) ELSE (
-  SET "_prog=node"
-  SET PATHEXT=%PATHEXT:;.JS;=;%
-)
-
-endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\typescript\bin\tsc" %*
diff --git a/vendor/ckeditor5/node_modules/.bin/tsc.ps1 b/vendor/ckeditor5/node_modules/.bin/tsc.ps1
deleted file mode 100644
index 112413b5..00000000
--- a/vendor/ckeditor5/node_modules/.bin/tsc.ps1
+++ /dev/null
@@ -1,28 +0,0 @@
-#!/usr/bin/env pwsh
-$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
-
-$exe=""
-if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
-  # Fix case when both the Windows and Linux builds of Node
-  # are installed in the same directory
-  $exe=".exe"
-}
-$ret=0
-if (Test-Path "$basedir/node$exe") {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "$basedir/node$exe"  "$basedir/../typescript/bin/tsc" $args
-  } else {
-    & "$basedir/node$exe"  "$basedir/../typescript/bin/tsc" $args
-  }
-  $ret=$LASTEXITCODE
-} else {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "node$exe"  "$basedir/../typescript/bin/tsc" $args
-  } else {
-    & "node$exe"  "$basedir/../typescript/bin/tsc" $args
-  }
-  $ret=$LASTEXITCODE
-}
-exit $ret
diff --git a/vendor/ckeditor5/node_modules/.bin/tsserver b/vendor/ckeditor5/node_modules/.bin/tsserver
index 6c19ce3d..f8f8f1a0 120000
--- a/vendor/ckeditor5/node_modules/.bin/tsserver
+++ b/vendor/ckeditor5/node_modules/.bin/tsserver
@@ -1,16 +1 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
-else 
-  exec node  "$basedir/../typescript/bin/tsserver" "$@"
-fi
+../typescript/bin/tsserver
\ No newline at end of file
diff --git a/vendor/ckeditor5/node_modules/.bin/tsserver.cmd b/vendor/ckeditor5/node_modules/.bin/tsserver.cmd
deleted file mode 100644
index 57f851fd..00000000
--- a/vendor/ckeditor5/node_modules/.bin/tsserver.cmd
+++ /dev/null
@@ -1,17 +0,0 @@
-@ECHO off
-GOTO start
-:find_dp0
-SET dp0=%~dp0
-EXIT /b
-:start
-SETLOCAL
-CALL :find_dp0
-
-IF EXIST "%dp0%\node.exe" (
-  SET "_prog=%dp0%\node.exe"
-) ELSE (
-  SET "_prog=node"
-  SET PATHEXT=%PATHEXT:;.JS;=;%
-)
-
-endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\typescript\bin\tsserver" %*
diff --git a/vendor/ckeditor5/node_modules/.bin/tsserver.ps1 b/vendor/ckeditor5/node_modules/.bin/tsserver.ps1
deleted file mode 100644
index 249f417d..00000000
--- a/vendor/ckeditor5/node_modules/.bin/tsserver.ps1
+++ /dev/null
@@ -1,28 +0,0 @@
-#!/usr/bin/env pwsh
-$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
-
-$exe=""
-if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
-  # Fix case when both the Windows and Linux builds of Node
-  # are installed in the same directory
-  $exe=".exe"
-}
-$ret=0
-if (Test-Path "$basedir/node$exe") {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "$basedir/node$exe"  "$basedir/../typescript/bin/tsserver" $args
-  } else {
-    & "$basedir/node$exe"  "$basedir/../typescript/bin/tsserver" $args
-  }
-  $ret=$LASTEXITCODE
-} else {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "node$exe"  "$basedir/../typescript/bin/tsserver" $args
-  } else {
-    & "node$exe"  "$basedir/../typescript/bin/tsserver" $args
-  }
-  $ret=$LASTEXITCODE
-}
-exit $ret