fix: fixed api in inbox section

app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx

@@ -1,10 +1,5 @@
 // "use client";
-import React, { 
+import React, { useState, useEffect, useRef, Fragment } from "react";
-  useState, 
-  useEffect, 
-  useRef,
-  Fragment, 
-} from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -49,6 +44,7 @@ import { getUserLevelForAssignments } from "@/service/task";
 import { AudioRecorder } from "react-audio-voice-recorder";
 import FileUploader from "@/components/form/shared/file-uploader";
 import { Upload } from "tus-js-client";
+import { getCsrfToken } from "@/service/auth";
 
 const schema = z.object({
   title: z.string().min(3, { message: "Required" }),
@@ -75,9 +71,7 @@ const EventModal = ({
   const [startDate, setStartDate] = useState<Date>(new Date());
   const [endDate, setEndDate] = useState<Date>(new Date());
   const [isPending, startTransition] = React.useTransition();
-  const [agendaType, setAgendaType] = React.useState<any>(
+  const [agendaType, setAgendaType] = React.useState<any>(categories[0].value);
-    categories[0].value
-  );
   const [listDest, setListDest] = useState([]);
   const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
   const [eventIdToDelete, setEventIdToDelete] = useState<string | null>(null);
@@ -97,6 +91,12 @@ const EventModal = ({
   const [isVideoUploadFinish, setIsVideoUploadFinish] = useState(false);
   const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
   const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
+  let progressInfo: any = [];
+  let counterUpdateProgress = 0;
+  const [progressList, setProgressList] = useState<any>([]);
+  let uploadPersen = 0;
+  const [isStartUpload, setIsStartUpload] = useState(false);
+  const [counterProgress, setCounterProgress] = useState(0);
 
   const {
     register,
@@ -118,11 +118,17 @@ const EventModal = ({
         const levelList = response?.data?.data.list;
         let listFiltered = [];
         if (agendaType == "polda") {
-          listFiltered = levelList.filter((level: any) => level.name != 'SATKER POLRI');
+          listFiltered = levelList.filter(
+            (level: any) => level.name != "SATKER POLRI"
+          );
         } else if (agendaType == "polres") {
-          listFiltered = levelList.filter((level: any) => level.name != 'SATKER POLRI');
+          listFiltered = levelList.filter(
+            (level: any) => level.name != "SATKER POLRI"
+          );
         } else if (agendaType == "satker") {
-          listFiltered = levelList.filter((level: any) => level.name == 'SATKER POLRI');
+          listFiltered = levelList.filter(
+            (level: any) => level.name == "SATKER POLRI"
+          );
         }
         setListDest(listFiltered);
         const initialExpandedState = listFiltered.reduce(
@@ -181,52 +187,28 @@ const EventModal = ({
       setIsImageUploadFinish(true);
     }
     imageFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(
+      await uploadResumableFile(index, String(id), item, "1", "0");
-        index,
-        String(id),
-        item,
-        "1",
-        "0"
-      );
     });
 
     if (videoFiles?.length == 0) {
       setIsVideoUploadFinish(true);
     }
     videoFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(
+      await uploadResumableFile(index, String(id), item, "2", "0");
-        index,
-        String(id),
-        item,
-        "2",
-        "0"
-      );
     });
 
     if (textFiles?.length == 0) {
       setIsTextUploadFinish(true);
     }
     textFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(
+      await uploadResumableFile(index, String(id), item, "3", "0");
-        index,
-        String(id),
-        item,
-        "3",
-        "0"
-      );
     });
 
     if (audioFiles?.length == 0) {
       setIsAudioUploadFinish(true);
     }
     audioFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(
+      await uploadResumableFile(index, String(id), item, "4", "0");
-        index,
-        String(id),
-        item,
-        "4",
-        "0"
-      );
     });
 
     // Optional: Use Swal for success feedback
@@ -333,11 +315,16 @@ const EventModal = ({
   ) {
     console.log(idx, id, file, fileTypeId, duration);
 
-    // const placements = getPlacement(file.placements);
+    const resCsrf = await getCsrfToken();
-    // console.log("Placementttt:  : ", placements);
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken,
+    };
 
     const upload = new Upload(file, {
       endpoint: `${process.env.NEXT_PUBLIC_API}/agenda-settings/file/upload`,
+      headers: headers,
       retryDelays: [0, 3000, 6000, 12_000, 24_000],
       chunkSize: 20_000,
       metadata: {
@@ -345,8 +332,12 @@ const EventModal = ({
         filename: file.name,
         filetype: file.type,
         fileTypeId: fileTypeId,
-        duration: "",
+        duration,
-        isWatermark: "true", // hardcode
+        isWatermark: "false", // hardcode
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
       },
       onError: async (e: any) => {
         console.log("Error upload :", e);
@@ -358,27 +349,18 @@ const EventModal = ({
         bytesTotal: any
       ) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
-        // progressInfo[idx].percentage = uploadPersen;
+        progressInfo[idx].percentage = uploadPersen;
-        // counterUpdateProgress++;
+        counterUpdateProgress++;
-        // console.log(counterUpdateProgress);
+        console.log(counterUpdateProgress);
-        // setProgressList(progressInfo);
+        setProgressList(progressInfo);
-        // setCounterProgress(counterUpdateProgress);
+        setCounterProgress(counterUpdateProgress);
       },
       onSuccess: async () => {
-        // uploadPersen = 100;
+        uploadPersen = 100;
-        // progressInfo[idx].percentage = 100;
+        progressInfo[idx].percentage = 100;
-        // counterUpdateProgress++;
+        counterUpdateProgress++;
-        // setCounterProgress(counterUpdateProgress);
+        setCounterProgress(counterUpdateProgress);
         successTodo();
-        if (fileTypeId == '1'){
-          setIsImageUploadFinish(true);
-        } else if (fileTypeId == '2'){
-          setIsVideoUploadFinish(true);
-        } if (fileTypeId == '3'){
-          setIsTextUploadFinish(true);
-        } if (fileTypeId == '4'){
-          setIsAudioUploadFinish(true);
-        }
       },
     });
 
@@ -387,10 +369,20 @@ const EventModal = ({
 
   useEffect(() => {
     successTodo();
-  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish])
+  }, [
+    isImageUploadFinish,
+    isVideoUploadFinish,
+    isAudioUploadFinish,
+    isTextUploadFinish,
+  ]);
 
   function successTodo() {
-    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
+    if (
+      isImageUploadFinish &&
+      isVideoUploadFinish &&
+      isAudioUploadFinish &&
+      isTextUploadFinish
+    ) {
       successSubmit("/in/contributor/agenda-setting");
     }
   }
@@ -422,7 +414,9 @@ const EventModal = ({
         >
           <DialogHeader>
             <DialogTitle>
-              {event?.length > 1 ? "Edit Agenda Setting" : "Create Agenda Setting"}{" "}
+              {event?.length > 1
+                ? "Edit Agenda Setting"
+                : "Create Agenda Setting"}{" "}
               {event?.title}
             </DialogTitle>
           </DialogHeader>
@@ -551,7 +545,9 @@ const EventModal = ({
                     )}
                   />
                 </div>
-                {(agendaType === "polda" || agendaType === "polres" || agendaType === "satker" )&& (
+                {(agendaType === "polda" ||
+                  agendaType === "polres" ||
+                  agendaType === "satker") && (
                   <div>
                     <Dialog>
                       <DialogTrigger asChild>
@@ -588,7 +584,9 @@ const EventModal = ({
                                   )}
                                 </button>
                               </Label>
-                              {(agendaType == "polres" || agendaType == "satker") && expandedPolda[polda.id] && (
+                              {(agendaType == "polres" ||
+                                agendaType == "satker") &&
+                                expandedPolda[polda.id] && (
                                   <div className="ml-6 mt-2">
                                     <Label className="block">
                                       <Checkbox
@@ -615,13 +613,16 @@ const EventModal = ({
                                       />
                                       Pilih Semua Polres
                                     </Label>
-                                  {polda?.subDestination?.map((polres: any) => (
+                                    {polda?.subDestination?.map(
+                                      (polres: any) => (
                                         <Label
                                           key={polres.id}
                                           className="block mt-1"
                                         >
                                           <Checkbox
-                                        checked={checkedLevels.has(polres.id)}
+                                            checked={checkedLevels.has(
+                                              polres.id
+                                            )}
                                             onCheckedChange={() =>
                                               handleCheckboxChange(polres.id)
                                             }
@@ -629,7 +630,8 @@ const EventModal = ({
                                           />
                                           {polres.name}
                                         </Label>
-                                  ))}
+                                      )
+                                    )}
                                   </div>
                                 )}
                             </div>

app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx

@@ -112,12 +112,17 @@ const columns: ColumnDef<any>[] = [
     header: "Actions",
     enableHiding: false,
     cell: ({ row }) => {
+      const isDisabled = row.original.isPublish; // Check the isPublish value
+
       return (
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
+          <DropdownMenuTrigger asChild disabled={isDisabled}>
             <Button
               size="icon"
-              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+              className={`bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent ${
+                isDisabled ? "cursor-not-allowed opacity-50" : ""
+              }`}
+              disabled={isDisabled} // Disable button if isPublish is true
             >
               <span className="sr-only">Open menu</span>
               <MoreVertical className="h-4 w-4 text-default-800" />
@@ -127,7 +132,12 @@ const columns: ColumnDef<any>[] = [
             <Link
               href={`/contributor/content/spit/convert/${row.original.contentId}`}
             >
-              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <DropdownMenuItem
+                className={`p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none ${
+                  isDisabled ? "cursor-not-allowed opacity-50" : ""
+                }`}
+                disabled={isDisabled} // Disable dropdown item if isPublish is true
+              >
                 <MoveDownRight className="w-4 h-4 me-1.5" />
                 Pindah Ke Mediahub
               </DropdownMenuItem>

app/[locale]/(protected)/contributor/task/components/columns.tsx

@@ -23,8 +23,23 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Title",
-    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+    cell: ({ row }) => (
+      <div>
+        <span>{row.getValue("title")}</span>
+        {row.original.isForward && (
+          <Button
+            variant={"outline"}
+            color="primary"
+            size="sm"
+            className="ml-3 rounded-xl"
+          >
+            Forward
+          </Button>
+        )}
+      </div>
+    ),
   },
+
   {
     accessorKey: "uniqueCode",
     header: "Code",

app/[locale]/(protected)/contributor/task/forward/[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 FormTaskForward from "@/components/form/task/task-forward-form";
+
+const TaskForwardPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormTaskForward />
+      </div>
+    </div>
+  );
+};
+
+export default TaskForwardPage;

app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx

@@ -21,8 +21,19 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import Cookies from "js-cookie";
 import { postBlog } from "@/service/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import { DotSquare, InboxIcon, PaperclipIcon, SmileIcon } from "lucide-react";
+import {
-import { detailMedia } from "@/service/curated-content/curated-content";
+  DotSquare,
+  InboxIcon,
+  PaperclipIcon,
+  SmileIcon,
+  TrashIcon,
+} from "lucide-react";
+import {
+  deleteMediaCurationMessage,
+  detailMedia,
+  getMediaCurationMessage,
+  saveMediaCurationMessage,
+} from "@/service/curated-content/curated-content";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/free-mode";
@@ -34,6 +45,14 @@ import "swiper/css/navigation";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
+import { listData } from "@/service/landing/landing";
+import {
+  createAssignmentResponse,
+  deleteAssignmentResponse,
+  getAssignmentResponseList,
+} from "@/service/task";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { close, loading } from "@/lib/swal";
 
 const detailSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -50,6 +69,24 @@ type Category = {
   categoryName: string;
 };
 
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+
+  // Pastikan validitas tanggal
+  if (isNaN(date.getTime())) {
+    throw new Error("Invalid date format");
+  }
+
+  // Format tanggal
+  const day = date.getDate().toString().padStart(2, "0");
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const year = date.getFullYear();
+  // const hours = date.getHours().toString().padStart(2, "0");
+
+  // Gabungkan hasil format
+  return `${day}-${month}-${year} `;
+};
+
 export type curationDetail = {
   id: number;
   title: string;
@@ -108,22 +145,21 @@ export default function DetailImage() {
   console.log(id);
   const editor = useRef(null);
   type DetailSchema = z.infer<typeof detailSchema>;
-
+  const userLevelNumber = getCookiesDecrypt("ulne");
+  const userId = getCookiesDecrypt("uie");
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
   const [selectedTarget, setSelectedTarget] = useState("");
-  // const [detail, setDetail] = useState({
-  //   title: null,
-  //   tags: null,
-  //   files: [],
-  //   fileType: null,
-  // });
   const [detail, setDetail] = useState<curationDetail>();
   const [refresh] = useState(false);
   const [detailThumb, setDetailThumb] = useState<any>([]);
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
+  const [showInput, setShowInput] = useState<boolean>(false);
+  const [selectedFileId, setSelectedFileId] = useState(null);
+  const [listData, setListData] = useState([]);
+  const [message, setMessage] = useState("");
 
   const {
     control,
@@ -142,31 +178,93 @@ export default function DetailImage() {
     setReplyingTo(commentId);
   };
 
-  const addReply = (commentId: number) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (replyText.trim()) {
+    setMessage(e.target.value);
-      const newCommentData = commentsData.map((comment: any) => {
-        if (comment.id === commentId) {
-          return {
-            ...comment,
-            replies: [
-              ...comment.replies,
-              {
-                text: replyText,
-                username: "You",
-                date: new Date().toLocaleString(),
-              },
-            ],
   };
-        }
-        return comment;
-      });
 
-      setCommentsData(newCommentData);
+  useEffect(() => {
-      setReplyText("");
+    async function initState() {
+      // loading();
+      const response = await getMediaCurationMessage(selectedFileId);
+      console.log("data", response?.data?.data);
+      console.log("userLvl", userLevelNumber);
+      setListData(response?.data?.data);
+      close();
+    }
+
+    initState();
+  }, [selectedFileId]);
+
+  // const postData = () => {
+  //   sendSuggestionParent();
+  // };
+
+  const postData = async () => {
+    if (message?.length > 1 && selectedFileId) {
+      try {
+        const data = {
+          mediaUploadFileId: selectedFileId,
+          message,
+          parentId: null,
+        };
+
+        const response = await saveMediaCurationMessage(data);
+        console.log("Komentar terkirim:", response);
+
+        const responseGet = await getMediaCurationMessage(selectedFileId);
+        setListData(responseGet?.data?.data);
+
+        setMessage("");
+      } catch (error) {
+        console.error("Error posting comment:", error);
+      }
+    } else {
+      console.log("Pesan atau file ID tidak valid.");
+    }
+  };
+
+  const sendReplyData = async (parentId: number) => {
+    const inputElement = document.querySelector(
+      `#input-comment-${parentId}`
+    ) as HTMLTextAreaElement;
+
+    if (inputElement?.value?.length > 1 && selectedFileId) {
+      loading();
+      const data = {
+        mediaUploadFileId: selectedFileId,
+        message: inputElement.value,
+        parentId,
+      };
+
+      console.log("Sending reply:", data);
+      const response = await saveMediaCurationMessage(data);
+      console.log(response);
+
+      const responseGet = await getMediaCurationMessage(selectedFileId);
+      console.log("Updated comments:", responseGet?.data?.data);
+      setListData(responseGet?.data?.data);
+
+      inputElement.value = "";
+      close();
       setReplyingTo(null);
     }
   };
 
+  async function deleteDataSuggestion(dataId: any) {
+    loading();
+    const response = await deleteMediaCurationMessage(dataId);
+    console.log(response);
+    const responseGet = await getMediaCurationMessage(selectedFileId);
+    console.log(responseGet?.data?.data);
+    setListData(responseGet?.data?.data);
+    close();
+  }
+
+  const deleteData = (dataId: any) => {
+    deleteDataSuggestion(dataId);
+    console.log(dataId);
+  };
+
   useEffect(() => {
     async function initState() {
       if (id) {
@@ -174,16 +272,29 @@ export default function DetailImage() {
         const details = response?.data?.data;
 
         setDetail(details);
+        setSelectedFileId(details?.files[0]?.id);
         const filesData = details.files || [];
-        const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) =>
+        const fileUrls = filesData.map((file: any) => ({
-          file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg"
+          id: file.id,
-        );
+          thumbnailFileUrl: file.thumbnailFileUrl || "default-image.jpg",
+        }));
         setDetailThumb(fileUrls);
       }
     }
     initState();
   }, [id, refresh]);
 
+  const handleFileClick = async (fileId: any) => {
+    setSelectedFileId(fileId);
+    try {
+      const response = await getMediaCurationMessage(fileId);
+      console.log("Data komentar:", response?.data?.data);
+      setListData(response?.data?.data);
+    } catch (error) {
+      console.error("Error fetching comments:", error);
+    }
+  };
+
   return (
     <div className="flex gap-10">
       {detail !== undefined ? (
@@ -336,11 +447,14 @@ export default function DetailImage() {
                           className="w-full"
                         >
                           {detailThumb?.map((data: any) => (
-                            <SwiperSlide key={data.id}>
+                            <SwiperSlide
+                              key={data.id}
+                              onClick={() => handleFileClick(data.id)}
+                            >
                               <img
                                 className="object-fill h-full w-full"
-                                src={data}
+                                src={data.thumbnailFileUrl}
-                                alt={` ${data.id}`}
+                                alt={`File ID: ${data.id}`}
                               />
                             </SwiperSlide>
                           ))}
@@ -357,11 +471,14 @@ export default function DetailImage() {
                             // className="mySwiper2"
                           >
                             {detailThumb?.map((data: any) => (
-                              <SwiperSlide key={data.id}>
+                              <SwiperSlide
+                                key={data.id}
+                                onClick={() => handleFileClick(data.id)}
+                              >
                                 <img
-                                  className="object-cover h-[60px] w-[80px]"
+                                  className="object-fill h-full w-full"
-                                  src={data}
+                                  src={data.thumbnailFileUrl}
-                                  alt={` ${data.id}`}
+                                  alt={`File ID: ${data.id}`}
                                 />
                               </SwiperSlide>
                             ))}
@@ -432,112 +549,186 @@ export default function DetailImage() {
             </CardContent>
             <CardContent>
               <div className="gap-5 mb-5">
-                <div className="mt-5">
-                  <Label className="text-xl text-black">Berikan Komentar</Label>
-                  <div className="flex items-start gap-3">
-                    <Avatar>
-                      <AvatarImage
-                        src="/images/avatar/avatar-1.png"
-                        alt="@shadcn"
-                      />
-                    </Avatar>
-
-                    <textarea
-                      className="flex-grow p-2 border rounded-lg focus:outline-none focus:border-yellow-400"
-                      placeholder="Tuliskan komentar Anda di sini.."
-                    ></textarea>
-                  </div>
-                  <div className="flex items-center mt-2 gap-3">
-                    <button className="flex items-center text-gray-600 hover:text-gray-800">
-                      <PaperclipIcon className="w-5 h-5" />
-                      Lampirkan
-                    </button>
-                    <button className="flex items-center text-gray-600 hover:text-gray-800">
-                      <SmileIcon className="w-5 h-5" />
-                      Emoticon
-                    </button>
-                    <button className="ml-auto px-4 py-1 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600">
-                      Kirim
-                    </button>
-                  </div>
-                </div>
-
                 <div className="mt-5">
                   <Label className="text-xl text-black">Komentar</Label>
-                  {commentsData.map((comment) => (
+                  <div className="mt-4 border p-4 rounded bg-gray-50">
-                    <div
+                    <Textarea
-                      key={comment.id}
+                      placeholder="Tulis tanggapan Anda di sini..."
-                      className="flex items-start gap-3 mt-2"
+                      value={message}
+                      onChange={handleInputChange}
+                    />
+                    <div className="flex justify-end mt-3">
+                      <Button
+                        color="primary"
+                        onClick={() => postData()}
+                        type="button"
                       >
-                      <Avatar>
+                        Kirim Komentar
+                      </Button>
+                    </div>
+                  </div>
+                  {listData?.map((item: any) => (
+                    <div key={item.id} className="flex flex-col  gap-3 mt-2 ">
+                      <div className="flex flex-row gap-3">
+                        <Avatar className="mt-2">
                           <AvatarImage
-                          src={comment.avatar}
+                            src={"/assets/avatar-profile.png"}
-                          alt={`@${comment.username}`}
+                            alt={`@${item.username}`}
                           />
                         </Avatar>
-                      <div className="flex flex-col">
+                        <div className="flex flex-col bg-slate-200 w-full px-2 py-2 rounded-md">
+                          <div className="flex items-center justify-between">
                             <span className="text-gray-700 font-semibold">
-                          {comment.username}
+                              {item.messageFrom.fullname}
                             </span>
                             <span className="text-gray-500 text-sm">
-                          {comment.date}
+                              {formatDate(item.createdAt)}
                             </span>
-                        <p className="text-gray-800 mt-1">{comment.text}</p>
+                          </div>
-                        <div
+                          <p className="text-gray-800 mt-1">{item.message}</p>
+                          <div className="flex flex-row gap-2">
+                            {/* <div
                               className="flex items-center mt-1 text-blue-500 cursor-pointer"
-                          onClick={() => handleReply(comment.id)}
+                              onClick={() => handleReply(item.id)}
                             >
                               <DotSquare className="w-4 h-4" />
                               <span className="ml-1">Balas</span>
-                        </div>
+                            </div> */}
-                        {comment.replies.length > 0 && (
-                          <div className="ml-8 mt-2">
-                            {comment.replies.map((reply: any, index: any) => (
                             <div
-                                key={index}
+                              className="flex items-center mt-1 text-red-500 cursor-pointer"
-                                className="flex items-start gap-3 mt-1"
+                              onClick={() => deleteData(item.id)}
                             >
-                                <Avatar>
+                              <TrashIcon className="w-4 h-4" />
-                                  <AvatarImage
+                              <span className="ml-1">Delete</span>
-                                    src="https://github.com/shadcn.png"
-                                    alt={`@${reply.username}`}
-                                  />
-                                </Avatar>
-                                <div className="flex flex-col">
-                                  <span className="text-gray-700 font-semibold">
-                                    {reply.username}
-                                  </span>
-                                  <span className="text-gray-500 text-sm">
-                                    {reply.date}
-                                  </span>
-                                  <p className="text-gray-800 mt-1">
-                                    {reply.text}
-                                  </p>
                             </div>
                           </div>
-                            ))}
-                          </div>
-                        )}
                         </div>
                       </div>
-                  ))}
+                      {replyingTo === item.id && (
-                  {replyingTo !== null && (
+                        <div className="ml-10 mt-2">
-                    <div className="mt-4">
                           <textarea
-                        className="w-full p-2 border rounded-md"
+                            id={`input-comment-${item.id}`}
-                        rows={3}
+                            className="w-full p-2 border rounded"
-                        placeholder="Tulis balasan..."
+                            placeholder="Masukkan tanggapan anda"
-                        value={replyText}
+                          />
-                        onChange={(e) => setReplyText(e.target.value)}
-                      ></textarea>
                           <button
-                        className="mt-2 bg-yellow-500 text-white px-4 py-2 rounded-md"
+                            className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
-                        onClick={() => addReply(replyingTo)}
+                            onClick={() => sendReplyData(item.id)}
                           >
                             Kirim
                           </button>
                         </div>
                       )}
+                      {item.children?.length > 0 && (
+                        <div className="ml-10 mt-2 flex flex-col">
+                          {item.children.map((child: any) => (
+                            <div
+                              key={child.id}
+                              className="flex flex-col gap-3 mt-2"
+                            >
+                              <div className="flex flex-row gap-3">
+                                <Avatar className="mt-2">
+                                  <AvatarImage
+                                    src={"/assets/avatar-profile.png"}
+                                    alt={`@${child.username}`}
+                                  />
+                                </Avatar>
+                                <div className="flex flex-col bg-slate-200 w-full px-2 py-2 rounded-md">
+                                  <div className="flex items-center justify-between">
+                                    <span className="text-gray-700 font-semibold">
+                                      {item.messageFrom.fullname}
+                                    </span>
+                                    <span className="text-gray-500 text-sm">
+                                      {formatDate(item.createdAt)}
+                                    </span>
+                                  </div>
+                                  <p className="text-gray-800 mt-1">
+                                    {child.message}
+                                  </p>
+                                  <div className="flex flex-row gap-2">
+                                    {/* <div
+                                      className="flex items-center mt-1 text-blue-500 cursor-pointer"
+                                      onClick={() => handleReply(child.id)}
+                                    >
+                                      <DotSquare className="w-4 h-4" />
+                                      <span className="ml-1">Balas</span>
+                                    </div> */}
+                                    <div
+                                      className="flex items-center mt-1 text-red-500 cursor-pointer"
+                                      onClick={() => deleteData(child.id)}
+                                    >
+                                      <TrashIcon className="w-4 h-4" />
+                                      <span className="ml-1">Delete</span>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              {replyingTo === child.id && (
+                                <div className="ml-10 mt-2">
+                                  <textarea
+                                    id={`input-comment-${child.id}`}
+                                    className="w-full p-2 border rounded"
+                                    placeholder="Masukkan tanggapan anda"
+                                  />
+                                  <button
+                                    className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
+                                    onClick={() => sendReplyData(child.id)}
+                                  >
+                                    Kirim
+                                  </button>
+                                </div>
+                              )}
+                              {child.children?.length > 0 && (
+                                <div className="ml-10 mt-2 flex flex-col mb-3">
+                                  {child.children.map((child2: any) => (
+                                    <div
+                                      key={child2.id}
+                                      className="flex flex-col gap-3 mt-2"
+                                    >
+                                      <div className="flex flex-row gap-3 ">
+                                        <Avatar className="mt-2">
+                                          <AvatarImage
+                                            src={"/assets/avatar-profile.png"}
+                                            alt={`@${child2.username}`}
+                                          />
+                                        </Avatar>
+                                        <div className="flex flex-col bg-slate-200 w-full px-2 py-2 rounded-md">
+                                          <div className="flex items-center justify-between">
+                                            <span className="text-gray-700 font-semibold">
+                                              {item.messageFrom.fullname}
+                                            </span>
+                                            <span className="text-gray-500 text-sm">
+                                              {formatDate(item.createdAt)}
+                                            </span>
+                                          </div>
+                                          <p className="text-gray-800 mt-1">
+                                            {child2.message}
+                                          </p>
+                                          <div className="flex flex-row gap-2">
+                                            <div
+                                              className="flex items-center mt-1 text-red-500 cursor-pointer"
+                                              onClick={() =>
+                                                deleteData(child2.id)
+                                              }
+                                            >
+                                              <TrashIcon className="w-4 h-4" />
+                                              <span className="ml-1">
+                                                Delete
+                                              </span>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  ))}
                 </div>
               </div>
             </CardContent>

app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx

@@ -8,7 +8,8 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { getListContent } from "@/service/landing/landing";
+import { listCuratedContent } from "@/service/curated-content/curated-content";
+
 import {
   formatDateToIndonesian,
   generateLocalizedPath,
@@ -35,10 +36,12 @@ const ImageSliderPage = () => {
   const [imageData, setImageData] = useState<any>();
   const [displayImage, setDisplayImage] = useState<any[]>([]);
   const [page, setPage] = useState(1);
+  const [limit, setLimit] = React.useState(10);
+  const [search, setSearch] = React.useState("");
 
   useEffect(() => {
     fetchData();
-  }, [page]);
+  }, [page, limit, search]);
 
   useEffect(() => {
     if (imageData?.length > 0) {
@@ -49,12 +52,7 @@ const ImageSliderPage = () => {
   }, [imageData]);
 
   const fetchData = async () => {
-    const response = await getListContent({
+    const response = await listCuratedContent(search, limit, page - 1, 1, "1");
-      page: page - 1,
-      size: 6,
-      sortBy: "createdAt",
-      contentTypeId: "1",
-    });
     console.log(response);
 
     const data = response?.data?.data;

app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { Link } from "@/components/navigation";
 import { Card, CardContent } from "@/components/ui/card";
+import { listCuratedContent } from "@/service/curated-content/curated-content";
 import { getListContent } from "@/service/landing/landing";
 import { formatDateToIndonesian } from "@/utils/globals";
 import { Icon } from "@iconify/react/dist/iconify.js";
@@ -11,10 +12,12 @@ const VideoSliderPage = () => {
   const [allVideoData, setAllVideoData] = useState<any[]>([]);
   const [displayVideos, setDisplayVideos] = useState<any[]>([]);
   const [page, setPage] = useState(1);
+  const [limit, setLimit] = React.useState(10);
+  const [search, setSearch] = React.useState("");
 
   useEffect(() => {
-    initFetch();
+    fetchData();
-  }, []);
+  }, [page, limit, search]);
 
   useEffect(() => {
     if (allVideoData?.length > 0) {
@@ -24,14 +27,13 @@ const VideoSliderPage = () => {
     }
   }, [allVideoData]);
 
-  const initFetch = async () => {
+  const fetchData = async () => {
-    const response = await getListContent({
+    const response = await listCuratedContent(search, limit, page - 1, 1, "2");
-      page: page - 1,
+    console.log(response);
-      size: 12,
+
-      sortBy: "createdAt",
+    const data = response?.data?.data;
-      contentTypeId: "2",
+    const contentData = data?.content;
-    });
+    setAllVideoData(contentData);
-    setAllVideoData(response?.data?.data?.content || []);
   };
 
   const shuffleAndSetVideos = () => {

app/[locale]/(public)/content-management/download/page.tsx

@@ -278,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="flex flex-col">
-            <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="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
@@ -314,7 +314,7 @@ 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">

app/[locale]/(public)/content-management/rewrite/page.tsx

@@ -203,7 +203,7 @@ 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) => (

app/[locale]/(public)/inbox/page.tsx

@@ -24,14 +24,14 @@ const InboxSection = () => {
 
   useEffect(() => {
     async function getNotif() {
-      const response = await getUserNotifications(page, 2);
+      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(page, 3);
+      const response = await getUserNotifications(pages, 3);
       setNotifications(response?.data?.data?.content);
       setGetTotalData(response?.data?.data?.totalElements);
       setGetTotalPage(response?.data?.data?.totalPage);
@@ -42,7 +42,7 @@ const InboxSection = () => {
     } else {
       getNotif();
     }
-  }, [page]);
+  }, [pages]);
 
   return (
     <div className="max-w-6xl h-screen flex flex-col mx-auto p-4 lg:p-24 gap-5">
@@ -65,86 +65,88 @@ const InboxSection = () => {
             <Link href={`/inbox/update`}>Update</Link>
           </div>
         </div>
-        <div className="flex justify-center items-center py-20 px-36 max-w-lg mt-3 border border-black rounded-lg ">
+        <div className="py-10 px-8 w-[400px] mt-3 border border-black rounded-lg flex flex-col">
-          <h1 className="flex text-left">List Notifikasi</h1>
+          <h1 className="mb-3 text-lg font-semibold">List Notifikasi</h1>
+          <div className="hover:bg-slate-200 rounded-md">
             {notifications?.map((list: any) => (
-            <a href={"/" + list.redirectUrl}>
+              <a className="flex flex-row items-center ml-1" href={"/" + list.redirectUrl}>
                 {(() => {
                   switch (Number(list.notificationTypeId)) {
                     case 2:
                       return (
-                      <div className="text-red-500">
+                        <div className="text-[#bb3523]">
                           {" "}
-                        <Icon icon="fa:comment" />{" "}
+                          <Icon icon="fa:comment" fontSize={25} />{" "}
                         </div>
                       );
 
                     case 3:
                       return (
-                      <div className="text-red-500">
+                        <div className="text-[#bb3523]">
                           {" "}
-                        <Icon icon="fa:upload" />{" "}
+                          <Icon icon="fa:upload" fontSize={25} />{" "}
                         </div>
                       );
 
                     case 4:
                       return (
-                      <div className="text-red-500">
+                        <div className="text-[#bb3523]">
                           {" "}
-                        <Icon icon="la:check-double" />{" "}
+                          <Icon icon="la:check-double" fontSize={25} />{" "}
                         </div>
                       );
 
                     case 5:
                       return (
-                      <div className="text-red-500">
+                        <div className="text-[#bb3523]">
                           {" "}
-                        <Icon icon="fa:comments" />{" "}
+                          <Icon icon="fa:comments" fontSize={25} />{" "}
                         </div>
                       );
 
                     case 6:
                       return (
-                      <div className="notif-icon notif-danger">
+                        <div className="text-[#bb3523]">
                           {" "}
-                        <Icon icon="fa:tasks" />{" "}
+                          <Icon icon="fa:tasks" fontSize={25} />{" "}
                         </div>
                       );
 
                     case 7:
                       return (
-                      <div className="notif-icon notif-primary">
+                        <div className="text-[#bb3523]">
                           {" "}
-                        <Icon icon="fa:pencil-square" />{" "}
+                          <Icon icon="fa:pencil-square" fontSize={25} />{" "}
                         </div>
                       );
 
                     case 8:
                       return (
-                      <div className="text-red-500">
+                        <div className="text-[#bb3523]">
                           {" "}
-                        <Icon icon="fa:times-circle" />{" "}
+                          <Icon icon="fa:times-circle" fontSize={25} />{" "}
                         </div>
                       );
 
                     default:
                       return (
-                      <div className="text-red-500">
+                        <div className="text-[#bb3523]">
                           {" "}
-                        <Icon icon="fa:info-circle" />{" "}
+                          <Icon icon="fa:info-circle" fontSize={25} />{" "}
                         </div>
                       );
                   }
                 })()}
-              <div className="">
+                <div className="ml-3">
                   <span className="block">{list.message}</span>
-                <span className="">{getTimestamp(new Date(list.createdAt))}</span>
+                  <span className="text-xs">{getTimestamp(new Date(list.createdAt))}</span>
                 </div>
               </a>
             ))}
           </div>
         </div>
       </div>
+    </div>
   );
 };
 

app/[locale]/(public)/inbox/update/page.tsx

@@ -9,13 +9,10 @@ import { useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 
 const UpdateSection = () => {
-  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([]);
@@ -24,14 +21,14 @@ const UpdateSection = () => {
 
   useEffect(() => {
     async function getNotif() {
-      const response = await getUserNotifications(page, 2);
+      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(page, 3);
+      const response = await getUserNotifications(pages, 3);
       setNotifications(response?.data?.data?.content);
       setGetTotalData(response?.data?.data?.totalElements);
       setGetTotalPage(response?.data?.data?.totalPage);
@@ -42,7 +39,7 @@ const UpdateSection = () => {
     } else {
       getNotif();
     }
-  }, [page]);
+  }, [pages]);
 
   return (
     <div className="max-w-6xl h-screen flex flex-col mx-auto p-4 lg:p-24 gap-5">
@@ -56,7 +53,7 @@ const UpdateSection = () => {
         <h2 className="ml-4 text-[15px] lg:text-[32px] font-semibold text-gray-800">Update</h2>
       </div>
 
-      <div className="flex flex-col justify-center items-center gap-3">
+      <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>
@@ -65,10 +62,11 @@ const UpdateSection = () => {
             <div className="bg-[#bb3523] py-1 px-3 rounded-full">Update</div>
           </div>
         </div>
-        <div className="py-20 px-36 max-w-lg mt-3 border border-black rounded-lg flex justify-center">
+        <div className="py-10 px-8 w-[400px] mt-3 border border-black rounded-lg flex flex-col">
-          <h1>List Notifikasi</h1>
+          <h1 className="mb-3 text-lg font-semibold">List Notifikasi</h1>
+          <div className="hover:bg-slate-200 rounded-md">
             {notifications?.map((list: any) => (
-            <a href={"/" + list.redirectUrl}>
+              <a className="flex flex-row items-center ml-1" href={"/" + list.redirectUrl}>
                 {(() => {
                   switch (Number(list.notificationTypeId)) {
                     case 2:
@@ -83,7 +81,7 @@ const UpdateSection = () => {
                       return (
                         <div className="text-red-500">
                           {" "}
-                        <Icon icon="fa:upload" />{" "}
+                          <Icon icon="fa:upload" fontSize={25} />{" "}
                         </div>
                       );
 
@@ -136,15 +134,16 @@ const UpdateSection = () => {
                       );
                   }
                 })()}
-              <div className="">
+                <div className="ml-3">
                   <span className="block">{list.message}</span>
-                <span className="">{getTimestamp(new Date(list.createdAt))}</span>
+                  <span className="text-xs">{getTimestamp(new Date(list.createdAt))}</span>
                 </div>
               </a>
             ))}
           </div>
         </div>
       </div>
+    </div>
   );
 };
 

components/form/content/audio-detail-form.tsx

@@ -55,7 +55,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { error } from "@/lib/swal";
 import dynamic from "next/dynamic";
-import ReactAudioPlayer from "react-audio-player";
+import WavesurferPlayer from "@wavesurfer/react";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -140,6 +140,16 @@ export default function FormAudioDetail() {
   const [isMabesApprover, setIsMabesApprover] = useState(false);
   const [audioPlaying, setAudioPlaying] = useState<any>(null);
 
+  const waveSurferRef = useRef<any>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const onPlayPause = () => {
+    if (waveSurferRef.current) {
+      waveSurferRef.current.playPause();
+      setIsPlaying(!isPlaying);
+    }
+  };
+
   let fileTypeId = "4";
 
   const {
@@ -245,9 +255,17 @@ export default function FormAudioDetail() {
         setSelectedTarget(details.categoryId); // Untuk dropdown
 
         const filesData = details.files || [];
-        const fileUrls = filesData.map((file: { secondaryUrl: string }) =>
+        const audioFiles = filesData.filter(
-          file.secondaryUrl ? file.secondaryUrl : "default-image.jpg"
+          (file: any) =>
+            file.contentType && file.contentType.startsWith("video/webm")
         );
+
+        const fileUrls = audioFiles.map((file: { secondaryUrl: string }) =>
+          file.secondaryUrl ? file.secondaryUrl : "default-audio.mp3"
+        );
+
+        console.log("audio", fileUrls);
+
         setDetailThumb(fileUrls);
       }
     }
@@ -430,60 +448,19 @@ export default function FormAudioDetail() {
 
                 <Label className="text-xl text-black">File Mediaaa</Label>
                 <div className="w-full">
-                  <Swiper
+                  <div className={"container example"}>
-                    thumbs={{ swiper: thumbsSwiper }}
+                    {detailThumb?.map((url: any, index: number) => (
-                    modules={[FreeMode, Navigation, Thumbs]}
+                      <div key={url.id}>
-                    navigation={false}
+                        <WavesurferPlayer
-                    className="w-full"
+                          ref={waveSurferRef}
-                  >
+                          height={500}
-                    {detailThumb?.map((data: any) => {
+                          waveColor="red"
-                      return (
+                          url={url}
-                        <SwiperSlide key={data.id}>
+                        />
-                          <div className="relative">
-                            <ReactAudioPlayer src={data} autoPlay controls />
-                            {/* <button
-                              className="absolute bottom-2 left-2 text-white bg-black p-1 rounded"
-                              onClick={() => handleAudioPlayPause(data)}
-                            >
-                              {audioPlaying === data ? "Pause" : "Play"}
-                            </button> */}
                       </div>
-                        </SwiperSlide>
+                    ))}
-                      );
+                    <p onClick={onPlayPause}>{isPlaying ? "Pause" : "Play"}</p>
-                    })}
-                  </Swiper>
-
-                  {/* <div className="mt-2">
-                    <Swiper
-                      onSwiper={setThumbsSwiper}
-                      slidesPerView={6}
-                      spaceBetween={8}
-                      pagination={{
-                        clickable: true,
-                      }}
-                      modules={[Pagination, Thumbs]}
-                    >
-                      {detailThumb?.map((data: any) => {
-                        return (
-                          <SwiperSlide key={data.id}>
-                            <div className="relative">
-                              <ReactAudioPlayer src={data} autoPlay controls />
-                              <button
-                                className="absolute bottom-2 left-2 text-white bg-black p-1 rounded"
-                                onClick={() =>
-                                  handleAudioPlayPause(data.secondaryUrl)
-                                }
-                              >
-                                {audioPlaying === data.secondaryUrl
-                                  ? "Pause"
-                                  : "Play"}
-                              </button>
                   </div>
-                          </SwiperSlide>
-                        );
-                      })}
-                    </Swiper>
-                  </div> */}
                 </div>
               </div>
             </div>

components/form/content/image-detail-form.tsx

@@ -679,7 +679,7 @@ export default function FormImageDetail() {
                                 <Icon icon="humbleicons:times" color="red" />
                               </a>
                             </div>
-                            {isUserMabesApprover &&
+                            {isUserMabesApprover && (
                               <div className="flex flex-row gap-2">
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
@@ -756,7 +756,7 @@ export default function FormImageDetail() {
                                   </label>
                                 </div>
                               </div>
-                            }
+                            )}
                           </div>
                         </div>
                       ))

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

@@ -85,6 +85,17 @@ type Option = {
   label: string;
 };
 
+interface FileData {
+  contentId: number;
+  placement?: string[];
+  [key: string]: any; // Extendable for additional properties
+}
+
+interface PlacementData {
+  mediaFileId: number;
+  placements: string;
+}
+
 const CustomEditor = dynamic(
   () => {
     return import("@/components/editor/custom-editor");
@@ -118,7 +129,6 @@ export default function FormConvertSPIT() {
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
   const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
   const [title, setTitle] = useState<string>("");
-  const roleId = getCookiesDecrypt("urie");
   const [articleIds, setArticleIds] = useState<string[]>([]);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
@@ -128,7 +138,10 @@ export default function FormConvertSPIT() {
   const [detailData, setDetailData] = useState<any>(null);
   const [selectedFileType, setSelectedFileType] = useState("original");
   const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
-
+  const userLevelId = getCookiesDecrypt("ulie");
+  const userLevelNumber = getCookiesDecrypt("ulne");
+  const roleId = getCookiesDecrypt("urie");
+  const [isMabesApprover, setIsMabesApprover] = useState(false);
   const [selectedTarget, setSelectedTarget] = useState("");
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
@@ -137,6 +150,7 @@ export default function FormConvertSPIT() {
     polres: false,
   });
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const [placementLength, setPlacementLength] = useState([]);
 
   const options: Option[] = [
     { id: "all", label: "SEMUA" },
@@ -187,6 +201,17 @@ export default function FormConvertSPIT() {
     initState();
   }, []);
 
+  useEffect(() => {
+    if (
+      userLevelId != undefined &&
+      roleId != undefined &&
+      userLevelId == "216" &&
+      roleId == "3"
+    ) {
+      setIsMabesApprover(true);
+    }
+  }, [userLevelId, roleId]);
+
   const getCategories = async () => {
     try {
       const category = await listCategory(fileTypeId);
@@ -247,26 +272,64 @@ export default function FormConvertSPIT() {
     }))
   );
 
-  const handleCheckboxChangeFile = (mediaFileId: any, value: any) => {
+  const getPlacement = (): PlacementData[] => {
-    setTempFile((prev: any) =>
+    return tempFile
-      prev.map((file: any) =>
+      .filter((file: FileData) => (file.placement || []).length > 0) // Gunakan default array
-        file.contentId === mediaFileId
+      .map((file: FileData) => ({
-          ? {
+        mediaFileId: Number(file.contentId),
-              ...file,
+        placements: (file.placement || []).join(","), // Gunakan default array
-              placement: file.placement.includes(value)
+      }));
-                ? file.placement.filter((item: any) => item !== value) // Hapus jika sudah ada
-                : [...file.placement, value], // Tambah jika belum ada
-            }
-          : file
-      )
-    );
   };
 
-  const getPlacement = () => {
+  const setupPlacement = (value: string, id: number): void => {
-    return tempFile.map((file: any) => ({
+    const updatedFiles = tempFile.map((file: FileData) => {
-      mediaFileId: Number(file.contentId),
+      if (file.contentId === id) {
-      placements: file.placement.join(","),
+        const currentPlacement = file.placement || [];
-    }));
+        if (currentPlacement.includes(value)) {
+          // Remove the placement value
+          file.placement = currentPlacement.filter((val) => val !== value);
+        } else {
+          // Add the placement value
+          file.placement =
+            value === "all"
+              ? ["all", "mabes", "polda", "international"]
+              : [...currentPlacement, value];
+          if (file.placement.includes("all") && value !== "all") {
+            file.placement = file.placement.filter((val) => val !== "all");
+          }
+        }
+      }
+      return file;
+    });
+
+    const placementLength = updatedFiles.reduce(
+      (acc: any, file: any) => acc + (file.placement?.length || 0),
+      0
+    );
+
+    setTempFile(
+      updatedFiles.sort((a: any, b: any) => a.contentId - b.contentId)
+    );
+    setPlacementLength(placementLength);
+
+    console.log("Updated Files:", updatedFiles);
+  };
+
+  const handleCheckboxChangeFile = (contentId: number, value: string) => {
+    setTempFile((prevTempFile: any) => {
+      return prevTempFile.map((file: any) => {
+        if (file.contentId === contentId) {
+          const isChecked = file.placement?.includes(value);
+          return {
+            ...file,
+            placement: isChecked
+              ? file.placement.filter((v: any) => v !== value) // Uncheck
+              : [...(file.placement || []), value], // Check
+          };
+        }
+        return file;
+      });
+    });
   };
 
   const handleCheckboxChange = (id: string): void => {
@@ -296,11 +359,17 @@ export default function FormConvertSPIT() {
     }
   };
 
-  const save = async (data: any) => {
+  const save = async (data: {
+    contentTitle: string;
+    contentDescription: string;
+    contentRewriteDescription: string;
+    contentCreator: string;
+  }): Promise<void> => {
     const description =
       selectedFileType === "original"
         ? data.contentDescription
         : data.contentRewriteDescription;
+
     const requestData = {
       spitId: id,
       title: data.contentTitle,
@@ -310,7 +379,7 @@ export default function FormConvertSPIT() {
       categoryId: selectedCategoryId,
       publishedFor: publishedFor.join(","),
       creator: data.contentCreator,
-      files: getPlacement(),
+      files: getPlacement(), // Include placement data
     };
 
     const response = await convertSPIT(requestData);
@@ -630,18 +699,29 @@ export default function FormConvertSPIT() {
                     </div>
                   </div>
                 </div>
+                {isMabesApprover ? (
                   <div className="mt-5">
-                  <Label className="text-xl text-black">Penempatan File</Label>
+                    <Label className="text-xl text-black">
+                      Penempatan File
+                    </Label>
                     {detailThumb.map((data: any) => (
-                    <div key={data.id} className="flex items-center gap-3 mt-2">
+                      <div
+                        key={data.contentId}
+                        className="flex items-center gap-3 mt-2"
+                      >
                         <img
                           className="object-cover w-36 h-32"
                           src={data}
-                        alt={`Thumbnail ${data.id}`}
+                          alt={`Thumbnail ${data.contentId}`}
                         />
                         <div className="flex flex-row gap-3 items-center">
-                        {["all", "mabes", "polda", "internasional"].map(
+                          {[
-                          (value) => (
+                            "all",
+                            "mabes",
+                            "polda",
+                            "satker",
+                            "internasional",
+                          ].map((value) => (
                             <label
                               key={value}
                               className="text-blue-500 cursor-pointer flex items-center gap-1"
@@ -651,22 +731,30 @@ export default function FormConvertSPIT() {
                                 name="placement"
                                 value={value}
                                 onChange={() =>
-                                  handleCheckboxChangeFile(data.id, value)
+                                  handleCheckboxChangeFile(
-                                }
+                                    data.contentId,
-                                checked={tempFile
+                                    value
-                                  .find(
-                                    (file: any) => file.contentId === data.id
                                   )
-                                  ?.placement.includes(value)}
+                                }
+                                checked={
+                                  tempFile
+                                    .find(
+                                      (file: FileData) =>
+                                        file.contentId === data.contentId
+                                    )
+                                    ?.placement?.includes(value) || false
+                                }
                               />
                               {value.charAt(0).toUpperCase() + value.slice(1)}
                             </label>
-                          )
+                          ))}
-                        )}
                         </div>
                       </div>
                     ))}
                   </div>
+                ) : (
+                  ""
+                )}
               </div>
             </div>
           </Card>

components/form/task/task-detail-form.tsx

@@ -21,8 +21,14 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import JoditEditor from "jodit-react";
 import {
+  acceptAssignment,
   createAssignmentResponse,
   createTask,
+  deleteAssignmentResponse,
+  deleteTask,
+  finishTask,
+  getAcceptance,
+  getAcceptanceAssignmentStatus,
   getAssignmentResponseList,
   getTask,
   getUserLevelForAssignments,
@@ -34,12 +40,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { ChevronDown, ChevronUp, DotSquare, TrashIcon } from "lucide-react";
 import dynamic from "next/dynamic";
 import { Link } from "@/components/navigation";
 import { Textarea } from "@/components/ui/textarea";
-import { loading } from "@/lib/swal";
+import { close, error, loading } from "@/lib/swal";
 import { getCookiesDecrypt } from "@/lib/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { successCallback } from "@/config/swal";
 
 const taskSchema = z.object({
   uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
@@ -64,6 +72,21 @@ export type taskDetail = {
     id: number;
     name: string;
   };
+  createdBy: {
+    id: number;
+    fullname: string;
+    username: string | null;
+    email: string;
+    isActive: boolean;
+    isDefault: boolean;
+    isInternational: boolean;
+    userLevel: {
+      id: number;
+      name: string;
+      aliasName: string;
+      userGroupId: number;
+    };
+  };
   taskType: string;
   broadcastType: string;
   narration: string;
@@ -85,6 +108,43 @@ const ViewEditor = dynamic(
   { ssr: false }
 );
 
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+
+  // Pastikan validitas tanggal
+  if (isNaN(date.getTime())) {
+    throw new Error("Invalid date format");
+  }
+
+  // Format tanggal
+  const day = date.getDate().toString().padStart(2, "0");
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const year = date.getFullYear();
+  // const hours = date.getHours().toString().padStart(2, "0");
+
+  // Gabungkan hasil format
+  return `${day}-${month}-${year} `;
+};
+
+interface AcceptanceData {
+  id: number;
+  acceptAt: string;
+  // Tambahkan properti lain sesuai dengan struktur data Anda
+}
+
+interface AcceptanceData {
+  id: number;
+  userLevelId: number;
+  sentAt: string;
+  isAccept: boolean;
+  isSent: boolean;
+  userLevels: {
+    id: number;
+    name: string;
+    aliasName: string;
+  };
+}
+
 export default function FormTaskDetail() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
@@ -123,6 +183,15 @@ export default function FormTaskDetail() {
   const [showInput, setShowInput] = useState<boolean>(false);
   const [listData, setListData] = useState([]);
   const [message, setMessage] = useState<string>("");
+  const [sentAcceptance, setSentAcceptance] = useState<AcceptanceData[]>([]);
+  const [acceptAcceptance, setAcceptAcceptance] = useState<AcceptanceData[]>(
+    []
+  );
+  const [statusAcceptance, setStatusAcceptance] = useState();
+  const [modalType, setModalType] = useState<"terkirim" | "diterima" | "">("");
+  const [Isloading, setLoading] = useState<boolean>(false);
+  const [refreshAcceptance, setRefreshAcceptance] = useState<boolean>(false);
+  const [replyingTo, setReplyingTo] = useState<number | null>(null);
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -288,6 +357,19 @@ export default function FormTaskDetail() {
     });
   };
 
+  const successConfirm = () => {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/en/contributor/task");
+      }
+    });
+  };
+
   const handleCheckboxChange = (levelId: any) => {
     setCheckedLevels((prev: any) => {
       const updatedLevels = new Set(prev);
@@ -307,10 +389,6 @@ export default function FormTaskDetail() {
     }));
   };
 
-  // const handleToggleInput = () => {
-  //   setShowInput((prev: any) => !prev); // Toggle visibility of input field
-  // };
-
   useEffect(() => {
     async function initState() {
       // loading();
@@ -324,11 +402,6 @@ export default function FormTaskDetail() {
     initState();
   }, []);
 
-  // const handleSubmitResponse = () => {
-  //   console.log("Response Submitted:", response);
-  //   setShowInput(false); // Optionally hide the input after submission
-  // };
-
   const handleToggleInput = (): void => {
     setShowInput(!showInput);
   };
@@ -356,12 +429,39 @@ export default function FormTaskDetail() {
     sendSuggestionParent();
   };
 
+  const sendReplyData = async (parentId: number) => {
+    const inputElement = document.querySelector(
+      `#input-comment-${parentId}`
+    ) as HTMLTextAreaElement;
+
+    if (inputElement?.value?.length > 1) {
+      loading();
+      const data = {
+        assignmentId: id,
+        message: inputElement.value,
+        parentId,
+      };
+
+      console.log(data);
+      const response = await createAssignmentResponse(data);
+      console.log(response);
+
+      const responseGet = await getAssignmentResponseList(id);
+      console.log(responseGet?.data?.data);
+      setListData(responseGet?.data?.data);
+
+      inputElement.value = "";
+      close();
+      setReplyingTo(null);
+    }
+  };
+
   async function sendSuggestionParent() {
     if (message?.length > 1) {
       loading();
       const data = {
         assignmentId: id,
-        message, // Gunakan response di sini
+        message,
         parentId: null,
       };
 
@@ -377,11 +477,253 @@ export default function FormTaskDetail() {
     }
   }
 
+  async function deleteDataSuggestion(dataId: any) {
+    loading();
+    const response = await deleteAssignmentResponse(dataId);
+    console.log(response);
+    const responseGet = await getAssignmentResponseList(id);
+    console.log(responseGet?.data?.data);
+    setListData(responseGet?.data?.data);
+    close();
+  }
+
+  const deleteData = (dataId: any) => {
+    deleteDataSuggestion(dataId);
+    console.log(dataId);
+  };
+
+  // async function sendSuggestionChild(parentId: any) {
+  //   const msg = document.querySelectorAll(`#input-comment-${parentId}`)[0]
+  //     .value;
+
+  //   if (msg?.length > 1) {
+  //     loading();
+  //     const data = {
+  //       assignmentId: id,
+  //       message: msg,
+  //       parentId,
+  //     };
+
+  //     console.log(data);
+  //     const response = await createAssignmentResponse(data);
+  //     console.log(response);
+  //     const responseGet = await getAssignmentResponseList(id);
+  //     console.log(responseGet?.data?.data);
+  //     setListData(responseGet?.data?.data);
+  //     // $(":input").val("");
+  //     close();
+  //   }
+  // }
+
+  async function getDataAcceptance() {
+    const response = await getAcceptanceAssignmentStatus(id);
+    setStatusAcceptance(response?.data?.data?.isAccept);
+    console.log("Status :", response?.data?.data?.isAccept);
+  }
+
+  const handleAcceptAcceptance = async () => {
+    const isAccept = true;
+    loading();
+    console.log("Id user :", userId);
+    const response = await acceptAssignment(id, !isAccept);
+
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
+
+    successCallback();
+    getDataAcceptance();
+    return false;
+  };
+
+  async function getListAcceptance(): Promise<void> {
+    const isAccept = true;
+
+    try {
+      const resSent = await getAcceptance(id, !isAccept);
+      setSentAcceptance(resSent?.data?.data);
+
+      const resAccept = await getAcceptance(id, isAccept);
+
+      const acceptanceSort = resAccept?.data?.data?.sort(
+        (a: AcceptanceData, b: AcceptanceData) =>
+          new Date(a.acceptAt).getTime() - new Date(b.acceptAt).getTime()
+      );
+
+      console.log("Data sort:", acceptanceSort);
+      setAcceptAcceptance(acceptanceSort);
+    } catch (error) {
+      console.error("Error fetching acceptance data:", error);
+    }
+  }
+
+  useEffect(() => {
+    async function initState(): Promise<void> {
+      await getListAcceptance();
+    }
+
+    initState();
+  }, [refreshAcceptance]);
+
+  const setFinishAcceptance = async (
+    id: number,
+    isFinish: boolean
+  ): Promise<void> => {
+    if (!isFinish) {
+      loading();
+
+      setRefreshAcceptance((prev) => !prev);
+      close();
+    }
+  };
+
+  const handleReply = (id: any) => {
+    setReplyingTo(id);
+  };
+
+  const getModalContent = (type: "terkirim" | "diterima") => (
+    <div className="overflow-x-auto ">
+      {Isloading ? (
+        <p>Loading...</p>
+      ) : (
+        <table className="w-full border-collapse border border-gray-300">
+          <thead>
+            <tr className="bg-gray-100 border-b">
+              <th className="px-4 py-2 text-left">Waktu</th>
+              <th className="px-4 py-2 text-left">Unit</th>
+              <th className="px-4 py-2 text-left">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {(type === "terkirim" ? sentAcceptance : acceptAcceptance).map(
+              (item) => (
+                <tr key={item.id} className="border-b">
+                  <td className="px-4 py-2">
+                    {new Date(item.sentAt).toLocaleString()}
+                  </td>
+                  <td className="px-4 py-2">{item.userLevels.name}</td>
+                  <td className="px-4 py-2">
+                    {type === "terkirim" ? "Terkirim" : "Diterima"}
+                  </td>
+                </tr>
+              )
+            )}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+
+  async function finishAssignment() {
+    const response = finishTask(id);
+
+    // if (response.error) {
+    //   error(response.message);
+    //   return false;
+    // }
+
+    successConfirm();
+  }
+
+  async function deleteAssignment() {
+    const response = deleteTask(id);
+
+    // if (response.error) {
+    //   error(response.message);
+    //   return false;
+    // }
+
+    successConfirm();
+  }
+
+  function handleForward() {
+    router.push(`/en/contributor/task/forward/${id}`);
+  }
+
+  async function handleDeleteAssignment() {
+    MySwal.fire({
+      title: "Apakah Anda yakin ingin menghapus data?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Hapus",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        deleteAssignment();
+      }
+    });
+  }
+
+  async function handleAssignmentDone() {
+    MySwal.fire({
+      title: "Apakah tugas sudah selesai?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Ya",
+      cancelButtonText: "Tidak",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        finishAssignment();
+      }
+    });
+  }
+
   return (
     <Card>
-      <div className="px-6 py-6">
-        <p className="text-lg font-semibold mb-3">Form Penugasan</p>
       {detail !== undefined ? (
+        <div className="px-6 py-6">
+          <div className="flex flex-row justify-between">
+            <p className="text-lg font-semibold mb-3">Detail Penugasan</p>
+            <div
+              className="flex gap-3"
+              style={
+                detail?.createdBy?.id === Number(userId)
+                  ? {}
+                  : {
+                      display: "none",
+                    }
+              }
+            >
+              <div>
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <Button
+                      color="primary"
+                      onClick={() => setModalType("terkirim")}
+                    >
+                      {sentAcceptance?.length} Terkirim
+                    </Button>
+                  </DialogTrigger>
+
+                  <DialogTrigger asChild>
+                    <Button
+                      color="warning"
+                      onClick={() => setModalType("diterima")}
+                      className="ml-3"
+                    >
+                      {acceptAcceptance?.length} Diterima
+                    </Button>
+                  </DialogTrigger>
+
+                  <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                    <DialogHeader>
+                      <DialogTitle>Detail Status Penugasan</DialogTitle>
+                    </DialogHeader>
+
+                    {modalType === "terkirim" && getModalContent("terkirim")}
+                    {modalType === "diterima" && getModalContent("diterima")}
+                  </DialogContent>
+                </Dialog>
+              </div>
+            </div>
+          </div>
+
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="gap-5 mb-5">
               <div className="space-y-2">
@@ -546,7 +888,7 @@ export default function FormTaskDetail() {
               <div className="mt-6">
                 <Label>Tipe Penugasan</Label>
                 <RadioGroup
-                  value={detail.assignmentMainType.id.toString()} // State yang dipetakan ke value RadioGroup
+                  value={detail.assignmentMainType.id.toString()}
                   onValueChange={(value) => setMainType(value)}
                   // value={String(mainType)}
                   // onValueChange={(value) => setMainType(Number(value))}
@@ -575,8 +917,8 @@ export default function FormTaskDetail() {
               <div className="mt-6">
                 <Label>Jenis Penugasan</Label>
                 <RadioGroup
-                  value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
+                  value={detail.assignmentType.id.toString()}
-                  onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
+                  onValueChange={(value) => setType(value)}
                   className="flex flex-wrap gap-3"
                 >
                   <div className="flex items-center gap-2">
@@ -661,7 +1003,17 @@ export default function FormTaskDetail() {
                 </Button>
               </div>
               <div className="">
-                <Button color="primary" variant={"default"}>
+                <Button
+                  className="btn btn-primary ml-3 mr-3"
+                  style={
+                    statusAcceptance || detail?.createdBy?.id == Number(userId)
+                      ? {
+                          display: "none",
+                        }
+                      : {}
+                  }
+                  onClick={() => handleAcceptAcceptance()}
+                >
                   Terima Tugas
                 </Button>
               </div>
@@ -690,35 +1042,202 @@ export default function FormTaskDetail() {
               </div>
             )}
             <div className="mt-6">
-              <h3 className="text-lg font-bold">Tanggapan</h3>
+              <h3 className="text-lg font-bold text-center">Tanggapan</h3>
               {listData?.map((item: any) => (
-                <div
+                <div key={item.id} className="flex flex-col  gap-3 mt-2 ">
-                  key={item.id}
+                  <div className="flex flex-row gap-3">
-                  className="border p-4 mt-2 rounded bg-gray-100 flex flex-col"
+                    <Avatar className="mt-2">
-                >
+                      <AvatarImage
-                  <div className="flex justify-between items-center">
+                        src={"/assets/avatar-profile.png"}
-                    <span className="font-medium">{item.name}</span>
+                        alt={`@${item.username}`}
-                    <span className="text-sm text-gray-500">
+                      />
-                      {item.timestamp}
+                    </Avatar>
+                    <div className="flex flex-col bg-slate-200 w-full px-2 py-2 rounded-md">
+                      <div className="flex items-center justify-between">
+                        <span className="text-gray-700 font-semibold">
+                          {item.suggestionFrom.username}
+                        </span>
+                        <span className="text-gray-500 text-sm">
+                          {formatDate(item.createdAt)}
                         </span>
                       </div>
-                  <p className="mt-2">{item.content}</p>
+                      <p className="text-gray-800 mt-1">{item.message}</p>
-                  <div className="flex gap-2 mt-2">
+                      <div className="flex flex-row gap-2">
-                    <button className="text-blue-500 hover:underline">
+                        <div
-                      Balas
+                          className="flex items-center mt-1 text-blue-500 cursor-pointer"
+                          onClick={() => handleReply(item.id)}
+                        >
+                          <DotSquare className="w-4 h-4" />
+                          <span className="ml-1">Balas</span>
+                        </div>
+                        <div
+                          className="flex items-center mt-1 text-red-500 cursor-pointer"
+                          onClick={() => deleteData(item.id)}
+                        >
+                          <TrashIcon className="w-4 h-4" />
+                          <span className="ml-1">Delete</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  {replyingTo === item.id && (
+                    <div className="ml-10 mt-2">
+                      <textarea
+                        id={`input-comment-${item.id}`}
+                        className="w-full p-2 border rounded"
+                        placeholder="Masukkan tanggapan anda"
+                      />
+                      <button
+                        className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
+                        onClick={() => sendReplyData(item.id)}
+                      >
+                        Kirim
                       </button>
-                    <button className="text-red-500 hover:underline">
+                    </div>
-                      Hapus
+                  )}
+                  {item.children?.length > 0 && (
+                    <div className="ml-10 mt-2 flex flex-col">
+                      {item.children.map((child: any) => (
+                        <div
+                          key={child.id}
+                          className="flex flex-col gap-3 mt-2"
+                        >
+                          <div className="flex flex-row gap-3">
+                            <Avatar className="mt-2">
+                              <AvatarImage
+                                src={"/assets/avatar-profile.png"}
+                                alt={`@${child.username}`}
+                              />
+                            </Avatar>
+                            <div className="flex flex-col bg-slate-200 w-full px-2 py-2 rounded-md">
+                              <div className="flex items-center justify-between">
+                                <span className="text-gray-700 font-semibold">
+                                  {child.suggestionFrom.username}
+                                </span>
+                                <span className="text-gray-500 text-sm">
+                                  {formatDate(child.createdAt)}
+                                </span>
+                              </div>
+                              <p className="text-gray-800 mt-1">
+                                {child.message}
+                              </p>
+                              <div className="flex flex-row gap-2">
+                                <div
+                                  className="flex items-center mt-1 text-blue-500 cursor-pointer"
+                                  onClick={() => handleReply(child.id)}
+                                >
+                                  <DotSquare className="w-4 h-4" />
+                                  <span className="ml-1">Balas</span>
+                                </div>
+                                <div
+                                  className="flex items-center mt-1 text-red-500 cursor-pointer"
+                                  onClick={() => deleteData(child.id)}
+                                >
+                                  <TrashIcon className="w-4 h-4" />
+                                  <span className="ml-1">Delete</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          {replyingTo === child.id && (
+                            <div className="ml-10 mt-2">
+                              <textarea
+                                id={`input-comment-${child.id}`}
+                                className="w-full p-2 border rounded"
+                                placeholder="Masukkan tanggapan anda"
+                              />
+                              <button
+                                className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
+                                onClick={() => sendReplyData(child.id)}
+                              >
+                                Kirim
                               </button>
                             </div>
+                          )}
+                          {child.children?.length > 0 && (
+                            <div className="ml-10 mt-2 flex flex-col mb-3">
+                              {child.children.map((child2: any) => (
+                                <div
+                                  key={child2.id}
+                                  className="flex flex-col gap-3 mt-2"
+                                >
+                                  <div className="flex flex-row gap-3 ">
+                                    <Avatar className="mt-2">
+                                      <AvatarImage
+                                        src={"/assets/avatar-profile.png"}
+                                        alt={`@${child2.username}`}
+                                      />
+                                    </Avatar>
+                                    <div className="flex flex-col bg-slate-200 w-full px-2 py-2 rounded-md">
+                                      <div className="flex items-center justify-between">
+                                        <span className="text-gray-700 font-semibold">
+                                          {child2.suggestionFrom.username}
+                                        </span>
+                                        <span className="text-gray-500 text-sm">
+                                          {formatDate(child2.createdAt)}
+                                        </span>
+                                      </div>
+                                      <p className="text-gray-800 mt-1">
+                                        {child2.message}
+                                      </p>
+                                      <div className="flex flex-row gap-2">
+                                        <div
+                                          className="flex items-center mt-1 text-red-500 cursor-pointer"
+                                          onClick={() => deleteData(child2.id)}
+                                        >
+                                          <TrashIcon className="w-4 h-4" />
+                                          <span className="ml-1">Delete</span>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
                 </div>
               ))}
             </div>
             <div className="flex justify-center mt-4">
+              {detail?.createdBy?.id == Number(userId) &&
+              detail?.isDone !== true ? (
+                <>
+                  <Button
+                    type="button"
+                    color="warning"
+                    variant={"outline"}
+                    className="btn btn-outline-danger"
+                    onClick={() => handleDeleteAssignment()}
+                  >
+                    Hapus Tugas
+                  </Button>
+                  <Button
+                    color="primary"
+                    type="button"
+                    variant={"default"}
+                    className="btn btn-primary ml-3"
+                    onClick={() => handleAssignmentDone()}
+                  >
+                    Tugas Selesai
+                  </Button>
+                </>
+              ) : (
+                ""
+              )}
               {detail?.isDone !== true &&
               (Number(userLevelNumber) !== 3 ||
                 Number(userLevelNumber) == 2) ? (
-                <Button color="primary" variant={"outline"}>
+                <Button
+                  color="primary"
+                  variant={"outline"}
+                  type="button"
+                  className="btn btn-outline-primary ml-3"
+                  onClick={() => handleForward()}
+                >
                   Forward
                 </Button>
               ) : (
@@ -726,10 +1245,10 @@ export default function FormTaskDetail() {
               )}
             </div>
           </form>
+        </div>
       ) : (
         ""
       )}
-      </div>
     </Card>
   );
 }

components/form/task/task-form.tsx

@@ -427,7 +427,7 @@ export default function FormTask() {
       isAudioUploadFinish &&
       isTextUploadFinish
     ) {
-      successSubmit("/in/contributor/agenda-setting");
+      successSubmit("/in/contributor/task");
     }
   }
 

components/form/task/task-forward-form.tsx

@@ -0,0 +1,925 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import JoditEditor from "jodit-react";
+import {
+  createAssignmentResponse,
+  createTask,
+  deleteAssignmentResponse,
+  deleteTask,
+  finishTask,
+  forwardTask,
+  getAcceptance,
+  getAssignmentResponseList,
+  getTask,
+  getUserLevelForAssignments,
+} from "@/service/task";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ChevronDown, ChevronUp, DotSquare, TrashIcon } from "lucide-react";
+import dynamic from "next/dynamic";
+import { Link } from "@/components/navigation";
+import { Textarea } from "@/components/ui/textarea";
+import { close, error, loading } from "@/lib/swal";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+
+const taskSchema = z.object({
+  // uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  naration: z.string().min(2, {
+    message: "Narasi Penugasan harus lebih dari 2 karakter.",
+  }),
+  forwardMessage: z.string().min(2, {
+    message: "Narasi Penugasan harus lebih dari 2 karakter.",
+  }),
+});
+
+export type taskDetail = {
+  id: number;
+  uniqueCode: string;
+  title: string;
+  fileTypeOutput: string;
+  assignedToRole: string;
+  assignedToTopLevel: string;
+  assignmentType: {
+    id: number;
+    name: string;
+  };
+  assignmentMainType: {
+    id: number;
+    name: string;
+  };
+  createdBy: {
+    id: number;
+    fullname: string;
+    username: string | null;
+    email: string;
+    isActive: boolean;
+    isDefault: boolean;
+    isInternational: boolean;
+    userLevel: {
+      id: number;
+      name: string;
+      aliasName: string;
+      userGroupId: number;
+    };
+  };
+  taskType: string;
+  broadcastType: string;
+  narration: string;
+  is_active: string;
+  isDone: any;
+};
+
+interface ListData {
+  id: number;
+  name: string;
+  content: string;
+  timestamp: string;
+}
+
+const ViewEditor = dynamic(
+  () => {
+    return import("@/components/editor/view-editor");
+  },
+  { ssr: false }
+);
+
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+
+  // Pastikan validitas tanggal
+  if (isNaN(date.getTime())) {
+    throw new Error("Invalid date format");
+  }
+
+  // Format tanggal
+  const day = date.getDate().toString().padStart(2, "0");
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const year = date.getFullYear();
+  // const hours = date.getHours().toString().padStart(2, "0");
+
+  // Gabungkan hasil format
+  return `${day}-${month}-${year} `;
+};
+
+interface AcceptanceData {
+  id: number;
+  acceptAt: string;
+  // Tambahkan properti lain sesuai dengan struktur data Anda
+}
+
+interface AcceptanceData {
+  id: number;
+  userLevelId: number;
+  sentAt: string;
+  isAccept: boolean;
+  isSent: boolean;
+  userLevels: {
+    id: number;
+    name: string;
+    aliasName: string;
+  };
+}
+
+export default function FormTaskForward() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const { id } = useParams() as { id: string };
+  console.log(id);
+
+  const userLevelNumber = getCookiesDecrypt("ulne");
+  const userId = getCookiesDecrypt("uie");
+
+  // State for various form fields
+  const [taskOutput, setTaskOutput] = useState({
+    all: false,
+    video: false,
+    audio: false,
+    image: false,
+    text: false,
+  });
+
+  // const [assignmentType, setAssignmentType] = useState("mediahub");
+  // const [assignmentCategory, setAssignmentCategory] = useState("publication");
+  const [mainType, setMainType] = useState<string>("1");
+  const [taskType, setTaskType] = useState<string>("atensi-khusus");
+  const [broadcastType, setBroadcastType] = useState<string>(""); // untuk Tipe Penugasan
+  const [type, setType] = useState<string>("1");
+  const [selectedTarget, setSelectedTarget] = useState("all");
+  const [detail, setDetail] = useState<taskDetail>();
+  const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]); // Data Polda dan Polres
+
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [responses, setResponses] = useState<Response[]>([]);
+  const [response, setResponse] = useState<string>("");
+  const [showInput, setShowInput] = useState<boolean>(false);
+  const [listData, setListData] = useState([]);
+  const [message, setMessage] = useState<string>("");
+  const [sentAcceptance, setSentAcceptance] = useState<AcceptanceData[]>([]);
+  const [acceptAcceptance, setAcceptAcceptance] = useState<AcceptanceData[]>(
+    []
+  );
+  const [modalType, setModalType] = useState<"terkirim" | "diterima" | "">("");
+  const [Isloading, setLoading] = useState<boolean>(false);
+  const [refreshAcceptance, setRefreshAcceptance] = useState<boolean>(false);
+  const [replyingTo, setReplyingTo] = useState<number | null>(null);
+  const [forwardMessage, setForwardMessage] = useState();
+  const [narration, setNarration] = useState(null);
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+
+  const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  const {
+    control,
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+  });
+
+  // const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const selectedValue = Number(event.target.value);
+  //   setMainType(selectedValue);
+
+  //   setPlatformTypeVisible(selectedValue === 2);
+  // };
+
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response?.data?.data.list);
+        const initialExpandedState = response?.data?.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await getTask(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+
+        if (details?.assignedToLevel) {
+          const levels = new Set(
+            details.assignedToLevel.split(",").map(Number)
+          );
+          setCheckedLevels(levels);
+        }
+      }
+    }
+    initState();
+  }, [id, refresh]);
+
+  useEffect(() => {
+    if (detail?.broadcastType) {
+      setBroadcastType(detail.broadcastType); // Mengatur nilai broadcastType dari API
+    }
+  }, [detail?.broadcastType]);
+
+  useEffect(() => {
+    if (detail?.fileTypeOutput) {
+      const outputSet = new Set(detail.fileTypeOutput.split(",").map(Number)); // Membagi string ke dalam array dan mengonversi ke nomor
+      setTaskOutput({
+        all: outputSet.has(0),
+        video: outputSet.has(2),
+        audio: outputSet.has(4),
+        image: outputSet.has(1),
+        text: outputSet.has(3),
+      });
+    }
+  }, [detail?.fileTypeOutput]);
+
+  useEffect(() => {
+    if (detail?.assignedToTopLevel) {
+      const outputSet = new Set(
+        detail.assignedToTopLevel.split(",").map(Number)
+      );
+      setUnitSelection({
+        allUnit: outputSet.has(0),
+        mabes: outputSet.has(1),
+        polda: outputSet.has(2),
+        polres: outputSet.has(3),
+      });
+    }
+  }, [detail?.fileTypeOutput]);
+
+  const save = async (data: TaskSchema) => {
+    const fileTypeMapping = {
+      all: "1",
+      video: "2",
+      audio: "3",
+      image: "4",
+      text: "5",
+    };
+
+    const selectedOutputs = Object.keys(taskOutput)
+      .filter((key) => taskOutput[key as keyof typeof taskOutput])
+      .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
+      .join(",");
+
+    const requestData = {
+      ...data,
+      // assignmentType,
+      // assignmentCategory,
+      target: selectedTarget,
+      unitSelection,
+      assignedToRole: "3",
+      taskType: taskType,
+      broadcastType: broadcastType,
+      assignmentMainTypeId: mainType,
+      assignmentPurpose: "1",
+      assignmentTypeId: type,
+      fileTypeOutput: selectedOutputs,
+      id: null,
+      narration: data.naration,
+      platformType: "",
+      title: data.title,
+    };
+
+    const response = await createTask(requestData);
+
+    console.log("Form Data Submitted:", requestData);
+    console.log("response", response);
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/en/contributor/task");
+    });
+  };
+
+  const onSubmit = (data: TaskSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const successConfirm = () => {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/en/contributor/task");
+      }
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(",");
+  };
+
+  async function saveForward() {
+    console.log("Narasi :", narration);
+    loading();
+    const data = {
+      id,
+      forwardMessage,
+      assignedToLevel: handlePoldaPolresChange(),
+    };
+
+    const response = await forwardTask(data);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    successConfirm();
+    return false;
+  }
+
+  const handleCheckboxChange = (levelId: any) => {
+    setCheckedLevels((prev: any) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
+  useEffect(() => {
+    async function initState() {
+      // loading();
+      const response = await getAssignmentResponseList(id);
+      console.log("data", response?.data?.data);
+      console.log("userLvl", userLevelNumber);
+      setListData(response?.data?.data);
+      close();
+    }
+
+    initState();
+  }, []);
+
+  const handleToggleInput = (): void => {
+    setShowInput(!showInput);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(e.target.value);
+  };
+
+  const postData = () => {
+    sendSuggestionParent();
+  };
+
+  const sendReplyData = async (parentId: number) => {
+    const inputElement = document.querySelector(
+      `#input-comment-${parentId}`
+    ) as HTMLTextAreaElement;
+
+    if (inputElement?.value?.length > 1) {
+      loading();
+      const data = {
+        assignmentId: id,
+        message: inputElement.value,
+        parentId,
+      };
+
+      console.log(data);
+      const response = await createAssignmentResponse(data);
+      console.log(response);
+
+      const responseGet = await getAssignmentResponseList(id);
+      console.log(responseGet?.data?.data);
+      setListData(responseGet?.data?.data);
+
+      inputElement.value = "";
+      close();
+      setReplyingTo(null);
+    }
+  };
+
+  async function sendSuggestionParent() {
+    if (message?.length > 1) {
+      loading();
+      const data = {
+        assignmentId: id,
+        message,
+        parentId: null,
+      };
+
+      const response = await createAssignmentResponse(data);
+
+      console.log(response);
+      setMessage("");
+      const responseGet = await getAssignmentResponseList(id);
+      console.log(responseGet?.data?.data);
+      setListData(responseGet?.data?.data);
+
+      close();
+    }
+  }
+
+  async function deleteDataSuggestion(dataId: any) {
+    loading();
+    const response = await deleteAssignmentResponse(dataId);
+    console.log(response);
+    const responseGet = await getAssignmentResponseList(id);
+    console.log(responseGet?.data?.data);
+    setListData(responseGet?.data?.data);
+    close();
+  }
+
+  const deleteData = (dataId: any) => {
+    deleteDataSuggestion(dataId);
+    console.log(dataId);
+  };
+
+  async function getListAcceptance(): Promise<void> {
+    const isAccept = true;
+
+    try {
+      const resSent = await getAcceptance(id, !isAccept);
+      setSentAcceptance(resSent?.data?.data);
+
+      const resAccept = await getAcceptance(id, isAccept);
+
+      const acceptanceSort = resAccept?.data?.data?.sort(
+        (a: AcceptanceData, b: AcceptanceData) =>
+          new Date(a.acceptAt).getTime() - new Date(b.acceptAt).getTime()
+      );
+
+      console.log("Data sort:", acceptanceSort);
+      setAcceptAcceptance(acceptanceSort);
+    } catch (error) {
+      console.error("Error fetching acceptance data:", error);
+    }
+  }
+
+  useEffect(() => {
+    async function initState(): Promise<void> {
+      await getListAcceptance();
+    }
+
+    initState();
+  }, [refreshAcceptance]);
+
+  const setFinishAcceptance = async (
+    id: number,
+    isFinish: boolean
+  ): Promise<void> => {
+    if (!isFinish) {
+      loading();
+
+      setRefreshAcceptance((prev) => !prev);
+      close();
+    }
+  };
+
+  const handleReply = (id: any) => {
+    setReplyingTo(id);
+  };
+
+  async function finishAssignment() {
+    const response = finishTask(id);
+
+    // if (response.error) {
+    //   error(response.message);
+    //   return false;
+    // }
+
+    successConfirm();
+  }
+
+  async function deleteAssignment() {
+    const response = deleteTask(id);
+
+    // if (response.error) {
+    //   error(response.message);
+    //   return false;
+    // }
+
+    successConfirm();
+  }
+
+  async function handleForward() {
+    MySwal.fire({
+      title: "Forward Penugasan?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Ya",
+      cancelButtonText: "Tidak",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        saveForward();
+      }
+    });
+  }
+  async function handleDeleteAssignment() {
+    MySwal.fire({
+      title: "Apakah Anda yakin ingin menghapus data?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Hapus",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        deleteAssignment();
+      }
+    });
+  }
+
+  async function handleAssignmentDone() {
+    MySwal.fire({
+      title: "Apakah tugas sudah selesai?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Ya",
+      cancelButtonText: "Tidak",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        finishAssignment();
+      }
+    });
+  }
+
+  return (
+    <Card>
+      {detail !== undefined ? (
+        <div className="px-6 py-6">
+          <div className="flex flex-row justify-between">
+            <p className="text-lg font-semibold mb-3">Tujuan Forward</p>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="gap-5 mb-5">
+              <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                {listDest.map((polda: any) => (
+                  <div key={polda.id} className="border p-2">
+                    <Label className="flex items-center">
+                      <Checkbox
+                        checked={checkedLevels.has(polda.id)}
+                        onCheckedChange={() => handleCheckboxChange(polda.id)}
+                        className="mr-3"
+                      />
+                      {polda.name}
+                      <button
+                        onClick={() => toggleExpand(polda.id)}
+                        className="ml-2 focus:outline-none"
+                      ></button>
+                    </Label>
+                  </div>
+                ))}
+              </div>
+              <div className="form-group mt-2">
+                <Label htmlFor="message">Pesan</Label>
+                <Textarea
+                  id="forwardMessage"
+                  placeholder="Message"
+                  {...register("forwardMessage")}
+                />
+              </div>
+              <Button
+                color="primary"
+                variant={"default"}
+                type="button"
+                className="btn btn-primary mr-2 float-right my-3"
+                onClick={() => handleForward()}
+              >
+                Forward Tugas
+              </Button>
+              <div className="space-y-2 mt-6">
+                <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="flex flex-row items-center">
+                <div className="mt-6">
+                  <Label>Tujuan Pemilihan Tugas</Label>
+                  <Select
+                    onValueChange={setSelectedTarget}
+                    value={detail.assignedToRole}
+                  >
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="3,4">Semua Pengguna</SelectItem>
+                      <SelectItem value="4">Kontributor</SelectItem>
+                      <SelectItem value="3">Approver</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex flex-wrap gap-3 mt-6 pt-5 ml-3">
+                  {Object.keys(unitSelection).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        disabled
+                        checked={
+                          unitSelection[key as keyof typeof unitSelection]
+                        }
+                        onCheckedChange={(value) =>
+                          setUnitSelection({ ...unitSelection, [key]: value })
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+                <div className="mt-6 pt-5 pl-3">
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="soft" size="sm" color="primary">
+                        [Kustom]
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                      <DialogHeader>
+                        <DialogTitle>
+                          Daftar Wilayah Polda dan Polres
+                        </DialogTitle>
+                      </DialogHeader>
+                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                        {listDest.map((polda: any) => (
+                          <div key={polda.id} className="border p-2">
+                            <Label className="flex items-center">
+                              <Checkbox
+                                disabled
+                                checked={checkedLevels.has(polda.id)}
+                                onCheckedChange={() =>
+                                  handleCheckboxChange(polda.id)
+                                }
+                                className="mr-3"
+                              />
+                              {polda.name}
+                              <button
+                                onClick={() => toggleExpand(polda.id)}
+                                className="ml-2 focus:outline-none"
+                              >
+                                {expandedPolda[polda.id] ? (
+                                  <ChevronUp size={16} />
+                                ) : (
+                                  <ChevronDown size={16} />
+                                )}
+                              </button>
+                            </Label>
+                            {expandedPolda[polda.id] && (
+                              <div className="ml-6 mt-2">
+                                <Label className="block">
+                                  <Checkbox
+                                    disabled
+                                    checked={polda?.subDestination?.every(
+                                      (polres: any) =>
+                                        checkedLevels.has(polres.id)
+                                    )}
+                                    onCheckedChange={(isChecked) => {
+                                      const updatedLevels = new Set(
+                                        checkedLevels
+                                      );
+                                      polda?.subDestination?.forEach(
+                                        (polres: any) => {
+                                          if (isChecked) {
+                                            updatedLevels.add(polres.id);
+                                          } else {
+                                            updatedLevels.delete(polres.id);
+                                          }
+                                        }
+                                      );
+                                      setCheckedLevels(updatedLevels);
+                                    }}
+                                    className="mr-2"
+                                  />
+                                  Pilih Semua Polres
+                                </Label>
+                                {polda?.subDestination?.map((polres: any) => (
+                                  <Label key={polres.id} className="block mt-1">
+                                    <Checkbox
+                                      disabled
+                                      checked={checkedLevels.has(polres.id)}
+                                      onCheckedChange={() =>
+                                        handleCheckboxChange(polres.id)
+                                      }
+                                      className="mr-2"
+                                    />
+                                    {polres.name}
+                                  </Label>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                </div>
+              </div>
+              <div className="mt-6">
+                <Label>Tipe Penugasan</Label>
+                <RadioGroup
+                  value={detail.assignmentMainType.id.toString()}
+                  onValueChange={(value) => setMainType(value)}
+                  // value={String(mainType)}
+                  // onValueChange={(value) => setMainType(Number(value))}
+                  className="flex flex-wrap gap-3"
+                >
+                  <RadioGroupItem value="1" id="mediahub" />
+                  <Label htmlFor="mediahub">Mediahub</Label>
+                  <RadioGroupItem value="2" id="medsos-mediahub" />
+                  <Label htmlFor="medsos-mediahub">Medsos Mediahub</Label>
+                </RadioGroup>
+              </div>
+              <div className="mt-6">
+                <Label>Jenis Tugas </Label>
+                <RadioGroup
+                  value={detail.taskType.toString()}
+                  onValueChange={(value) => setTaskType(String(value))}
+                  className="flex flex-wrap gap-3"
+                >
+                  <RadioGroupItem value="atensi-khusus" id="khusus" />
+                  <Label htmlFor="atensi-khusus">Atensi Khusus</Label>
+                  <RadioGroupItem value="tugas-harian" id="harian" />
+                  <Label htmlFor="tugas-harian">Tugas Harian</Label>
+                </RadioGroup>
+              </div>
+              {/* RadioGroup Assignment Category */}
+              <div className="mt-6">
+                <Label>Jenis Penugasan</Label>
+                <RadioGroup
+                  value={detail.assignmentType.id.toString()}
+                  onValueChange={(value) => setType(value)}
+                  className="flex flex-wrap gap-3"
+                >
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="1" id="publication" />
+                    <Label htmlFor="publication">Publikasi</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="2" id="amplification" />
+                    <Label htmlFor="amplification">Amplifikasi</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="3" id="contra" />
+                    <Label htmlFor="contra">Kontra</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+              <div className="mt-6">
+                <Label>Output Tugas</Label>
+                <div className="flex flex-wrap gap-3">
+                  {Object.keys(taskOutput).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        disabled
+                        checked={taskOutput[key as keyof typeof taskOutput]}
+                        onCheckedChange={(value) =>
+                          setTaskOutput({ ...taskOutput, [key]: value })
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              {/* <div className="mt-6">
+                <Label>Broadcast </Label>
+                <RadioGroup
+                  value={broadcastType} 
+                  onValueChange={(value) => setBroadcastType(value)} 
+                  className="flex flex-wrap gap-3"
+                >
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="all" id="all" />
+                    <Label htmlFor="all">Semua</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="email" id="email" />
+                    <Label htmlFor="email">Email Blast</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="whatsapp" id="whatsapp" />
+                    <Label htmlFor="whatsapp">WhatsApp Blast</Label>
+                  </div>
+                </RadioGroup>
+              </div> */}
+              <div className="mt-6">
+                <Label>Narasi Penugasan</Label>
+                <Controller
+                  control={control}
+                  name="naration"
+                  render={({ field: { onChange, value } }) => (
+                    <ViewEditor initialData={detail?.narration} />
+                  )}
+                />
+                {errors.naration?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.naration.message}
+                  </p>
+                )}
+              </div>
+            </div>
+          </form>
+        </div>
+      ) : (
+        ""
+      )}
+    </Card>
+  );
+}

components/landing-page/navbar.tsx

@@ -19,7 +19,7 @@ import { Button } from "@/components/ui/button";
 import LocalSwitcher from "../partials/header/locale-switcher";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { getUserNotifications, listRole } from "@/service/landing/landing";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
 type Detail = {
@@ -96,19 +96,9 @@ const Navbar = () => {
         setNotifications(response?.data?.data?.content);
         console.log("respon:", response);
       }
-      if (roleId != undefined) {
-        const response = await getUserNotifications(0, 3);
-        setNotifications(response?.data?.data?.content);
-        console.log("respon:", response);
-      }
     }
 
     async function getNotifUpdate() {
-      if (roleId != undefined) {
-        const response = await getUserNotifications(0, 2);
-        setNotificationsUpdate(response?.data?.data?.content);
-        console.log("Notiffff:", response);
-      }
       if (roleId != undefined) {
         const response = await getUserNotifications(0, 3);
         setNotificationsUpdate(response?.data?.data?.content);
@@ -142,39 +132,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);
   };
@@ -391,11 +348,11 @@ const Navbar = () => {
                   </a>
                 </PopoverTrigger>
                 <PopoverContent className=" p-0 flex flex-col mt-2" align="end">
-                  <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-row">
+                  <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 bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${isMessageActive ? "active" : ""}`}
+                          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"
@@ -408,7 +365,7 @@ const Navbar = () => {
                       </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"}`}
+                          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"
@@ -421,11 +378,11 @@ const Navbar = () => {
                         </a>
                       </TabsTrigger>
                     </TabsList>
-                  </Tabs>
+                    <TabsContent value="notif-tab">
-                  <div className={`flex flex-col justify-center my-3 ${isMessageActive ? "active" : ""}`}>
+                      <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="">
+                            <div className="ml-4">
                               <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
                             </div>
                             <div className="">
@@ -446,6 +403,34 @@ const Navbar = () => {
                           </p>
                         </Link>
                       </div>
+                    </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>
@@ -567,9 +552,34 @@ const Navbar = () => {
                       </p>
                     </Link>
                   </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}>
+                        <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>
                 </PopoverContent>
               </Popover>
-              // Dropdown menu for roleId === 3
+
+              {/* // Dropdown menu for roleId === 3 */}
               <DropdownMenu>
                 <DropdownMenuTrigger asChild className="cursor-pointer">
                   {detail !== undefined ? (

package-lock.json

@@ -12,6 +12,7 @@
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/modifiers": "^7.0.0",
         "@dnd-kit/sortable": "^8.0.0",
+        "@dschoon/react-waves": "^4.0.3",
         "@emoji-mart/data": "^1.2.1",
         "@emoji-mart/react": "^1.1.1",
         "@fullcalendar/core": "^6.1.15",
@@ -64,6 +65,7 @@
         "@types/react-html-parser": "^2.0.6",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@vercel/analytics": "^1.3.1",
+        "@wavesurfer/react": "^1.0.8",
         "apexcharts": "^3.49.2",
         "axios": "^1.7.8",
         "chart.js": "^4.4.3",
@@ -156,6 +158,7 @@
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
         "postcss": "^8",
+        "react-wavesurfer.js": "0.0.5",
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
       }
@@ -13688,6 +13691,55 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@dschoon/react-waves": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@dschoon/react-waves/-/react-waves-4.0.3.tgz",
+      "integrity": "sha512-QlygFXBarpdRB/JhFaHkpqOVHfgmODShVkvB96g4JBIidDhhuWidfrudQSo9PxhQnLjAhSlxJjg+8ct7K8TCWw==",
+      "dependencies": {
+        "@types/jest": "^26.0.15",
+        "@types/node": "^14.14.7",
+        "@types/react": "^16.9.56",
+        "@types/react-dom": "^16.9.9",
+        "typescript": "^4.0.5",
+        "wavesurfer.js": "^4.1.1"
+      },
+      "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"
+      }
+    },
+    "node_modules/@dschoon/react-waves/node_modules/@types/node": {
+      "version": "14.18.63",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ=="
+    },
+    "node_modules/@dschoon/react-waves/node_modules/@types/react": {
+      "version": "16.14.62",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.62.tgz",
+      "integrity": "sha512-BWf7hqninZav6nerxXj+NeZT/mTpDeG6Lk2zREHAy63CrnXoOGPGtNqTFYFN/sqpSaREDP5otVV88axIXmKfGA==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "^0.16",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@dschoon/react-waves/node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/@emoji-mart/data": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.2.1.tgz",
@@ -14221,6 +14273,21 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@jest/types": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
+      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^15.0.0",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -16477,6 +16544,36 @@
         "domelementtype": "1"
       }
     },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w=="
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/jest": {
+      "version": "26.0.24",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz",
+      "integrity": "sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==",
+      "dependencies": {
+        "jest-diff": "^26.0.0",
+        "pretty-format": "^26.0.0"
+      }
+    },
     "node_modules/@types/jquery": {
       "version": "3.5.32",
       "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz",
@@ -16587,6 +16684,14 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "16.9.25",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.25.tgz",
+      "integrity": "sha512-ZK//eAPhwft9Ul2/Zj+6O11YR6L4JX0J2sVeBC9Ft7x7HFN7xk7yUV/zDxqV6rjvqgl6r8Dq7oQImxtyf/Mzcw==",
+      "peerDependencies": {
+        "@types/react": "^16.0.0"
+      }
+    },
     "node_modules/@types/react-geocode": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/@types/react-geocode/-/react-geocode-0.2.4.tgz",
@@ -16632,6 +16737,11 @@
       "integrity": "sha512-qpstuHivwg/HoXxRrBo5/r/OVx5M2SkqJpVu2haasdLctt+jMGHWjqdbI0LL7Rk2wRmN/UHdHK4JZg9RUMcvKA==",
       "dev": true
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
+    },
     "node_modules/@types/sizzle": {
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.9.tgz",
@@ -16643,6 +16753,19 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
     },
+    "node_modules/@types/yargs": {
+      "version": "15.0.19",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.19.tgz",
+      "integrity": "sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==",
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.3",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ=="
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@@ -16812,6 +16935,15 @@
         }
       }
     },
+    "node_modules/@wavesurfer/react": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@wavesurfer/react/-/react-1.0.8.tgz",
+      "integrity": "sha512-YowJcynQTTC1oWBWlxr7IkZn9QlYfvOC2rYqOvVA2DwBh+nMEoZca7718disoFNnnX7/NzTKqZd/VuWI5RbhMQ==",
+      "peerDependencies": {
+        "react": "^19.0.0",
+        "wavesurfer.js": ">=7.8.11"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -17785,7 +17917,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -19202,6 +19333,14 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/diff-sequences": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
+      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -20940,7 +21079,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -22311,6 +22449,28 @@
       "integrity": "sha512-fnjC0up+0SjEJtgmmG+teeel68kutkvzfctO/KxE3qJlbunkJYAshgH3boU++gSBHP8z5/r0ts0qRIrHf0RTQQ==",
       "dev": true
     },
+    "node_modules/jest-diff": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
+      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "pretty-format": "^26.6.2"
+      },
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
+    "node_modules/jest-get-type": {
+      "version": "26.3.0",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
+      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
     "node_modules/jest-worker": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
@@ -26216,6 +26376,25 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
+      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
+      "dependencies": {
+        "@jest/types": "^26.6.2",
+        "ansi-regex": "^5.0.0",
+        "ansi-styles": "^4.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
     "node_modules/prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
@@ -26952,6 +27131,17 @@
         "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",
@@ -28473,7 +28663,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -29828,6 +30017,11 @@
         "node": ">=10.13.0"
       }
     },
+    "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/web-namespaces": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@dschoon/react-waves": "^4.0.3",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@fullcalendar/core": "^6.1.15",
@@ -65,6 +66,7 @@
     "@types/react-html-parser": "^2.0.6",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vercel/analytics": "^1.3.1",
+    "@wavesurfer/react": "^1.0.8",
     "apexcharts": "^3.49.2",
     "axios": "^1.7.8",
     "chart.js": "^4.4.3",
@@ -157,6 +159,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",
+    "react-wavesurfer.js": "0.0.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

service/curated-content/curated-content.ts

@@ -1,6 +1,37 @@
-import { httpGetInterceptor } from "../http-config/http-interceptor-service";
+import {
+  httpDeleteInterceptor,
+  httpGetInterceptor,
+  httpPostInterceptor,
+} from "../http-config/http-interceptor-service";
 
 export async function detailMedia(id: any) {
   const url = `media?id=${id}`;
   return httpGetInterceptor(url);
 }
+
+export async function listCuratedContent(
+  title: string = "",
+  limit: any,
+  page: any,
+  typeId: any,
+  curationType: any
+  // categoryId = ""
+) {
+  const url = `media/curation/list?title=${title}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=${typeId}&curationType=${curationType}`;
+  return httpGetInterceptor(url);
+}
+
+export async function getMediaCurationMessage(id: any) {
+  const url = `media/curation/message/list?mediaFileId=${id}`;
+  return httpGetInterceptor(url);
+}
+
+export async function saveMediaCurationMessage(data: any) {
+  const url = "media/curation/message";
+  return httpPostInterceptor(url, data);
+}
+
+export async function deleteMediaCurationMessage(id: any) {
+  const url = `media/curation/message?id=${id}`;
+  return httpDeleteInterceptor(url);
+}

service/task.ts

@@ -41,11 +41,6 @@ export async function forwardTask(data: any) {
   return httpPostInterceptor(url, data);
 }
 
-export async function finishTask(id: any) {
-  const url = `assignment/finish?id=${id}`;
-  return httpPostInterceptor(url, id);
-}
-
 export async function deleteTask(id: any) {
   const url = `assignment?id=${id}`;
   return httpDeleteInterceptor(url);
@@ -58,7 +53,7 @@ export async function getUserLevelForAssignments() {
 
 export async function getAssignmentResponseList(id: any) {
   const url = `assignment/response?assignmentId=${id}`;
-  return httpGetInterceptor({ url });
+  return httpGetInterceptor(url);
 }
 
 export async function createAssignmentResponse(data: any) {
@@ -73,7 +68,7 @@ export async function deleteAssignmentResponse(id: any) {
 
 export async function getAcceptance(id: any, isAccept: any) {
   const url = `assignment/acceptance?id=${id}&isAccept=${isAccept}`;
-  return httpGetInterceptor({ url });
+  return httpGetInterceptor(url);
 }
 
 export async function acceptAssignment(id: any, isAccept: any) {
@@ -95,3 +90,8 @@ export async function getListAttachment(assignmentId: any, isForCreator: any) {
   const url = `media/list?&enablePage=0&assignmentId=${assignmentId}&isForAdmin=${isForCreator}`;
   return httpGetInterceptor({ url });
 }
+
+export async function finishTask(id: any) {
+  const url = `assignment/finish?id=${id}`;
+  return httpPostInterceptor(url);
+}

vendor/ckeditor5/node_modules/.bin/tsc

@@ -1 +1,16 @@
-../typescript/bin/tsc
+#!/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

vendor/ckeditor5/node_modules/.bin/tsc.cmd

@@ -0,0 +1,17 @@
+@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" %*

vendor/ckeditor5/node_modules/.bin/tsc.ps1

@@ -0,0 +1,28 @@
+#!/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

vendor/ckeditor5/node_modules/.bin/tsserver

@@ -1 +1,16 @@
-../typescript/bin/tsserver
+#!/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

vendor/ckeditor5/node_modules/.bin/tsserver.cmd

@@ -0,0 +1,17 @@
+@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" %*

vendor/ckeditor5/node_modules/.bin/tsserver.ps1

@@ -0,0 +1,28 @@
+#!/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

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/src/alignment.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module alignment/alignment
  */
-import { Plugin } from '@ckeditor/ckeditor5-alignment/node_modules/ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
-import AlignmentEditing from '@ckeditor/ckeditor5-alignment/src/alignmentediting.js';
+import AlignmentEditing from './alignmentediting.js';
-import AlignmentUI from '@ckeditor/ckeditor5-alignment/src/alignmentui.js';
+import AlignmentUI from './alignmentui.js';
 /**
  * The text alignment plugin.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/src/alignmentcommand.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module alignment/alignmentcommand
  */
-import { Command } from '@ckeditor/ckeditor5-alignment/node_modules/ckeditor5/src/core.js';
+import { Command } from 'ckeditor5/src/core.js';
-import type { SupportedOption } from '@ckeditor/ckeditor5-alignment/src/alignmentconfig.js';
+import type { SupportedOption } from './alignmentconfig.js';
 /**
  * The alignment command plugin.
  */

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/src/alignmentediting.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module alignment/alignmentediting
  */
-import { Plugin, type Editor } from '@ckeditor/ckeditor5-alignment/node_modules/ckeditor5/src/core';
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 /**
  * The alignment editing feature. It introduces the {@link module:alignment/alignmentcommand~AlignmentCommand command} and adds
  * the `alignment` attribute for block elements in the {@link module:engine/model/model~Model model}.

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/src/alignmentui.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module alignment/alignmentui
  */
-import { Plugin } from '@ckeditor/ckeditor5-alignment/node_modules/ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
-import type { SupportedOption } from '@ckeditor/ckeditor5-alignment/src/alignmentconfig.js';
+import type { SupportedOption } from './alignmentconfig.js';
 /**
  * The default alignment UI plugin.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/src/augmentation.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { Alignment, AlignmentEditing, AlignmentUI, AlignmentCommand, AlignmentConfig } from '@ckeditor/ckeditor5-alignment';
+import type { Alignment, AlignmentEditing, AlignmentUI, AlignmentCommand, AlignmentConfig } from './index.js';
 declare module '@ckeditor/ckeditor5-core' {
     interface EditorConfig {
         /**

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-alignment/src/index.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module alignment
  */
-export { default as Alignment } from '@ckeditor/ckeditor5-alignment/src/alignment.js';
+export { default as Alignment } from './alignment.js';
-export { default as AlignmentEditing } from '@ckeditor/ckeditor5-alignment/src/alignmentediting.js';
+export { default as AlignmentEditing } from './alignmentediting.js';
-export { default as AlignmentUI } from '@ckeditor/ckeditor5-alignment/src/alignmentui.js';
+export { default as AlignmentUI } from './alignmentui.js';
-export type { default as AlignmentCommand } from '@ckeditor/ckeditor5-alignment/src/alignmentcommand.js';
+export type { default as AlignmentCommand } from './alignmentcommand.js';
-export type { AlignmentConfig } from '@ckeditor/ckeditor5-alignment/src/alignmentconfig.js';
+export type { AlignmentConfig } from './alignmentconfig.js';
-import '@ckeditor/ckeditor5-alignment/src/augmentation.js';
+import './augmentation.js';

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-autoformat/src/augmentation.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { Autoformat } from '@ckeditor/ckeditor5-autoformat';
+import type { Autoformat } from './index.js';
 declare module '@ckeditor/ckeditor5-core' {
     interface PluginsMap {
         [Autoformat.pluginName]: Autoformat;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-autoformat/src/index.d.ts

@@ -5,5 +5,5 @@
 /**
  * @module autoformat
  */
-export { default as Autoformat } from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
+export { default as Autoformat } from './autoformat.js';
-import '@ckeditor/ckeditor5-autoformat/src/augmentation.js';
+import './augmentation.js';

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-basic-styles/src/augmentation.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { Superscript, Subscript, Bold, Code, AttributeCommand, BoldUI, CodeEditing, CodeUI, Italic, ItalicEditing, ItalicUI, Strikethrough, StrikethroughEditing, StrikethroughUI, SubscriptEditing, SubscriptUI, SuperscriptEditing, SuperscriptUI, Underline, UnderlineEditing, UnderlineUI } from '@ckeditor/ckeditor5-basic-styles';
+import type { Superscript, Subscript, Bold, Code, AttributeCommand, BoldUI, CodeEditing, CodeUI, Italic, ItalicEditing, ItalicUI, Strikethrough, StrikethroughEditing, StrikethroughUI, SubscriptEditing, SubscriptUI, SuperscriptEditing, SuperscriptUI, Underline, UnderlineEditing, UnderlineUI } from './index.js';
 declare module '@ckeditor/ckeditor5-core' {
     interface PluginsMap {
         [Superscript.pluginName]: Superscript;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-basic-styles/src/bold.d.ts

@@ -6,8 +6,8 @@
  * @module basic-styles/bold
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import BoldEditing from '@ckeditor/ckeditor5-basic-styles/src/bold/boldediting.js';
+import BoldEditing from './bold/boldediting.js';
-import BoldUI from '@ckeditor/ckeditor5-basic-styles/src/bold/boldui.js';
+import BoldUI from './bold/boldui.js';
 /**
  * The bold feature.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-basic-styles/src/code.d.ts

@@ -6,9 +6,9 @@
  * @module basic-styles/code
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import CodeEditing from '@ckeditor/ckeditor5-basic-styles/src/code/codeediting.js';
+import CodeEditing from './code/codeediting.js';
-import CodeUI from '@ckeditor/ckeditor5-basic-styles/src/code/codeui.js';
+import CodeUI from './code/codeui.js';
-import '@ckeditor/ckeditor5-basic-styles/theme/code.css';
+import '../theme/code.css';
 /**
  * The code feature.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-basic-styles/src/code/codeui.d.ts

@@ -6,7 +6,7 @@
  * @module basic-styles/code/codeui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import '@ckeditor/ckeditor5-basic-styles/theme/code.css';
+import '../../theme/code.css';
 /**
  * The code UI feature. It introduces the Code button.
  */

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-basic-styles/src/index.d.ts

@@ -5,26 +5,26 @@
 /**
  * @module basic-styles
  */
-export { default as Bold } from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
+export { default as Bold } from './bold.js';
-export { default as BoldEditing } from '@ckeditor/ckeditor5-basic-styles/src/bold/boldediting.js';
+export { default as BoldEditing } from './bold/boldediting.js';
-export { default as BoldUI } from '@ckeditor/ckeditor5-basic-styles/src/bold/boldui.js';
+export { default as BoldUI } from './bold/boldui.js';
-export { default as Code } from '@ckeditor/ckeditor5-basic-styles/src/code.js';
+export { default as Code } from './code.js';
-export { default as CodeEditing } from '@ckeditor/ckeditor5-basic-styles/src/code/codeediting.js';
+export { default as CodeEditing } from './code/codeediting.js';
-export { default as CodeUI } from '@ckeditor/ckeditor5-basic-styles/src/code/codeui.js';
+export { default as CodeUI } from './code/codeui.js';
-export { default as Italic } from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
+export { default as Italic } from './italic.js';
-export { default as ItalicEditing } from '@ckeditor/ckeditor5-basic-styles/src/italic/italicediting.js';
+export { default as ItalicEditing } from './italic/italicediting.js';
-export { default as ItalicUI } from '@ckeditor/ckeditor5-basic-styles/src/italic/italicui.js';
+export { default as ItalicUI } from './italic/italicui.js';
-export { default as Strikethrough } from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
+export { default as Strikethrough } from './strikethrough.js';
-export { default as StrikethroughEditing } from '@ckeditor/ckeditor5-basic-styles/src/strikethrough/strikethroughediting.js';
+export { default as StrikethroughEditing } from './strikethrough/strikethroughediting.js';
-export { default as StrikethroughUI } from '@ckeditor/ckeditor5-basic-styles/src/strikethrough/strikethroughui.js';
+export { default as StrikethroughUI } from './strikethrough/strikethroughui.js';
-export { default as Subscript } from '@ckeditor/ckeditor5-basic-styles/src/subscript.js';
+export { default as Subscript } from './subscript.js';
-export { default as SubscriptEditing } from '@ckeditor/ckeditor5-basic-styles/src/subscript/subscriptediting.js';
+export { default as SubscriptEditing } from './subscript/subscriptediting.js';
-export { default as SubscriptUI } from '@ckeditor/ckeditor5-basic-styles/src/subscript/subscriptui.js';
+export { default as SubscriptUI } from './subscript/subscriptui.js';
-export { default as Superscript } from '@ckeditor/ckeditor5-basic-styles/src/superscript.js';
+export { default as Superscript } from './superscript.js';
-export { default as SuperscriptEditing } from '@ckeditor/ckeditor5-basic-styles/src/superscript/superscriptediting.js';
+export { default as SuperscriptEditing } from './superscript/superscriptediting.js';
-export { default as SuperscriptUI } from '@ckeditor/ckeditor5-basic-styles/src/superscript/superscriptui.js';
+export { default as SuperscriptUI } from './superscript/superscriptui.js';
-export { default as Underline } from '@ckeditor/ckeditor5-basic-styles/src/underline.js';
+export { default as Underline } from './underline.js';
-export { default as UnderlineEditing } from '@ckeditor/ckeditor5-basic-styles/src/underline/underlineediting.js';
+export { default as UnderlineEditing } from './underline/underlineediting.js';
-export { default as UnderlineUI } from '@ckeditor/ckeditor5-basic-styles/src/underline/underlineui.js';
+export { default as UnderlineUI } from './underline/underlineui.js';
-export type { default as AttributeCommand } from '@ckeditor/ckeditor5-basic-styles/src/attributecommand.js';
+export type { default as AttributeCommand } from './attributecommand.js';
-import '@ckeditor/ckeditor5-basic-styles/src/augmentation.js';
+import './augmentation.js';

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-basic-styles/src/italic.d.ts

@@ -6,8 +6,8 @@
  * @module basic-styles/italic
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import ItalicEditing from '@ckeditor/ckeditor5-basic-styles/src/italic/italicediting.js';
+import ItalicEditing from './italic/italicediting.js';
-import ItalicUI from '@ckeditor/ckeditor5-basic-styles/src/italic/italicui.js';
+import ItalicUI from './italic/italicui.js';
 /**
  * The italic feature.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-basic-styles/src/strikethrough.d.ts

@@ -6,8 +6,8 @@
  * @module basic-styles/strikethrough
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import StrikethroughEditing from '@ckeditor/ckeditor5-basic-styles/src/strikethrough/strikethroughediting.js';
+import StrikethroughEditing from './strikethrough/strikethroughediting.js';
-import StrikethroughUI from '@ckeditor/ckeditor5-basic-styles/src/strikethrough/strikethroughui.js';
+import StrikethroughUI from './strikethrough/strikethroughui.js';
 /**
  * The strikethrough feature.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-basic-styles/src/subscript.d.ts

@@ -6,8 +6,8 @@
  * @module basic-styles/subscript
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import SubscriptEditing from '@ckeditor/ckeditor5-basic-styles/src/subscript/subscriptediting.js';
+import SubscriptEditing from './subscript/subscriptediting.js';
-import SubscriptUI from '@ckeditor/ckeditor5-basic-styles/src/subscript/subscriptui.js';
+import SubscriptUI from './subscript/subscriptui.js';
 /**
  * The subscript feature.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-basic-styles/src/superscript.d.ts

@@ -6,8 +6,8 @@
  * @module basic-styles/superscript
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import SuperscriptEditing from '@ckeditor/ckeditor5-basic-styles/src/superscript/superscriptediting.js';
+import SuperscriptEditing from './superscript/superscriptediting.js';
-import SuperscriptUI from '@ckeditor/ckeditor5-basic-styles/src/superscript/superscriptui.js';
+import SuperscriptUI from './superscript/superscriptui.js';
 /**
  * The superscript feature.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-basic-styles/src/underline.d.ts

@@ -6,8 +6,8 @@
  * @module basic-styles/underline
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import UnderlineEditing from '@ckeditor/ckeditor5-basic-styles/src/underline/underlineediting.js';
+import UnderlineEditing from './underline/underlineediting.js';
-import UnderlineUI from '@ckeditor/ckeditor5-basic-styles/src/underline/underlineui.js';
+import UnderlineUI from './underline/underlineui.js';
 /**
  * The underline feature.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-block-quote/src/augmentation.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { BlockQuote, BlockQuoteCommand, BlockQuoteEditing, BlockQuoteUI } from '@ckeditor/ckeditor5-block-quote';
+import type { BlockQuote, BlockQuoteCommand, BlockQuoteEditing, BlockQuoteUI } from './index.js';
 declare module '@ckeditor/ckeditor5-core' {
     interface PluginsMap {
         [BlockQuote.pluginName]: BlockQuote;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-block-quote/src/blockquote.d.ts

@@ -6,8 +6,8 @@
  * @module block-quote/blockquote
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import BlockQuoteEditing from '@ckeditor/ckeditor5-block-quote/src/blockquoteediting.js';
+import BlockQuoteEditing from './blockquoteediting.js';
-import BlockQuoteUI from '@ckeditor/ckeditor5-block-quote/src/blockquoteui.js';
+import BlockQuoteUI from './blockquoteui.js';
 /**
  * The block quote plugin.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-block-quote/src/blockquoteui.d.ts

@@ -6,7 +6,7 @@
  * @module block-quote/blockquoteui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import '@ckeditor/ckeditor5-block-quote/theme/blockquote.css';
+import '../theme/blockquote.css';
 /**
  * The block quote UI plugin.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-block-quote/src/index.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module block-quote
  */
-export { default as BlockQuote } from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
+export { default as BlockQuote } from './blockquote.js';
-export { default as BlockQuoteEditing } from '@ckeditor/ckeditor5-block-quote/src/blockquoteediting.js';
+export { default as BlockQuoteEditing } from './blockquoteediting.js';
-export { default as BlockQuoteUI } from '@ckeditor/ckeditor5-block-quote/src/blockquoteui.js';
+export { default as BlockQuoteUI } from './blockquoteui.js';
-export type { default as BlockQuoteCommand } from '@ckeditor/ckeditor5-block-quote/src/blockquotecommand.js';
+export type { default as BlockQuoteCommand } from './blockquotecommand.js';
-import '@ckeditor/ckeditor5-block-quote/src/augmentation.js';
+import './augmentation.js';

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-clipboard/src/augmentation.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { Clipboard, ClipboardPipeline, PastePlainText, DragDrop, DragDropTarget, DragDropBlockToolbar, ClipboardMarkersUtils } from '@ckeditor/ckeditor5-clipboard';
+import type { Clipboard, ClipboardPipeline, PastePlainText, DragDrop, DragDropTarget, DragDropBlockToolbar, ClipboardMarkersUtils } from './index.js';
 declare module '@ckeditor/ckeditor5-core' {
     interface PluginsMap {
         [Clipboard.pluginName]: Clipboard;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-clipboard/src/clipboard.d.ts

@@ -6,10 +6,10 @@
  * @module clipboard/clipboard
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import ClipboardPipeline from '@ckeditor/ckeditor5-clipboard/src/clipboardpipeline.js';
+import ClipboardPipeline from './clipboardpipeline.js';
-import DragDrop from '@ckeditor/ckeditor5-clipboard/src/dragdrop.js';
+import DragDrop from './dragdrop.js';
-import PastePlainText from '@ckeditor/ckeditor5-clipboard/src/pasteplaintext.js';
+import PastePlainText from './pasteplaintext.js';
-import ClipboardMarkersUtils from '@ckeditor/ckeditor5-clipboard/src/clipboardmarkersutils.js';
+import ClipboardMarkersUtils from './clipboardmarkersutils.js';
 /**
  * The clipboard feature.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-clipboard/src/clipboardpipeline.d.ts

@@ -7,7 +7,7 @@
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import type { DataTransfer, DocumentFragment, Range, ViewDocumentFragment, ViewRange, Selection, DocumentSelection } from '@ckeditor/ckeditor5-engine';
-import ClipboardMarkersUtils from '@ckeditor/ckeditor5-clipboard/src/clipboardmarkersutils.js';
+import ClipboardMarkersUtils from './clipboardmarkersutils.js';
 /**
  * The clipboard pipeline feature. It is responsible for intercepting the `paste` and `drop` events and
  * passing the pasted content through a series of events in order to insert it into the editor's content.

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-clipboard/src/dragdrop.d.ts

@@ -7,10 +7,10 @@
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { Widget } from '@ckeditor/ckeditor5-widget';
-import ClipboardPipeline from '@ckeditor/ckeditor5-clipboard/src/clipboardpipeline.js';
+import ClipboardPipeline from './clipboardpipeline.js';
-import DragDropTarget from '@ckeditor/ckeditor5-clipboard/src/dragdroptarget.js';
+import DragDropTarget from './dragdroptarget.js';
-import DragDropBlockToolbar from '@ckeditor/ckeditor5-clipboard/src/dragdropblocktoolbar.js';
+import DragDropBlockToolbar from './dragdropblocktoolbar.js';
-import '@ckeditor/ckeditor5-clipboard/theme/clipboard.css';
+import '../theme/clipboard.css';
 /**
  * The drag and drop feature. It works on top of the {@link module:clipboard/clipboardpipeline~ClipboardPipeline}.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-clipboard/src/index.d.ts

@@ -5,13 +5,13 @@
 /**
  * @module clipboard
  */
-export { default as Clipboard } from '@ckeditor/ckeditor5-clipboard/src/clipboard.js';
+export { default as Clipboard } from './clipboard.js';
-export { default as ClipboardPipeline, type ClipboardContentInsertionEvent, type ClipboardContentInsertionData, type ClipboardInputTransformationEvent, type ClipboardInputTransformationData, type ClipboardOutputTransformationEvent, type ClipboardOutputTransformationData, type ViewDocumentClipboardOutputEvent } from '@ckeditor/ckeditor5-clipboard/src/clipboardpipeline.js';
+export { default as ClipboardPipeline, type ClipboardContentInsertionEvent, type ClipboardContentInsertionData, type ClipboardInputTransformationEvent, type ClipboardInputTransformationData, type ClipboardOutputTransformationEvent, type ClipboardOutputTransformationData, type ViewDocumentClipboardOutputEvent } from './clipboardpipeline.js';
-export { default as ClipboardMarkersUtils, type ClipboardMarkerRestrictedAction, type ClipboardMarkerConfiguration } from '@ckeditor/ckeditor5-clipboard/src/clipboardmarkersutils.js';
+export { default as ClipboardMarkersUtils, type ClipboardMarkerRestrictedAction, type ClipboardMarkerConfiguration } from './clipboardmarkersutils.js';
-export type { ClipboardEventData } from '@ckeditor/ckeditor5-clipboard/src/clipboardobserver.js';
+export type { ClipboardEventData } from './clipboardobserver.js';
-export { default as DragDrop } from '@ckeditor/ckeditor5-clipboard/src/dragdrop.js';
+export { default as DragDrop } from './dragdrop.js';
-export { default as PastePlainText } from '@ckeditor/ckeditor5-clipboard/src/pasteplaintext.js';
+export { default as PastePlainText } from './pasteplaintext.js';
-export { default as DragDropTarget } from '@ckeditor/ckeditor5-clipboard/src/dragdroptarget.js';
+export { default as DragDropTarget } from './dragdroptarget.js';
-export { default as DragDropBlockToolbar } from '@ckeditor/ckeditor5-clipboard/src/dragdropblocktoolbar.js';
+export { default as DragDropBlockToolbar } from './dragdropblocktoolbar.js';
-export type { ViewDocumentClipboardInputEvent, ViewDocumentCopyEvent, ViewDocumentCutEvent } from '@ckeditor/ckeditor5-clipboard/src/clipboardobserver.js';
+export type { ViewDocumentClipboardInputEvent, ViewDocumentCopyEvent, ViewDocumentCutEvent } from './clipboardobserver.js';
-import '@ckeditor/ckeditor5-clipboard/src/augmentation.js';
+import './augmentation.js';

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-clipboard/src/pasteplaintext.d.ts

@@ -6,7 +6,7 @@
  * @module clipboard/pasteplaintext
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import ClipboardPipeline from '@ckeditor/ckeditor5-clipboard/src/clipboardpipeline.js';
+import ClipboardPipeline from './clipboardpipeline.js';
 /**
  * The plugin detects the user's intention to paste plain text.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-cloud-services/src/augmentation.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { CloudServices, CloudServicesConfig, CloudServicesCore } from '@ckeditor/ckeditor5-cloud-services';
+import type { CloudServices, CloudServicesConfig, CloudServicesCore } from './index.js';
 declare module '@ckeditor/ckeditor5-core' {
     interface EditorConfig {
         /**

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-cloud-services/src/cloudservices.d.ts

@@ -6,9 +6,9 @@
  * @module cloud-services/cloudservices
  */
 import { ContextPlugin } from 'ckeditor5/src/core.js';
-import CloudServicesCore from '@ckeditor/ckeditor5-cloud-services/src/cloudservicescore.js';
+import CloudServicesCore from './cloudservicescore.js';
-import type { CloudServicesConfig, TokenUrl } from '@ckeditor/ckeditor5-cloud-services/src/cloudservicesconfig.js';
+import type { CloudServicesConfig, TokenUrl } from './cloudservicesconfig.js';
-import type { InitializedToken } from '@ckeditor/ckeditor5-cloud-services/src/token/token.js';
+import type { InitializedToken } from './token/token.js';
 /**
  * Plugin introducing the integration between CKEditor 5 and CKEditor Cloud Services .
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-cloud-services/src/cloudservicescore.d.ts

@@ -6,9 +6,9 @@
  * @module cloud-services/cloudservicescore
  */
 import { ContextPlugin } from 'ckeditor5/src/core.js';
-import type { TokenUrl } from '@ckeditor/ckeditor5-cloud-services/src/cloudservicesconfig.js';
+import type { TokenUrl } from './cloudservicesconfig.js';
-import Token, { type InitializedToken, type TokenOptions } from '@ckeditor/ckeditor5-cloud-services/src/token/token.js';
+import Token, { type InitializedToken, type TokenOptions } from './token/token.js';
-import UploadGateway from '@ckeditor/ckeditor5-cloud-services/src/uploadgateway/uploadgateway.js';
+import UploadGateway from './uploadgateway/uploadgateway.js';
 /**
  * The `CloudServicesCore` plugin exposes the base API for communication with CKEditor Cloud Services.
  */

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-cloud-services/src/index.d.ts

@@ -5,10 +5,10 @@
 /**
  * @module cloud-services
  */
-export { default as CloudServices } from '@ckeditor/ckeditor5-cloud-services/src/cloudservices.js';
+export { default as CloudServices } from './cloudservices.js';
-export { default as CloudServicesCore } from '@ckeditor/ckeditor5-cloud-services/src/cloudservicescore.js';
+export { default as CloudServicesCore } from './cloudservicescore.js';
-export { TokenUrl, type CloudServicesConfig } from '@ckeditor/ckeditor5-cloud-services/src/cloudservicesconfig.js';
+export { TokenUrl, type CloudServicesConfig } from './cloudservicesconfig.js';
-export type { default as Token, InitializedToken } from '@ckeditor/ckeditor5-cloud-services/src/token/token.js';
+export type { default as Token, InitializedToken } from './token/token.js';
-export type { default as UploadGateway } from '@ckeditor/ckeditor5-cloud-services/src/uploadgateway/uploadgateway.js';
+export type { default as UploadGateway } from './uploadgateway/uploadgateway.js';
-export type { default as FileUploader } from '@ckeditor/ckeditor5-cloud-services/src/uploadgateway/fileuploader.js';
+export type { default as FileUploader } from './uploadgateway/fileuploader.js';
-import '@ckeditor/ckeditor5-cloud-services/src/augmentation.js';
+import './augmentation.js';

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-cloud-services/src/token/token.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { TokenUrl } from '@ckeditor/ckeditor5-cloud-services/src/cloudservicesconfig.js';
+import type { TokenUrl } from '../cloudservicesconfig.js';
 declare const Token_base: {
     new (): import("ckeditor5/src/utils.js").Observable;
     prototype: import("ckeditor5/src/utils.js").Observable;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-cloud-services/src/uploadgateway/fileuploader.d.ts

@@ -6,7 +6,7 @@
  * @module cloud-services/uploadgateway/fileuploader
  */
 import type { UploadResponse } from 'ckeditor5/src/upload.js';
-import type { InitializedToken } from '@ckeditor/ckeditor5-cloud-services/src/token/token.js';
+import type { InitializedToken } from '../token/token.js';
 declare const FileUploader_base: {
     new (): import("ckeditor5/src/utils.js").Emitter;
     prototype: import("ckeditor5/src/utils.js").Emitter;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-cloud-services/src/uploadgateway/uploadgateway.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module cloud-services/uploadgateway/uploadgateway
  */
-import FileUploader from '@ckeditor/ckeditor5-cloud-services/src/uploadgateway/fileuploader.js';
+import FileUploader from './fileuploader.js';
-import type { InitializedToken } from '@ckeditor/ckeditor5-cloud-services/src/token/token.js';
+import type { InitializedToken } from '../token/token.js';
 /**
  * UploadGateway abstracts file uploads to CKEditor Cloud Services.
  */

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-code-block/src/augmentation.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { CodeBlock, CodeBlockCommand, CodeBlockConfig, CodeBlockEditing, CodeBlockUI, IndentCodeBlockCommand, OutdentCodeBlockCommand } from '@ckeditor/ckeditor5-code-block';
+import type { CodeBlock, CodeBlockCommand, CodeBlockConfig, CodeBlockEditing, CodeBlockUI, IndentCodeBlockCommand, OutdentCodeBlockCommand } from './index.js';
 declare module '@ckeditor/ckeditor5-core' {
     interface EditorConfig {
         /**

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-code-block/src/codeblock.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module code-block/codeblock
  */
-import { Plugin } from '@ckeditor/ckeditor5-code-block/node_modules/ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
-import CodeBlockEditing from '@ckeditor/ckeditor5-code-block/src/codeblockediting.js';
+import CodeBlockEditing from './codeblockediting.js';
-import CodeBlockUI from '@ckeditor/ckeditor5-code-block/src/codeblockui.js';
+import CodeBlockUI from './codeblockui.js';
 /**
  * The code block plugin.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-code-block/src/codeblockcommand.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { Command, type Editor } from '@ckeditor/ckeditor5-code-block/node_modules/ckeditor5/src/core';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
 /**
  * The code block command plugin.
  */

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-code-block/src/codeblockediting.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module code-block/codeblockediting
  */
-import { Plugin, type Editor } from '@ckeditor/ckeditor5-code-block/node_modules/ckeditor5/src/core';
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
-import { ShiftEnter } from '@ckeditor/ckeditor5-code-block/node_modules/ckeditor5/src/enter';
+import { ShiftEnter } from 'ckeditor5/src/enter.js';
 /**
  * The editing part of the code block feature.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-code-block/src/codeblockui.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module code-block/codeblockui
  */
-import { Plugin } from '@ckeditor/ckeditor5-code-block/node_modules/ckeditor5/src/core';
+import { Plugin } from 'ckeditor5/src/core.js';
-import '@ckeditor/ckeditor5-code-block/theme/codeblock.css';
+import '../theme/codeblock.css';
 /**
  * The code block UI plugin.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-code-block/src/indentcodeblockcommand.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module code-block/indentcodeblockcommand
  */
-import { Command, type Editor } from '@ckeditor/ckeditor5-code-block/node_modules/ckeditor5/src/core';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
 /**
  * The code block indentation increase command plugin.
  */

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-code-block/src/index.d.ts

@@ -5,11 +5,11 @@
 /**
  * @module code-block
  */
-export { default as CodeBlock } from '@ckeditor/ckeditor5-code-block/src/codeblock.js';
+export { default as CodeBlock } from './codeblock.js';
-export { default as CodeBlockEditing } from '@ckeditor/ckeditor5-code-block/src/codeblockediting.js';
+export { default as CodeBlockEditing } from './codeblockediting.js';
-export { default as CodeBlockUI } from '@ckeditor/ckeditor5-code-block/src/codeblockui.js';
+export { default as CodeBlockUI } from './codeblockui.js';
-export type { default as CodeBlockCommand } from '@ckeditor/ckeditor5-code-block/src/codeblockcommand.js';
+export type { default as CodeBlockCommand } from './codeblockcommand.js';
-export type { default as IndentCodeBlockCommand } from '@ckeditor/ckeditor5-code-block/src/indentcodeblockcommand.js';
+export type { default as IndentCodeBlockCommand } from './indentcodeblockcommand.js';
-export type { default as OutdentCodeBlockCommand } from '@ckeditor/ckeditor5-code-block/src/outdentcodeblockcommand.js';
+export type { default as OutdentCodeBlockCommand } from './outdentcodeblockcommand.js';
-export type { CodeBlockConfig } from '@ckeditor/ckeditor5-code-block/src/codeblockconfig.js';
+export type { CodeBlockConfig } from './codeblockconfig.js';
-import '@ckeditor/ckeditor5-code-block/src/augmentation.js';
+import './augmentation.js';

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-code-block/src/outdentcodeblockcommand.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { Command, type Editor } from '@ckeditor/ckeditor5-code-block/node_modules/ckeditor5/src/core';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
 /**
  * The code block indentation decrease command plugin.
  */

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/accessibility.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type Editor from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type Editor from './editor/editor.js';
 export declare const DEFAULT_GROUP_ID: "common";
 /**
  * A common namespace for various accessibility features of the editor.

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/command.d.ts

@@ -6,7 +6,7 @@
  * @module core/command
  */
 import { type DecoratedMethodEvent } from '@ckeditor/ckeditor5-utils';
-import type Editor from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type Editor from './editor/editor.js';
 declare const Command_base: {
     new (): import("@ckeditor/ckeditor5-utils").Observable;
     prototype: import("@ckeditor/ckeditor5-utils").Observable;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/commandcollection.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type Command from '@ckeditor/ckeditor5-core/src/command.js';
+import type Command from './command.js';
 /**
  * Collection of commands. Its instance is available in {@link module:core/editor/editor~Editor#commands `editor.commands`}.
  */

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/context.d.ts

@@ -6,10 +6,10 @@
  * @module core/context
  */
 import { Config, Collection, Locale, type LocaleTranslate } from '@ckeditor/ckeditor5-utils';
-import PluginCollection from '@ckeditor/ckeditor5-core/src/plugincollection.js';
+import PluginCollection from './plugincollection.js';
-import type Editor from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type Editor from './editor/editor.js';
-import type { LoadedPlugins, PluginConstructor } from '@ckeditor/ckeditor5-core/src/plugin.js';
+import type { LoadedPlugins, PluginConstructor } from './plugin.js';
-import type { EditorConfig } from '@ckeditor/ckeditor5-core/src/editor/editorconfig.js';
+import type { EditorConfig } from './editor/editorconfig.js';
 /**
  * Provides a common, higher-level environment for solutions that use multiple {@link module:core/editor/editor~Editor editors}
  * or plugins that work outside the editor. Use it instead of {@link module:core/editor/editor~Editor.create `Editor.create()`}

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/contextplugin.d.ts

@@ -6,11 +6,11 @@
  * @module core/contextplugin
  */
 import { type Collection, type Config, type Locale, type LocaleTranslate } from '@ckeditor/ckeditor5-utils';
-import type Editor from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type Editor from './editor/editor.js';
-import type { EditorConfig } from '@ckeditor/ckeditor5-core/src/editor/editorconfig.js';
+import type { EditorConfig } from './editor/editorconfig.js';
-import type Context from '@ckeditor/ckeditor5-core/src/context.js';
+import type Context from './context.js';
-import type { PluginDependencies, PluginInterface } from '@ckeditor/ckeditor5-core/src/plugin.js';
+import type { PluginDependencies, PluginInterface } from './plugin.js';
-import type PluginCollection from '@ckeditor/ckeditor5-core/src/plugincollection.js';
+import type PluginCollection from './plugincollection.js';
 declare const ContextPlugin_base: {
     new (): import("@ckeditor/ckeditor5-utils").Observable;
     prototype: import("@ckeditor/ckeditor5-utils").Observable;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/editingkeystrokehandler.d.ts

@@ -6,7 +6,7 @@
  * @module core/editingkeystrokehandler
  */
 import { KeystrokeHandler, type PriorityString } from '@ckeditor/ckeditor5-utils';
-import type Editor from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type Editor from './editor/editor.js';
 /**
  * A keystroke handler for editor editing. Its instance is available
  * in {@link module:core/editor/editor~Editor#keystrokes} so plugins

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/editor/editor.d.ts

@@ -8,13 +8,13 @@
 import { Config, type Locale, type LocaleTranslate } from '@ckeditor/ckeditor5-utils';
 import { Conversion, DataController, EditingController, Model } from '@ckeditor/ckeditor5-engine';
 import type { EditorUI } from '@ckeditor/ckeditor5-ui';
-import Context from '@ckeditor/ckeditor5-core/src/context.js';
+import Context from '../context.js';
-import PluginCollection from '@ckeditor/ckeditor5-core/src/plugincollection.js';
+import PluginCollection from '../plugincollection.js';
-import CommandCollection, { type CommandsMap } from '@ckeditor/ckeditor5-core/src/commandcollection.js';
+import CommandCollection, { type CommandsMap } from '../commandcollection.js';
-import EditingKeystrokeHandler from '@ckeditor/ckeditor5-core/src/editingkeystrokehandler.js';
+import EditingKeystrokeHandler from '../editingkeystrokehandler.js';
-import Accessibility from '@ckeditor/ckeditor5-core/src/accessibility.js';
+import Accessibility from '../accessibility.js';
-import type { LoadedPlugins, PluginConstructor } from '@ckeditor/ckeditor5-core/src/plugin.js';
+import type { LoadedPlugins, PluginConstructor } from '../plugin.js';
-import type { EditorConfig } from '@ckeditor/ckeditor5-core/src/editor/editorconfig.js';
+import type { EditorConfig } from './editorconfig.js';
 declare const Editor_base: {
     new (): import("@ckeditor/ckeditor5-utils").Observable;
     prototype: import("@ckeditor/ckeditor5-utils").Observable;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/editor/editorconfig.d.ts

@@ -6,9 +6,9 @@
  * @module core/editor/editorconfig
  */
 import type { ArrayOrItem, Translations } from '@ckeditor/ckeditor5-utils';
-import type Context from '@ckeditor/ckeditor5-core/src/context.js';
+import type Context from '../context.js';
-import type { PluginConstructor } from '@ckeditor/ckeditor5-core/src/plugin.js';
+import type { PluginConstructor } from '../plugin.js';
-import type Editor from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type Editor from './editor.js';
 import type { MenuBarConfig } from '@ckeditor/ckeditor5-ui';
 /**
  * CKEditor configuration options.

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/attachtoform.d.ts

@@ -2,8 +2,8 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { default as Editor } from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type { default as Editor } from '../editor.js';
-import type { ElementApi } from '@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin.js';
+import type { ElementApi } from './elementapimixin.js';
 /**
  * Checks if the editor is initialized on a `<textarea>` element that belongs to a form. If yes, it updates the editor's element
  * content before submitting the form.

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module core/editor/utils/dataapimixin
  */
-import type Editor from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type Editor from '../editor.js';
 import type { Constructor } from '@ckeditor/ckeditor5-utils';
 /**
  * Implementation of the {@link module:core/editor/utils/dataapimixin~DataApi}.

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin.d.ts

@@ -6,7 +6,7 @@
  * @module core/editor/utils/elementapimixin
  */
 import { type Constructor, type Mixed } from '@ckeditor/ckeditor5-utils';
-import type Editor from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type Editor from '../editor.js';
 /**
  * Implementation of the {@link module:core/editor/utils/elementapimixin~ElementApi}.
  */

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/editor/utils/securesourceelement.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { default as Editor } from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type { default as Editor } from '../editor.js';
 /**
  * Marks the source element on which the editor was initialized. This prevents other editor instances from using this element.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/index.d.ts

@@ -5,23 +5,23 @@
 /**
  * @module core
  */
-export { default as Plugin, type PluginDependencies, type PluginConstructor } from '@ckeditor/ckeditor5-core/src/plugin.js';
+export { default as Plugin, type PluginDependencies, type PluginConstructor } from './plugin.js';
-export { default as Command, type CommandExecuteEvent } from '@ckeditor/ckeditor5-core/src/command.js';
+export { default as Command, type CommandExecuteEvent } from './command.js';
-export { default as MultiCommand } from '@ckeditor/ckeditor5-core/src/multicommand.js';
+export { default as MultiCommand } from './multicommand.js';
-export type { CommandsMap } from '@ckeditor/ckeditor5-core/src/commandcollection.js';
+export type { CommandsMap } from './commandcollection.js';
-export type { PluginsMap, default as PluginCollection } from '@ckeditor/ckeditor5-core/src/plugincollection.js';
+export type { PluginsMap, default as PluginCollection } from './plugincollection.js';
-export { default as Context, type ContextConfig } from '@ckeditor/ckeditor5-core/src/context.js';
+export { default as Context, type ContextConfig } from './context.js';
-export { default as ContextPlugin, type ContextPluginDependencies } from '@ckeditor/ckeditor5-core/src/contextplugin.js';
+export { default as ContextPlugin, type ContextPluginDependencies } from './contextplugin.js';
-export { type EditingKeystrokeCallback } from '@ckeditor/ckeditor5-core/src/editingkeystrokehandler.js';
+export { type EditingKeystrokeCallback } from './editingkeystrokehandler.js';
-export type { PartialBy, NonEmptyArray } from '@ckeditor/ckeditor5-core/src/typings.js';
+export type { PartialBy, NonEmptyArray } from './typings.js';
-export { default as Editor, type EditorReadyEvent, type EditorDestroyEvent } from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+export { default as Editor, type EditorReadyEvent, type EditorDestroyEvent } from './editor/editor.js';
-export type { EditorConfig, LanguageConfig, ToolbarConfig, ToolbarConfigItem, UiConfig } from '@ckeditor/ckeditor5-core/src/editor/editorconfig.js';
+export type { EditorConfig, LanguageConfig, ToolbarConfig, ToolbarConfigItem, UiConfig } from './editor/editorconfig.js';
-export { default as attachToForm } from '@ckeditor/ckeditor5-core/src/editor/utils/attachtoform.js';
+export { default as attachToForm } from './editor/utils/attachtoform.js';
-export { default as DataApiMixin, type DataApi } from '@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin.js';
+export { default as DataApiMixin, type DataApi } from './editor/utils/dataapimixin.js';
-export { default as ElementApiMixin, type ElementApi } from '@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin.js';
+export { default as ElementApiMixin, type ElementApi } from './editor/utils/elementapimixin.js';
-export { default as secureSourceElement } from '@ckeditor/ckeditor5-core/src/editor/utils/securesourceelement.js';
+export { default as secureSourceElement } from './editor/utils/securesourceelement.js';
-export { default as PendingActions, type PendingAction } from '@ckeditor/ckeditor5-core/src/pendingactions.js';
+export { default as PendingActions, type PendingAction } from './pendingactions.js';
-export type { KeystrokeInfos as KeystrokeInfoDefinitions, KeystrokeInfoGroup as KeystrokeInfoGroupDefinition, KeystrokeInfoCategory as KeystrokeInfoCategoryDefinition, KeystrokeInfoDefinition as KeystrokeInfoDefinition } from '@ckeditor/ckeditor5-core/src/accessibility.js';
+export type { KeystrokeInfos as KeystrokeInfoDefinitions, KeystrokeInfoGroup as KeystrokeInfoGroupDefinition, KeystrokeInfoCategory as KeystrokeInfoCategoryDefinition, KeystrokeInfoDefinition as KeystrokeInfoDefinition } from './accessibility.js';
 export declare const icons: {
     bold: string;
     cancel: string;
@@ -86,4 +86,4 @@ export declare const icons: {
     outdent: string;
     table: string;
 };
-import '@ckeditor/ckeditor5-core/src/augmentation.js';
+import './augmentation.js';

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/multicommand.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module core/multicommand
  */
-import Command from '@ckeditor/ckeditor5-core/src/command.js';
+import Command from './command.js';
 import { type PriorityString } from '@ckeditor/ckeditor5-utils';
 /**
  * A CKEditor command that aggregates other commands.

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/pendingactions.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module core/pendingactions
  */
-import ContextPlugin from '@ckeditor/ckeditor5-core/src/contextplugin.js';
+import ContextPlugin from './contextplugin.js';
 import { type CollectionAddEvent, type CollectionRemoveEvent, type Observable } from '@ckeditor/ckeditor5-utils';
 /**
  * The list of pending editor actions.

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/plugin.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type Editor from '@ckeditor/ckeditor5-core/src/editor/editor.js';
+import type Editor from './editor/editor.js';
 declare const Plugin_base: {
     new (): import("@ckeditor/ckeditor5-utils").Observable;
     prototype: import("@ckeditor/ckeditor5-utils").Observable;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-core/src/plugincollection.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import type { LoadedPlugins, PluginClassConstructor, PluginConstructor, PluginInterface } from '@ckeditor/ckeditor5-core/src/plugin.js';
+import type { LoadedPlugins, PluginClassConstructor, PluginConstructor, PluginInterface } from './plugin.js';
 declare const PluginCollection_base: {
     new (): import("@ckeditor/ckeditor5-utils").Emitter;
     prototype: import("@ckeditor/ckeditor5-utils").Emitter;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module editor-classic/classiceditor
  */
-import ClassicEditorUI from '@ckeditor/ckeditor5-editor-classic/src/classiceditorui.js';
+import ClassicEditorUI from './classiceditorui.js';
 import { Editor, Context, type EditorConfig } from 'ckeditor5/src/core.js';
 import { ContextWatchdog, EditorWatchdog } from 'ckeditor5/src/watchdog.js';
 declare const ClassicEditor_base: import("ckeditor5/src/utils.js").Mixed<typeof Editor, import("ckeditor5/src/core.js").ElementApi>;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditorui.d.ts

@@ -7,7 +7,7 @@
  */
 import type { Editor } from 'ckeditor5/src/core.js';
 import { EditorUI } from 'ckeditor5/src/ui.js';
-import type ClassicEditorUIView from '@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js';
+import type ClassicEditorUIView from './classiceditoruiview.js';
 /**
  * The classic editor UI class.
  */

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.d.ts

@@ -8,7 +8,7 @@
 import { BoxedEditorUIView, InlineEditableUIView, MenuBarView, StickyPanelView, ToolbarView } from 'ckeditor5/src/ui.js';
 import type { Locale } from 'ckeditor5/src/utils.js';
 import type { EditingView } from 'ckeditor5/src/engine.js';
-import '@ckeditor/ckeditor5-editor-classic/theme/classiceditor.css';
+import '../theme/classiceditor.css';
 /**
  * Classic editor UI view. Uses an inline editable and a sticky toolbar, all
  * enclosed in a boxed UI view.

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-editor-classic/src/index.d.ts

@@ -5,4 +5,4 @@
 /**
  * @module editor-classic
  */
-export { default as ClassicEditor } from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
+export { default as ClassicEditor } from './classiceditor.js';

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-engine/src/controller/datacontroller.d.ts

@@ -2,21 +2,21 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import Mapper from '@ckeditor/ckeditor5-engine/src/conversion/mapper.js';
+import Mapper from '../conversion/mapper.js';
-import DowncastDispatcher from '@ckeditor/ckeditor5-engine/src/conversion/downcastdispatcher.js';
+import DowncastDispatcher from '../conversion/downcastdispatcher.js';
-import UpcastDispatcher from '@ckeditor/ckeditor5-engine/src/conversion/upcastdispatcher.js';
+import UpcastDispatcher from '../conversion/upcastdispatcher.js';
-import ViewDocumentFragment from '@ckeditor/ckeditor5-engine/src/view/documentfragment.js';
+import ViewDocumentFragment from '../view/documentfragment.js';
-import ViewDocument from '@ckeditor/ckeditor5-engine/src/view/document.js';
+import ViewDocument from '../view/document.js';
-import type ViewElement from '@ckeditor/ckeditor5-engine/src/view/element.js';
+import type ViewElement from '../view/element.js';
-import type { StylesProcessor } from '@ckeditor/ckeditor5-engine/src/view/stylesmap.js';
+import type { StylesProcessor } from '../view/stylesmap.js';
-import type { MatcherPattern } from '@ckeditor/ckeditor5-engine/src/view/matcher.js';
+import type { MatcherPattern } from '../view/matcher.js';
-import type Model from '@ckeditor/ckeditor5-engine/src/model/model.js';
+import type Model from '../model/model.js';
-import type ModelElement from '@ckeditor/ckeditor5-engine/src/model/element.js';
+import type ModelElement from '../model/element.js';
-import type ModelDocumentFragment from '@ckeditor/ckeditor5-engine/src/model/documentfragment.js';
+import type ModelDocumentFragment from '../model/documentfragment.js';
-import type { SchemaContextDefinition } from '@ckeditor/ckeditor5-engine/src/model/schema.js';
+import type { SchemaContextDefinition } from '../model/schema.js';
-import type { BatchType } from '@ckeditor/ckeditor5-engine/src/model/batch.js';
+import type { BatchType } from '../model/batch.js';
-import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor.js';
+import HtmlDataProcessor from '../dataprocessor/htmldataprocessor.js';
-import type DataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/dataprocessor.js';
+import type DataProcessor from '../dataprocessor/dataprocessor.js';
 declare const DataController_base: {
     new (): import("@ckeditor/ckeditor5-utils").Emitter;
     prototype: import("@ckeditor/ckeditor5-utils").Emitter;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-engine/src/controller/editingcontroller.d.ts

@@ -2,13 +2,13 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import View from '@ckeditor/ckeditor5-engine/src/view/view.js';
+import View from '../view/view.js';
-import Mapper from '@ckeditor/ckeditor5-engine/src/conversion/mapper.js';
+import Mapper from '../conversion/mapper.js';
-import DowncastDispatcher from '@ckeditor/ckeditor5-engine/src/conversion/downcastdispatcher.js';
+import DowncastDispatcher from '../conversion/downcastdispatcher.js';
-import type { default as Model } from '@ckeditor/ckeditor5-engine/src/model/model.js';
+import type { default as Model } from '../model/model.js';
-import type ModelItem from '@ckeditor/ckeditor5-engine/src/model/item.js';
+import type ModelItem from '../model/item.js';
-import type { Marker } from '@ckeditor/ckeditor5-engine/src/model/markercollection.js';
+import type { Marker } from '../model/markercollection.js';
-import type { StylesProcessor } from '@ckeditor/ckeditor5-engine/src/view/stylesmap.js';
+import type { StylesProcessor } from '../view/stylesmap.js';
 declare const EditingController_base: {
     new (): import("@ckeditor/ckeditor5-utils").Observable;
     prototype: import("@ckeditor/ckeditor5-utils").Observable;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-engine/src/conversion/conversion.d.ts

@@ -6,12 +6,12 @@
  * @module engine/conversion/conversion
  */
 import { type ArrayOrItem, type PriorityString } from '@ckeditor/ckeditor5-utils';
-import UpcastHelpers from '@ckeditor/ckeditor5-engine/src/conversion/upcasthelpers.js';
+import UpcastHelpers from './upcasthelpers.js';
-import DowncastHelpers, { type AttributeCreatorFunction, type AttributeDescriptor } from '@ckeditor/ckeditor5-engine/src/conversion/downcasthelpers.js';
+import DowncastHelpers, { type AttributeCreatorFunction, type AttributeDescriptor } from './downcasthelpers.js';
-import type DowncastDispatcher from '@ckeditor/ckeditor5-engine/src/conversion/downcastdispatcher.js';
+import type DowncastDispatcher from './downcastdispatcher.js';
-import type UpcastDispatcher from '@ckeditor/ckeditor5-engine/src/conversion/upcastdispatcher.js';
+import type UpcastDispatcher from './upcastdispatcher.js';
-import type ElementDefinition from '@ckeditor/ckeditor5-engine/src/view/elementdefinition.js';
+import type ElementDefinition from '../view/elementdefinition.js';
-import type { MatcherPattern } from '@ckeditor/ckeditor5-engine/src/view/matcher.js';
+import type { MatcherPattern } from '../view/matcher.js';
 /**
  * A utility class that helps add converters to upcast and downcast dispatchers.
  *

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-engine/src/conversion/downcastdispatcher.d.ts

@@ -5,19 +5,19 @@
 /**
  * @module engine/conversion/downcastdispatcher
  */
-import Consumable from '@ckeditor/ckeditor5-engine/src/conversion/modelconsumable.js';
+import Consumable from './modelconsumable.js';
-import Range from '@ckeditor/ckeditor5-engine/src/model/range.js';
+import Range from '../model/range.js';
-import type { default as Differ, DiffItem } from '@ckeditor/ckeditor5-engine/src/model/differ.js';
+import type { default as Differ, DiffItem } from '../model/differ.js';
-import type { default as MarkerCollection } from '@ckeditor/ckeditor5-engine/src/model/markercollection.js';
+import type { default as MarkerCollection } from '../model/markercollection.js';
-import type DocumentSelection from '@ckeditor/ckeditor5-engine/src/model/documentselection.js';
+import type DocumentSelection from '../model/documentselection.js';
-import type DowncastWriter from '@ckeditor/ckeditor5-engine/src/view/downcastwriter.js';
+import type DowncastWriter from '../view/downcastwriter.js';
-import type Element from '@ckeditor/ckeditor5-engine/src/model/element.js';
+import type Element from '../model/element.js';
-import type Item from '@ckeditor/ckeditor5-engine/src/model/item.js';
+import type Item from '../model/item.js';
-import type Mapper from '@ckeditor/ckeditor5-engine/src/conversion/mapper.js';
+import type Mapper from './mapper.js';
-import type Position from '@ckeditor/ckeditor5-engine/src/model/position.js';
+import type Position from '../model/position.js';
-import type Schema from '@ckeditor/ckeditor5-engine/src/model/schema.js';
+import type Schema from '../model/schema.js';
-import type Selection from '@ckeditor/ckeditor5-engine/src/model/selection.js';
+import type Selection from '../model/selection.js';
-import type ViewElement from '@ckeditor/ckeditor5-engine/src/view/element.js';
+import type ViewElement from '../view/element.js';
 declare const DowncastDispatcher_base: {
     new (): import("@ckeditor/ckeditor5-utils").Emitter;
     prototype: import("@ckeditor/ckeditor5-utils").Emitter;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-engine/src/conversion/downcasthelpers.d.ts

@@ -7,23 +7,23 @@
  *
  * @module engine/conversion/downcasthelpers
  */
-import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range.js';
+import ModelRange from '../model/range.js';
-import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection.js';
+import ModelSelection from '../model/selection.js';
-import ModelDocumentSelection from '@ckeditor/ckeditor5-engine/src/model/documentselection.js';
+import ModelDocumentSelection from '../model/documentselection.js';
-import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element.js';
+import ModelElement from '../model/element.js';
-import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position.js';
+import ModelPosition from '../model/position.js';
-import ViewAttributeElement from '@ckeditor/ckeditor5-engine/src/view/attributeelement.js';
+import ViewAttributeElement from '../view/attributeelement.js';
-import ConversionHelpers from '@ckeditor/ckeditor5-engine/src/conversion/conversionhelpers.js';
+import ConversionHelpers from './conversionhelpers.js';
-import type { default as DowncastDispatcher, DowncastConversionApi } from '@ckeditor/ckeditor5-engine/src/conversion/downcastdispatcher.js';
+import type { default as DowncastDispatcher, DowncastConversionApi } from './downcastdispatcher.js';
-import type ModelConsumable from '@ckeditor/ckeditor5-engine/src/conversion/modelconsumable.js';
+import type ModelConsumable from './modelconsumable.js';
-import type ModelNode from '@ckeditor/ckeditor5-engine/src/model/node.js';
+import type ModelNode from '../model/node.js';
-import type ModelItem from '@ckeditor/ckeditor5-engine/src/model/item.js';
+import type ModelItem from '../model/item.js';
-import type ModelTextProxy from '@ckeditor/ckeditor5-engine/src/model/textproxy.js';
+import type ModelTextProxy from '../model/textproxy.js';
-import type ModelText from '@ckeditor/ckeditor5-engine/src/model/text.js';
+import type ModelText from '../model/text.js';
-import type DowncastWriter from '@ckeditor/ckeditor5-engine/src/view/downcastwriter.js';
+import type DowncastWriter from '../view/downcastwriter.js';
-import type ElementDefinition from '@ckeditor/ckeditor5-engine/src/view/elementdefinition.js';
+import type ElementDefinition from '../view/elementdefinition.js';
-import type UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement.js';
+import type UIElement from '../view/uielement.js';
-import type ViewElement from '@ckeditor/ckeditor5-engine/src/view/element.js';
+import type ViewElement from '../view/element.js';
 import { type EventInfo, type PriorityString } from '@ckeditor/ckeditor5-utils';
 /**
  * Downcast conversion helper functions.

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-engine/src/conversion/mapper.d.ts

@@ -5,15 +5,15 @@
 /**
  * @module engine/conversion/mapper
  */
-import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position.js';
+import ModelPosition from '../model/position.js';
-import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range.js';
+import ModelRange from '../model/range.js';
-import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position.js';
+import ViewPosition from '../view/position.js';
-import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range.js';
+import ViewRange from '../view/range.js';
-import type ViewDocumentFragment from '@ckeditor/ckeditor5-engine/src/view/documentfragment.js';
+import type ViewDocumentFragment from '../view/documentfragment.js';
-import type ViewElement from '@ckeditor/ckeditor5-engine/src/view/element.js';
+import type ViewElement from '../view/element.js';
-import type ModelElement from '@ckeditor/ckeditor5-engine/src/model/element.js';
+import type ModelElement from '../model/element.js';
-import type ModelDocumentFragment from '@ckeditor/ckeditor5-engine/src/model/documentfragment.js';
+import type ModelDocumentFragment from '../model/documentfragment.js';
-import type ViewNode from '@ckeditor/ckeditor5-engine/src/view/node.js';
+import type ViewNode from '../view/node.js';
 declare const Mapper_base: {
     new (): import("@ckeditor/ckeditor5-utils").Emitter;
     prototype: import("@ckeditor/ckeditor5-utils").Emitter;

vendor/ckeditor5/node_modules/@ckeditor/ckeditor5-engine/src/conversion/modelconsumable.d.ts

@@ -5,11 +5,11 @@
 /**
  * @module engine/conversion/modelconsumable
  */
-import TextProxy from '@ckeditor/ckeditor5-engine/src/model/textproxy.js';
+import TextProxy from '../model/textproxy.js';
-import type Item from '@ckeditor/ckeditor5-engine/src/model/item.js';
+import type Item from '../model/item.js';
-import type Selection from '@ckeditor/ckeditor5-engine/src/model/selection.js';
+import type Selection from '../model/selection.js';
-import type DocumentSelection from '@ckeditor/ckeditor5-engine/src/model/documentselection.js';
+import type DocumentSelection from '../model/documentselection.js';
-import type Range from '@ckeditor/ckeditor5-engine/src/model/range.js';
+import type Range from '../model/range.js';
 /**
  * Manages a list of consumable values for the {@link module:engine/model/item~Item model items}.
  *