diff --git a/app/[locale]/(protected)/admin/add-experts/component/column.tsx b/app/[locale]/(protected)/admin/add-experts/component/column.tsx
index f4c66c85..dad8eee6 100644
--- a/app/[locale]/(protected)/admin/add-experts/component/column.tsx
+++ b/app/[locale]/(protected)/admin/add-experts/component/column.tsx
@@ -11,6 +11,12 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { Link } from "@/components/navigation";
+import { useToast } from "@/components/ui/use-toast";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { useRouter } from "next/navigation";
+import { deleteUser } from "@/service/management-user/management-user";
+import { stringify } from "querystring";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -30,9 +36,21 @@ const columns: ColumnDef<any>[] = [
     cell: ({ row }) => <span>MABES</span>,
   },
   {
-    accessorKey: "experience",
+    accessorKey: "userRolePlacements",
     header: "Posisi",
-    cell: ({ row }) => <span>{row.getValue("experience")}</span>,
+    cell: ({ row }) => {
+      const placements = row.original.userRolePlacements || [];
+      const placement = placements.find(
+        (p: any) => p.roleId === 11 || p.roleId === 12
+      );
+
+      let posisi = "-";
+      if (placement) {
+        posisi = placement.roleId === 11 ? "Koorkurator" : "Kurator";
+      }
+
+      return <span>{posisi}</span>;
+    },
   },
   {
     accessorKey: "role.name",
@@ -67,6 +85,37 @@ const columns: ColumnDef<any>[] = [
     header: "Actions",
     enableHiding: false,
     cell: ({ row }) => {
+      const { toast } = useToast();
+      const MySwal = withReactContent(Swal);
+      const router = useRouter();
+      const doDelete = async (id: number) => {
+        const response = await deleteUser(id);
+        if (response?.error) {
+          toast({
+            title: stringify(response?.message),
+            variant: "destructive",
+          });
+        }
+        toast({
+          title: "Success delete",
+        });
+
+        router.push("?dataChange=true");
+      };
+
+      const handleDelete = (id: number) => {
+        MySwal.fire({
+          title: "Apakah anda ingin menghapus data user?",
+          showCancelButton: true,
+          confirmButtonColor: "#dc3545",
+          confirmButtonText: "Iya",
+          cancelButtonText: "Tidak",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            doDelete(id);
+          }
+        });
+      };
       return (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -92,7 +141,7 @@ const columns: ColumnDef<any>[] = [
               </DropdownMenuItem>
             </Link>
             <DropdownMenuItem
-              // onClick={() => handleDeleteMedia(row.original.id)}
+              onClick={() => handleDelete(row.original.userKeycloakId)}
               className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
             >
               <Trash2 className="w-4 h-4 me-1.5" />
diff --git a/app/[locale]/(protected)/admin/add-experts/create/page.tsx b/app/[locale]/(protected)/admin/add-experts/create/page.tsx
index ab33ac6e..ca70af09 100644
--- a/app/[locale]/(protected)/admin/add-experts/create/page.tsx
+++ b/app/[locale]/(protected)/admin/add-experts/create/page.tsx
@@ -472,14 +472,14 @@ export default function AddExpertForm() {
                 )}
               </div>
             ))}
-            <Button
+            {/* <Button
               type="button"
               size="md"
               onClick={handleAddRow}
               disabled={placementRows.length >= 2} // optional: disable button if already 1 row added
             >
               Tambah
-            </Button>
+            </Button> */}
           </div>
 
           <div className="flex flex-row justify-end gap-2 mt-4 pt-4">
diff --git a/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx b/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx
index 0213be3c..ad0a8864 100644
--- a/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx
@@ -159,7 +159,7 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              {(roleId == 11 || roleId == 12) && (
+              {(roleId == 11 || roleId == 12 || roleId == 19) && (
                 <Link href={`/contributor/task-ta/detail/${row.original.id}`}>
                   <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                     <Eye className="w-4 h-4 me-1.5" />
@@ -175,7 +175,7 @@ const useTableColumns = () => {
                   </DropdownMenuItem>
                 </Link>
               )}
-              {roleId == 12 && (
+              {(roleId == 11 || roleId == 12 || roleId == 19) && (
                 <Link
                   href={`/contributor/task-ta/upload-task/${row.original.id}`}
                 >
diff --git a/app/[locale]/(protected)/contributor/task-ta/detail-upload/image/[id]/page.tsx b/app/[locale]/(protected)/contributor/task-ta/detail-upload/image/[id]/page.tsx
new file mode 100644
index 00000000..4713ac39
--- /dev/null
+++ b/app/[locale]/(protected)/contributor/task-ta/detail-upload/image/[id]/page.tsx
@@ -0,0 +1,15 @@
+import FormImageDetail from "@/components/form/content/task-ta/image-detail-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+const ImageDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormImageDetail />
+      </div>
+    </div>
+  );
+};
+
+export default ImageDetailPage;
diff --git a/app/[locale]/(protected)/contributor/task-ta/page.tsx b/app/[locale]/(protected)/contributor/task-ta/page.tsx
index d891a3e7..b1b9a4c5 100644
--- a/app/[locale]/(protected)/contributor/task-ta/page.tsx
+++ b/app/[locale]/(protected)/contributor/task-ta/page.tsx
@@ -38,7 +38,7 @@ const TaskTaPage = () => {
                   {t("tabel")} {t("task-ta")}
                 </div>
                 <div className="flex-none">
-                  {roleId !== 12 && roleId !== 19 && (
+                  {roleId !== 12 && (
                     <Link href={"/contributor/task-ta/create"}>
                       <Button color="primary" className="text-white">
                         <UploadIcon size={18} className="mr-2" />
diff --git a/components/form/content/task-ta/audio-detail-form.tsx b/components/form/content/task-ta/audio-detail-form.tsx
new file mode 100644
index 00000000..d3f28fb7
--- /dev/null
+++ b/components/form/content/task-ta/audio-detail-form.tsx
@@ -0,0 +1,926 @@
+"use client";
+import React, { ChangeEvent, 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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  rejectFiles,
+  submitApproval,
+} from "@/service/content/content";
+import {
+  detailMedia,
+  getDataApprovalByMediaUpload,
+} from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { MailIcon, Music } from "lucide-react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import "swiper/css";
+import "swiper/css/navigation";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+import {
+  DialogHeader,
+  DialogFooter,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { loading } from "@/config/swal";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { error } from "@/lib/swal";
+import dynamic from "next/dynamic";
+import WavesurferPlayer from "@wavesurfer/react";
+import WaveSurfer from "wavesurfer.js";
+import { useTranslations } from "next-intl";
+import SuggestionModal from "@/components/modal/suggestions-modal";
+import { formatDateToIndonesian } from "@/utils/globals";
+import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
+
+const imageSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type FileType = {
+  id: number;
+  url: string;
+  thumbnailFileUrl: string;
+  fileName: string;
+};
+
+type Detail = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  category: {
+    id: number;
+    name: string;
+  };
+  categoryName: string;
+  creatorName: string;
+  thumbnailLink: string;
+  tags: string;
+  statusName: string;
+  isPublish: boolean;
+  needApprovalFromLevel: number;
+  files: FileType[];
+  uploadedById: number;
+};
+
+const ViewEditor = dynamic(
+  () => {
+    return import("@/components/editor/view-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormAudioDetail() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const userId = getCookiesDecrypt("uie");
+  const userLevelId = getCookiesDecrypt("ulie");
+  const roleId = getCookiesDecrypt("urie");
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const editor = useRef(null);
+  type ImageSchema = z.infer<typeof imageSchema>;
+
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+  const [status, setStatus] = useState("");
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [detail, setDetail] = useState<any>();
+  const [refresh, setRefresh] = useState(false);
+  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [description, setDescription] = useState("");
+  const [main, setMain] = useState<any>([]);
+  const [detailThumb, setDetailThumb] = useState<any>([]);
+  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
+
+  const t = useTranslations("Form");
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
+  const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
+  const [audioPlaying, setAudioPlaying] = useState<any>(null);
+  const [filePlacements, setFilePlacements] = useState<string[][]>([]);
+
+  const waveSurferRef = useRef<any>(null);
+
+  const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [approval, setApproval] = useState<any>();
+
+  const onReady = (ws: any) => {
+    setWavesurfer(ws);
+    setIsPlaying(false);
+  };
+
+  const onPlayPause = () => {
+    wavesurfer && wavesurfer.playPause();
+  };
+
+  let fileTypeId = "4";
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<ImageSchema>({
+    resolver: zodResolver(imageSchema),
+  });
+
+  // const handleKeyDown = (e: any) => {
+  //   const newTag = e.target.value.trim(); // Ambil nilai input
+  //   if (e.key === "Enter" && newTag) {
+  //     e.preventDefault(); // Hentikan submit form
+  //     if (!tags.includes(newTag)) {
+  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
+  //       setValue("tags", ""); // Kosongkan input
+  //     }
+  //   }
+  // };
+
+  useEffect(() => {
+    if (
+      userLevelId != undefined &&
+      roleId != undefined &&
+      userLevelId == "216" &&
+      roleId == "3"
+    ) {
+      setIsUserMabesApprover(true);
+    }
+  }, [userLevelId, roleId]);
+
+  const handleCheckboxChange = (id: number) => {
+    setSelectedPublishers((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data.data.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  const setupPlacementCheck = (length: number) => {
+    const temp = [];
+    for (let i = 0; i < length; i++) {
+      temp.push([]);
+    }
+    setFilePlacements(temp);
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+        console.log("detail", details);
+        setFiles(details?.files);
+        setDetail(details);
+        setMain({
+          type: details?.fileType.name,
+          url: details?.files[0]?.url,
+          names: details?.files[0]?.fileName,
+          format: details?.files[0]?.format,
+        });
+        setupPlacementCheck(details?.files?.length);
+
+        if (details.publishedForObject) {
+          const publisherIds = details.publishedForObject.map(
+            (obj: any) => obj.id
+          );
+          setSelectedPublishers(publisherIds);
+        }
+
+        const matchingCategory = categories.find(
+          (category) => category.id === details.categoryId
+        );
+
+        if (matchingCategory) {
+          setSelectedTarget(matchingCategory.name);
+        }
+
+        setSelectedTarget(details.categoryId); // Untuk dropdown
+
+        const filesData = details.files || [];
+        const audioFiles = filesData.filter(
+          (file: any) =>
+            file.contentType && file.contentType.startsWith("video/webm")
+        );
+
+        const fileUrls = audioFiles.map((file: { secondaryUrl: string }) =>
+          file.secondaryUrl ? file.secondaryUrl : "default-audio.mp3"
+        );
+
+        setDetailThumb(fileUrls);
+
+        const approvals = await getDataApprovalByMediaUpload(details?.id);
+        setApproval(approvals?.data?.data);
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const actionApproval = (e: string) => {
+    const temp = [];
+    for (const element of detail.files) {
+      temp.push([]);
+    }
+    setFilePlacements(temp);
+    setStatus(e);
+    setFiles(detail.files);
+
+    setDescription("");
+    setModalOpen(true);
+  };
+
+  const submit = async () => {
+    if (
+      (description?.length > 1 && Number(status) == 3) ||
+      Number(status) == 2 ||
+      Number(status) == 4
+    ) {
+      save();
+
+      // MySwal.fire({
+      //   title: "Simpan Approval",
+      //   text: "",
+      //   icon: "warning",
+      //   showCancelButton: true,
+      //   cancelButtonColor: "#d33",
+      //   confirmButtonColor: "#3085d6",
+      //   confirmButtonText: "Simpan",
+      // }).then((result) => {
+      //   if (result.isConfirmed) {
+      //   }
+      // });
+    }
+  };
+
+  const getPlacement = () => {
+    console.log("getPlaa", filePlacements);
+    const temp = [];
+    for (let i = 0; i < filePlacements?.length; i++) {
+      if (filePlacements[i].length !== 0) {
+        const now = filePlacements[i].filter((a) => a !== "all");
+        const data = { mediaFileId: files[i].id, placements: now.join(",") };
+        temp.push(data);
+      }
+    }
+    return temp;
+  };
+
+  async function save() {
+    const data = {
+      mediaUploadId: id,
+      statusId: status,
+      message: description,
+      // files: [],
+      files: isUserMabesApprover ? getPlacement() : [],
+    };
+    setModalOpen(false);
+    loading();
+    const response = await submitApproval(data);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    const dataReject = {
+      listFiles: rejectedFiles,
+    };
+
+    const resReject = await rejectFiles(dataReject);
+
+    if (resReject?.error) {
+      error(resReject.message);
+      return false;
+    }
+
+    close();
+    submitApprovalSuccesss();
+
+    return false;
+  }
+
+  function handleDeleteFileApproval(id: number) {
+    const selectedFiles = files.filter((file) => file.id != id);
+    setFiles(selectedFiles);
+    const rejects = rejectedFiles;
+    rejects.push(id);
+    setRejectedFiles(rejects);
+  }
+
+  const setupPlacement = (
+    index: number,
+    placement: string,
+    checked: boolean
+  ) => {
+    let temp = [...filePlacements];
+    if (checked) {
+      if (placement === "all") {
+        temp[index] = ["all", "mabes", "polda", "international"];
+      } else {
+        const now = temp[index];
+        now.push(placement);
+        if (now.length === 3 && !now.includes("all")) {
+          now.push("all");
+        }
+        temp[index] = now;
+      }
+    } else {
+      if (placement === "all") {
+        temp[index] = [];
+      } else {
+        const now = temp[index].filter((a) => a !== placement);
+        console.log("now", now);
+        temp[index] = now;
+        if (now.length === 3 && now.includes("all")) {
+          const newData = now.filter((b) => b !== "all");
+          temp[index] = newData;
+        }
+      }
+    }
+    setFilePlacements(temp);
+  };
+
+  const handleMain = (
+    type: string,
+    url: string,
+    names: string,
+    format: string
+  ) => {
+    console.log("Test 3 :", type, url, names, format);
+    setMain({
+      type,
+      url,
+      names,
+      format,
+    });
+    return false;
+  };
+
+  const handleAudioPlayPause = (audioSrc: string) => {
+    if (audioPlaying === audioSrc) {
+      setAudioPlaying(null); // Pause if the same audio is clicked
+    } else {
+      setAudioPlaying(audioSrc); // Play the new audio
+    }
+  };
+
+  const submitApprovalSuccesss = () => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/in/contributor/content/audio");
+    });
+  };
+
+  return (
+    <form>
+      {detail !== undefined ? (
+        <div className="flex flex-col lg:flex-row gap-10">
+          <Card className="w-full lg:w-8/12">
+            <div className="px-6 py-6">
+              <p className="text-lg font-semibold mb-3">{t("form-audio")}</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>{t("title")}</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 items-center">
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
+                    <Select
+                      value={detail?.category.name} // Nilai default berdasarkan detail
+                      onValueChange={(id) => {
+                        console.log("Selected Category:", id);
+                        setSelectedTarget(id);
+                      }}
+                    >
+                      <SelectTrigger size="md">
+                        <SelectValue placeholder="Pilih" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {categories.map((category) => (
+                          <SelectItem key={category.id} value={category.name}>
+                            {category.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <ViewEditor initialData={detail?.htmlDescription} />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+
+                <Label className="text-xl space-y-2">{t("file-media")}</Label>
+                <div className="w-full">
+                  <div className={"container example"}>
+                    {detailThumb?.map((url: any, index: number) => (
+                      <div key={url.id}>
+                        <WavesurferPlayer
+                          height={500}
+                          waveColor="red"
+                          url={url}
+                          onReady={onReady}
+                          onPlay={() => setIsPlaying(true)}
+                          onPause={() => setIsPlaying(false)}
+                        />
+                      </div>
+                    ))}
+                    <Button
+                      size="sm"
+                      type="button"
+                      onClick={onPlayPause}
+                      disabled={isPlaying}
+                      className={`flex items-center gap-2 ${
+                        isPlaying
+                          ? "bg-gray-300 cursor-not-allowed"
+                          : "bg-primary text-white"
+                      } p-2 rounded`}
+                    >
+                      {isPlaying ? "Pause" : "Play"}
+                      <Icon
+                        icon={
+                          isPlaying
+                            ? "carbon:pause-outline"
+                            : "famicons:play-sharp"
+                        }
+                        className="h-5 w-5"
+                      />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-full lg:w-4/12">
+            <Card className="pb-3">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("creator")}</Label>
+                  <Controller
+                    control={control}
+                    name="creatorName"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        value={detail?.creatorName}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.creatorName?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.creatorName.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("tags")}</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {detail?.tags
+                      ?.split(",")
+                      .map((tag: string, index: number) => (
+                        <Badge
+                          key={index}
+                          className="border rounded-md  px-2 py-2"
+                        >
+                          {tag.trim()}
+                        </Badge>
+                      ))}
+                  </div>
+                </div>
+              </div>
+              <div className="px-3 py-3">
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="5"
+                      checked={selectedPublishers.includes(5)}
+                      onChange={() => handleCheckboxChange(5)}
+                    />
+                    <Label htmlFor="5">UMUM</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="6"
+                      checked={selectedPublishers.includes(6)}
+                      onChange={() => handleCheckboxChange(6)}
+                    />
+                    <Label htmlFor="6">JOURNALIS</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="7"
+                      checked={selectedPublishers.includes(7)}
+                      onChange={() => handleCheckboxChange(7)}
+                    />
+                    <Label htmlFor="7">POLRI</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="8"
+                      checked={selectedPublishers.includes(8)}
+                      onChange={() => handleCheckboxChange(8)}
+                    />
+                    <Label htmlFor="8">KSP</Label>
+                  </div>
+                </div>
+              </div>
+              <SuggestionModal
+                id={Number(id)}
+                numberOfSuggestion={detail?.numberOfSuggestion}
+              />
+              <div className="px-3 py-3 border mx-3">
+                <p>{t("information")}:</p>
+                <p className="text-sm text-slate-400">{detail?.statusName}</p>
+                <p>Komentar</p>
+                <p>{approval?.message}</p>
+                <p className="text-right text-sm">
+                  {" "}
+                  {approval?.approvalBy?.fullname} |{" "}
+                  {formatDateToIndonesian(approval?.approvalDate)}
+                </p>
+                <ApprovalHistoryModal id={Number(id)} />
+              </div>
+              {/* {detail?.isPublish == false ? (
+                <div className="p-3">
+                  <Button className="bg-blue-600">Publish</Button>
+                </div>
+              ) : (
+                ""
+              )} */}
+
+              <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+                <DialogContent size="md">
+                  <DialogHeader>
+                    <DialogTitle>{t("leave-comment")}</DialogTitle>
+                  </DialogHeader>
+                  {status == "2"
+                    ? files?.map((file, index) => (
+                        <div
+                          key={file.id}
+                          className="flex flex-row gap-2 items-center"
+                        >
+                          {/* <img src={file.url} className="w-[200px]" /> */}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="48"
+                            height="48"
+                            viewBox="0 0 20 20"
+                          >
+                            <path
+                              fill="currentColor"
+                              d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
+                            />
+                          </svg>{" "}
+                          <div className="flex flex-col gap-2 w-full">
+                            <div className="flex justify-between text-sm">
+                              {file.fileName}
+                              <a
+                                onClick={() =>
+                                  handleDeleteFileApproval(file.id)
+                                }
+                              >
+                                <Icon icon="humbleicons:times" color="red" />
+                              </a>
+                            </div>
+                            {isUserMabesApprover && (
+                              <div className="flex flex-row gap-2">
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    value="all"
+                                    checked={filePlacements[index]?.includes(
+                                      "all"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(index, "all", Boolean(e))
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    {t("all")}
+                                  </label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    checked={filePlacements[index]?.includes(
+                                      "mabes"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(index, "mabes", Boolean(e))
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    Nasional
+                                  </label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    checked={filePlacements[index]?.includes(
+                                      "polda"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(index, "polda", Boolean(e))
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    Wilayah
+                                  </label>
+                                </div>
+
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    checked={filePlacements[index]?.includes(
+                                      "international"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(
+                                        index,
+                                        "international",
+                                        Boolean(e)
+                                      )
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    Internasional
+                                  </label>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))
+                    : ""}
+                  <div className="flex flex-col gap-4">
+                    <Textarea
+                      placeholder="Type your message here."
+                      value={description}
+                      onChange={(e) => setDescription(e.target.value)}
+                    />
+                  </div>
+                  {status == "3" || status == "4" ? (
+                    <div className="flex flex-row gap-2">
+                      <Badge
+                        color={
+                          description === "Kualitas media kurang baik"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setDescription("Kualitas media kurang baik")
+                        }
+                      >
+                        Kualitas media kurang baik
+                      </Badge>
+
+                      <Badge
+                        color={
+                          description === "Deskripsi kurang lengkap"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setDescription("Deskripsi kurang lengkap")
+                        }
+                      >
+                        Deskripsi kurang lengkap
+                      </Badge>
+                      <Badge
+                        color={
+                          description === "Judul kurang tepat"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Judul kurang tepat")}
+                      >
+                        Judul kurang tepat
+                      </Badge>
+                    </div>
+                  ) : (
+                    <div className="flex flex-row gap-2">
+                      <Badge
+                        color={
+                          description === "Konten sangat bagus"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Konten sangat bagus")}
+                      >
+                        Konten sangat bagus
+                      </Badge>
+                      <Badge
+                        color={
+                          description === "Konten menarik"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Konten menarik")}
+                      >
+                        Konten menarik
+                      </Badge>
+                    </div>
+                  )}
+                  <DialogFooter>
+                    <Button
+                      type="button"
+                      color="primary"
+                      onClick={() => submit()}
+                    >
+                      {t("submit")}
+                    </Button>
+                    <Button
+                      type="button"
+                      color="destructive"
+                      onClick={() => {
+                        setModalOpen(false);
+                      }}
+                    >
+                      {t("cancel")}
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </Card>
+            {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
+              Number(detail?.uploadedById) == Number(userId) ? (
+                ""
+              ) : (
+                <div className="flex flex-col gap-2 p-3">
+                  <Button
+                    onClick={() => actionApproval("2")}
+                    color="primary"
+                    type="button"
+                  >
+                    <Icon icon="fa:check" className="mr-3" /> {t("accept")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("3")}
+                    className="bg-orange-400 hover:bg-orange-300"
+                    type="button"
+                  >
+                    <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                    {t("revision")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("4")}
+                    color="destructive"
+                    type="button"
+                  >
+                    <Icon icon="fa:times" className="mr-3" />
+                    {t("reject")}
+                  </Button>
+                </div>
+              )
+            ) : (
+              ""
+            )}
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/audio-form.tsx b/components/form/content/task-ta/audio-form.tsx
new file mode 100644
index 00000000..8da158ab
--- /dev/null
+++ b/components/form/content/task-ta/audio-form.tsx
@@ -0,0 +1,1143 @@
+"use client";
+import React, {
+  ChangeEvent,
+  useEffect,
+  useRef,
+  Fragment,
+  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 { Upload } from "tus-js-client";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { redirect, 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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/service/content/content";
+import { uploadThumbnailBlog } from "@/service/blog/blog";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/service/content/ai";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react";
+import { CloudUpload } from "lucide-react";
+import Image from "next/image";
+import { error, loading } from "@/config/swal";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import dynamic from "next/dynamic";
+import { getCsrfToken } from "@/service/auth";
+import { Link } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type Option = {
+  id: string;
+  label: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormAudio() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type AudioSchema = z.infer<typeof audioSchema>;
+
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+  const roleId = getCookiesDecrypt("urie");
+
+  const t = useTranslations("Form");
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [thumbnail, setThumbnail] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [selectedLanguage, setSelectedLanguage] = useState("");
+
+  const [selectedSEO, setSelectedSEO] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
+  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
+  const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
+
+  const [articleIds, setArticleIds] = useState<string[]>([]);
+  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
+  const [articleBody, setArticleBody] = useState<string>("");
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
+    null
+  );
+  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
+  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
+  const [selectedSize, setSelectedSize] = useState("");
+  const [detailData, setDetailData] = useState<any>(null);
+  const [articleImages, setArticleImages] = useState<string[]>([]);
+  const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  let fileTypeId = "4";
+  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 [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+
+  const options: Option[] = [
+    { id: "all", label: "SEMUA" },
+    { id: "5", label: "UMUM" },
+    { id: "6", label: "JOURNALIS" },
+    { id: "7", label: "POLRI" },
+    { id: "8", label: "KSP" },
+  ];
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    accept: {
+      "audio/*": [],
+    },
+  });
+
+  const audioSchema = z.object({
+    title: z.string().min(1, { message: "Judul diperlukan" }),
+    description: z
+      .string()
+      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
+      .or(
+        z.literal(articleBody || "").refine((val) => val.length > 0, {
+          message: "Deskripsi diperlukan.",
+        })
+      ),
+    creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+    // tags: z.string().min(1, { message: "Judul diperlukan" }),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useForm<AudioSchema>({
+    resolver: zodResolver(audioSchema),
+  });
+
+  const doGenerateMainKeyword = async () => {
+    console.log(selectedMainKeyword);
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const titleData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for title with data:", titleData);
+        const titleRes = await getGenerateTitle(titleData);
+        setTitle(titleRes?.data?.data || "");
+        console.log("Generated title:", titleRes?.data?.data);
+
+        const keywordsData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for keywords with data:", keywordsData);
+        const keywordsRes = await getGenerateKeywords(keywordsData);
+        setSelectedSEO(keywordsRes?.data?.data || []);
+        console.log("Generated keywords:", keywordsRes?.data?.data);
+      } catch (error) {
+        console.error("Error during generation process:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const doGenerateTitle = async () => {
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const titleData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for title with data:", titleData);
+        const titleRes = await getGenerateTitle(titleData);
+        setTitle(titleRes?.data?.data || "");
+        console.log("Generated title:", titleRes?.data?.data);
+      } catch (error) {
+        console.error("Error generating title:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const doGenerateKeyword = async () => {
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const keywordsData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for keywords with data:", keywordsData);
+        const keywordsRes = await getGenerateKeywords(keywordsData);
+        setSelectedSEO(keywordsRes?.data?.data || []);
+        console.log("Generated keywords:", keywordsRes?.data?.data);
+      } catch (error) {
+        console.error("Error generating keywords:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const handleGenerateArtikel = async () => {
+    const request = {
+      advConfig: selectedAdvConfig,
+      style: selectedWritingStyle,
+      website: "None",
+      connectToWeb: true,
+      lang: selectedLanguage,
+      pointOfView: "None",
+      title: title,
+      imageSource: "Web",
+      mainKeyword: selectedMainKeyword,
+      additionalKeywords: selectedSEO,
+      targetCountry: null,
+      articleSize: selectedSize,
+      projectId: 2,
+      createdBy: roleId,
+      clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
+    };
+
+    const res = await generateDataArticle(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+  };
+
+  const handleArticleIdClick = async (id: string) => {
+    setIsLoadingData(true);
+    let retryCount = 0;
+    const maxRetries = 20;
+
+    try {
+      const waitForStatusUpdate = async () => {
+        while (retryCount < maxRetries) {
+          const res = await getDetailArticle(id);
+          const articleData = res?.data?.data;
+
+          if (articleData?.status === 2) {
+            return articleData;
+          }
+
+          retryCount++;
+          await new Promise((resolve) => setTimeout(resolve, 5000));
+        }
+
+        throw new Error("Timeout: Artikel belum selesai diproses.");
+      };
+      const articleData = await waitForStatusUpdate();
+      const cleanArticleBody = articleData?.articleBody?.replace(
+        /<img[^>]*>/g,
+        ""
+      );
+      const articleImagesData = articleData?.imagesUrl?.split(",");
+      setArticleBody(cleanArticleBody || "");
+      setDetailData(articleData);
+      setSelectedArticleId(id);
+      setArticleImages(articleImagesData || []);
+    } catch (error) {
+      console.error("Error fetching article details:", error);
+    } finally {
+      setIsLoadingData(false);
+    }
+  };
+
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && e.currentTarget.value.trim()) {
+      e.preventDefault();
+      const newTag = e.currentTarget.value.trim();
+      if (!tags.includes(newTag)) {
+        setTags((prevTags) => [...prevTags, newTag]); // Add new tag
+        if (inputRef.current) {
+          inputRef.current.value = ""; // Clear input field
+        }
+      }
+    }
+  };
+
+  const handleRemoveTag = (index: number) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // Remove tag
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+      // setVideoActive(fileTypeId == '2');
+      // getRoles();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data?.data?.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  const handleCheckboxChange = (id: string): void => {
+    if (id === "all") {
+      if (publishedFor.includes("all")) {
+        // Uncheck all checkboxes
+        setPublishedFor([]);
+      } else {
+        // Select all checkboxes
+        setPublishedFor(
+          options
+            .filter((opt: any) => opt.id !== "all")
+            .map((opt: any) => opt.id)
+        );
+      }
+    } else {
+      const updatedPublishedFor = publishedFor.includes(id)
+        ? publishedFor.filter((item) => item !== id)
+        : [...publishedFor, id];
+
+      // Remove "all" if any checkbox is unchecked
+      if (publishedFor.includes("all") && id !== "all") {
+        setPublishedFor(updatedPublishedFor.filter((item) => item !== "all"));
+      } else {
+        setPublishedFor(updatedPublishedFor);
+      }
+    }
+  };
+
+  const save = async (data: AudioSchema) => {
+    loading();
+    const finalTags = tags.join(", ");
+    const finalTitle = isSwitchOn ? title : data.title;
+    const finalDescription = articleBody || data.description;
+    if (!finalDescription.trim()) {
+      MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
+      return;
+    }
+
+    let requestData: {
+      title: string;
+      description: string;
+      htmlDescription: string;
+      fileTypeId: string;
+      categoryId: any;
+      subCategoryId: any;
+      uploadedBy: string;
+      statusId: string;
+      publishedFor: string;
+      creatorName: string;
+      tags: string;
+      isYoutube: boolean;
+      isInternationalMedia: boolean;
+      attachFromScheduleId?: number; // ✅ Tambahkan properti ini
+    } = {
+      ...data,
+      title: finalTitle,
+      description: finalDescription,
+      htmlDescription: finalDescription,
+      fileTypeId,
+      categoryId: selectedCategory,
+      subCategoryId: selectedCategory,
+      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+      statusId: "1",
+      publishedFor: publishedFor.join(","),
+      creatorName: data.creatorName,
+      tags: finalTags,
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    let id = Cookies.get("idCreate");
+
+    if (scheduleId !== undefined) {
+      requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
+    }
+
+    if (id == undefined) {
+      const response = await createMedia(requestData);
+      console.log("Form Data Submitted:", requestData);
+
+      if (response?.error) {
+        MySwal.fire("Error", response?.message, "error");
+        return;
+      }
+      Cookies.set("idCreate", response?.data?.data, { expires: 1 });
+      id = response?.data?.data;
+
+      // Upload Thumbnail
+      const formMedia = new FormData();
+      console.log("Thumbnail : ", files[0]);
+      formMedia.append("file", files[0]);
+      const responseThumbnail = await uploadThumbnail(id, formMedia);
+      if (responseThumbnail?.error == true) {
+        error(responseThumbnail?.message);
+        return false;
+      }
+    }
+
+    // Upload File
+    const progressInfoArr = [];
+    for (const item of files) {
+      progressInfoArr.push({ percentage: 0, fileName: item.name });
+    }
+    progressInfo = progressInfoArr;
+    setIsStartUpload(true);
+    setProgressList(progressInfoArr);
+
+    close();
+    // showProgress();
+    files.map(async (item: any, index: number) => {
+      await uploadResumableFile(index, String(id), item, "0");
+    });
+
+    Cookies.remove("idCreate");
+
+    // MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
+  };
+
+  const onSubmit = (data: AudioSchema) => {
+    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);
+      }
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    duration: string
+  ) {
+    console.log(idx, id, file, duration);
+
+    // const placements = getPlacement(file.placements);
+    // console.log("Placementttt:  : ", placements);
+
+    const resCsrf = await getCsrfToken();
+    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}/media/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        mediaid: id,
+        filename: file.name,
+        filetype: file.type,
+        duration,
+        isWatermark: "false", // hardcode
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        progressInfo[idx].percentage = uploadPersen;
+        counterUpdateProgress++;
+        console.log(counterUpdateProgress);
+        setProgressList(progressInfo);
+        setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        uploadPersen = 100;
+        progressInfo[idx].percentage = 100;
+        counterUpdateProgress++;
+        setCounterProgress(counterUpdateProgress);
+        successTodo();
+      },
+    });
+
+    upload.start();
+  }
+
+  const successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  function successTodo() {
+    let counter = 0;
+    for (const element of progressInfo) {
+      if (element.percentage == 100) {
+        counter++;
+      }
+    }
+    if (counter == progressInfo.length) {
+      setIsStartUpload(false);
+      // hideProgress();
+      Cookies.remove("idCreate");
+      successSubmit("/in/contributor/content/audio");
+    }
+  }
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setThumbnail(file);
+      console.log("Selected Thumbnail:", file);
+    }
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+    }
+  };
+
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file.type.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
+
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const fileList = files.map((file) => (
+    <div
+      key={file.name}
+      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        {/* <div className="file-preview">{renderFilePreview(file)}</div> */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fill="currentColor"
+            d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
+          />
+        </svg>{" "}
+        <div>
+          <div className=" text-sm  text-card-foreground">{file.name}</div>
+          <div className=" text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className=" border-none rounded-full"
+        onClick={() => handleRemoveFile(file)}
+      >
+        <Icon icon="tabler:x" className=" h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+  };
+
+  useEffect(() => {
+    // Jika input title kosong, isi dengan hasil generate title
+    if (!getValues("title") && title) {
+      setValue("title", title);
+    }
+  }, [title, getValues, setValue]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col lg:flex-row gap-10">
+        <Card className="w-full lg:w-8/12">
+          <div className="px-6 py-6">
+            <p className="text-lg font-semibold mb-3">{t("form-audio")}</p>
+            <div className="gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2 py-3">
+                <Label>{t("title")}</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.title?.message && (
+                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                )}
+              </div>
+
+              <div className="flex items-center">
+                <div className="py-3 w-full space-y-2">
+                  <Label>{t("category")}</Label>
+                  <Select
+                    value={selectedCategory} // Ensure selectedTarget is updated correctly
+                    onValueChange={(id) => {
+                      console.log("Selected Category ID:", id);
+                      setSelectedCategory(id);
+                    }}
+                  >
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {categories.map((category) => (
+                        <SelectItem
+                          key={category.id}
+                          value={category.id.toString()}
+                        >
+                          {category.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="flex flex-row items-center gap-3 py-2">
+                <Label>{t("ai-assistance")}</Label>
+                <div className="flex items-center gap-3">
+                  <Switch
+                    defaultChecked={isSwitchOn}
+                    color="primary"
+                    id="c2"
+                    onCheckedChange={(checked: boolean) =>
+                      setIsSwitchOn(checked)
+                    }
+                  />
+                </div>
+              </div>
+              {isSwitchOn && (
+                <div>
+                  <div className="flex flex-row gap-3">
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("language")}</Label>
+                      <Select onValueChange={setSelectedLanguage}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="id">Indonesia</SelectItem>
+                          <SelectItem value="en">English</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("writing-style")}</Label>
+                      <Select onValueChange={setSelectedWritingStyle}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="friendly">Friendly</SelectItem>
+                          <SelectItem value="profesional">
+                            Profesional
+                          </SelectItem>
+                          <SelectItem value="informational">
+                            Informational
+                          </SelectItem>
+                          <SelectItem value="neutral">Neutral</SelectItem>
+                          <SelectItem value="witty">Witty</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("article-size")}</Label>
+                      <Select onValueChange={setSelectedSize}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="news">
+                            News (300 - 900 words)
+                          </SelectItem>
+                          <SelectItem value="info">
+                            Info (900 - 2000 words)
+                          </SelectItem>
+                          <SelectItem value="detail">
+                            Detail (2000 - 5000 words)
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("main-keyword")}</Label>
+                      <Button
+                        variant="outline"
+                        color="primary"
+                        onClick={doGenerateMainKeyword}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Processing..." : "Proses"}
+                      </Button>
+                    </div>
+                    <div>
+                      <Input
+                        size="md"
+                        type="text"
+                        value={selectedMainKeyword}
+                        onChange={(e) => setSelectedMainKeyword(e.target.value)}
+                        placeholder="Enter Main Keyword"
+                      />
+                      {/* )}
+                  /> */}
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("title")}</Label>
+                      <Button
+                        variant="outline"
+                        color="primary"
+                        onClick={doGenerateTitle}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Generating..." : "Generate"}
+                      </Button>
+                    </div>
+                    <div>
+                      <Input
+                        size="md"
+                        type="text"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        placeholder="Generated Title"
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("seo")}</Label>
+                      <Button
+                        variant={"outline"}
+                        color="primary"
+                        onClick={doGenerateKeyword}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Generating..." : "Generate"}
+                      </Button>
+                    </div>
+                    <p className="font-semibold">
+                      {t("Keywords to include in the text")}
+                    </p>
+                    <p className="text-sm">{t("title-key")}</p>
+                    <div className="mt-3">
+                      <Textarea
+                        value={selectedSEO}
+                        onChange={(e) => setSelectedSEO(e.target.value)}
+                        placeholder="Enter Title"
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <Label>{t("special-instructions")} (Optional)</Label>
+                    <div className="mt-3">
+                      <Controller
+                        control={control}
+                        name="title"
+                        render={({ field }) => (
+                          <Textarea
+                            value={field.value}
+                            onChange={field.onChange}
+                            placeholder="Enter Title"
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <div className="my-5">
+                      <Button
+                        // variant={"outline"}
+                        color="primary"
+                        onClick={handleGenerateArtikel}
+                        size="sm"
+                        type="button"
+                      >
+                        Generate Article
+                      </Button>
+                    </div>
+
+                    {isGeneratedArticle && (
+                      <div className="mt-3 pb-0 flex flex-row ">
+                        {articleIds.map((id: string, index: number) => (
+                          <p
+                            key={index}
+                            className={`mr-3 px-3 py-2 rounded-md ${
+                              selectedArticleId === id
+                                ? "bg-green-500 text-white"
+                                : "border-2 border-green-500 text-green-500"
+                            }`}
+                            onClick={() => handleArticleIdClick(id)}
+                          >
+                            {"Narasi " + (index + 1)}
+                          </p>
+                        ))}
+                      </div>
+                    )}
+
+                    <div className="pt-3">
+                      <div className="flex flex-row justify-between items-center">
+                        {selectedArticleId && (
+                          <Link
+                            href={`/contributor/content/audio/update-seo/${selectedArticleId}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <Button
+                              className="mb-2"
+                              size="sm"
+                              variant={"outline"}
+                              color="primary"
+                            >
+                              {t("update")}
+                            </Button>
+                          </Link>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+              <div className="space-y-2">
+                <Label>{t("description")}</Label>
+                <Controller
+                  control={control}
+                  name="description"
+                  render={({ field: { onChange, value } }) =>
+                    isLoadingData ? (
+                      <div className="flex justify-center items-center h-40">
+                        <p className="text-gray-500">Loading Proses Data...</p>
+                      </div>
+                    ) : (
+                      <CustomEditor
+                        onChange={onChange}
+                        initialData={articleBody || value}
+                      />
+                    )
+                  }
+                />
+                {errors.description?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.description.message}
+                  </p>
+                )}
+              </div>
+              <div className="py-3 space-y-2">
+                <Label>{t("select-file")}</Label>
+                {/* <Input
+                  id="fileInput"
+                  type="file"
+                  onChange={handleImageChange}
+                /> */}
+                <Fragment>
+                  <div {...getRootProps({ className: "dropzone" })}>
+                    <input {...getInputProps()} />
+                    <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                      <CloudUpload className="text-default-300 w-10 h-10" />
+                      <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                        {/* Drop files here or click to upload. */}
+                        {t("drag-file")}
+                      </h4>
+                      <div className=" text-xs text-muted-foreground">
+                        {t("upload-file-audio-max")}
+                      </div>
+                    </div>
+                  </div>
+                  {files.length ? (
+                    <Fragment>
+                      <div>{fileList}</div>
+                      <div className=" flex justify-between gap-2">
+                        {/* <div className="flex flex-row items-center gap-3 py-3">
+                          <Label>Gunakan Watermark</Label>
+                          <div className="flex items-center gap-3">
+                            <Switch defaultChecked color="primary" id="c2" />
+                          </div>
+                        </div> */}
+                        <Button
+                          color="destructive"
+                          onClick={handleRemoveAllFiles}
+                        >
+                          {t("remove-all")}
+                        </Button>
+                      </div>
+                    </Fragment>
+                  ) : null}
+                </Fragment>
+              </div>
+            </div>
+          </div>
+        </Card>
+        <div className="w-full lg:w-4/12">
+          <Card className="pb-3">
+            <div className="px-3 py-3">
+              <div className="space-y-2">
+                <Label>{t("creator")}</Label>
+                <Controller
+                  control={control}
+                  name="creatorName"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.creatorName?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.creatorName.message}
+                  </p>
+                )}
+              </div>
+            </div>
+            <div className="px-3 py-3 space-y-2">
+              <Label htmlFor="tags">{t("tags")}</Label>
+
+              <Input
+                type="text"
+                id="tags"
+                placeholder="Add a tag and press Enter"
+                onKeyDown={handleAddTag}
+                ref={inputRef}
+              />
+              <div className="mt-3 ">
+                {tags.map((tag, index) => (
+                  <span
+                    key={index}
+                    className=" px-1 py-1 rounded-lg bg-black text-white mr-2 text-sm font-sans"
+                  >
+                    {tag}{" "}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTag(index)}
+                      className="remove-tag-button"
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div className="px-3 py-3">
+              <div className="flex flex-col gap-3 space-y-2">
+                <Label>{t("publish-target")}</Label>
+                {options.map((option) => (
+                  <div key={option.id} className="flex gap-2 items-center">
+                    <Checkbox
+                      id={option.id}
+                      checked={
+                        option.id === "all"
+                          ? publishedFor.length ===
+                            options.filter((opt: any) => opt.id !== "all")
+                              .length
+                          : publishedFor.includes(option.id)
+                      }
+                      onCheckedChange={() => handleCheckboxChange(option.id)}
+                    />
+                    <Label htmlFor={option.id}>{option.label}</Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+          <div className="flex flex-row justify-end gap-3">
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                {t("submit")}
+              </Button>
+            </div>
+            <div className="mt-4">
+              <Button type="submit" color="primary" variant="outline">
+                {t("cancel")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/audio-update-form.tsx b/components/form/content/task-ta/audio-update-form.tsx
new file mode 100644
index 00000000..4c9cb9a1
--- /dev/null
+++ b/components/form/content/task-ta/audio-update-form.tsx
@@ -0,0 +1,1028 @@
+"use client";
+import React, {
+  ChangeEvent,
+  Fragment,
+  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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  deleteFile,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/service/content/content";
+import { detailMedia } from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { CloudUpload, MailIcon } from "lucide-react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import ReactAudioPlayer from "react-audio-player";
+import { FreeMode, Navigation, Thumbs } from "swiper/modules";
+import { useDropzone } from "react-dropzone";
+import Image from "next/image";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { error } from "@/lib/swal";
+import { getCsrfToken } from "@/service/auth";
+import { Upload } from "tus-js-client";
+import { useTranslations } from "next-intl";
+import dynamic from "next/dynamic";
+
+const audioSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type Detail = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  categoryId: {
+    id: number;
+    name: string;
+  };
+  creatorName: string;
+  categoryName: string;
+  thumbnailLink: string;
+  tags: string;
+};
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+type Option = {
+  id: string;
+  name: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormAudioUpdate() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const editor = useRef(null);
+  type AudioSchema = z.infer<typeof audioSchema>;
+
+  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 [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+
+  const t = useTranslations("Form");
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [detail, setDetail] = useState<Detail>();
+  const [refresh, setRefresh] = useState(false);
+  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [detailThumb, setDetailThumb] = useState<any>([]);
+  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [selectedOptions, setSelectedOptions] = useState<{
+    [fileId: number]: string[];
+  }>({});
+
+  const options: Option[] = [
+    { id: "all", name: "SEMUA" },
+    { id: "5", name: "UMUM" },
+    { id: "6", name: "JOURNALIS" },
+    { id: "7", name: "POLRI" },
+    { id: "8", name: "KSP" },
+  ];
+
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+  const [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [prevFiles, setPrefFiles] = useState([]);
+
+  let fileTypeId = "4";
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    accept: {
+      "audio/*": [],
+    },
+  });
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<AudioSchema>({
+    resolver: zodResolver(audioSchema),
+  });
+
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const files = Array.from(event.target.files);
+      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
+      console.log("DATAFILE::", selectedFiles);
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data.data.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && e.currentTarget.value.trim()) {
+      e.preventDefault();
+      const newTag = e.currentTarget.value.trim();
+      if (!tags.includes(newTag)) {
+        setTags((prevTags) => [...prevTags, newTag]); // Tambahkan tag baru
+        if (inputRef.current) {
+          inputRef.current.value = ""; // Kosongkan input
+        }
+      }
+    }
+  };
+
+  const handleRemoveTag = (index: number) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
+  };
+
+  const handleEditTag = (index: number, newValue: string) => {
+    setTags((prevTags) =>
+      prevTags.map((tag, i) => (i === index ? newValue : tag))
+    );
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+
+        if (details?.files) {
+          setPrefFiles(details.files);
+          // setFiles(details.files);
+          const initialOptions: { [key: number]: string[] } = {};
+          details.files.forEach((file: any) => {
+            if (file.placements) {
+              initialOptions[file.id] = mapPlacementsToOptions(file.placements);
+            }
+          });
+          setSelectedOptions(initialOptions);
+        }
+
+        if (details?.publishedFor) {
+          // Split string "7" to an array ["7"] if needed
+          setPublishedFor(details.publishedFor.split(","));
+        }
+
+        if (details?.tags) {
+          setTags(details.tags.split(",").map((tag: string) => tag.trim()));
+        }
+
+        const matchingCategory = categories.find(
+          (category) => category.id === details.categoryId
+        );
+
+        if (matchingCategory) {
+          setSelectedTarget(matchingCategory.name);
+        }
+
+        setSelectedTarget(details.categoryId);
+
+        const filesData = details.files || [];
+        const fileUrls = filesData.map((file: { secondaryUrl: string }) =>
+          file.secondaryUrl ? file.secondaryUrl : "default-image.jpg"
+        );
+        setDetailThumb(fileUrls);
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const mapPlacementsToOptions = (placements: string): string[] => {
+    const mapping: Record<string, string> = {
+      all: "all",
+      mabes: "nasional",
+      polda: "wilayah",
+      polres: "internasional",
+    };
+
+    // Jika placements hanya "all", langsung aktifkan semua checkbox
+    if (placements.trim() === "all") {
+      return ["all", "nasional", "wilayah", "internasional"];
+    }
+
+    const options = placements
+      .split(",")
+      .map((p) => mapping[p.trim()])
+      .filter(Boolean);
+
+    const allSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
+      options.includes(opt)
+    );
+
+    return allSelected ? ["all", ...options] : options;
+  };
+
+  const handleCheckboxChange = (id: string) => {
+    if (id === "all") {
+      // Select all options except "all"
+      const allOptions = options
+        .filter((opt) => opt.id !== "all")
+        .map((opt) => opt.id);
+      setPublishedFor(
+        publishedFor.length === allOptions.length ? [] : allOptions
+      );
+    } else {
+      // Toggle individual option
+      setPublishedFor((prev) =>
+        prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+      );
+    }
+  };
+
+  const save = async (data: AudioSchema) => {
+    const finalTags = tags.join(", ");
+    const requestData = {
+      ...data,
+      id: detail?.id,
+      title: data.title,
+      description: data.description,
+      htmlDescription: data.description,
+      fileTypeId,
+      categoryId: selectedTarget,
+      subCategoryId: selectedTarget,
+      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+      statusId: "1",
+      publishedFor: publishedFor.join(","),
+      creatorName: data.creatorName,
+      tags: finalTags,
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    const response = await createMedia(requestData);
+    console.log("Form Data Submitted:", requestData);
+
+    const formMedia = new FormData();
+    const thumbnail = files[0];
+    formMedia.append("file", thumbnail);
+    const responseThumbnail = await uploadThumbnail(id, formMedia);
+    if (responseThumbnail?.error == true) {
+      error(responseThumbnail?.message);
+      return false;
+    }
+
+    const progressInfoArr = [];
+    for (const item of files) {
+      progressInfoArr.push({ percentage: 0, fileName: item.name });
+    }
+    progressInfo = progressInfoArr;
+    setIsStartUpload(true);
+    setProgressList(progressInfoArr);
+
+    close();
+    // showProgress();
+    files.map(async (item: any, index: number) => {
+      await uploadResumableFile(index, String(id), item, "0");
+    });
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/in/contributor/content/audio");
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    duration: string
+  ) {
+    console.log(idx, id, file, duration);
+
+    // const placements = getPlacement(file.placements);
+    // console.log("Placementttt:  : ", placements);
+
+    const resCsrf = await getCsrfToken();
+    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}/media/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        mediaid: id,
+        filename: file.name,
+        filetype: file.type,
+        duration,
+        isWatermark: "false", // hardcode
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        progressInfo[idx].percentage = uploadPersen;
+        counterUpdateProgress++;
+        console.log(counterUpdateProgress);
+        setProgressList(progressInfo);
+        setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        uploadPersen = 100;
+        progressInfo[idx].percentage = 100;
+        counterUpdateProgress++;
+        setCounterProgress(counterUpdateProgress);
+        successTodo();
+      },
+    });
+
+    upload.start();
+  }
+
+  const onSubmit = (data: AudioSchema) => {
+    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 successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  function successTodo() {
+    let counter = 0;
+    for (const element of progressInfo) {
+      if (element.percentage == 100) {
+        counter++;
+      }
+    }
+    if (counter == progressInfo.length) {
+      setIsStartUpload(false);
+      // hideProgress();
+      Cookies.remove("idCreate");
+      successSubmit("/in/contributor/content/audio");
+    }
+  }
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+  };
+
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file?.type?.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
+
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const fileList = files.map((file: any) => (
+    <div
+      key={file.id} // Gunakan ID file sebagai key
+      className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fill="currentColor"
+            d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
+          />
+        </svg>{" "}
+        <div>
+          <div className="text-sm text-card-foreground">
+            {file.fileName || file.name}
+          </div>
+          <div className="text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className="border-none rounded-full"
+        onClick={() => handleRemoveFile(file)} // Kirim ID spesifik
+      >
+        <Icon icon="tabler:x" className="h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  const handleCheckboxChangeImage = (fileId: number, value: string) => {
+    setSelectedOptions((prev: any) => {
+      const currentSelections = prev[fileId] || [];
+      if (value === "all") {
+        // If "all" is clicked, toggle all options
+        if (currentSelections.includes("all")) {
+          return { ...prev, [fileId]: [] }; // Deselect all
+        }
+        return {
+          ...prev,
+          [fileId]: ["all", "nasional", "wilayah", "internasional"],
+        }; // Select all
+      } else {
+        // If any other checkbox is clicked, toggle that checkbox
+        const updatedSelections = currentSelections.includes(value)
+          ? currentSelections.filter((option: any) => option !== value)
+          : [...currentSelections, value];
+
+        // If all individual options are selected, include "all" automatically
+        const isAllSelected = ["nasional", "wilayah", "internasional"].every(
+          (opt) => updatedSelections.includes(opt)
+        );
+        return {
+          ...prev,
+          [fileId]: isAllSelected
+            ? ["all", ...updatedSelections]
+            : updatedSelections.filter((opt: any) => opt !== "all"),
+        };
+      }
+    });
+  };
+
+  function success() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        // window.location.reload();
+      }
+    });
+  }
+
+  const handleDeleteFile = (id: number) => {
+    MySwal.fire({
+      title: "Hapus file",
+      text: "Apakah Anda yakin ingin menghapus file ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#3085d6",
+      confirmButtonColor: "#d33",
+      confirmButtonText: "Hapus",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        doDelete(id);
+      }
+    });
+  };
+
+  async function doDelete(id: number) {
+    const data = { id };
+
+    try {
+      const response = await deleteFile(data);
+      if (response?.error) {
+        error(response.message);
+        return;
+      }
+
+      // Jika berhasil, hapus file dari state lokal
+      setFiles((prevFiles: any) =>
+        prevFiles.filter((file: any) => file.id !== id)
+      );
+      success();
+    } catch (err) {
+      error("Terjadi kesalahan saat menghapus file");
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {detail !== undefined ? (
+        <div className="flex flex-col lg:flex-row gap-10">
+          <Card className="w-full lg:w-8/12">
+            <div className="px-6 py-6">
+              <p className="text-lg font-semibold mb-3">{t("form-audio")}</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>{t("title")}</Label>
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        defaultValue={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 items-center">
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
+                    <Select
+                      defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
+                      onValueChange={(id) => {
+                        console.log("Selected Category:", id);
+                        setSelectedTarget(id);
+                      }}
+                    >
+                      <SelectTrigger size="md">
+                        <SelectValue placeholder="Pilih" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {categories.map((category) => (
+                          <SelectItem key={category.id} value={category.id}>
+                            {category.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <CustomEditor
+                        onChange={onChange}
+                        initialData={detail?.description || value}
+                      />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+                <div className="py-3 space-y-2">
+                  <Label>{t("select-file")}</Label>
+                  {/* <Input
+                                  id="fileInput"
+                                  type="file"
+                                  onChange={handleImageChange}
+                                /> */}
+                  <Fragment>
+                    <div {...getRootProps({ className: "dropzone" })}>
+                      <input {...getInputProps()} />
+                      <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                        <CloudUpload className="text-default-300 w-10 h-10" />
+                        <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                          {/* Drop files here or click to upload. */}
+                          {t("drag-file")}
+                        </h4>
+                        <div className=" text-xs text-muted-foreground">
+                          {t("upload-file-audio-max")}
+                        </div>
+                      </div>
+                    </div>
+                    {files.length ? (
+                      <Fragment>
+                        <div>{fileList}</div>
+                        <div className=" flex justify-between gap-2">
+                          {/* <div className="flex flex-row items-center gap-3 py-3">
+                            <Label>{t("watermark")}</Label>
+                            <div className="flex items-center gap-3">
+                              <Switch defaultChecked color="primary" id="c2" />
+                            </div>
+                          </div> */}
+                          {/* <Button
+                            color="destructive"
+                            onClick={handleRemoveAllFiles}
+                          >
+                            Remove All
+                          </Button> */}
+                        </div>
+                      </Fragment>
+                    ) : null}
+                    {prevFiles?.length > 0 &&
+                      prevFiles.map((file: any) => (
+                        <div
+                          key={file.id} // Gunakan ID file sebagai key
+                          className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
+                        >
+                          <div className="flex gap-3 items-center">
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="48"
+                              height="48"
+                              viewBox="0 0 20 20"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
+                              />
+                            </svg>{" "}
+                            <div>
+                              <div className="text-sm text-card-foreground">
+                                {file.fileName || file.name}
+                              </div>
+                              <div className="text-xs font-light text-muted-foreground">
+                                {Math.round(file.size / 100) / 10 > 1000 ? (
+                                  <>
+                                    {(
+                                      Math.round(file.size / 100) / 10000
+                                    ).toFixed(1)}
+                                  </>
+                                ) : (
+                                  <>
+                                    {(Math.round(file.size / 100) / 10).toFixed(
+                                      1
+                                    )}
+                                  </>
+                                )}
+                                {" kb"}
+                              </div>
+                            </div>
+                          </div>
+
+                          <Button
+                            size="icon"
+                            color="destructive"
+                            variant="outline"
+                            className="border-none rounded-full"
+                            onClick={() => handleDeleteFile(file.id)} // Kirim ID spesifik
+                          >
+                            <Icon icon="tabler:x" className="h-5 w-5" />
+                          </Button>
+                        </div>
+                      ))}
+                    {/* {files.length > 0 && (
+                      <div className="mt-4">
+                        <Label className="text-lg font-semibold">
+                          {" "}
+                          {t("file-media")}
+                        </Label>
+                        <div className="grid gap-4">
+                          {files.map((file: any) => (
+                            <div
+                              key={file.id}
+                              className="flex items-center border p-2 rounded-md"
+                            >
+                              <img
+                                src={file.thumbnailFileUrl}
+                                alt={file.fileName}
+                                className="w-16 h-16 object-cover rounded-md mr-4"
+                              />
+                              <div className="flex flex-wrap gap-3 items-center ">
+                                <div className="flex-grow">
+                                  <p className="font-medium">{file.fileName}</p>
+                                  <a
+                                    href={file.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-blue-500 text-sm"
+                                  >
+                                    {t("view-file")}
+                                  </a>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("all")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "all"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>{t("all")}</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("nasional")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "nasional"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Nasional</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("wilayah")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "wilayah"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Wilayah</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("internasional")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "internasional"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Internasional</span>
+                                  </Label>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )} */}
+                  </Fragment>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-full lg:w-4/12">
+            <Card className="pb-3">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("creator")}</Label>
+                  <Controller
+                    control={control}
+                    name="creatorName"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        defaultValue={detail?.creatorName}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.creatorName?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.creatorName.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("tags")}</Label>
+                  <Input
+                    type="text"
+                    id="tags"
+                    placeholder="Add a tag and press Enter"
+                    onKeyDown={handleAddTag}
+                    ref={inputRef}
+                  />
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    {tags.map((tag, index) => (
+                      <span
+                        key={index}
+                        className="flex  items-center gap-2 px-2 py-1 rounded-lg bg-black text-white text-sm"
+                      >
+                        <input
+                          type="text"
+                          value={tag}
+                          onChange={(e) => handleEditTag(index, e.target.value)}
+                          className="bg-black text-white border-none focus:outline-none w-auto"
+                        />
+                        <button
+                          value={tag}
+                          type="button"
+                          onClick={() => handleRemoveTag(index)}
+                          className="remove-tag-button text-white"
+                        >
+                          ×
+                        </button>
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div className="px-3 py-3">
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
+                  {options.map((option: Option) => (
+                    <div key={option.id} className="flex gap-2 items-center">
+                      <Checkbox
+                        id={option.id}
+                        checked={
+                          option.id === "all"
+                            ? publishedFor.length ===
+                              options.filter((opt) => opt.id !== "all").length
+                            : publishedFor.includes(option.id)
+                        }
+                        onCheckedChange={() => handleCheckboxChange(option.id)}
+                      />
+                      <Label htmlFor={option.id}>{option.name}</Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              {/* <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
+                <MailIcon />
+                <p className="">{t("suggestion-box")} (0)</p>
+              </div>
+              <div className="px-3 py-3">
+                <p>{t("information")}:</p>
+                <p>{detail?.status}</p>
+              </div> */}
+            </Card>
+            <div className="flex flex-row justify-end gap-3">
+              <div className="mt-4">
+                <Button type="submit" color="primary">
+                  {t("submit")}
+                </Button>
+              </div>
+              <div className="mt-4">
+                <Button type="submit" color="primary" variant="outline">
+                  {t("cancel")}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/image-detail-form.tsx b/components/form/content/task-ta/image-detail-form.tsx
new file mode 100644
index 00000000..abba006a
--- /dev/null
+++ b/components/form/content/task-ta/image-detail-form.tsx
@@ -0,0 +1,998 @@
+"use client";
+import React, { ChangeEvent, 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 } 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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  publishMedia,
+  rejectFiles,
+  submitApproval,
+} from "@/service/content/content";
+import {
+  detailMedia,
+  getDataApprovalByMediaUpload,
+} from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { MailIcon } from "lucide-react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import "swiper/css";
+import "swiper/css/navigation";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+import {
+  DialogHeader,
+  DialogFooter,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { close, loading, successCallback } from "@/config/swal";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { error } from "@/lib/swal";
+import dynamic from "next/dynamic";
+import { useRouter } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+import { UnitMapping } from "@/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping";
+import SuggestionModal from "@/components/modal/suggestions-modal";
+import { formatDateToIndonesian } from "@/utils/globals";
+import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
+import Image from "next/image";
+
+const imageSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type FileType = {
+  id: number;
+  url: string;
+  thumbnailFileUrl: string;
+  fileName: string;
+};
+
+type Detail = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  category: {
+    id: number;
+    name: string;
+  };
+  categoryName: string;
+  creatorName: string;
+  thumbnailLink: string;
+  tags: string;
+  statusName: string;
+  isPublish: boolean;
+  needApprovalFromLevel: number;
+  files: FileType[];
+  uploadedById: number;
+};
+
+const ViewEditor = dynamic(
+  () => {
+    return import("@/components/editor/view-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormImageDetail() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const userId = getCookiesDecrypt("uie");
+  const userLevelId = getCookiesDecrypt("ulie");
+  const roleId = getCookiesDecrypt("urie");
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const editor = useRef(null);
+  type ImageSchema = z.infer<typeof imageSchema>;
+
+  const t = useTranslations("Form");
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+  const [status, setStatus] = useState("");
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [detail, setDetail] = useState<any>();
+  const [refresh, setRefresh] = useState(false);
+  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [description, setDescription] = useState("");
+  const [main, setMain] = useState<any>([]);
+  const [filePlacements, setFilePlacements] = useState<string[][]>([]);
+  const [detailThumb, setDetailThumb] = useState<any>([]);
+  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
+  const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
+  const [approval, setApproval] = useState<any>();
+
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
+  const [wilayahPublish, setWilayahPublish] = React.useState({
+    semua: false,
+    nasional: false,
+    polda: false,
+    polres: false,
+    satker: false,
+    international: false,
+  });
+  const [selectedPolda, setSelectedPolda] = React.useState([]);
+
+  let fileTypeId = "1";
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<ImageSchema>({
+    resolver: zodResolver(imageSchema),
+  });
+
+  useEffect(() => {
+    if (
+      userLevelId != undefined &&
+      roleId != undefined &&
+      userLevelId == "216" &&
+      roleId == "3"
+    ) {
+      setIsUserMabesApprover(true);
+    }
+  }, [userLevelId, roleId]);
+
+  const handleCheckboxChange = (id: number) => {
+    setSelectedPublishers((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data?.data?.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  const setupPlacementCheck = (length: number) => {
+    const temp = [];
+    for (let i = 0; i < length; i++) {
+      temp.push([]);
+    }
+    setFilePlacements(temp);
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+        console.log("detail", details);
+        setFiles(details?.files);
+        setDetail(details);
+        setMain({
+          type: details?.fileType.name,
+          url: details?.files[0]?.url,
+          names: details?.files[0]?.fileName,
+          format: details?.files[0]?.format,
+        });
+        setupPlacementCheck(details?.files?.length);
+
+        if (details.publishedForObject) {
+          const publisherIds = details.publishedForObject.map(
+            (obj: any) => obj.id
+          );
+          setSelectedPublishers(publisherIds);
+        }
+
+        const matchingCategory = categories.find(
+          (category) => category.id === details.categoryId
+        );
+
+        if (matchingCategory) {
+          setSelectedTarget(matchingCategory.name);
+        }
+
+        setSelectedTarget(details.categoryId); // Untuk dropdown
+
+        const filesData = details.files || [];
+        const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) =>
+          file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg"
+        );
+        setDetailThumb(fileUrls);
+
+        const approvals = await getDataApprovalByMediaUpload(details?.id);
+        setApproval(approvals?.data?.data);
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const actionApproval = (e: string) => {
+    const temp = [];
+    for (const element of detail.files) {
+      temp.push([]);
+    }
+    setFilePlacements(temp);
+    setStatus(e);
+    setFiles(detail.files);
+
+    setDescription("");
+    setModalOpen(true);
+  };
+
+  const submit = async () => {
+    if (
+      (description?.length > 1 && Number(status) == 3) ||
+      Number(status) == 2 ||
+      Number(status) == 4
+    ) {
+      save();
+
+      // MySwal.fire({
+      //   title: "Simpan Approval",
+      //   text: "",
+      //   icon: "warning",
+      //   showCancelButton: true,
+      //   cancelButtonColor: "#d33",
+      //   confirmButtonColor: "#3085d6",
+      //   confirmButtonText: "Simpan",
+      // }).then((result) => {
+      //   if (result.isConfirmed) {
+      //     save();
+      //   }
+      // });
+    }
+  };
+
+  const getPlacement = () => {
+    console.log("getPlaa", filePlacements);
+    const temp = [];
+    for (let i = 0; i < filePlacements?.length; i++) {
+      if (filePlacements[i].length !== 0) {
+        const now = filePlacements[i].filter((a) => a !== "all");
+        const data = { mediaFileId: files[i].id, placements: now.join(",") };
+        temp.push(data);
+      }
+    }
+    return temp;
+  };
+
+  async function save() {
+    const data = {
+      mediaUploadId: id,
+      statusId: status,
+      message: description,
+      files: isUserMabesApprover ? getPlacement() : [],
+    };
+
+    setModalOpen(false);
+    loading();
+    const response = await submitApproval(data);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    const dataReject = {
+      listFiles: rejectedFiles,
+    };
+
+    console.log("reject", dataReject);
+
+    const resReject = await rejectFiles(dataReject);
+
+    if (resReject?.error) {
+      error(resReject.message);
+      return false;
+    }
+
+    close();
+    submitApprovalSuccesss();
+
+    return false;
+  }
+
+  const setupPlacement = (
+    index: number,
+    placement: string,
+    checked: boolean
+  ) => {
+    let temp = [...filePlacements];
+    if (checked) {
+      if (placement === "all") {
+        temp[index] = ["all", "mabes", "polda", "international"];
+      } else {
+        const now = temp[index];
+        now.push(placement);
+        if (now.length === 3 && !now.includes("all")) {
+          now.push("all");
+        }
+        temp[index] = now;
+      }
+    } else {
+      if (placement === "all") {
+        temp[index] = [];
+      } else {
+        const now = temp[index].filter((a) => a !== placement);
+        console.log("now", now);
+        temp[index] = now;
+        if (now.length === 3 && now.includes("all")) {
+          const newData = now.filter((b) => b !== "all");
+          temp[index] = newData;
+        }
+      }
+    }
+    setFilePlacements(temp);
+  };
+
+  function handleDeleteFileApproval(id: number) {
+    const selectedFiles = files.filter((file) => file.id != id);
+    setFiles(selectedFiles);
+    const rejects = rejectedFiles;
+    rejects.push(id);
+    setRejectedFiles(rejects);
+  }
+  const handleMain = (
+    type: string,
+    url: string,
+    names: string,
+    format: string
+  ) => {
+    console.log("Test 3 :", type, url, names, format);
+    setMain({
+      type,
+      url,
+      names,
+      format,
+    });
+    return false;
+  };
+
+  const submitApprovalSuccesss = () => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/contributor/content/image");
+      }
+    });
+  };
+
+  const publishToMabes = async () => {
+    const res = await publishMedia(id);
+    successCallback();
+  };
+
+  const [portraitMap, setPortraitMap] = useState<any>({});
+
+  const handleImageLoad = (e: any, index: number) => {
+    const { naturalWidth, naturalHeight } = e.target;
+    const isPortrait = naturalHeight > naturalWidth;
+
+    setPortraitMap((prev: any) => ({
+      ...prev,
+      [index]: isPortrait,
+    }));
+  };
+
+  useEffect(() => {
+    console.log("portrai", portraitMap);
+  }, [portraitMap]);
+
+  return (
+    <form>
+      {detail !== undefined ? (
+        <div className="flex flex-col lg:flex-row gap-10">
+          <Card className="w-full lg:w-8/12">
+            <div className="px-6 py-6">
+              <p className="text-lg font-semibold mb-3">Hasil Upload </p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>{t("title")} </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 items-center">
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
+                    <Select
+                      value={detail?.category.name} // Nilai default berdasarkan detail
+                      onValueChange={(id) => {
+                        console.log("Selected Category:", id);
+                        setSelectedTarget(id);
+                      }}
+                    >
+                      <SelectTrigger size="md">
+                        <SelectValue placeholder="Pilih" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {categories.map((category) => (
+                          <SelectItem key={category.id} value={category.name}>
+                            {category.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div> */}
+
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <ViewEditor initialData={detail?.htmlDescription} />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+                <div className="space-y-2">
+                  <Label className="text-xl  ">{t("file-media")}</Label>
+                  <div className="w-full  ">
+                    <Swiper
+                      thumbs={{ swiper: thumbsSwiper }}
+                      modules={[FreeMode, Navigation, Thumbs]}
+                      navigation={false}
+                      className="h-[480px] object-cover w-full"
+                    >
+                      {detailThumb?.map((data: any) => (
+                        <SwiperSlide key={data.id}>
+                          <img
+                            className="h-[480px] max-w-[600px]  rounded-md object-cover mx-auto border-2"
+                            src={data}
+                            alt={` ${data.id}`}
+                          />
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
+                    <div className="mt-2 mx-auto min-w-fit max-w-[600px]">
+                      <Swiper
+                        onSwiper={setThumbsSwiper}
+                        slidesPerView={6}
+                        spaceBetween={8}
+                        pagination={{
+                          clickable: true,
+                        }}
+                        modules={[Pagination, Thumbs]}
+                        // className="mySwiper2"
+                      >
+                        {detailThumb?.map((data: any) => (
+                          <SwiperSlide key={data.id}>
+                            <img
+                              className="object-cover h-[60px] w-[80px] border-2 border-slate-100"
+                              src={data}
+                              alt={` ${data.id}`}
+                            />
+                          </SwiperSlide>
+                        ))}
+                      </Swiper>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div>
+            {/* <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("creator")}</Label>
+                  <Controller
+                    control={control}
+                    name="creatorName"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        value={detail?.creatorName}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.creatorName?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.creatorName.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="mt-3 px-3 space-y-2">
+                <Label>{t("preview")}</Label>
+                <Card className="mt-2 w-fit">
+                  <img
+                    src={detail.thumbnailLink}
+                    alt="Thumbnail Gambar Utama"
+                    className="h-[200px] rounded"
+                  />
+                </Card>
+              </div>
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("tags")}</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {detail?.tags
+                      ?.split(",")
+                      .map((tag: string, index: number) => (
+                        <Badge
+                          key={index}
+                          className="border rounded-md  px-2 py-2"
+                        >
+                          {tag.trim()}
+                        </Badge>
+                      ))}
+                  </div>
+                </div>
+              </div>
+              <div className="px-3 py-3">
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="5"
+                      checked={selectedPublishers.includes(5)}
+                      onChange={() => handleCheckboxChange(5)}
+                    />
+                    <Label htmlFor="5">UMUM</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="6"
+                      checked={selectedPublishers.includes(6)}
+                      onChange={() => handleCheckboxChange(6)}
+                    />
+                    <Label htmlFor="6">JOURNALIS</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="7"
+                      checked={selectedPublishers.includes(7)}
+                      onChange={() => handleCheckboxChange(7)}
+                    />
+                    <Label htmlFor="7">POLRI</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="8"
+                      checked={selectedPublishers.includes(8)}
+                      onChange={() => handleCheckboxChange(8)}
+                    />
+                    <Label htmlFor="8">KSP</Label>
+                  </div>
+                </div>
+              </div>
+
+              <SuggestionModal
+                id={Number(id)}
+                numberOfSuggestion={detail?.numberOfSuggestion}
+              />
+              <div className="px-3 py-3 border mx-3">
+                <p>{t("information")}:</p>
+                <p className="text-sm text-slate-400">{detail?.statusName}</p>
+                <p>Komentar</p>
+                <p>{approval?.message}</p>
+                <p className="text-right text-sm">
+                  {" "}
+                  {approval?.approvalBy?.fullname} |{" "}
+                  {formatDateToIndonesian(approval?.approvalDate)}
+                </p>
+                <ApprovalHistoryModal id={Number(id)} />
+              </div> */}
+            {/* {detail?.isPublish == false ? (
+                <div className="p-3">
+                  <Button className="bg-blue-600">Publish</Button>
+                </div>
+              ) : (
+                ""
+              )} */}
+
+            {/* {(detail?.isPublish == false && detail.isPublishOnPolda == true) || (detail?.isPublish == false && detail?.isInternationalMedia == true && Number(detail?.statusId) == 2) ? (
+                <div className="flex flex-col gap-2 p-3">
+                  <Button
+                    onClick={() => publishToMabes()}
+                    type="button"
+                    color="primary"
+                  >
+                    <Icon icon="fa:check" className="mr-3" /> Publish
+                  </Button>
+                </div>
+              ) : (
+                ""
+              )} */}
+
+            {/* {detail?.isPublish == true ? (
+                <div className="row mt-4 mb-4">
+                  <div className="col-12 col-lg-2 mt-2"></div>
+                  <div className="col-12 col-lg-8 mt-2">
+                    <a
+                      className="btn btn-primary btn-block mb-2"
+                      onClick={() => scheduledPublishToMabes()}
+                      aria-hidden="true"
+                    >
+                      <Icon icon="fa:check" className="mr-3" /> Publish
+                      Terjadwal
+                    </a>
+                  </div>
+                </div>
+              ) : (
+                ""
+              )} */}
+
+            {/* <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+                <DialogContent size="md" className="max-h-[600px]">
+                  <DialogHeader>
+                    <DialogTitle>{t("leave-comment")}</DialogTitle>
+                  </DialogHeader>
+                  <div className="flex flex-col gap-2 max-h-[208px] md:max-h-[312px] overflow-y-auto">
+                    {status == "2"
+                      ? files?.map((file, index) => (
+                          <div
+                            key={file.id}
+                            className="flex flex-row gap-5 items-center w-full"
+                          >
+                            <div className="w-[200px] h-[100px] flex justify-center items-center">
+                              <img
+                                key={index}
+                                alt={`files-${index + 1}`}
+                                src={file.url}
+                                onLoad={(e) => handleImageLoad(e, index)}
+                                className={`h-[100px] object-cover ${
+                                  portraitMap[index] ? "w-auto" : "!w-[200px]"
+                                }`}
+                              />
+                            </div>
+                            <div className="flex flex-col gap-2 w-full">
+                              <div className="flex justify-between text-sm">
+                                {file.fileName}
+                                <a
+                                  onClick={() =>
+                                    handleDeleteFileApproval(file.id)
+                                  }
+                                >
+                                  <Icon icon="humbleicons:times" color="red" />
+                                </a>
+                              </div>
+                              {isUserMabesApprover && (
+                                <div className="flex flex-row gap-2">
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      value="all"
+                                      checked={filePlacements[index]?.includes(
+                                        "all"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(index, "all", Boolean(e))
+                                      }
+                                    />
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      {t("all")}
+                                    </label>
+                                  </div>
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      checked={filePlacements[index]?.includes(
+                                        "mabes"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(
+                                          index,
+                                          "mabes",
+                                          Boolean(e)
+                                        )
+                                      }
+                                    />
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      Nasional
+                                    </label>
+                                  </div>
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      checked={filePlacements[index]?.includes(
+                                        "polda"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(
+                                          index,
+                                          "polda",
+                                          Boolean(e)
+                                        )
+                                      }
+                                    />
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      Wilayah
+                                    </label>
+                                    {wilayahPublish.polda && (
+                                      <UnitMapping
+                                        unit="Polda"
+                                        isDetail={false}
+                                        sendDataToParent={(data: any) =>
+                                          setSelectedPolda(data)
+                                        }
+                                      />
+                                    )}
+                                  </div>
+
+                                  <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                      id="terms"
+                                      checked={filePlacements[index]?.includes(
+                                        "international"
+                                      )}
+                                      onCheckedChange={(e) =>
+                                        setupPlacement(
+                                          index,
+                                          "international",
+                                          Boolean(e)
+                                        )
+                                      }
+                                    />
+                                    <label
+                                      htmlFor="terms"
+                                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                      Internasional
+                                    </label>
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        ))
+                      : ""}
+                  </div>
+                  <div className="flex flex-col gap-4">
+                    <Textarea
+                      placeholder="Type your message here."
+                      value={description}
+                      onChange={(e) => setDescription(e.target.value)}
+                    />
+                  </div>
+                  {status == "3" || status == "4" ? (
+                    <div className="flex flex-row gap-2">
+                      <Button
+                        size="sm"
+                        color={
+                          description === "Kualitas media kurang baik"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setDescription("Kualitas media kurang baik")
+                        }
+                      >
+                        Kualitas media kurang baik
+                      </Button>
+
+                      <Button
+                        size="sm"
+                        color={
+                          description === "Deskripsi kurang lengkap"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setDescription("Deskripsi kurang lengkap")
+                        }
+                      >
+                        Deskripsi kurang lengkap
+                      </Button>
+                      <Button
+                        size="sm"
+                        color={
+                          description === "Judul kurang tepat"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Judul kurang tepat")}
+                      >
+                        Judul kurang tepat
+                      </Button>
+                    </div>
+                  ) : (
+                    <div className="flex flex-row gap-2">
+                      <Button
+                        size="sm"
+                        color={
+                          description === "Konten sangat bagus"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Konten sangat bagus")}
+                      >
+                        Konten sangat bagus
+                      </Button>
+                      <Button
+                        size="sm"
+                        color={
+                          description === "Konten menarik"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Konten menarik")}
+                      >
+                        Konten menarik
+                      </Button>
+                    </div>
+                  )}
+                  <DialogFooter>
+                    <div className="flex flex-row gap-2 justify-end">
+                      {" "}
+                      <Button
+                        type="button"
+                        color="primary"
+                        onClick={() => submit()}
+                      >
+                        {t("submit")}
+                      </Button>
+                      <Button
+                        type="button"
+                        color="destructive"
+                        onClick={() => {
+                          setModalOpen(false);
+                        }}
+                      >
+                        {t("cancel")}
+                      </Button>
+                    </div>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog> */}
+
+            {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ||
+            (detail?.isInternationalMedia == true &&
+              detail?.isForwardFromNational == true &&
+              Number(detail?.statusId) == 1) ? (
+              Number(detail?.uploadedById) == Number(userId) ? (
+                ""
+              ) : (
+                <div className="flex flex-col gap-2 p-3">
+                  <Button
+                    onClick={() => actionApproval("2")}
+                    color="primary"
+                    type="button"
+                  >
+                    <Icon icon="fa:check" className="mr-3" />
+                    {t("accept")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("3")}
+                    className="bg-orange-400 hover:bg-orange-300"
+                    type="button"
+                  >
+                    <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                    {t("revision")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("4")}
+                    color="destructive"
+                    type="button"
+                  >
+                    <Icon icon="fa:times" className="mr-3" />
+                    {t("reject")}
+                  </Button>
+                </div>
+              )
+            ) : (
+              ""
+            )}
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/image-form.tsx b/components/form/content/task-ta/image-form.tsx
new file mode 100644
index 00000000..58933e16
--- /dev/null
+++ b/components/form/content/task-ta/image-form.tsx
@@ -0,0 +1,1140 @@
+"use client";
+import React, {
+  ChangeEvent,
+  useEffect,
+  useRef,
+  Fragment,
+  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 { Upload } from "tus-js-client";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { redirect, 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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/service/content/content";
+import { uploadThumbnailBlog } from "@/service/blog/blog";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/service/content/ai";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react";
+import { CloudUpload } from "lucide-react";
+import Image from "next/image";
+import { error, loading } from "@/config/swal";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import { data } from "jquery";
+import { options } from "@fullcalendar/core/preact.js";
+import dynamic from "next/dynamic";
+import { getCsrfToken } from "@/service/auth";
+import { Link } from "@/i18n/routing";
+import { request } from "http";
+import { useLocale, useTranslations } from "next-intl";
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type Option = {
+  id: string;
+  label: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormImage() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type ImageSchema = z.infer<typeof imageSchema>;
+  const params = useParams();
+  const locale = params?.locale;
+
+  const t = useTranslations("Form");
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+  const roleId = getCookiesDecrypt("urie");
+
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [thumbnail, setThumbnail] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [selectedLanguage, setSelectedLanguage] = useState("");
+
+  const [selectedSEO, setSelectedSEO] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
+  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
+  const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
+
+  const [articleIds, setArticleIds] = useState<string[]>([]);
+  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
+  const [articleBody, setArticleBody] = useState<string>("");
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
+    null
+  );
+  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
+  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
+  const [selectedSize, setSelectedSize] = useState("");
+  const [detailData, setDetailData] = useState<any>(null);
+  const [articleImages, setArticleImages] = useState<string[]>([]);
+  const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [content, setContent] = useState("");
+
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  let fileTypeId = "1";
+  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 [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [filesTemp, setFilesTemp] = useState<File[]>([]);
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+
+  const options: Option[] = [
+    { id: "all", label: "SEMUA" },
+    { id: "5", label: "UMUM" },
+    { id: "6", label: "JOURNALIS" },
+    { id: "7", label: "POLRI" },
+    { id: "8", label: "KSP" },
+  ];
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    accept: {
+      "image/*": [],
+    },
+  });
+
+  const imageSchema = z.object({
+    title: z.string().min(1, { message: "Judul diperlukan" }),
+    description: z
+      .string()
+      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
+      .or(
+        z.literal(articleBody || "").refine((val) => val.length > 0, {
+          message: "Deskripsi diperlukan.",
+        })
+      ),
+    creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+    // tags: z.string().min(1, { message: "Judul diperlukan" }),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useForm<ImageSchema>({
+    resolver: zodResolver(imageSchema),
+  });
+
+  const doGenerateMainKeyword = async () => {
+    console.log(selectedMainKeyword);
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const titleData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for title with data:", titleData);
+        const titleRes = await getGenerateTitle(titleData);
+        setTitle(titleRes?.data?.data || "");
+        console.log("Generated title:", titleRes?.data?.data);
+
+        const keywordsData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for keywords with data:", keywordsData);
+        const keywordsRes = await getGenerateKeywords(keywordsData);
+        setSelectedSEO(keywordsRes?.data?.data || []);
+        console.log("Generated keywords:", keywordsRes?.data?.data);
+      } catch (error) {
+        console.error("Error during generation process:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const doGenerateTitle = async () => {
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const titleData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for title with data:", titleData);
+        const titleRes = await getGenerateTitle(titleData);
+        setTitle(titleRes?.data?.data || "");
+        console.log("Generated title:", titleRes?.data?.data);
+      } catch (error) {
+        console.error("Error generating title:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const doGenerateKeyword = async () => {
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const keywordsData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for keywords with data:", keywordsData);
+        const keywordsRes = await getGenerateKeywords(keywordsData);
+        setSelectedSEO(keywordsRes?.data?.data || []);
+        console.log("Generated keywords:", keywordsRes?.data?.data);
+      } catch (error) {
+        console.error("Error generating keywords:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const handleGenerateArtikel = async () => {
+    const request = {
+      advConfig: selectedAdvConfig,
+      style: selectedWritingStyle,
+      website: "None",
+      connectToWeb: true,
+      lang: selectedLanguage,
+      pointOfView: "None",
+      title: title,
+      imageSource: "Web",
+      mainKeyword: selectedMainKeyword,
+      additionalKeywords: selectedSEO,
+      targetCountry: null,
+      articleSize: selectedSize,
+      projectId: 2,
+      createdBy: roleId,
+      clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
+    };
+
+    const res = await generateDataArticle(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+  };
+
+  const handleArticleIdClick = async (id: string) => {
+    setIsLoadingData(true);
+    let retryCount = 0;
+    const maxRetries = 20;
+
+    try {
+      const waitForStatusUpdate = async () => {
+        while (retryCount < maxRetries) {
+          const res = await getDetailArticle(id);
+          const articleData = res?.data?.data;
+
+          if (articleData?.status === 2) {
+            return articleData;
+          }
+
+          retryCount++;
+          await new Promise((resolve) => setTimeout(resolve, 5000));
+        }
+
+        throw new Error("Timeout: Artikel belum selesai diproses.");
+      };
+      const articleData = await waitForStatusUpdate();
+      const cleanArticleBody = articleData?.articleBody?.replace(
+        /<img[^>]*>/g,
+        ""
+      );
+      const articleImagesData = articleData?.imagesUrl?.split(",");
+      setArticleBody(cleanArticleBody || "");
+      setDetailData(articleData);
+      setSelectedArticleId(id);
+      setArticleImages(articleImagesData || []);
+    } catch (error) {
+      console.error("Error fetching article details:", error);
+    } finally {
+      setIsLoadingData(false);
+    }
+  };
+
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && e.currentTarget.value.trim()) {
+      e.preventDefault();
+      const newTag = e.currentTarget.value.trim();
+      if (!tags.includes(newTag)) {
+        setTags((prevTags) => [...prevTags, newTag]); // Add new tag
+        if (inputRef.current) {
+          inputRef.current.value = ""; // Clear input field
+        }
+      }
+    }
+  };
+
+  const handleRemoveTag = (index: number) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // Remove tag
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+      // setVideoActive(fileTypeId == '2');
+      // getRoles();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data.data.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  const handleCheckboxChange = (id: string): void => {
+    if (id === "all") {
+      if (publishedFor.includes("all")) {
+        // Uncheck all checkboxes
+        setPublishedFor([]);
+      } else {
+        // Select all checkboxes
+        setPublishedFor(
+          options
+            .filter((opt: any) => opt.id !== "all")
+            .map((opt: any) => opt.id)
+        );
+      }
+    } else {
+      const updatedPublishedFor = publishedFor.includes(id)
+        ? publishedFor.filter((item) => item !== id)
+        : [...publishedFor, id];
+
+      // Remove "all" if any checkbox is unchecked
+      if (publishedFor.includes("all") && id !== "all") {
+        setPublishedFor(updatedPublishedFor.filter((item) => item !== "all"));
+      } else {
+        setPublishedFor(updatedPublishedFor);
+      }
+    }
+  };
+
+  const save = async (data: ImageSchema) => {
+    loading();
+    const finalTags = tags.join(", ");
+    const finalTitle = isSwitchOn ? title : data.title;
+    const finalDescription = articleBody || data.description;
+
+    if (!finalDescription.trim()) {
+      MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
+      return;
+    }
+
+    let requestData: {
+      title: string;
+      description: string;
+      htmlDescription: string;
+      fileTypeId: string;
+      categoryId: any;
+      subCategoryId: any;
+      uploadedBy: string;
+      statusId: string;
+      publishedFor: string;
+      creatorName: string;
+      tags: string;
+      isYoutube: boolean;
+      isInternationalMedia: boolean;
+      attachFromScheduleId?: number;
+    } = {
+      ...data,
+      title: finalTitle,
+      description: finalDescription,
+      htmlDescription: finalDescription,
+      fileTypeId,
+      categoryId: selectedCategory,
+      subCategoryId: selectedCategory,
+      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+      statusId: "1",
+      publishedFor: publishedFor.join(","),
+      creatorName: data.creatorName,
+      tags: finalTags,
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    let id = Cookies.get("idCreate");
+
+    if (scheduleId !== undefined) {
+      requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
+    }
+
+    if (id == undefined) {
+      const response = await createMedia(requestData);
+      console.log("Form Data Submitted:", requestData);
+
+      Cookies.set("idCreate", response?.data?.data, { expires: 1 });
+      id = response?.data?.data;
+
+      // Upload Thumbnail
+      const formMedia = new FormData();
+      const thumbnail = files[0];
+      formMedia.append("file", thumbnail);
+      const responseThumbnail = await uploadThumbnail(id, formMedia);
+      if (responseThumbnail?.error == true) {
+        error(responseThumbnail?.message);
+        return false;
+      }
+    }
+
+    // Upload File
+    const progressInfoArr = files.map((item) => ({
+      percentage: 0,
+      fileName: item.name,
+    }));
+    progressInfo = progressInfoArr;
+    setIsStartUpload(true);
+    setProgressList(progressInfoArr);
+
+    close();
+    files.map(async (item: any, index: number) => {
+      await uploadResumableFile(
+        index,
+        String(id),
+        item,
+        fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
+      );
+    });
+
+    Cookies.remove("idCreate");
+  };
+
+  const onSubmit = (data: ImageSchema) => {
+    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);
+      }
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    duration: string
+  ) {
+    console.log(idx, id, file, duration);
+
+    // const placements = getPlacement(file.placements);
+    // console.log("Placementttt:  : ", placements);
+
+    const resCsrf = await getCsrfToken();
+    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}/media/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        mediaid: id,
+        filename: file.name,
+        filetype: file.type,
+        duration,
+        isWatermark: "true", // hardcode
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        progressInfo[idx].percentage = uploadPersen;
+        counterUpdateProgress++;
+        console.log(counterUpdateProgress);
+        setProgressList(progressInfo);
+        setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        uploadPersen = 100;
+        progressInfo[idx].percentage = 100;
+        counterUpdateProgress++;
+        setCounterProgress(counterUpdateProgress);
+        successTodo();
+      },
+    });
+
+    upload.start();
+  }
+
+  const successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  function successTodo() {
+    let counter = 0;
+    for (const element of progressInfo) {
+      if (element.percentage == 100) {
+        counter++;
+      }
+    }
+    if (counter == progressInfo.length) {
+      setIsStartUpload(false);
+      // hideProgress();
+      Cookies.remove("idCreate");
+      successSubmit("/in/contributor/content/image");
+    }
+  }
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setThumbnail(file);
+      console.log("Selected Thumbnail:", file);
+    }
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+    }
+  };
+
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file.type.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
+
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const fileList = files.map((file) => (
+    <div
+      key={file.name}
+      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        <div className="file-preview">{renderFilePreview(file)}</div>
+        <div>
+          <div className=" text-sm  text-card-foreground">{file.name}</div>
+          <div className=" text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className=" border-none rounded-full"
+        onClick={() => handleRemoveFile(file)}
+      >
+        <Icon icon="tabler:x" className=" h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+  };
+
+  useEffect(() => {
+    // Jika input title kosong, isi dengan hasil generate title
+    if (!getValues("title") && title) {
+      setValue("title", title);
+    }
+  }, [title, getValues, setValue]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col lg:flex-row gap-10">
+        <Card className="w-full lg:w-8/12">
+          <div className="px-6 py-6">
+            <p className="text-lg font-semibold mb-3">{t("form-image")}</p>
+            <div className="gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2 py-3">
+                <Label>{t("title")}</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.title?.message && (
+                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                )}
+              </div>
+
+              <div className="flex items-center">
+                <div className="py-3 space-y-2 w-full">
+                  <Label>{t("category")}</Label>
+                  <Select
+                    value={selectedCategory} // Ensure selectedTarget is updated correctly
+                    onValueChange={(id) => {
+                      console.log("Selected Category ID:", id);
+                      setSelectedCategory(id);
+                    }}
+                  >
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {categories.map((category) => (
+                        <SelectItem
+                          key={category.id}
+                          value={category.id.toString()}
+                        >
+                          {category.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="flex flex-row items-center gap-3 py-3 ">
+                <Label>{t("ai-assistance")}</Label>
+                <div className="flex items-center gap-3">
+                  <Switch
+                    defaultChecked={isSwitchOn}
+                    color="primary"
+                    id="c2"
+                    onCheckedChange={(checked: boolean) =>
+                      setIsSwitchOn(checked)
+                    }
+                  />
+                </div>
+              </div>
+              {isSwitchOn && (
+                <div>
+                  <div className="flex flex-row gap-3">
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("language")}</Label>
+                      <Select onValueChange={setSelectedLanguage}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="id">Indonesia</SelectItem>
+                          <SelectItem value="en">English</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("writing-style")}</Label>
+                      <Select onValueChange={setSelectedWritingStyle}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="friendly">Friendly</SelectItem>
+                          <SelectItem value="profesional">
+                            Profesional
+                          </SelectItem>
+                          <SelectItem value="informational">
+                            Informational
+                          </SelectItem>
+                          <SelectItem value="neutral">Neutral</SelectItem>
+                          <SelectItem value="witty">Witty</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("article-size")}</Label>
+                      <Select onValueChange={setSelectedSize}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="news">
+                            News (300 - 900 words)
+                          </SelectItem>
+                          <SelectItem value="info">
+                            Info (900 - 2000 words)
+                          </SelectItem>
+                          <SelectItem value="detail">
+                            Detail (2000 - 5000 words)
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("main-keyword")}</Label>
+                      <Button
+                        variant="outline"
+                        color="primary"
+                        onClick={doGenerateMainKeyword}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Processing..." : "Proses"}
+                      </Button>
+                    </div>
+                    <div>
+                      <Input
+                        size="md"
+                        type="text"
+                        value={selectedMainKeyword}
+                        onChange={(e) => setSelectedMainKeyword(e.target.value)}
+                        placeholder="Enter Main Keyword"
+                      />
+                      {/* )}
+                  /> */}
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("title")}</Label>
+                      <Button
+                        variant="outline"
+                        color="primary"
+                        onClick={doGenerateTitle}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Generating..." : "Generate"}
+                      </Button>
+                    </div>
+                    <div>
+                      <Input
+                        size="md"
+                        type="text"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        placeholder="Generated Title"
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("seo")}</Label>
+                      <Button
+                        variant={"outline"}
+                        color="primary"
+                        onClick={doGenerateKeyword}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Generating..." : "Generate"}
+                      </Button>
+                    </div>
+                    <p className="font-semibold">
+                      {t("Keywords to include in the text")}
+                    </p>
+                    <p className="text-sm">{t("title-key")}</p>
+                    <div className="mt-3">
+                      <Textarea
+                        value={selectedSEO}
+                        onChange={(e) => setSelectedSEO(e.target.value)}
+                        placeholder="Enter Title"
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <Label>{t("special-instructions")}(Optional)</Label>
+                    <div className="mt-3">
+                      <Controller
+                        control={control}
+                        name="title"
+                        render={({ field }) => (
+                          <Textarea
+                            value={field.value}
+                            onChange={field.onChange}
+                            placeholder="Enter Title"
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <div className="my-5">
+                      <Button
+                        // variant={"outline"}
+                        color="primary"
+                        onClick={handleGenerateArtikel}
+                        size="sm"
+                      >
+                        Generate Article
+                      </Button>
+                    </div>
+
+                    {isGeneratedArticle && (
+                      <div className="mt-3 pb-0 flex flex-row">
+                        {articleIds.map((id: string, index: number) => (
+                          <p
+                            key={index}
+                            className={`mr-3 px-3 py-2 rounded-md ${
+                              selectedArticleId === id
+                                ? "bg-green-500 text-white"
+                                : "border-2 border-green-500 text-green-500"
+                            }`}
+                            onClick={() => handleArticleIdClick(id)}
+                          >
+                            {"Narasi " + (index + 1)}
+                          </p>
+                        ))}
+                      </div>
+                    )}
+
+                    <div className="pt-3">
+                      <div className="flex flex-row justify-between items-center">
+                        {selectedArticleId && (
+                          <Button
+                            className="mb-2"
+                            size="sm"
+                            variant={"outline"}
+                            color="primary"
+                            onClick={() => {
+                              const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
+                              window.open(url, "_blank", "noopener,noreferrer");
+                            }}
+                          >
+                            {t("update")}
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+              <div className="py-3 space-y-2">
+                <Label>{t("description")}</Label>
+                <Controller
+                  control={control}
+                  name="description"
+                  render={({ field: { onChange, value } }) =>
+                    isLoadingData ? (
+                      <div className="flex justify-center items-center h-40">
+                        <p className="text-gray-500">Loading Proses Data...</p>
+                      </div>
+                    ) : (
+                      <CustomEditor
+                        onChange={onChange}
+                        initialData={articleBody || value}
+                      />
+                    )
+                  }
+                />
+                {errors.description?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.description.message}
+                  </p>
+                )}
+              </div>
+              <div className="py-3 space-y-2">
+                <Label>{t("select-file")}</Label>
+                {/* <Input
+                  id="fileInput"
+                  type="file"
+                  onChange={handleImageChange}
+                /> */}
+                <Fragment>
+                  <div {...getRootProps({ className: "dropzone" })}>
+                    <input {...getInputProps()} />
+                    <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                      <CloudUpload className="text-default-300 w-10 h-10" />
+                      <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                        {/* Drop files here or click to upload. */}
+                        {t("drag-file")}
+                      </h4>
+                      <div className=" text-xs text-muted-foreground">
+                        {t("upload-file-max")}
+                      </div>
+                    </div>
+                  </div>
+                  {files.length ? (
+                    <Fragment>
+                      <div>{fileList}</div>
+                      <div className=" flex justify-between gap-2">
+                        {/* <div className="flex flex-row items-center gap-3 py-3">
+                          <Label>{t("watermark")}</Label>
+                          <div className="flex items-center gap-3">
+                            <Switch defaultChecked color="primary" id="c2" />
+                          </div>
+                        </div> */}
+                        <Button
+                          color="destructive"
+                          onClick={handleRemoveAllFiles}
+                        >
+                          {t("remove-all")}
+                        </Button>
+                      </div>
+                    </Fragment>
+                  ) : null}
+                </Fragment>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+          </div>
+        </Card>
+        <div className="w-full lg:w-4/12">
+          <Card className=" h-[500px]">
+            <div className="px-3 py-3">
+              <div className="space-y-2">
+                <Label>{t("creator")}</Label>
+                <Controller
+                  control={control}
+                  name="creatorName"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.creatorName?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.creatorName.message}
+                  </p>
+                )}
+              </div>
+            </div>
+            <div className="px-3 py-3 space-y-2">
+              <Label htmlFor="tags">{t("tags")}</Label>
+              <Input
+                type="text"
+                id="tags"
+                placeholder="Add a tag and press Enter"
+                onKeyDown={handleAddTag}
+                ref={inputRef}
+              />
+              <div className="mt-3 ">
+                {tags.map((tag, index) => (
+                  <span
+                    key={index}
+                    className=" px-1 py-1 rounded-lg bg-black text-white mr-2 text-sm font-sans"
+                  >
+                    {tag}{" "}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTag(index)}
+                      className="remove-tag-button"
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div className="px-3 py-3">
+              <div className="flex flex-col gap-3 space-y-2">
+                <Label>{t("publish-target")}</Label>
+                {options.map((option) => (
+                  <div key={option.id} className="flex gap-2 items-center">
+                    <Checkbox
+                      id={option.id}
+                      checked={
+                        option.id === "all"
+                          ? publishedFor.length ===
+                            options.filter((opt: any) => opt.id !== "all")
+                              .length
+                          : publishedFor.includes(option.id)
+                      }
+                      onCheckedChange={() => handleCheckboxChange(option.id)}
+                    />
+                    <Label htmlFor={option.id}>{option.label}</Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+          <div className="flex flex-row justify-end gap-3">
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                {t("submit")}
+              </Button>
+            </div>
+            <div className="mt-4">
+              <Link href={"/contributor/content/image"}>
+                <Button type="submit" color="primary" variant="outline">
+                  {t("cancel")}
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/image-update-form.tsx b/components/form/content/task-ta/image-update-form.tsx
new file mode 100644
index 00000000..7391cf2c
--- /dev/null
+++ b/components/form/content/task-ta/image-update-form.tsx
@@ -0,0 +1,1011 @@
+"use client";
+import React, {
+  ChangeEvent,
+  Fragment,
+  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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  deleteFile,
+  deleteMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/service/content/content";
+import { detailMedia } from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { CloudUpload, MailIcon } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Image from "next/image";
+import { error, loading } from "@/lib/swal";
+import { getCsrfToken } from "@/service/auth";
+import { Upload } from "tus-js-client";
+import { useTranslations } from "next-intl";
+
+const imageSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type Detail = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  category: {
+    id: string;
+    name: string;
+  };
+  publishedFor: string;
+
+  publishedForObject: {
+    id: number;
+    name: string;
+  };
+  creatorName: string;
+  categoryName: string;
+  thumbnailLink: string;
+  tags: string;
+};
+
+type Option = {
+  id: string;
+  name: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+export default function FormImageUpdate() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const editor = useRef(null);
+  type ImageSchema = z.infer<typeof imageSchema>;
+
+  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 t = useTranslations("Form");
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [detail, setDetail] = useState<Detail>();
+  const [refresh, setRefresh] = useState(false);
+  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [articleBody, setArticleBody] = useState<string>("");
+  const [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [filesTemp, setFilesTemp] = useState<File[]>([]);
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [selectedOptions, setSelectedOptions] = useState<{
+    [fileId: number]: string[];
+  }>({});
+
+  const options: Option[] = [
+    { id: "all", name: "SEMUA" },
+    { id: "5", name: "UMUM" },
+    { id: "6", name: "JOURNALIS" },
+    { id: "7", name: "POLRI" },
+    { id: "8", name: "KSP" },
+  ];
+
+  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(
+    detail?.category.id
+  );
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  let fileTypeId = "1";
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    accept: {
+      "image/*": [],
+    },
+  });
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<ImageSchema>({
+    resolver: zodResolver(imageSchema),
+  });
+
+  // const handleKeyDown = (e: any) => {
+  //   const newTag = e.target.value.trim(); // Ambil nilai input
+  //   if (e.key === "Enter" && newTag) {
+  //     e.preventDefault(); // Hentikan submit form
+  //     if (!tags.includes(newTag)) {
+  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
+  //       setValue("tags", ""); // Kosongkan input
+  //     }
+  //   }
+  // };
+
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const files = Array.from(event.target.files);
+      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
+      console.log("DATAFILE::", selectedFiles);
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  // const handleCheckboxChange = (id: number) => {
+  //   setSelectedPublishers((prev) =>
+  //     prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+  //   );
+  // };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+    }
+
+    initState();
+  }, []);
+
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && e.currentTarget.value.trim()) {
+      e.preventDefault();
+      const newTag = e.currentTarget.value.trim();
+      if (!tags.includes(newTag)) {
+        setTags((prevTags) => [...prevTags, newTag]); // Tambahkan tag baru
+        if (inputRef.current) {
+          inputRef.current.value = ""; // Kosongkan input
+        }
+      }
+    }
+  };
+
+  const handleRemoveTag = (index: number) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
+  };
+
+  const handleEditTag = (index: number, newValue: string) => {
+    setTags((prevTags) =>
+      prevTags.map((tag, i) => (i === index ? newValue : tag))
+    );
+  };
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data?.data?.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+
+        if (details?.files) {
+          setFiles(details.files);
+
+          const initialOptions: { [key: number]: string[] } = {};
+          details.files.forEach((file: any) => {
+            if (file.placements) {
+              initialOptions[file.id] = mapPlacementsToOptions(file.placements);
+            }
+          });
+          setSelectedOptions(initialOptions);
+        }
+
+        if (details?.publishedFor) {
+          // Split string "7" to an array ["7"] if needed
+          setPublishedFor(details.publishedFor.split(","));
+        }
+
+        if (details?.tags) {
+          setTags(details.tags.split(",").map((tag: string) => tag.trim()));
+        }
+
+        const matchingCategory = categories.find(
+          (category) => category.id === details.categoryId
+        );
+
+        if (matchingCategory) {
+          setSelectedTarget(matchingCategory.name);
+        }
+
+        setSelectedTarget(details.categoryId); // Untuk dropdown
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const mapPlacementsToOptions = (placements: string): string[] => {
+    const mapping: Record<string, string> = {
+      all: "all",
+      mabes: "nasional",
+      polda: "wilayah",
+      polres: "internasional",
+    };
+
+    // Jika placements hanya "all", langsung aktifkan semua checkbox
+    if (placements.trim() === "all") {
+      return ["all", "nasional", "wilayah", "internasional"];
+    }
+
+    const options = placements
+      .split(",")
+      .map((p) => mapping[p.trim()])
+      .filter(Boolean);
+
+    const allSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
+      options.includes(opt)
+    );
+
+    return allSelected ? ["all", ...options] : options;
+  };
+
+  const handleCheckboxChange = (id: string) => {
+    if (id === "all") {
+      // Select all options except "all"
+      const allOptions = options
+        .filter((opt) => opt.id !== "all")
+        .map((opt) => opt.id);
+      setPublishedFor(
+        publishedFor.length === allOptions.length ? [] : allOptions
+      );
+    } else {
+      // Toggle individual option
+      setPublishedFor((prev) =>
+        prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+      );
+    }
+  };
+
+  const save = async (data: ImageSchema) => {
+    loading();
+    const finalTags = tags.join(", ");
+    const requestData = {
+      ...data,
+      id: detail?.id,
+      title: data.title,
+      description: data.description,
+      htmlDescription: data.description,
+      fileTypeId,
+      categoryId: selectedTarget,
+      subCategoryId: selectedTarget,
+      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+      statusId: "1",
+      publishedFor: publishedFor.join(","),
+      creatorName: data.creatorName,
+      tags: finalTags,
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    const response = await createMedia(requestData);
+    console.log("Form Data Submitted:", requestData);
+
+    const formMedia = new FormData();
+    const thumbnail = files[0];
+    formMedia.append("file", thumbnail);
+    const responseThumbnail = await uploadThumbnail(id, formMedia);
+    if (responseThumbnail?.error == true) {
+      error(responseThumbnail?.message);
+      return false;
+    }
+
+    const progressInfoArr = [];
+    for (const item of files) {
+      progressInfoArr.push({ percentage: 0, fileName: item.name });
+    }
+    progressInfo = progressInfoArr;
+    setIsStartUpload(true);
+    setProgressList(progressInfoArr);
+
+    close();
+    // showProgress();
+    files.map(async (item: any, index: number) => {
+      await uploadResumableFile(
+        index,
+        String(id),
+        item,
+        fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
+      );
+    });
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/in/contributor/content/image");
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    duration: string
+  ) {
+    console.log(idx, id, file, duration);
+
+    // const placements = getPlacement(file.placements);
+    // console.log("Placementttt:  : ", placements);
+
+    const resCsrf = await getCsrfToken();
+    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}/media/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        mediaid: id,
+        filename: file.name,
+        filetype: file.type,
+        duration,
+        isWatermark: "true", // hardcode
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        progressInfo[idx].percentage = uploadPersen;
+        counterUpdateProgress++;
+        console.log(counterUpdateProgress);
+        setProgressList(progressInfo);
+        setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        uploadPersen = 100;
+        progressInfo[idx].percentage = 100;
+        counterUpdateProgress++;
+        setCounterProgress(counterUpdateProgress);
+        successTodo();
+      },
+    });
+
+    upload.start();
+  }
+
+  const onSubmit = (data: ImageSchema) => {
+    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 successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  function successTodo() {
+    let counter = 0;
+    for (const element of progressInfo) {
+      if (element.percentage == 100) {
+        counter++;
+      }
+    }
+    if (counter == progressInfo.length) {
+      setIsStartUpload(false);
+      // hideProgress();
+      Cookies.remove("idCreate");
+      successSubmit("/in/contributor/content/image/");
+    }
+  }
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+  };
+
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file?.type?.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
+
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const fileList = files.map((file: any) => (
+    <div
+      key={file.id} // Gunakan ID file sebagai key
+      className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        <div className="file-preview">{renderFilePreview(file)}</div>
+        <div>
+          <div className="text-sm text-card-foreground">
+            {file.fileName || file.name}
+          </div>
+          <div className="text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className="border-none rounded-full"
+        onClick={() => handleDeleteFile(file.id)} // Kirim ID spesifik
+      >
+        <Icon icon="tabler:x" className="h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  const handleCheckboxChangeImage = (fileId: number, value: string) => {
+    setSelectedOptions((prev: any) => {
+      const currentSelections = prev[fileId] || [];
+      if (value === "all") {
+        // If "all" is clicked, toggle all options
+        if (currentSelections.includes("all")) {
+          return { ...prev, [fileId]: [] }; // Deselect all
+        }
+        return {
+          ...prev,
+          [fileId]: ["all", "nasional", "wilayah", "internasional"],
+        }; // Select all
+      } else {
+        // If any other checkbox is clicked, toggle that checkbox
+        const updatedSelections = currentSelections.includes(value)
+          ? currentSelections.filter((option: any) => option !== value)
+          : [...currentSelections, value];
+
+        // If all individual options are selected, include "all" automatically
+        const isAllSelected = ["nasional", "wilayah", "internasional"].every(
+          (opt) => updatedSelections.includes(opt)
+        );
+        return {
+          ...prev,
+          [fileId]: isAllSelected
+            ? ["all", ...updatedSelections]
+            : updatedSelections.filter((opt: any) => opt !== "all"),
+        };
+      }
+    });
+  };
+
+  function success() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        // window.location.reload();
+      }
+    });
+  }
+
+  const handleDeleteFile = (id: number) => {
+    MySwal.fire({
+      title: "Hapus file",
+      text: "Apakah Anda yakin ingin menghapus file ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#3085d6",
+      confirmButtonColor: "#d33",
+      confirmButtonText: "Hapus",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        doDelete(id);
+      }
+    });
+  };
+
+  async function doDelete(id: number) {
+    const data = { id };
+
+    try {
+      const response = await deleteFile(data);
+      if (response?.error) {
+        error(response.message);
+        return;
+      }
+
+      // Jika berhasil, hapus file dari state lokal
+      setFiles((prevFiles: any) =>
+        prevFiles.filter((file: any) => file.id !== id)
+      );
+      success();
+    } catch (err) {
+      error("Terjadi kesalahan saat menghapus file");
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {detail !== undefined ? (
+        <div className="flex flex-col lg:flex-row gap-10">
+          <Card className="w-full lg:w-8/12">
+            <div className="px-6 py-6">
+              <p className="text-lg font-semibold mb-3">{t("form-image")}</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>{t("title")}</Label>
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        defaultValue={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 items-center">
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
+                    <Select
+                      defaultValue={detail?.category.id} // Gunakan ID sebagai defaultValue
+                      onValueChange={(id) => {
+                        console.log("Selected Category ID:", id);
+                        setSelectedTarget(id); // Perbarui ID kategori
+                      }}
+                    >
+                      <SelectTrigger size="md">
+                        <SelectValue placeholder="Pilih">
+                          {categories.find((cat) => cat.id === selectedTarget)
+                            ?.name || "Pilih"}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {categories.map((category) => (
+                          <SelectItem key={category.id} value={category.id}>
+                            {category.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <CustomEditor
+                        onChange={onChange}
+                        initialData={detail?.description || value}
+                      />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+                <div className="py-3 space-y-2">
+                  <Label>{t("select-file")}</Label>
+                  {/* <Input
+                  id="fileInput"
+                  type="file"
+                  onChange={handleImageChange}
+                /> */}
+                  <Fragment>
+                    <div {...getRootProps({ className: "dropzone" })}>
+                      <input {...getInputProps()} />
+                      <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                        <CloudUpload className="text-default-300 w-10 h-10" />
+                        <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                          {/* Drop files here or click to upload. */}
+                          {t("drag-file")}
+                        </h4>
+                        <div className=" text-xs text-muted-foreground">
+                          {t("upload-file-max")}
+                        </div>
+                      </div>
+                    </div>
+                    {files.length ? (
+                      <Fragment>
+                        <div>{fileList}</div>
+                        <div className=" flex justify-between gap-2">
+                          <div className="flex flex-row items-center gap-3 py-3">
+                            <Label>{t("watermark")}</Label>
+                            <div className="flex items-center gap-3">
+                              <Switch defaultChecked color="primary" id="c2" />
+                            </div>
+                          </div>
+                          {/* <Button
+                            color="destructive"
+                            onClick={() => handleDeleteFile(id)}
+                          >
+                            Remove file
+                          </Button> */}
+                        </div>
+                      </Fragment>
+                    ) : null}
+                    {files.length > 0 && (
+                      <div className="mt-4">
+                        <Label className="text-lg font-semibold">
+                          {" "}
+                          {t("file-media")}
+                        </Label>
+                        <div className="grid gap-4">
+                          {files.map((file: any) => (
+                            <div
+                              key={file.id}
+                              className="flex items-center border p-2 rounded-md"
+                            >
+                              <img
+                                src={file.thumbnailFileUrl}
+                                alt={file.fileName}
+                                className="w-16 h-16 object-cover rounded-md mr-4"
+                              />
+                              <div className="flex flex-wrap gap-3 items-center ">
+                                <div className="flex-grow">
+                                  <p className="font-medium">{file.fileName}</p>
+                                  <a
+                                    href={file.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-blue-500 text-sm"
+                                  >
+                                    {t("view-file")}
+                                  </a>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("all")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "all"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>{t("all")}</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("nasional")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "nasional"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Nasional</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("wilayah")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "wilayah"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Wilayah</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("internasional")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "internasional"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Internasional</span>
+                                  </Label>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </Fragment>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-full lg:w-4/12">
+            <Card className="h-[900px] md:h-[1100px] lg:h-[800px]">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("creator")}</Label>
+                  <Controller
+                    control={control}
+                    name="creatorName"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        defaultValue={detail?.creatorName}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.creatorName?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.creatorName.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="mt-3 px-3 space-y-2">
+                <Label>{t("preview")}</Label>
+                <Card className="mt-2">
+                  <img
+                    src={detail.thumbnailLink}
+                    alt="Thumbnail Gambar Utama"
+                    className="w-full h-auto rounded"
+                  />
+                </Card>
+              </div>
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("tags")}</Label>
+                  <Input
+                    type="text"
+                    id="tags"
+                    placeholder="Add a tag and press Enter"
+                    onKeyDown={handleAddTag}
+                    ref={inputRef}
+                  />
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    {tags.map((tag, index) => (
+                      <span
+                        key={index}
+                        className="flex  items-center gap-2 px-2 py-1 rounded-lg bg-black text-white text-sm"
+                      >
+                        <input
+                          type="text"
+                          value={tag}
+                          onChange={(e) => handleEditTag(index, e.target.value)}
+                          className="bg-black text-white border-none focus:outline-none w-auto"
+                        />
+                        <button
+                          value={tag}
+                          type="button"
+                          onClick={() => handleRemoveTag(index)}
+                          className="remove-tag-button text-white"
+                        >
+                          ×
+                        </button>
+                      </span>
+                    ))}
+                  </div>
+                  {/* <div className="flex flex-wrap gap-2">
+                    {detail?.tags?.split(",").map((tag, index) => (
+                      <Badge
+                        key={index}
+                        className="border rounded-md  px-2 py-2"
+                      >
+                        {tag.trim()}
+                      </Badge>
+                    ))}
+                  </div> */}
+                </div>
+              </div>
+              <div className="px-3 py-3">
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
+                  {options.map((option: Option) => (
+                    <div key={option.id} className="flex gap-2 items-center">
+                      <Checkbox
+                        id={option.id}
+                        checked={
+                          option.id === "all"
+                            ? publishedFor.length ===
+                              options.filter((opt) => opt.id !== "all").length
+                            : publishedFor.includes(option.id)
+                        }
+                        onCheckedChange={() => handleCheckboxChange(option.id)}
+                      />
+                      <Label htmlFor={option.id}>{option.name}</Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
+                <MailIcon />
+                <p className="">{t("suggestion-box")} (0)</p>
+              </div>
+              <div className="px-3 py-3">
+                <p>{t("information")}:</p>
+                {/* <p>{detail?.status}</p> */}
+              </div>
+            </Card>
+            <div className="flex flex-row justify-end gap-3">
+              <div className="mt-4">
+                <Button type="submit" color="primary">
+                  {t("submit")}
+                </Button>
+              </div>
+              <div className="mt-4">
+                <Button type="submit" color="primary" variant="outline">
+                  {t("cancel")}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/spit-convert-form.tsx b/components/form/content/task-ta/spit-convert-form.tsx
new file mode 100644
index 00000000..ea19bac3
--- /dev/null
+++ b/components/form/content/task-ta/spit-convert-form.tsx
@@ -0,0 +1,1120 @@
+"use client";
+import React, { ChangeEvent, 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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  convertSPIT,
+  createMedia,
+  deleteSPIT,
+  detailSPIT,
+  getTagsBySubCategoryId,
+  listCategory,
+  listEnableCategory,
+} from "@/service/content/content";
+import { detailMedia } from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { MailIcon } from "lucide-react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import "swiper/css";
+import "swiper/css/navigation";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+import { request } from "http";
+import {
+  generateDataArticle,
+  generateDataRewrite,
+  getDetailArticle,
+} from "@/service/content/ai";
+import { getCookiesDecrypt } from "@/lib/utils";
+import dynamic from "next/dynamic";
+import { error } from "@/lib/swal";
+import { useTranslations } from "next-intl";
+import { contextType } from "cleave.js/react";
+import { Form } from "@/components/ui/form";
+
+type Category = {
+  id: number;
+  name: string;
+};
+
+type Detail = {
+  id: string;
+  contentTitle: string;
+  contentDescription: string;
+  slug: string;
+  content: {
+    id: number;
+    name: string;
+  };
+  contentCreator: string;
+  creatorName: string;
+  contentThumbnail: string;
+  contentTag: string;
+};
+
+type Option = {
+  id: string;
+  label: string;
+};
+
+interface FileData {
+  contentId: number;
+  placement?: string[];
+  [key: string]: any;
+}
+
+interface PlacementData {
+  mediaFileId: number;
+  placements: string;
+}
+
+type FileType = {
+  contentId: number;
+  contentFile: string;
+  thumbnailFileUrl: string;
+  fileName: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormConvertSPIT() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const editor = useRef(null);
+  // type ImageSchema = z.infer<typeof imageSchema>;
+
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(
+    null
+  );
+  const [tags, setTags] = useState<any[]>([]);
+  const [detail, setDetail] = useState<any>();
+  const [refresh, setRefresh] = useState(false);
+  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [detailThumb, setDetailThumb] = useState<any>([]);
+  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
+  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
+  const [articleIds, setArticleIds] = useState<string[]>([]);
+  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
+  const [articleBody, setArticleBody] = useState<string>("");
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
+    null
+  );
+  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
+  const t = useTranslations("Form");
+  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,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const [filePlacements, setFilePlacements] = useState<string[][]>([]);
+  const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [selectedWritingStyle, setSelectedWritingStyle] =
+    useState("Professional");
+
+  const imageSchema = z
+    .object({
+      contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
+      contentDescription: z
+        .string()
+        .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+      contentCreator: z.string().min(1, { message: "Creator diperlukan" }),
+      contentRewriteDescription: z.string().optional(),
+    })
+    .refine(
+      (data) => {
+        if (isContentRewriteClicked) {
+          return detail?.contentRewriteDescription?.trim().length > 0;
+        }
+        return true;
+      },
+      {
+        path: ["contentRewriteDescription"],
+        message: "File hasil rewrite wajib diisi",
+      }
+    );
+
+  const options: Option[] = [
+    { id: "all", label: "SEMUA" },
+    { id: "5", label: "UMUM" },
+    { id: "6", label: "JOURNALIS" },
+    { id: "7", label: "POLRI" },
+    { id: "8", label: "KSP" },
+  ];
+
+  let fileTypeId = "1";
+
+  // const {
+  //   control,
+  //   handleSubmit,
+  //   setValue,
+  //   formState: { errors },
+  // } = useForm<ImageSchema>({
+  //   resolver: zodResolver(imageSchema),
+  //   defaultValues: {
+  //     contentTitle: detail?.contentTitle || "",
+  //     contentDescription: detail?.contentDescription || "",
+  //     contentCreator: detail?.contentCreator || "",
+  //     contentRewriteDescription: detail?.contentRewriteDescription || "",
+  //     // dll
+  //   },
+  // });
+
+  const form = useForm<z.infer<typeof imageSchema>>({
+    resolver: zodResolver(imageSchema),
+    defaultValues: {
+      contentTitle: detail?.contentTitle || "",
+      contentDescription: detail?.contentDescription || "",
+      contentCreator: detail?.contentCreator || "",
+      contentRewriteDescription: detail?.contentRewriteDescription || "",
+      // dll
+    },
+  });
+
+  const handleRemoveTag = (index: any) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
+  };
+
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const files = Array.from(event.target.files);
+      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
+      console.log("DATAFILE::", selectedFiles);
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  const handleDirectSave = () => {
+    const values = form.getValues();
+    onSubmit(values);
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+    }
+
+    initState();
+  }, []);
+
+  useEffect(() => {
+    if (
+      userLevelId != undefined &&
+      roleId != undefined &&
+      userLevelId == "216" &&
+      roleId == "3"
+    ) {
+      setIsUserMabesApprover(true);
+    }
+  }, [userLevelId, roleId]);
+
+  useEffect(() => {
+    if (
+      userLevelId != undefined &&
+      roleId != undefined &&
+      userLevelId == "216" &&
+      roleId == "3"
+    ) {
+      setIsMabesApprover(true);
+    }
+  }, [userLevelId, roleId]);
+
+  const getCategories = async () => {
+    try {
+      const category = await listCategory(fileTypeId);
+      const resCategory: Category[] = category?.data?.data?.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          setSelectedCategoryId(findCategory.id);
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  const setupPlacement = (
+    index: number,
+    placement: string,
+    checked: boolean
+  ) => {
+    let temp = [...filePlacements];
+    if (checked) {
+      if (placement === "all") {
+        temp[index] = ["all", "mabes", "polda", "international"];
+      } else {
+        const now = temp[index];
+        now.push(placement);
+        if (now.length === 3 && !now.includes("all")) {
+          now.push("all");
+        }
+        temp[index] = now;
+      }
+    } else {
+      if (placement === "all") {
+        temp[index] = [];
+      } else {
+        const now = temp[index].filter((a) => a !== placement);
+        console.log("now", now);
+        temp[index] = now;
+        if (now.length === 3 && now.includes("all")) {
+          const newData = now.filter((b) => b !== "all");
+          temp[index] = newData;
+        }
+      }
+    }
+    setFilePlacements(temp);
+  };
+
+  const setupPlacementCheck = (length: number) => {
+    const temp = [];
+    for (let i = 0; i < length; i++) {
+      temp.push([]);
+    }
+    setFilePlacements(temp);
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailSPIT(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+        setFiles(details?.contentList);
+        setupPlacementCheck(details?.contentList?.length);
+        form.setValue("contentTitle", details?.contentTitle || "");
+        form.setValue("contentDescription", details?.contentDescription || "");
+        form.setValue("contentCreator", details?.contentCreator || "");
+        form.setValue(
+          "contentRewriteDescription",
+          details?.contentRewriteDescription || ""
+        );
+
+        const filesData = details.contentList || [];
+        const fileUrls = filesData.map((file: { contentFile: string }) =>
+          file.contentFile ? file.contentFile : "default-image.jpg"
+        );
+        setDetailThumb(fileUrls);
+
+        const matchingCategory = categories.find(
+          (category) => category.id === details.categoryId
+        );
+
+        if (matchingCategory) {
+          setSelectedTarget(matchingCategory.name);
+        }
+
+        // setSelectedTarget(details.categoryId); // Untuk dropdown
+      }
+    }
+    initState();
+  }, [refresh]);
+
+  const [tempFile, setTempFile] = useState(
+    detailThumb.map((data: any) => ({
+      contentId: data.id,
+      placement: [],
+    }))
+  );
+
+  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)
+              : [...(file.placement || []), value],
+          };
+        }
+        return file;
+      });
+    });
+  };
+
+  const handleCheckboxChange = (id: string): void => {
+    if (id === "all") {
+      if (publishedFor.includes("all")) {
+        setPublishedFor([]);
+      } else {
+        setPublishedFor(
+          options
+            .filter((opt: any) => opt.id !== "all")
+            .map((opt: any) => opt.id)
+        );
+      }
+    } else {
+      const updatedPublishedFor = publishedFor.includes(id)
+        ? publishedFor.filter((item) => item !== id)
+        : [...publishedFor, id];
+
+      if (publishedFor.includes("all") && id !== "all") {
+        setPublishedFor(updatedPublishedFor.filter((item) => item !== "all"));
+      } else {
+        setPublishedFor(updatedPublishedFor);
+      }
+    }
+  };
+
+  const getPlacement = () => {
+    console.log("getPlaa", filePlacements);
+    const temp = [];
+    for (let i = 0; i < filePlacements?.length; i++) {
+      if (filePlacements[i].length !== 0) {
+        const now = filePlacements[i].filter((a) => a !== "all");
+        const data = {
+          mediaFileId: files[i].contentId,
+          placement: now.join(","),
+        };
+        temp.push(data);
+      }
+    }
+    return temp;
+  };
+
+  // const setupPlacement = (
+  //   index: number,
+  //   category: string,
+  //   isChecked: boolean
+  // ) => {
+  //   setFilePlacements((prev) =>
+  //     prev.map((placement, i) =>
+  //       i === index
+  //         ? isChecked
+  //           ? [...new Set([...placement, category])] // Tambahkan kategori jika belum ada
+  //           : placement.filter((item) => item !== category) // Hapus kategori jika ada
+  //         : placement
+  //     )
+  //   );
+  // };
+
+  const handleSelectAll = (category: string, isChecked: boolean) => {
+    setFilePlacements((prev: string[][]) =>
+      prev.map((placement: string[]) =>
+        isChecked
+          ? Array.from(new Set([...placement, category]))
+          : placement.filter((item: string) => item !== category)
+      )
+    );
+  };
+
+  const save = async (data: {
+    contentTitle: string;
+    contentDescription: string;
+    contentRewriteDescription?: string;
+    contentCreator: string;
+  }): Promise<void> => {
+    const temp = [];
+    for (const element of detail.contentList) {
+      temp.push([]);
+    }
+    const description =
+      selectedFileType === "original"
+        ? data.contentDescription
+        : data.contentRewriteDescription;
+
+    const requestData = {
+      spitId: id,
+      title: data.contentTitle,
+      description,
+      htmlDescription: description,
+      tags: "siap",
+      categoryId: selectedCategoryId,
+      publishedFor: publishedFor.join(","),
+      creator: data.contentCreator,
+      files: isUserMabesApprover ? getPlacement() : [],
+    };
+
+    const response = await convertSPIT(requestData);
+    console.log("Form Data Submitted:", response);
+    setFilePlacements(temp);
+    setFiles(detail.files);
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/en/contributor/content/spit");
+    });
+  };
+
+  const onSubmit = async (data: z.infer<typeof imageSchema>) => {
+    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 [showRewriteEditor, setShowRewriteEditor] = useState(false);
+
+  // const handleRewriteClick = () => {
+  //   setShowRewriteEditor(true);
+  // };
+
+  const handleRewriteClick = async () => {
+    setIsContentRewriteClicked(true);
+    const request = {
+      style: selectedWritingStyle,
+      lang: "id",
+      contextType: "text",
+      urlContext: null,
+      context: detail?.contentDescription,
+      createdBy: roleId,
+      sentiment: "Humorous",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
+    };
+
+    const res = await generateDataRewrite(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+    setShowRewriteEditor(true);
+  };
+
+  const handleArticleIdClick = async (id: string) => {
+    setIsLoadingData(true);
+    let retryCount = 0;
+    const maxRetries = 20;
+
+    try {
+      const waitForStatusUpdate = async () => {
+        while (retryCount < maxRetries) {
+          const res = await getDetailArticle(id);
+          const articleData = res?.data?.data;
+
+          if (articleData?.status === 2) {
+            return articleData;
+          }
+
+          retryCount++;
+          await new Promise((resolve) => setTimeout(resolve, 5000));
+        }
+
+        throw new Error("Timeout: Artikel belum selesai diproses.");
+      };
+      const articleData = await waitForStatusUpdate();
+      const cleanArticleBody = articleData?.articleBody?.replace(
+        /<img[^>]*>/g,
+        ""
+      );
+      const articleImagesData = articleData?.imagesUrl?.split(",");
+      setArticleBody(cleanArticleBody || "");
+      setDetailData(articleData);
+      setSelectedArticleId(id);
+
+      // setArticleImages(articleImagesData || []);
+    } catch (error) {
+      console.error("Error fetching article details:", error);
+    } finally {
+      setIsLoadingData(false);
+    }
+  };
+
+  function deleteSpitContent() {
+    MySwal.fire({
+      title: "Apakah anda ingin menghapus konten?",
+      showCancelButton: true,
+      confirmButtonColor: "#dc3545",
+      confirmButtonText: "Iya",
+      cancelButtonText: "Tidak",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        doDeleteSPIT();
+      }
+    });
+  }
+
+  async function doDeleteSPIT() {
+    const response = await deleteSPIT(id);
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    successBack();
+  }
+
+  function successBack() {
+    MySwal?.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        if (window.history.state && window.history.state.idx > 0) {
+          console.log("backkkkk");
+          console.log(window.history.state);
+          router.back();
+        } else {
+          router.push("/in/contributor/content/spit");
+        }
+      }
+    });
+  }
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          {detail !== undefined ? (
+            <div className="flex flex-col lg:flex-row gap-10">
+              <Card className="w-full lg:w-8/12">
+                <div className="px-6 py-6">
+                  <p className="text-lg font-semibold mb-3">{t("form-spit")}</p>
+                  <div className="gap-5 mb-5">
+                    {/* Input Title */}
+                    <div className="space-y-2 py-3">
+                      <Label>{t("title")}</Label>
+                      <Controller
+                        control={form.control}
+                        name="contentTitle"
+                        render={({ field }) => (
+                          <Input
+                            size="md"
+                            type="text"
+                            value={field.value}
+                            onChange={field.onChange}
+                            placeholder="Enter contentTitle"
+                          />
+                        )}
+                      />
+                    </div>
+                    <div className="flex items-center">
+                      <div className="py-3 w-full space-y-2">
+                        <Label>{t("category")}</Label>
+                        <Select
+                          defaultValue={detail?.content?.name}
+                          onValueChange={(id) => {
+                            console.log("Selected Category ID:", id);
+                            setSelectedCategoryId(Number(id)); // Simpan ID kategori
+                          }}
+                        >
+                          <SelectTrigger size="md">
+                            <SelectValue placeholder="Pilih" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {categories.map((category) => (
+                              <SelectItem
+                                key={category.id}
+                                value={category.id.toString()} // ID kategori dikirim sebagai value
+                              >
+                                {category?.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <div className="">
+                      <RadioGroup
+                        onValueChange={(value) => setSelectedFileType(value)}
+                        value={selectedFileType}
+                        className=" grid-cols-1"
+                      >
+                        <div className="">
+                          <RadioGroupItem value="original" id="original-file" />
+                          <Label htmlFor="original-file">
+                            Select Original File
+                          </Label>
+                        </div>
+                        <div className="py-3 space-y-2">
+                          <Label>{t("description")}</Label>
+                          <Controller
+                            control={form.control}
+                            name="contentDescription"
+                            render={({ field: { onChange, value } }) => (
+                              // <JoditEditor
+                              //   ref={editor}
+                              //   value={detail?.contentDescription}
+                              //   onChange={onChange}
+                              //   className="dark:text-black"
+                              // />
+                              <CustomEditor
+                                onChange={onChange}
+                                initialData={detail?.contentDescription}
+                              />
+                            )}
+                          />
+                        </div>
+                        <p className="text-sm font-semibold">Content Rewrite</p>
+                        <div className="space-y-2 pb-3 w-4/12">
+                          <Label>{t("writing-style")}</Label>
+                          <Select
+                            value={selectedWritingStyle}
+                            onValueChange={setSelectedWritingStyle}
+                          >
+                            <SelectTrigger size="md">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="friendly">Friendly</SelectItem>
+                              <SelectItem value="professional">
+                                Profesional
+                              </SelectItem>
+                              <SelectItem value="informational">
+                                Informational
+                              </SelectItem>
+                              <SelectItem value="neutral">Neutral</SelectItem>
+                              <SelectItem value="witty">Witty</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <div className="my-2">
+                          <Button
+                            size="sm"
+                            type="button"
+                            onClick={handleRewriteClick}
+                            className="bg-blue-500 text-white py-2 px-4 rounded"
+                          >
+                            Content Rewrite
+                          </Button>
+                        </div>
+                        {showRewriteEditor && (
+                          <div>
+                            {isGeneratedArticle && (
+                              <div className="mt-3 pb-0 flex flex-row ">
+                                {articleIds.map((id: string, index: number) => (
+                                  <Button
+                                    type="button"
+                                    key={index}
+                                    className={`mr-3 px-3 py-2 rounded-md ${
+                                      selectedArticleId === id
+                                        ? "bg-green-500 text-white"
+                                        : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
+                                    }`}
+                                    onClick={() => handleArticleIdClick(id)}
+                                  >
+                                    {"Narasi " + (index + 1)}
+                                  </Button>
+                                ))}
+                              </div>
+                            )}
+                            <div className="flex items-center space-x-2 mt-3">
+                              <RadioGroupItem
+                                value="rewrite"
+                                id="rewrite-file"
+                              />
+                              <Label htmlFor="rewrite-file">
+                                Select File Rewrite
+                              </Label>
+                            </div>
+                            <div className="py-3 space-y-2">
+                              <Label>{t("file-rewrite")}</Label>
+                              <Controller
+                                control={form.control}
+                                name="contentRewriteDescription"
+                                render={({ field: { onChange, value } }) =>
+                                  isLoadingData ? (
+                                    <div className="flex justify-center items-center h-40">
+                                      <p className="text-gray-500">
+                                        Loading Proses Data...
+                                      </p>
+                                    </div>
+                                  ) : (
+                                    <CustomEditor
+                                      onChange={onChange}
+                                      initialData={articleBody || value}
+                                    />
+                                  )
+                                }
+                              />
+                            </div>
+                          </div>
+                        )}
+                      </RadioGroup>
+                    </div>
+                    <div className="space-y-2">
+                      <Label className="text-xl">{t("file-media")}</Label>
+                      <div className="w-full  ">
+                        <Swiper
+                          thumbs={{ swiper: thumbsSwiper }}
+                          modules={[FreeMode, Navigation, Thumbs]}
+                          navigation={false}
+                          className="w-full"
+                        >
+                          {detailThumb?.map((data: any) => (
+                            <SwiperSlide key={data.id}>
+                              <img
+                                className="object-fill h-full w-full rounded-md"
+                                src={data}
+                                alt={` ${data.id}`}
+                              />
+                            </SwiperSlide>
+                          ))}
+                        </Swiper>
+                        <div className=" mt-2 ">
+                          <Swiper
+                            onSwiper={setThumbsSwiper}
+                            slidesPerView={8}
+                            spaceBetween={8}
+                            pagination={{
+                              clickable: true,
+                            }}
+                            modules={[Pagination, Thumbs]}
+                            // className="mySwiper2"
+                          >
+                            {detailThumb?.map((data: any) => (
+                              <SwiperSlide key={data.id}>
+                                <img
+                                  className="object-cover h-[60px] w-[80px] rounded-md"
+                                  src={data}
+                                  alt={` ${data.id}`}
+                                />
+                              </SwiperSlide>
+                            ))}
+                          </Swiper>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="mt-3">
+                      <Label className="text-xl">{t("file-placement")}</Label>
+                    </div>
+                    {files?.length > 1 && (
+                      <div className="flex flex-wrap gap-2 mt-2 justify-end mr-24 pr-2">
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            id="all-content"
+                            onCheckedChange={(e) =>
+                              handleSelectAll("all", Boolean(e))
+                            }
+                          />
+                          <label
+                            htmlFor="all-content"
+                            className="text-xs font-medium"
+                          >
+                            {t("all")}
+                          </label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            id="all-nasional"
+                            onCheckedChange={(e) =>
+                              handleSelectAll("mabes", Boolean(e))
+                            }
+                          />
+                          <label
+                            htmlFor="all-nasional"
+                            className="text-xs font-medium"
+                          >
+                            {t("all")} Nasional
+                          </label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            id="all-wilayah"
+                            onCheckedChange={(e) =>
+                              handleSelectAll("polda", Boolean(e))
+                            }
+                          />
+                          <label
+                            htmlFor="all-wilayah"
+                            className="text-xs font-medium"
+                          >
+                            {t("all")} Wilayah
+                          </label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            id="all-international"
+                            onCheckedChange={(e) =>
+                              handleSelectAll("international", Boolean(e))
+                            }
+                          />
+                          <label
+                            htmlFor="all-international"
+                            className="text-xs font-medium"
+                          >
+                            {t("all")} Internasional
+                          </label>
+                        </div>
+                      </div>
+                    )}
+                    {files?.map((file, index) => (
+                      <div
+                        key={file.contentId}
+                        className="flex flex-row gap-2 items-center my-3"
+                      >
+                        <img
+                          src={file.contentFile}
+                          className="w-[180px] rounded-md"
+                        />
+                        <div className="flex flex-col gap-2 w-full pl-4">
+                          <div className="flex justify-between text-sm">
+                            {file.fileName}
+                          </div>
+                          <div className="flex flex-wrap gap-2">
+                            <div className="flex items-center space-x-2">
+                              <Checkbox
+                                id="terms"
+                                value="all"
+                                checked={filePlacements[index]?.includes("all")}
+                                onCheckedChange={(e) =>
+                                  setupPlacement(index, "all", Boolean(e))
+                                }
+                              />
+                              <label
+                                htmlFor="terms"
+                                className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                              >
+                                {t("all")}
+                              </label>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                              <Checkbox
+                                id="terms"
+                                checked={filePlacements[index]?.includes(
+                                  "mabes"
+                                )}
+                                onCheckedChange={(e) =>
+                                  setupPlacement(index, "mabes", Boolean(e))
+                                }
+                              />
+                              <label
+                                htmlFor="terms"
+                                className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                              >
+                                Nasional
+                              </label>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                              <Checkbox
+                                id="terms"
+                                checked={filePlacements[index]?.includes(
+                                  "polda"
+                                )}
+                                onCheckedChange={(e) =>
+                                  setupPlacement(index, "polda", Boolean(e))
+                                }
+                              />
+                              <label
+                                htmlFor="terms"
+                                className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                              >
+                                Wilayah
+                              </label>
+                            </div>
+
+                            <div className="flex items-center space-x-2">
+                              <Checkbox
+                                id="terms"
+                                checked={filePlacements[index]?.includes(
+                                  "international"
+                                )}
+                                onCheckedChange={(e) =>
+                                  setupPlacement(
+                                    index,
+                                    "international",
+                                    Boolean(e)
+                                  )
+                                }
+                              />
+                              <label
+                                htmlFor="terms"
+                                className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                              >
+                                Internasional
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </Card>
+              <div className="w-full lg:w-4/12">
+                <Card className=" h-[800px]">
+                  <div className="px-3 py-3">
+                    <div className="space-y-2">
+                      <Label>{t("creator")}</Label>
+                      <Controller
+                        control={form.control}
+                        name="contentCreator"
+                        render={({ field }) => (
+                          <Input
+                            size="md"
+                            type="text"
+                            value={detail?.contentCreator}
+                            onChange={field.onChange}
+                            placeholder="Enter Title"
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-3 px-3">
+                    <Label>{t("preview")}</Label>
+                    <Card className="mt-2">
+                      <img
+                        src={detail.contentThumbnail}
+                        alt="Thumbnail Gambar Utama"
+                        className="w-full h-auto rounded"
+                      />
+                    </Card>
+                  </div>
+                  <div className="px-3 py-3">
+                    <div className="space-y-2">
+                      <Label>{t("tags")}</Label>
+                      <div className="flex flex-wrap gap-2">
+                        {detail?.contentTag
+                          ?.split(",")
+                          .map((tag: any, index: any) => (
+                            <Badge
+                              key={index}
+                              className="border rounded-md  px-2 py-2"
+                            >
+                              {tag.trim()}
+                            </Badge>
+                          ))}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="px-3 py-3">
+                    <div className="flex flex-col gap-3 space-y-2">
+                      <Label>{t("publish-target")}</Label>
+                      {options.map((option) => (
+                        <div
+                          key={option.id}
+                          className="flex gap-2 items-center"
+                        >
+                          <Checkbox
+                            id={option.id}
+                            checked={
+                              option.id === "all"
+                                ? publishedFor.length ===
+                                  options.filter((opt: any) => opt.id !== "all")
+                                    .length
+                                : publishedFor.includes(option.id)
+                            }
+                            onCheckedChange={() =>
+                              handleCheckboxChange(option.id)
+                            }
+                          />
+                          <Label htmlFor={option.id}>{option.label}</Label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </Card>
+                <div className="flex flex-row justify-end gap-3">
+                  <div className="mt-4">
+                    <Button type="submit" color="primary">
+                      {t("submit")}
+                    </Button>
+                  </div>
+                  <div className="mt-4">
+                    <Button
+                      type="submit"
+                      className="bg-red-500 hover:bg-red-700"
+                      onClick={() => deleteSpitContent()}
+                    >
+                      {t("cancel")}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            ""
+          )}
+        </form>
+      </Form>
+    </>
+  );
+}
diff --git a/components/form/content/task-ta/teks-detail-form.tsx b/components/form/content/task-ta/teks-detail-form.tsx
new file mode 100644
index 00000000..c9d5c6f8
--- /dev/null
+++ b/components/form/content/task-ta/teks-detail-form.tsx
@@ -0,0 +1,949 @@
+"use client";
+import React, { ChangeEvent, 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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  rejectFiles,
+  submitApproval,
+} from "@/service/content/content";
+import {
+  detailMedia,
+  getDataApprovalByMediaUpload,
+} from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { MailIcon } from "lucide-react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import "swiper/css";
+import "swiper/css/navigation";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+import {
+  DialogHeader,
+  DialogFooter,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { loading } from "@/config/swal";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { error } from "@/lib/swal";
+import dynamic from "next/dynamic";
+import { useTranslations } from "next-intl";
+import SuggestionModal from "@/components/modal/suggestions-modal";
+import { formatDateToIndonesian } from "@/utils/globals";
+import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
+
+const imageSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type FileType = {
+  id: number;
+  url: string;
+  thumbnailFileUrl: string;
+  fileName: string;
+};
+
+type Detail = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  category: {
+    id: number;
+    name: string;
+  };
+  categoryName: string;
+  creatorName: string;
+  thumbnailLink: string;
+  tags: string;
+  statusName: string;
+  isPublish: boolean;
+  needApprovalFromLevel: number;
+  files: FileType[];
+  uploadedById: number;
+};
+
+const ViewEditor = dynamic(
+  () => {
+    return import("@/components/editor/view-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormTeksDetail() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const userId = getCookiesDecrypt("uie");
+  const userLevelId = getCookiesDecrypt("ulie");
+  const roleId = getCookiesDecrypt("urie");
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const editor = useRef(null);
+  type ImageSchema = z.infer<typeof imageSchema>;
+
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+  const [status, setStatus] = useState("");
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [detail, setDetail] = useState<any>();
+  const [refresh, setRefresh] = useState(false);
+  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [description, setDescription] = useState("");
+  const [main, setMain] = useState<any>([]);
+  const [detailThumb, setDetailThumb] = useState<any>([]);
+  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
+
+  const t = useTranslations("Form");
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
+  const [isMabesApprover, setIsMabesApprover] = useState(false);
+
+  const [filePlacements, setFilePlacements] = useState<string[][]>([]);
+  const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
+
+  const [approval, setApproval] = useState<any>();
+
+  let fileTypeId = "3";
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<ImageSchema>({
+    resolver: zodResolver(imageSchema),
+  });
+
+  // const handleKeyDown = (e: any) => {
+  //   const newTag = e.target.value.trim(); // Ambil nilai input
+  //   if (e.key === "Enter" && newTag) {
+  //     e.preventDefault(); // Hentikan submit form
+  //     if (!tags.includes(newTag)) {
+  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
+  //       setValue("tags", ""); // Kosongkan input
+  //     }
+  //   }
+  // };
+
+  useEffect(() => {
+    if (
+      userLevelId != undefined &&
+      roleId != undefined &&
+      userLevelId == "216" &&
+      roleId == "3"
+    ) {
+      setIsUserMabesApprover(true);
+    }
+  }, [userLevelId, roleId]);
+
+  const handleCheckboxChange = (id: number) => {
+    setSelectedPublishers((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data?.data?.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  const setupPlacementCheck = (length: number) => {
+    const temp = [];
+    for (let i = 0; i < length; i++) {
+      temp.push([]);
+    }
+    setFilePlacements(temp);
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+        console.log("detail", details);
+        setFiles(details?.files);
+        setDetail(details);
+        setMain({
+          type: details?.fileType.name,
+          url: details?.files[0]?.url,
+          names: details?.files[0]?.fileName,
+          format: details?.files[0]?.format,
+        });
+
+        if (details.publishedForObject) {
+          const publisherIds = details.publishedForObject.map(
+            (obj: any) => obj.id
+          );
+          setSelectedPublishers(publisherIds);
+        }
+
+        const matchingCategory = categories.find(
+          (category) => category.id === details.categoryId
+        );
+
+        if (matchingCategory) {
+          setSelectedTarget(matchingCategory.name);
+        }
+
+        setSelectedTarget(details.categoryId); // Untuk dropdown
+
+        const filesData = details.files || [];
+        const fileUrls = filesData.map((file: any) => ({
+          url: file.secondaryUrl || "default-image.jpg",
+          format: file.format,
+          fileName: file.fileName,
+        }));
+        setDetailThumb(fileUrls);
+
+        const approvals = await getDataApprovalByMediaUpload(details?.id);
+        setApproval(approvals?.data?.data);
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const actionApproval = (e: string) => {
+    const temp = [];
+    for (const element of detail.files) {
+      temp.push([]);
+    }
+    setFilePlacements(temp);
+    setStatus(e);
+    setFiles(detail.files);
+
+    setDescription("");
+    setModalOpen(true);
+  };
+
+  const submit = async () => {
+    if (
+      (description?.length > 1 && Number(status) == 3) ||
+      Number(status) == 2 ||
+      Number(status) == 4
+    ) {
+      save();
+      // MySwal.fire({
+      //   title: "Simpan Approval",
+      //   text: "",
+      //   icon: "warning",
+      //   showCancelButton: true,
+      //   cancelButtonColor: "#d33",
+      //   confirmButtonColor: "#3085d6",
+      //   confirmButtonText: "Simpan",
+      // }).then((result) => {
+      //   if (result.isConfirmed) {
+
+      //   }
+      // });
+    }
+  };
+
+  const getPlacement = () => {
+    console.log("getPlaa", filePlacements);
+    const temp = [];
+    for (let i = 0; i < filePlacements?.length; i++) {
+      if (filePlacements[i].length !== 0) {
+        const now = filePlacements[i].filter((a) => a !== "all");
+        const data = { mediaFileId: files[i].id, placements: now.join(",") };
+        temp.push(data);
+      }
+    }
+    return temp;
+  };
+
+  async function save() {
+    const data = {
+      mediaUploadId: id,
+      statusId: status,
+      message: description,
+      files: isUserMabesApprover ? getPlacement() : [],
+    };
+    setModalOpen(false);
+
+    loading();
+    const response = await submitApproval(data);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    const dataReject = {
+      listFiles: rejectedFiles,
+    };
+
+    const resReject = await rejectFiles(dataReject);
+
+    if (resReject?.error) {
+      error(resReject.message);
+      return false;
+    }
+
+    close();
+    submitApprovalSuccesss();
+
+    return false;
+  }
+
+  const setupPlacement = (
+    index: number,
+    placement: string,
+    checked: boolean
+  ) => {
+    let temp = [...filePlacements];
+    if (checked) {
+      if (placement === "all") {
+        temp[index] = ["all", "mabes", "polda", "international"];
+      } else {
+        const now = temp[index];
+        now.push(placement);
+        if (now.length === 3 && !now.includes("all")) {
+          now.push("all");
+        }
+        temp[index] = now;
+      }
+    } else {
+      if (placement === "all") {
+        temp[index] = [];
+      } else {
+        const now = temp[index].filter((a) => a !== placement);
+        console.log("now", now);
+        temp[index] = now;
+        if (now.length === 3 && now.includes("all")) {
+          const newData = now.filter((b) => b !== "all");
+          temp[index] = newData;
+        }
+      }
+    }
+    setFilePlacements(temp);
+  };
+
+  function handleDeleteFileApproval(id: number) {
+    const selectedFiles = files.filter((file) => file.id != id);
+    setFiles(selectedFiles);
+    const rejects = rejectedFiles;
+    rejects.push(id);
+    setRejectedFiles(rejects);
+  }
+  const handleMain = (
+    type: string,
+    url: string,
+    names: string,
+    format: string
+  ) => {
+    console.log("Test 3 :", type, url, names, format);
+    setMain({
+      type,
+      url,
+      names,
+      format,
+    });
+    return false;
+  };
+
+  const submitApprovalSuccesss = () => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/in/contributor/content/teks");
+    });
+  };
+
+  return (
+    <form>
+      {detail !== undefined ? (
+        <div className="flex flex-col lg:flex-row gap-10">
+          <Card className="w-full lg:w-8/12">
+            <div className="px-6 py-6">
+              <p className="text-lg font-semibold mb-3">{t("form-text")}</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>{t("title")}</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 items-center">
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
+                    <Select
+                      value={detail?.category.name} // Nilai default berdasarkan detail
+                      onValueChange={(id) => {
+                        console.log("Selected Category:", id);
+                        setSelectedTarget(id);
+                      }}
+                    >
+                      <SelectTrigger size="md">
+                        <SelectValue placeholder="Pilih" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {categories.map((category) => (
+                          <SelectItem key={category.id} value={category.name}>
+                            {category.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <ViewEditor initialData={detail?.htmlDescription} />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+                <div className="space-y-2">
+                  <Label className="text-xl">{t("file-media")} </Label>
+                  <div className="w-full">
+                    <Swiper
+                      thumbs={{ swiper: thumbsSwiper }}
+                      modules={[FreeMode, Navigation, Thumbs]}
+                      navigation={false}
+                      className="w-full"
+                    >
+                      {detailThumb?.map((data: any, index: number) => (
+                        <SwiperSlide key={index}>
+                          {[".jpg", ".jpeg", ".png", ".webp"].includes(
+                            data.format
+                          ) ? (
+                            // Menampilkan gambar
+                            <img
+                              className="object-fill h-full w-full rounded-md"
+                              src={data.url}
+                              alt={data.fileName || "File"}
+                            />
+                          ) : data.format === ".pdf" ? (
+                            // Menampilkan PDF menggunakan iframe
+                            <iframe
+                              className="w-full h-96 rounded-md"
+                              src={data.url}
+                              title={data.fileName || "PDF File"}
+                            />
+                          ) : [".docx", ".ppt", ".pptx"].includes(
+                              data.format
+                            ) ? (
+                            // Menampilkan file dokumen menggunakan Office Viewer
+                            <iframe
+                              className="w-full h-96 rounded-md"
+                              src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
+                                data.url
+                              )}`}
+                              title={data.fileName || "Document"}
+                            />
+                          ) : (
+                            // Menampilkan link jika format tidak dikenali
+                            <a
+                              href={data.url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="block text-blue-500 underline"
+                            >
+                              View {data.fileName || "File"}
+                            </a>
+                          )}
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
+                    <div className="mt-2 ">
+                      <Swiper
+                        onSwiper={setThumbsSwiper}
+                        slidesPerView={8}
+                        spaceBetween={8}
+                        pagination={{ clickable: true }}
+                        modules={[Pagination, Thumbs]}
+                      >
+                        {detailThumb?.map((data: any, index: number) => (
+                          <SwiperSlide key={index}>
+                            {[".jpg", ".jpeg", ".png", ".webp"].includes(
+                              data.format
+                            ) ? (
+                              <img
+                                className="object-cover h-[60px] w-[80px]"
+                                src={data.url}
+                                alt={data.fileName}
+                              />
+                            ) : (
+                              <div className="h-[60px] w-[80px] flex items-center justify-center bg-gray-200 text-sm text-center text-gray-700 rounded-md">
+                                {data?.format?.replace(".", "").toUpperCase()}
+                              </div>
+                            )}
+                          </SwiperSlide>
+                        ))}
+                      </Swiper>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-full lg:w-4/12">
+            <Card className="pb-3">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("creator")}</Label>
+                  <Controller
+                    control={control}
+                    name="creatorName"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        value={detail?.creatorName}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.creatorName?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.creatorName.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              {/* <div className="mt-3 px-3">
+                <Label>Pratinjau Gambar Utama</Label>
+                <Card className="mt-2">
+                  <img
+                    src={detail.thumbnailLink}
+                    alt="Thumbnail Gambar Utama"
+                    className="w-full h-auto rounded"
+                  />
+                </Card>
+              </div> */}
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("tags")}</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {detail?.tags
+                      ?.split(",")
+                      .map((tag: string, index: number) => (
+                        <Badge
+                          key={index}
+                          className="border rounded-md  px-2 py-2"
+                        >
+                          {tag.trim()}
+                        </Badge>
+                      ))}
+                  </div>
+                </div>
+              </div>
+              <div className="px-3 py-3">
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="5"
+                      checked={selectedPublishers.includes(5)}
+                      onChange={() => handleCheckboxChange(5)}
+                    />
+                    <Label htmlFor="5">UMUM</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="6"
+                      checked={selectedPublishers.includes(6)}
+                      onChange={() => handleCheckboxChange(6)}
+                    />
+                    <Label htmlFor="6">JOURNALIS</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="7"
+                      checked={selectedPublishers.includes(7)}
+                      onChange={() => handleCheckboxChange(7)}
+                    />
+                    <Label htmlFor="7">POLRI</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="8"
+                      checked={selectedPublishers.includes(8)}
+                      onChange={() => handleCheckboxChange(8)}
+                    />
+                    <Label htmlFor="8">KSP</Label>
+                  </div>
+                </div>
+              </div>
+              <SuggestionModal
+                id={Number(id)}
+                numberOfSuggestion={detail?.numberOfSuggestion}
+              />
+              <div className="px-3 py-3 border mx-3">
+                <p>{t("information")}:</p>
+                <p className="text-sm text-slate-400">{detail?.statusName}</p>
+                <p>Komentar</p>
+                <p>{approval?.message}</p>
+                <p className="text-right text-sm">
+                  {" "}
+                  {approval?.approvalBy?.fullname} |{" "}
+                  {formatDateToIndonesian(approval?.approvalDate)}
+                </p>
+                <ApprovalHistoryModal id={Number(id)} />
+              </div>
+              {/* {detail?.isPublish == false ? (
+                <div className="p-3">
+                  <Button className="bg-blue-600">Publish</Button>
+                </div>
+              ) : (
+                ""
+              )} */}
+
+              <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+                <DialogContent size="md">
+                  <DialogHeader>
+                    <DialogTitle>{t("leave-comment")}</DialogTitle>
+                  </DialogHeader>
+                  {status == "2"
+                    ? files?.map((file, index) => (
+                        <div
+                          key={file.id}
+                          className="flex flex-row gap-2 items-center"
+                        >
+                          {/* <img src={file.url} className="w-[200px]" /> */}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="48"
+                            height="48"
+                            viewBox="0 0 16 16"
+                          >
+                            <path
+                              fill="currentColor"
+                              d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207zM7 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M7.5 9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM7 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M6 9.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M5.5 12a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"
+                            />
+                          </svg>
+                          <div className="flex flex-col gap-2 w-full">
+                            <div className="flex justify-between text-sm">
+                              {file.fileName}
+                              <a
+                                onClick={() =>
+                                  handleDeleteFileApproval(file.id)
+                                }
+                              >
+                                <Icon icon="humbleicons:times" color="red" />
+                              </a>
+                            </div>
+                            {isUserMabesApprover && (
+                              <div className="flex flex-row gap-2">
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    value="all"
+                                    checked={filePlacements[index]?.includes(
+                                      "all"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(index, "all", Boolean(e))
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    {t("all")}
+                                  </label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    checked={filePlacements[index]?.includes(
+                                      "mabes"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(index, "mabes", Boolean(e))
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    Nasional
+                                  </label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    checked={filePlacements[index]?.includes(
+                                      "polda"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(index, "polda", Boolean(e))
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    Wilayah
+                                  </label>
+                                </div>
+
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    checked={filePlacements[index]?.includes(
+                                      "international"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(
+                                        index,
+                                        "international",
+                                        Boolean(e)
+                                      )
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    Internasional
+                                  </label>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))
+                    : ""}
+                  <div className="flex flex-col gap-4">
+                    <Textarea
+                      placeholder="Type your message here."
+                      value={description}
+                      onChange={(e) => setDescription(e.target.value)}
+                    />
+                  </div>
+                  {status == "3" || status == "4" ? (
+                    <div className="flex flex-row gap-2">
+                      <Badge
+                        color={
+                          description === "Kualitas media kurang baik"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setDescription("Kualitas media kurang baik")
+                        }
+                      >
+                        Kualitas media kurang baik
+                      </Badge>
+
+                      <Badge
+                        color={
+                          description === "Deskripsi kurang lengkap"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setDescription("Deskripsi kurang lengkap")
+                        }
+                      >
+                        Deskripsi kurang lengkap
+                      </Badge>
+                      <Badge
+                        color={
+                          description === "Judul kurang tepat"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Judul kurang tepat")}
+                      >
+                        Judul kurang tepat
+                      </Badge>
+                    </div>
+                  ) : (
+                    <div className="flex flex-row gap-2">
+                      <Badge
+                        color={
+                          description === "Konten sangat bagus"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Konten sangat bagus")}
+                      >
+                        Konten sangat bagus
+                      </Badge>
+                      <Badge
+                        color={
+                          description === "Konten menarik"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Konten menarik")}
+                      >
+                        Konten menarik
+                      </Badge>
+                    </div>
+                  )}
+                  <DialogFooter>
+                    <Button
+                      type="button"
+                      color="primary"
+                      onClick={() => submit()}
+                    >
+                      {t("submit")}
+                    </Button>
+                    <Button
+                      type="button"
+                      color="destructive"
+                      onClick={() => {
+                        setModalOpen(false);
+                      }}
+                    >
+                      {t("cancel")}
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </Card>
+            {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
+              Number(detail?.uploadedById) == Number(userId) ? (
+                ""
+              ) : (
+                <div className="flex flex-col gap-2 p-3">
+                  <Button
+                    onClick={() => actionApproval("2")}
+                    color="primary"
+                    type="button"
+                  >
+                    <Icon icon="fa:check" className="mr-3" /> {t("accept")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("3")}
+                    className="bg-orange-400 hover:bg-orange-300"
+                    type="button"
+                  >
+                    <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                    {t("revision")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("4")}
+                    color="destructive"
+                    type="button"
+                  >
+                    <Icon icon="fa:times" className="mr-3" />
+                    {t("reject")}
+                  </Button>
+                </div>
+              )
+            ) : (
+              ""
+            )}
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/teks-form.tsx b/components/form/content/task-ta/teks-form.tsx
new file mode 100644
index 00000000..c9a9ce4e
--- /dev/null
+++ b/components/form/content/task-ta/teks-form.tsx
@@ -0,0 +1,1134 @@
+"use client";
+import React, {
+  ChangeEvent,
+  useEffect,
+  useRef,
+  Fragment,
+  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 { Upload } from "tus-js-client";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { redirect, 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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/service/content/content";
+import { uploadThumbnailBlog } from "@/service/blog/blog";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/service/content/ai";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react";
+import { CloudUpload } from "lucide-react";
+import Image from "next/image";
+import { error, loading } from "@/config/swal";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import dynamic from "next/dynamic";
+import { getCsrfToken } from "@/service/auth";
+import { Link } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+type Option = {
+  id: string;
+  label: string;
+};
+
+export default function FormTeks() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type TeksSchema = z.infer<typeof teksSchema>;
+
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+  const roleId = getCookiesDecrypt("urie");
+
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [thumbnail, setThumbnail] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [selectedLanguage, setSelectedLanguage] = useState("");
+
+  const [selectedSEO, setSelectedSEO] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
+  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
+  const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
+
+  const [articleIds, setArticleIds] = useState<string[]>([]);
+  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
+  const [articleBody, setArticleBody] = useState<string>("");
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
+    null
+  );
+  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
+  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
+  const [selectedSize, setSelectedSize] = useState("");
+  const [detailData, setDetailData] = useState<any>(null);
+  const [articleImages, setArticleImages] = useState<string[]>([]);
+  const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const t = useTranslations("Form");
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  let fileTypeId = "3";
+  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 [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const options: Option[] = [
+    { id: "all", label: "SEMUA" },
+    { id: "5", label: "UMUM" },
+    { id: "6", label: "JOURNALIS" },
+    { id: "7", label: "POLRI" },
+    { id: "8", label: "KSP" },
+  ];
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    accept: {
+      "application/pdf": [],
+      "application/msword": [], // .doc
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+        [], // .docx
+    },
+  });
+
+  const teksSchema = z.object({
+    title: z.string().min(1, { message: "Judul diperlukan" }),
+    description: z
+      .string()
+      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
+      .or(
+        z.literal(articleBody || "").refine((val) => val.length > 0, {
+          message: "Deskripsi diperlukan.",
+        })
+      ),
+    creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+    // tags: z.string().min(1, { message: "Judul diperlukan" }),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useForm<TeksSchema>({
+    resolver: zodResolver(teksSchema),
+  });
+
+  const doGenerateMainKeyword = async () => {
+    console.log(selectedMainKeyword);
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const titleData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for title with data:", titleData);
+        const titleRes = await getGenerateTitle(titleData);
+        setTitle(titleRes?.data?.data || "");
+        console.log("Generated title:", titleRes?.data?.data);
+
+        const keywordsData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for keywords with data:", keywordsData);
+        const keywordsRes = await getGenerateKeywords(keywordsData);
+        setSelectedSEO(keywordsRes?.data?.data || []);
+        console.log("Generated keywords:", keywordsRes?.data?.data);
+      } catch (error) {
+        console.error("Error during generation process:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const doGenerateTitle = async () => {
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const titleData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for title with data:", titleData);
+        const titleRes = await getGenerateTitle(titleData);
+        setTitle(titleRes?.data?.data || "");
+        console.log("Generated title:", titleRes?.data?.data);
+      } catch (error) {
+        console.error("Error generating title:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const doGenerateKeyword = async () => {
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const keywordsData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for keywords with data:", keywordsData);
+        const keywordsRes = await getGenerateKeywords(keywordsData);
+        setSelectedSEO(keywordsRes?.data?.data || []);
+        console.log("Generated keywords:", keywordsRes?.data?.data);
+      } catch (error) {
+        console.error("Error generating keywords:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const handleGenerateArtikel = async () => {
+    const request = {
+      advConfig: selectedAdvConfig,
+      style: selectedWritingStyle,
+      website: "None",
+      connectToWeb: true,
+      lang: selectedLanguage,
+      pointOfView: "None",
+      title: title,
+      imageSource: "Web",
+      mainKeyword: selectedMainKeyword,
+      additionalKeywords: selectedSEO,
+      targetCountry: null,
+      articleSize: selectedSize,
+      projectId: 2,
+      createdBy: roleId,
+      clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
+    };
+
+    const res = await generateDataArticle(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+  };
+
+  const handleArticleIdClick = async (id: string) => {
+    setIsLoadingData(true);
+    let retryCount = 0;
+    const maxRetries = 20;
+
+    try {
+      const waitForStatusUpdate = async () => {
+        while (retryCount < maxRetries) {
+          const res = await getDetailArticle(id);
+          const articleData = res?.data?.data;
+
+          if (articleData?.status === 2) {
+            return articleData;
+          }
+
+          retryCount++;
+          await new Promise((resolve) => setTimeout(resolve, 5000));
+        }
+
+        throw new Error("Timeout: Artikel belum selesai diproses.");
+      };
+      const articleData = await waitForStatusUpdate();
+      const cleanArticleBody = articleData?.articleBody?.replace(
+        /<img[^>]*>/g,
+        ""
+      );
+      const articleImagesData = articleData?.imagesUrl?.split(",");
+      setArticleBody(cleanArticleBody || "");
+      setDetailData(articleData);
+      setSelectedArticleId(id);
+      setArticleImages(articleImagesData || []);
+    } catch (error) {
+      console.error("Error fetching article details:", error);
+    } finally {
+      setIsLoadingData(false);
+    }
+  };
+
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && e.currentTarget.value.trim()) {
+      e.preventDefault();
+      const newTag = e.currentTarget.value.trim();
+      if (!tags.includes(newTag)) {
+        setTags((prevTags) => [...prevTags, newTag]); // Add new tag
+        if (inputRef.current) {
+          inputRef.current.value = ""; // Clear input field
+        }
+      }
+    }
+  };
+
+  const handleRemoveTag = (index: number) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // Remove tag
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+      // setVideoActive(fileTypeId == '2');
+      // getRoles();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data?.data?.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  const handleCheckboxChange = (id: string): void => {
+    if (id === "all") {
+      if (publishedFor.includes("all")) {
+        // Uncheck all checkboxes
+        setPublishedFor([]);
+      } else {
+        // Select all checkboxes
+        setPublishedFor(
+          options
+            .filter((opt: any) => opt.id !== "all")
+            .map((opt: any) => opt.id)
+        );
+      }
+    } else {
+      const updatedPublishedFor = publishedFor.includes(id)
+        ? publishedFor.filter((item) => item !== id)
+        : [...publishedFor, id];
+
+      // Remove "all" if any checkbox is unchecked
+      if (publishedFor.includes("all") && id !== "all") {
+        setPublishedFor(updatedPublishedFor.filter((item) => item !== "all"));
+      } else {
+        setPublishedFor(updatedPublishedFor);
+      }
+    }
+  };
+
+  const save = async (data: TeksSchema) => {
+    loading();
+    const finalTags = tags.join(", ");
+    const finalTitle = isSwitchOn ? title : data.title;
+    const finalDescription = articleBody || data.description;
+    if (!finalDescription.trim()) {
+      MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
+      return;
+    }
+    let requestData: {
+      title: string;
+      description: string;
+      htmlDescription: string;
+      fileTypeId: string;
+      categoryId: any;
+      subCategoryId: any;
+      uploadedBy: string;
+      statusId: string;
+      publishedFor: string;
+      creatorName: string;
+      tags: string;
+      isYoutube: boolean;
+      isInternationalMedia: boolean;
+      attachFromScheduleId?: number; // ✅ Tambahkan properti ini
+    } = {
+      ...data,
+      title: finalTitle,
+      description: finalDescription,
+      htmlDescription: finalDescription,
+      fileTypeId,
+      categoryId: selectedCategory,
+      subCategoryId: selectedCategory,
+      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+      statusId: "1",
+      publishedFor: publishedFor.join(","),
+      creatorName: data.creatorName,
+      tags: finalTags,
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    let id = Cookies.get("idCreate");
+
+    if (scheduleId !== undefined) {
+      requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
+    }
+
+    if (id == undefined) {
+      const response = await createMedia(requestData);
+      console.log("Form Data Submitted:", requestData);
+
+      if (response?.error) {
+        MySwal.fire("Error", response?.message, "error");
+        return;
+      }
+      Cookies.set("idCreate", response?.data?.data, { expires: 1 });
+      id = response?.data?.data;
+
+      // Upload Thumbnail
+      const formMedia = new FormData();
+      console.log("Thumbnail : ", files[0]);
+      formMedia.append("file", files[0]);
+      const responseThumbnail = await uploadThumbnail(id, formMedia);
+      if (responseThumbnail?.error == true) {
+        error(responseThumbnail?.message);
+        return false;
+      }
+    }
+
+    // Upload File
+    const progressInfoArr = [];
+    for (const item of files) {
+      progressInfoArr.push({ percentage: 0, fileName: item.name });
+    }
+    progressInfo = progressInfoArr;
+    setIsStartUpload(true);
+    setProgressList(progressInfoArr);
+
+    close();
+    // showProgress();
+    files.map(async (item: any, index: number) => {
+      await uploadResumableFile(index, String(id), item, "0");
+    });
+
+    Cookies.remove("idCreate");
+
+    // MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
+  };
+
+  const onSubmit = (data: TeksSchema) => {
+    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);
+      }
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    duration: string
+  ) {
+    console.log(idx, id, file, duration);
+
+    // const placements = getPlacement(file.placements);
+    // console.log("Placementttt:  : ", placements);
+
+    const resCsrf = await getCsrfToken();
+    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}/media/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        mediaid: id,
+        filename: file.name,
+        filetype: file.type,
+        duration,
+        isWatermark: "false", // hardcode
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        progressInfo[idx].percentage = uploadPersen;
+        counterUpdateProgress++;
+        console.log(counterUpdateProgress);
+        setProgressList(progressInfo);
+        setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        uploadPersen = 100;
+        progressInfo[idx].percentage = 100;
+        counterUpdateProgress++;
+        setCounterProgress(counterUpdateProgress);
+        successTodo();
+      },
+    });
+
+    upload.start();
+  }
+
+  const successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  function successTodo() {
+    let counter = 0;
+    for (const element of progressInfo) {
+      if (element.percentage == 100) {
+        counter++;
+      }
+    }
+    if (counter == progressInfo.length) {
+      setIsStartUpload(false);
+      // hideProgress();
+      Cookies.remove("idCreate");
+      successSubmit("/in/contributor/content/teks");
+    }
+  }
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setThumbnail(file);
+      console.log("Selected Thumbnail:", file);
+    }
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+    }
+  };
+
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file.type.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
+
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const fileList = files.map((file) => (
+    <div
+      key={file.name}
+      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        <div className="file-preview">{renderFilePreview(file)}</div>
+        <div>
+          <div className=" text-sm  text-card-foreground">{file.name}</div>
+          <div className=" text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className=" border-none rounded-full"
+        onClick={() => handleRemoveFile(file)}
+      >
+        <Icon icon="tabler:x" className=" h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+  };
+
+  useEffect(() => {
+    // Jika input title kosong, isi dengan hasil generate title
+    if (!getValues("title") && title) {
+      setValue("title", title);
+    }
+  }, [title, getValues, setValue]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col lg:flex-row gap-10">
+        <Card className="w-full lg:w-8/12">
+          <div className="px-6 py-6">
+            <p className="text-lg font-semibold mb-3">{t("form-text")}</p>
+            <div className="gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2 py-3">
+                <Label>{t("title")}</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.title?.message && (
+                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                )}
+              </div>
+
+              <div className="flex items-center">
+                <div className="py-3 w-full space-y-2">
+                  <Label>{t("category")}</Label>
+                  <Select
+                    value={selectedCategory} // Ensure selectedTarget is updated correctly
+                    onValueChange={(id) => {
+                      console.log("Selected Category ID:", id);
+                      setSelectedCategory(id);
+                    }}
+                  >
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {categories.map((category) => (
+                        <SelectItem
+                          key={category.id}
+                          value={category.id.toString()}
+                        >
+                          {category.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="flex flex-row items-center gap-3 py-2">
+                <Label>{t("ai-assistance")}</Label>
+                <div className="flex items-center gap-3">
+                  <Switch
+                    defaultChecked={isSwitchOn}
+                    color="primary"
+                    id="c2"
+                    onCheckedChange={(checked: boolean) =>
+                      setIsSwitchOn(checked)
+                    }
+                  />
+                </div>
+              </div>
+              {isSwitchOn && (
+                <div>
+                  <div className="flex flex-row gap-3">
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("language")}</Label>
+                      <Select onValueChange={setSelectedLanguage}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="id">Indonesia</SelectItem>
+                          <SelectItem value="en">English</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("writing-style")}</Label>
+                      <Select onValueChange={setSelectedWritingStyle}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="friendly">Friendly</SelectItem>
+                          <SelectItem value="profesional">
+                            Profesional
+                          </SelectItem>
+                          <SelectItem value="informational">
+                            Informational
+                          </SelectItem>
+                          <SelectItem value="neutral">Neutral</SelectItem>
+                          <SelectItem value="witty">Witty</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("article-size")}</Label>
+                      <Select onValueChange={setSelectedSize}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="news">
+                            News (300 - 900 words)
+                          </SelectItem>
+                          <SelectItem value="info">
+                            Info (900 - 2000 words)
+                          </SelectItem>
+                          <SelectItem value="detail">
+                            Detail (2000 - 5000 words)
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("main-keyword")}</Label>
+                      <Button
+                        variant="outline"
+                        color="primary"
+                        onClick={doGenerateMainKeyword}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Processing..." : "Proses"}
+                      </Button>
+                    </div>
+                    <div>
+                      <Input
+                        size="md"
+                        type="text"
+                        value={selectedMainKeyword}
+                        onChange={(e) => setSelectedMainKeyword(e.target.value)}
+                        placeholder="Enter Main Keyword"
+                      />
+                      {/* )}
+                  /> */}
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("title")}</Label>
+                      <Button
+                        variant="outline"
+                        color="primary"
+                        onClick={doGenerateTitle}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Generating..." : "Generate"}
+                      </Button>
+                    </div>
+                    <div>
+                      <Input
+                        size="md"
+                        type="text"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        placeholder="Generated Title"
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("seo")}</Label>
+                      <Button
+                        variant={"outline"}
+                        color="primary"
+                        onClick={doGenerateKeyword}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Generating..." : "Generate"}
+                      </Button>
+                    </div>
+                    <p className="font-semibold">
+                      {t("Keywords to include in the text")}
+                    </p>
+                    <p className="text-sm">{t("title-key")}</p>
+                    <div className="mt-3">
+                      <Textarea
+                        value={selectedSEO}
+                        onChange={(e) => setSelectedSEO(e.target.value)}
+                        placeholder="Enter Title"
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <Label>{t("special-instructions")} (Optional)</Label>
+                    <div className="mt-3">
+                      <Controller
+                        control={control}
+                        name="title"
+                        render={({ field }) => (
+                          <Textarea
+                            value={field.value}
+                            onChange={field.onChange}
+                            placeholder="Enter Title"
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <div className="my-5">
+                      <Button
+                        // variant={"outline"}
+                        color="primary"
+                        onClick={handleGenerateArtikel}
+                        size="sm"
+                      >
+                        Generate Article
+                      </Button>
+                    </div>
+
+                    {isGeneratedArticle && (
+                      <div className="mt-3 pb-0 flex flex-row ">
+                        {articleIds.map((id: string, index: number) => (
+                          <p
+                            key={index}
+                            className={`mr-3 px-3 py-2 rounded-md ${
+                              selectedArticleId === id
+                                ? "bg-green-500 text-white"
+                                : "border-2 border-green-500 text-green-500"
+                            }`}
+                            onClick={() => handleArticleIdClick(id)}
+                          >
+                            {"Narasi " + (index + 1)}
+                          </p>
+                        ))}
+                      </div>
+                    )}
+
+                    <div className="pt-3">
+                      <div className="flex flex-row justify-between items-center">
+                        {selectedArticleId && (
+                          <Link
+                            href={`/contributor/content/teks/update-seo/${selectedArticleId}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <Button
+                              className="mb-2"
+                              size="sm"
+                              variant={"outline"}
+                              color="primary"
+                            >
+                              {t("update")}
+                            </Button>
+                          </Link>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+              <div className="space-y-2">
+                <Label>{t("description")}</Label>
+                <Controller
+                  control={control}
+                  name="description"
+                  render={({ field: { onChange, value } }) =>
+                    isLoadingData ? (
+                      <div className="flex justify-center items-center h-40">
+                        <p className="text-gray-500">Loading Proses Data...</p>
+                      </div>
+                    ) : (
+                      <CustomEditor
+                        onChange={onChange}
+                        initialData={articleBody || value}
+                      />
+                    )
+                  }
+                />
+                {errors.description?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.description.message}
+                  </p>
+                )}
+              </div>
+              <div className="py-3 space-y-2">
+                <Label>{t("select-file")}</Label>
+                {/* <Input
+                  id="fileInput"
+                  type="file"
+                  onChange={handleImageChange}
+                /> */}
+                <Fragment>
+                  <div {...getRootProps({ className: "dropzone" })}>
+                    <input {...getInputProps()} />
+                    <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                      <CloudUpload className="text-default-300 w-10 h-10" />
+                      <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                        {/* Drop files here or click to upload. */}
+                        {t("drag-file")}
+                      </h4>
+                      <div className=" text-xs text-muted-foreground">
+                        {t("upload-file-text-max")}
+                      </div>
+                    </div>
+                  </div>
+                  {files.length ? (
+                    <Fragment>
+                      <div>{fileList}</div>
+                      <div className=" flex justify-between gap-2">
+                        {/* <div className="flex flex-row items-center gap-3 py-3">
+                          <Label>{t("watermark")}</Label>
+                          <div className="flex items-center gap-3">
+                            <Switch defaultChecked color="primary" id="c2" />
+                          </div>
+                        </div> */}
+                        <Button
+                          color="destructive"
+                          onClick={handleRemoveAllFiles}
+                        >
+                          {t("remove-all")}
+                        </Button>
+                      </div>
+                    </Fragment>
+                  ) : null}
+                </Fragment>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+          </div>
+        </Card>
+        <div className="w-full lg:w-4/12">
+          <Card className=" h-[500px]">
+            <div className="px-3 py-3">
+              <div className="space-y-2">
+                <Label>{t("creator")}</Label>
+                <Controller
+                  control={control}
+                  name="creatorName"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.creatorName?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.creatorName.message}
+                  </p>
+                )}
+              </div>
+            </div>
+            <div className="px-3 py-3 space-y-2">
+              <Label htmlFor="tags">{t("tags")}</Label>
+
+              <Input
+                type="text"
+                id="tags"
+                placeholder="Add a tag and press Enter"
+                onKeyDown={handleAddTag}
+                ref={inputRef}
+              />
+              <div className="mt-3 ">
+                {tags.map((tag, index) => (
+                  <span
+                    key={index}
+                    className=" px-1 py-1 rounded-lg bg-black text-white mr-2 text-sm font-sans"
+                  >
+                    {tag}{" "}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTag(index)}
+                      className="remove-tag-button"
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div className="px-3 py-3">
+              <div className="flex flex-col gap-3 space-y-2">
+                <Label>{t("publish-target")}</Label>
+                {options.map((option) => (
+                  <div key={option.id} className="flex gap-2 items-center">
+                    <Checkbox
+                      id={option.id}
+                      checked={
+                        option.id === "all"
+                          ? publishedFor.length ===
+                            options.filter((opt: any) => opt.id !== "all")
+                              .length
+                          : publishedFor.includes(option.id)
+                      }
+                      onCheckedChange={() => handleCheckboxChange(option.id)}
+                    />
+                    <Label htmlFor={option.id}>{option.label}</Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+          <div className="flex flex-row justify-end gap-3">
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                {t("submit")}
+              </Button>
+            </div>
+            <div className="mt-4">
+              <Button type="submit" color="primary" variant="outline">
+                {t("cancel")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/teks-update-form.tsx b/components/form/content/task-ta/teks-update-form.tsx
new file mode 100644
index 00000000..7323b430
--- /dev/null
+++ b/components/form/content/task-ta/teks-update-form.tsx
@@ -0,0 +1,942 @@
+"use client";
+import React, {
+  ChangeEvent,
+  Fragment,
+  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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/service/content/content";
+import { detailMedia } from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { CloudUpload, MailIcon } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Image from "next/image";
+import { error, loading } from "@/lib/swal";
+import { Upload } from "tus-js-client";
+import { getCsrfToken } from "@/service/auth";
+import { useTranslations } from "next-intl";
+import dynamic from "next/dynamic";
+
+const teksSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type Detail = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  categoryId: {
+    id: number;
+    name: string;
+  };
+  publishedForObject: {
+    id: number;
+    name: string;
+  };
+  creatorName: string;
+  categoryName: string;
+  thumbnailLink: string;
+  tags: string;
+};
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+type Option = {
+  id: string;
+  label: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormTeksUpdate() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const editor = useRef(null);
+  type TeksSchema = z.infer<typeof teksSchema>;
+
+  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 [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+
+  const t = useTranslations("Form");
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [detail, setDetail] = useState<Detail>();
+  const [refresh, setRefresh] = useState(false);
+  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+
+  const [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [selectedOptions, setSelectedOptions] = useState<{
+    [fileId: number]: string[];
+  }>({});
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  let fileTypeId = "3";
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    accept: {
+      "application/pdf": [],
+      "application/msword": [], // .doc
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+        [], // .docx
+    },
+  });
+
+  const options: Option[] = [
+    { id: "all", label: "SEMUA" },
+    { id: "5", label: "UMUM" },
+    { id: "6", label: "JOURNALIS" },
+    { id: "7", label: "POLRI" },
+    { id: "8", label: "KSP" },
+  ];
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<TeksSchema>({
+    resolver: zodResolver(teksSchema),
+  });
+
+  // const handleKeyDown = (e: any) => {
+  //   const newTag = e.target.value.trim(); // Ambil nilai input
+  //   if (e.key === "Enter" && newTag) {
+  //     e.preventDefault(); // Hentikan submit form
+  //     if (!tags.includes(newTag)) {
+  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
+  //       setValue("tags", ""); // Kosongkan input
+  //     }
+  //   }
+  // };
+
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const files = Array.from(event.target.files);
+      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
+      console.log("DATAFILE::", selectedFiles);
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  // const handleCheckboxChange = (id: number) => {
+  //   setSelectedPublishers((prev) =>
+  //     prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+  //   );
+  // };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data?.data?.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+
+        if (details?.files) {
+          setFiles(details.files);
+          const initialOptions: { [key: number]: string[] } = {};
+          details.files.forEach((file: any) => {
+            if (file.placements) {
+              initialOptions[file.id] = mapPlacementsToOptions(file.placements);
+            }
+          });
+          setSelectedOptions(initialOptions);
+        }
+
+        if (details?.publishedFor) {
+          // Split string "7" to an array ["7"] if needed
+          setPublishedFor(details.publishedFor.split(","));
+        }
+
+        if (details?.tags) {
+          setTags(details.tags.split(",").map((tag: string) => tag.trim()));
+        }
+
+        const matchingCategory = categories.find(
+          (category) => category.id === details.categoryId
+        );
+
+        if (matchingCategory) {
+          setSelectedTarget(matchingCategory.name);
+        }
+
+        setSelectedTarget(details.categoryId); // Untuk dropdown
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const mapPlacementsToOptions = (placements: string): string[] => {
+    const mapping: Record<string, string> = {
+      all: "all",
+      mabes: "nasional",
+      polda: "wilayah",
+      polres: "internasional",
+    };
+
+    // Jika placements hanya "all", langsung aktifkan semua checkbox
+    if (placements.trim() === "all") {
+      return ["all", "nasional", "wilayah", "internasional"];
+    }
+
+    const options = placements
+      .split(",")
+      .map((p) => mapping[p.trim()])
+      .filter(Boolean);
+
+    const allSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
+      options.includes(opt)
+    );
+
+    return allSelected ? ["all", ...options] : options;
+  };
+
+  const handleCheckboxChange = (id: string) => {
+    if (id === "all") {
+      // Select all options except "all"
+      const allOptions = options
+        .filter((opt) => opt.id !== "all")
+        .map((opt) => opt.id);
+      setPublishedFor(
+        publishedFor.length === allOptions.length ? [] : allOptions
+      );
+    } else {
+      // Toggle individual option
+      setPublishedFor((prev) =>
+        prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+      );
+    }
+  };
+
+  const save = async (data: TeksSchema) => {
+    loading();
+    const finalTags = tags.join(", ");
+    const requestData = {
+      ...data,
+      id: detail?.id,
+      title: data.title,
+      description: data.description,
+      htmlDescription: data.description,
+      fileTypeId,
+      categoryId: selectedTarget,
+      subCategoryId: selectedTarget,
+      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+      statusId: "1",
+      publishedFor: publishedFor.join(","),
+      creatorName: data.creatorName,
+      tags: finalTags,
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    const response = await createMedia(requestData);
+    console.log("Form Data Submitted:", requestData);
+
+    const formMedia = new FormData();
+    const thumbnail = files[0];
+    formMedia.append("file", thumbnail);
+    const responseThumbnail = await uploadThumbnail(id, formMedia);
+    if (responseThumbnail?.error == true) {
+      error(responseThumbnail?.message);
+      return false;
+    }
+
+    const progressInfoArr = [];
+    for (const item of files) {
+      progressInfoArr.push({ percentage: 0, fileName: item.name });
+    }
+    progressInfo = progressInfoArr;
+    setIsStartUpload(true);
+    setProgressList(progressInfoArr);
+
+    close();
+    // showProgress();
+    files.map(async (item: any, index: number) => {
+      await uploadResumableFile(
+        index,
+        String(id),
+        item,
+        fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
+      );
+    });
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/in/contributor/content/teks");
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    duration: string
+  ) {
+    console.log(idx, id, file, duration);
+
+    // const placements = getPlacement(file.placements);
+    // console.log("Placementttt:  : ", placements);
+
+    const resCsrf = await getCsrfToken();
+    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}/media/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        mediaid: id,
+        filename: file.name,
+        filetype: file.type,
+        duration,
+        isWatermark: "true", // hardcode
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        progressInfo[idx].percentage = uploadPersen;
+        counterUpdateProgress++;
+        console.log(counterUpdateProgress);
+        setProgressList(progressInfo);
+        setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        uploadPersen = 100;
+        progressInfo[idx].percentage = 100;
+        counterUpdateProgress++;
+        setCounterProgress(counterUpdateProgress);
+        successTodo();
+      },
+    });
+
+    upload.start();
+  }
+
+  const onSubmit = (data: TeksSchema) => {
+    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 successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  function successTodo() {
+    let counter = 0;
+    for (const element of progressInfo) {
+      if (element.percentage == 100) {
+        counter++;
+      }
+    }
+    if (counter == progressInfo.length) {
+      setIsStartUpload(false);
+      // hideProgress();
+      Cookies.remove("idCreate");
+      successSubmit("/in/contributor/content/teks");
+    }
+  }
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+  };
+
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file?.type?.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
+
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const fileList = files.map((file) => (
+    <div
+      key={file.name}
+      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        <div className="file-preview">{renderFilePreview(file)}</div>
+        <div>
+          <div className=" text-sm  text-card-foreground">{file.name}</div>
+          <div className=" text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className=" border-none rounded-full"
+        onClick={() => handleRemoveFile(file)}
+      >
+        <Icon icon="tabler:x" className=" h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  const handleCheckboxChangeImage = (fileId: number, value: string) => {
+    setSelectedOptions((prev: any) => {
+      const currentSelections = prev[fileId] || [];
+      if (value === "all") {
+        // If "all" is clicked, toggle all options
+        if (currentSelections.includes("all")) {
+          return { ...prev, [fileId]: [] }; // Deselect all
+        }
+        return {
+          ...prev,
+          [fileId]: ["all", "nasional", "wilayah", "internasional"],
+        }; // Select all
+      } else {
+        // If any other checkbox is clicked, toggle that checkbox
+        const updatedSelections = currentSelections.includes(value)
+          ? currentSelections.filter((option: any) => option !== value)
+          : [...currentSelections, value];
+
+        // If all individual options are selected, include "all" automatically
+        const isAllSelected = ["nasional", "wilayah", "internasional"].every(
+          (opt) => updatedSelections.includes(opt)
+        );
+        return {
+          ...prev,
+          [fileId]: isAllSelected
+            ? ["all", ...updatedSelections]
+            : updatedSelections.filter((opt: any) => opt !== "all"),
+        };
+      }
+    });
+  };
+
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && e.currentTarget.value.trim()) {
+      e.preventDefault();
+      const newTag = e.currentTarget.value.trim();
+      if (!tags.includes(newTag)) {
+        setTags((prevTags) => [...prevTags, newTag]); // Tambahkan tag baru
+        if (inputRef.current) {
+          inputRef.current.value = ""; // Kosongkan input
+        }
+      }
+    }
+  };
+
+  const handleRemoveTag = (index: number) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
+  };
+
+  const handleEditTag = (index: number, newValue: string) => {
+    setTags((prevTags) =>
+      prevTags.map((tag, i) => (i === index ? newValue : tag))
+    );
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {detail !== undefined ? (
+        <div className="flex flex-col lg:flex-row gap-10">
+          <Card className="w-full lg:w-8/12">
+            <div className="px-6 py-6">
+              <p className="text-lg font-semibold mb-3">{t("form-text")}</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>{t("title")}</Label>
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        defaultValue={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 items-center">
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
+                    <Select
+                      defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
+                      onValueChange={(id) => {
+                        console.log("Selected Category:", id);
+                        setSelectedTarget(id);
+                      }}
+                    >
+                      <SelectTrigger size="md">
+                        <SelectValue placeholder="Pilih" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {categories.map((category) => (
+                          <SelectItem key={category.id} value={category.id}>
+                            {category.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <CustomEditor
+                        onChange={onChange}
+                        initialData={detail?.description || value}
+                      />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+                <div className="py-3 space-y-2">
+                  <Label>{t("select-file")}</Label>
+                  {/* <Input
+                  id="fileInput"
+                  type="file"
+                  onChange={handleImageChange}
+                /> */}
+                  <Fragment>
+                    <div {...getRootProps({ className: "dropzone" })}>
+                      <input {...getInputProps()} />
+                      <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                        <CloudUpload className="text-default-300 w-10 h-10" />
+                        <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                          {/* Drop files here or click to upload. */}
+                          {t("drag-file")}
+                        </h4>
+                        <div className=" text-xs text-muted-foreground">
+                          {t("upload-file-text-max")}
+                        </div>
+                      </div>
+                    </div>
+                    {files.length ? (
+                      <Fragment>
+                        <div>{fileList}</div>
+                        <div className=" flex justify-between gap-2">
+                          <div className="flex flex-row items-center gap-3 py-3">
+                            <Label>{t("watermark")}</Label>
+                            <div className="flex items-center gap-3">
+                              <Switch defaultChecked color="primary" id="c2" />
+                            </div>
+                          </div>
+                          <Button
+                            color="destructive"
+                            onClick={handleRemoveAllFiles}
+                          >
+                            {t("remove-all")}
+                          </Button>
+                        </div>
+                      </Fragment>
+                    ) : null}
+                    {files.length > 0 && (
+                      <div className="mt-4 space-y-2">
+                        <Label className="text-lg font-semibold">
+                          {" "}
+                          {t("file-media")}
+                        </Label>
+                        <div className="grid gap-4">
+                          {files.map((file: any) => (
+                            <div
+                              key={file.id}
+                              className="flex items-center border p-2 rounded-md"
+                            >
+                              <img
+                                src={file.thumbnailFileUrl}
+                                alt={file.fileName}
+                                className="w-16 h-16 object-cover rounded-md mr-4"
+                              />
+                              <div className="flex flex-wrap gap-3 items-center ">
+                                <div className="flex-grow">
+                                  <p className="font-medium">{file.fileName}</p>
+                                  <a
+                                    href={file.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-blue-500 text-sm"
+                                  >
+                                    {t("view-file")}
+                                  </a>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("all")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "all"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>{t("all")}</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("nasional")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "nasional"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Nasional</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("wilayah")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "wilayah"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Wilayah</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("internasional")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "internasional"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Internasional</span>
+                                  </Label>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </Fragment>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-full lg:w-4/12">
+            <Card className=" h-[800px]">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("creator")}</Label>
+                  <Controller
+                    control={control}
+                    name="creatorName"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        defaultValue={detail?.creatorName}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.creatorName?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.creatorName.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              {/* <div className="mt-3 px-3">
+                <Label>Pratinjau Gambar Utama</Label>
+                <Card className="mt-2">
+                  <img
+                    src={detail.thumbnailLink}
+                    alt="Thumbnail Gambar Utama"
+                    className="w-full h-auto rounded"
+                  />
+                </Card>
+              </div> */}
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("tags")}</Label>
+                  <Input
+                    type="text"
+                    id="tags"
+                    placeholder="Add a tag and press Enter"
+                    onKeyDown={handleAddTag}
+                    ref={inputRef}
+                  />
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    {tags.map((tag, index) => (
+                      <span
+                        key={index}
+                        className="flex  items-center gap-2 px-2 py-1 rounded-lg bg-black text-white text-sm"
+                      >
+                        <input
+                          type="text"
+                          value={tag}
+                          onChange={(e) => handleEditTag(index, e.target.value)}
+                          className="bg-black text-white border-none focus:outline-none w-auto"
+                        />
+                        <button
+                          value={tag}
+                          type="button"
+                          onClick={() => handleRemoveTag(index)}
+                          className="remove-tag-button text-white"
+                        >
+                          ×
+                        </button>
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div className="px-3 py-3">
+                <div className="flex flex-col gap-6">
+                  <Label>{t("publish-target")}</Label>
+                  {options.map((option) => (
+                    <div key={option.id} className="flex gap-2 items-center">
+                      <Checkbox
+                        id={option.id}
+                        checked={
+                          option.id === "all"
+                            ? publishedFor.length ===
+                              options.filter((opt: any) => opt.id !== "all")
+                                .length
+                            : publishedFor.includes(option.id)
+                        }
+                        onCheckedChange={() => handleCheckboxChange(option.id)}
+                      />
+                      <Label htmlFor={option.id}>{option.label}</Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
+                <MailIcon />
+                <p className="">{t("suggestion-box")} (0)</p>
+              </div>
+              <div className="px-3 py-3">
+                <p>{t("information")}:</p>
+                {/* <p>{detail?.status}</p> */}
+              </div>
+            </Card>
+            <div className="flex flex-row justify-end gap-3">
+              <div className="mt-4">
+                <Button type="submit" color="primary">
+                  {t("submit")}
+                </Button>
+              </div>
+              <div className="mt-4">
+                <Button type="submit" color="primary" variant="outline">
+                  {t("cancel")}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/video-detail-form.tsx b/components/form/content/task-ta/video-detail-form.tsx
new file mode 100644
index 00000000..569304b6
--- /dev/null
+++ b/components/form/content/task-ta/video-detail-form.tsx
@@ -0,0 +1,904 @@
+"use client";
+import React, { ChangeEvent, 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 } 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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  rejectFiles,
+  submitApproval,
+} from "@/service/content/content";
+import {
+  detailMedia,
+  getDataApprovalByMediaUpload,
+} from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { MailIcon } from "lucide-react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import "swiper/css";
+import "swiper/css/navigation";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+import {
+  DialogHeader,
+  DialogFooter,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { loading } from "@/config/swal";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { error } from "@/lib/swal";
+import dynamic from "next/dynamic";
+import { useRouter } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+import SuggestionModal from "@/components/modal/suggestions-modal";
+import { formatDateToIndonesian } from "@/utils/globals";
+import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
+
+const imageSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type FileType = {
+  id: number;
+  url: string;
+  thumbnailFileUrl: string;
+  fileName: string;
+};
+
+type Detail = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  category: {
+    id: number;
+    name: string;
+  };
+  categoryName: string;
+  creatorName: string;
+  thumbnailLink: string;
+  url: string;
+  tags: string;
+  statusName: string;
+  isPublish: boolean;
+  needApprovalFromLevel: number;
+  files: FileType[];
+  uploadedById: number;
+};
+
+const ViewEditor = dynamic(
+  () => {
+    return import("@/components/editor/view-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormVideoDetail() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const userId = getCookiesDecrypt("uie");
+  const userLevelId = getCookiesDecrypt("ulie");
+  const roleId = getCookiesDecrypt("urie");
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const editor = useRef(null);
+  type ImageSchema = z.infer<typeof imageSchema>;
+
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+  const [status, setStatus] = useState("");
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [detail, setDetail] = useState<any>();
+  const [refresh, setRefresh] = useState(false);
+  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [description, setDescription] = useState("");
+  const [main, setMain] = useState<any>([]);
+  const [detailVideo, setDetailVideo] = useState<any>([]);
+  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
+
+  const t = useTranslations("Form");
+  const [filePlacements, setFilePlacements] = useState<string[][]>([]);
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
+  const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
+  const [approval, setApproval] = useState<any>();
+
+  let fileTypeId = "2";
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<ImageSchema>({
+    resolver: zodResolver(imageSchema),
+  });
+
+  // const handleKeyDown = (e: any) => {
+  //   const newTag = e.target.value.trim(); // Ambil nilai input
+  //   if (e.key === "Enter" && newTag) {
+  //     e.preventDefault(); // Hentikan submit form
+  //     if (!tags.includes(newTag)) {
+  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
+  //       setValue("tags", ""); // Kosongkan input
+  //     }
+  //   }
+  // };
+
+  useEffect(() => {
+    if (
+      userLevelId != undefined &&
+      roleId != undefined &&
+      userLevelId == "216" &&
+      roleId == "3"
+    ) {
+      setIsUserMabesApprover(true);
+    }
+  }, [userLevelId, roleId]);
+
+  const handleCheckboxChange = (id: number) => {
+    setSelectedPublishers((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data?.data?.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+        console.log("detail", details);
+        setFiles(details?.files);
+        setDetail(details);
+        setMain({
+          type: details?.fileType.name,
+          url: details?.files[0]?.url,
+          names: details?.files[0]?.fileName,
+          format: details?.files[0]?.format,
+        });
+
+        if (details.publishedForObject) {
+          const publisherIds = details.publishedForObject.map(
+            (obj: any) => obj.id
+          );
+          setSelectedPublishers(publisherIds);
+        }
+
+        const matchingCategory = categories.find(
+          (category) => category.id === details.categoryId
+        );
+
+        if (matchingCategory) {
+          setSelectedTarget(matchingCategory.name);
+        }
+
+        setSelectedTarget(details.categoryId); // Untuk dropdown
+
+        const filesData = details.files || [];
+        const fileUrls = filesData.map((files: { url: string }) =>
+          files.url ? files.url : "default-image.jpg"
+        );
+        setDetailVideo(fileUrls);
+
+        const approvals = await getDataApprovalByMediaUpload(details?.id);
+        setApproval(approvals?.data?.data);
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const actionApproval = (e: string) => {
+    const temp = [];
+    for (const element of detail.files) {
+      temp.push([]);
+    }
+    setFilePlacements(temp);
+    setStatus(e);
+    setFiles(detail.files);
+
+    setDescription("");
+    setModalOpen(true);
+  };
+
+  const submit = async () => {
+    if (
+      (description?.length > 1 && Number(status) == 3) ||
+      Number(status) == 2 ||
+      Number(status) == 4
+    ) {
+      save();
+
+      // MySwal.fire({
+      //   title: "Simpan Approval",
+      //   text: "",
+      //   icon: "warning",
+      //   showCancelButton: true,
+      //   cancelButtonColor: "#d33",
+      //   confirmButtonColor: "#3085d6",
+      //   confirmButtonText: "Simpan",
+      // }).then((result) => {
+      //   if (result.isConfirmed) {
+      //   }
+      // });
+    }
+  };
+
+  async function save() {
+    const data = {
+      mediaUploadId: id,
+      statusId: status,
+      message: description,
+      files: isUserMabesApprover ? getPlacement() : [],
+    };
+    setModalOpen(false);
+    loading();
+    const response = await submitApproval(data);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    const dataReject = {
+      listFiles: rejectedFiles,
+    };
+
+    const resReject = await rejectFiles(dataReject);
+
+    if (resReject?.error) {
+      error(resReject.message);
+      return false;
+    }
+
+    close();
+    submitApprovalSuccesss();
+
+    return false;
+  }
+
+  const getPlacement = () => {
+    console.log("getPlaa", filePlacements);
+    const temp = [];
+    for (let i = 0; i < filePlacements?.length; i++) {
+      if (filePlacements[i].length !== 0) {
+        const now = filePlacements[i].filter((a) => a !== "all");
+        const data = { mediaFileId: files[i].id, placements: now.join(",") };
+        temp.push(data);
+      }
+    }
+    return temp;
+  };
+
+  const setupPlacement = (
+    index: number,
+    placement: string,
+    checked: boolean
+  ) => {
+    let temp = [...filePlacements];
+    if (checked) {
+      if (placement === "all") {
+        temp[index] = ["all", "mabes", "polda", "international"];
+      } else {
+        const now = temp[index];
+        now.push(placement);
+        if (now.length === 3 && !now.includes("all")) {
+          now.push("all");
+        }
+        temp[index] = now;
+      }
+    } else {
+      if (placement === "all") {
+        temp[index] = [];
+      } else {
+        const now = temp[index].filter((a) => a !== placement);
+        console.log("now", now);
+        temp[index] = now;
+        if (now.length === 3 && now.includes("all")) {
+          const newData = now.filter((b) => b !== "all");
+          temp[index] = newData;
+        }
+      }
+    }
+    setFilePlacements(temp);
+  };
+
+  function handleDeleteFileApproval(id: number) {
+    const selectedFiles = files.filter((file) => file.id != id);
+    setFiles(selectedFiles);
+    const rejects = rejectedFiles;
+    rejects.push(id);
+    setRejectedFiles(rejects);
+  }
+  const handleMain = (
+    type: string,
+    url: string,
+    names: string,
+    format: string
+  ) => {
+    console.log("Test 3 :", type, url, names, format);
+    setMain({
+      type,
+      url,
+      names,
+      format,
+    });
+    return false;
+  };
+
+  const submitApprovalSuccesss = () => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/contributor/content/video");
+      }
+    });
+  };
+
+  return (
+    <form>
+      {detail !== undefined ? (
+        <div className="flex flex-col lg:flex-row gap-10">
+          <Card className="w-full lg:w-8/12">
+            <div className="px-6 py-6">
+              <p className="text-lg font-semibold mb-3">{t("form-video")}</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>{t("title")}</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 items-center">
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
+                    <Select
+                      value={detail?.category.name} // Nilai default berdasarkan detail
+                      onValueChange={(id) => {
+                        console.log("Selected Category:", id);
+                        setSelectedTarget(id);
+                      }}
+                    >
+                      <SelectTrigger size="md">
+                        <SelectValue placeholder="Pilih" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {categories.map((category) => (
+                          <SelectItem key={category.id} value={category.name}>
+                            {category.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <ViewEditor initialData={detail?.htmlDescription} />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+                <div className="space-y-2">
+                  <Label className="text-xl "> {t("file-media")}</Label>
+                  <div className="w-full  ">
+                    <Swiper
+                      thumbs={{ swiper: thumbsSwiper }}
+                      modules={[FreeMode, Navigation, Thumbs]}
+                      navigation={false}
+                      className="w-full"
+                    >
+                      {files?.map((data: any) => (
+                        <SwiperSlide key={data.id}>
+                          <video
+                            className="object-fill h-full w-full"
+                            src={data.secondaryUrl}
+                            controls
+                            title={`Video ${data.id}`} // Mengganti alt dengan title
+                          />
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
+                    <div className=" mt-2 ">
+                      <Swiper
+                        onSwiper={setThumbsSwiper}
+                        slidesPerView={6}
+                        spaceBetween={8}
+                        pagination={{
+                          clickable: true,
+                        }}
+                        modules={[Pagination, Thumbs]}
+                        // className="mySwiper2"
+                      >
+                        {files?.map((data: any) => (
+                          <SwiperSlide key={data.id}>
+                            <video
+                              className="object-cover h-[60px] w-[80px]"
+                              src={data.secondaryUrl}
+                              muted
+                              title={`Video ${data.id}`} // Mengganti alt dengan title
+                            />
+                          </SwiperSlide>
+                        ))}
+                      </Swiper>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-full lg:w-4/12">
+            <Card className="pb-3">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("creator")}</Label>
+                  <Controller
+                    control={control}
+                    name="creatorName"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        value={detail?.creatorName}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.creatorName?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.creatorName.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="mt-3 px-3 space-y-2">
+                <Label>{t("preview")}</Label>
+                <Card className="mt-2">
+                  <img
+                    src={detail.thumbnailLink}
+                    alt="Thumbnail Gambar Utama"
+                    className="w-full h-auto rounded"
+                  />
+                </Card>
+              </div>
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("tags")}</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {detail?.tags
+                      ?.split(",")
+                      .map((tag: string, index: number) => (
+                        <Badge
+                          key={index}
+                          className="border rounded-md  px-2 py-2"
+                        >
+                          {tag.trim()}
+                        </Badge>
+                      ))}
+                  </div>
+                </div>
+              </div>
+              <div className="px-3 py-3">
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="5"
+                      checked={selectedPublishers.includes(5)}
+                      onChange={() => handleCheckboxChange(5)}
+                    />
+                    <Label htmlFor="5">UMUM</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="6"
+                      checked={selectedPublishers.includes(6)}
+                      onChange={() => handleCheckboxChange(6)}
+                    />
+                    <Label htmlFor="6">JOURNALIS</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="7"
+                      checked={selectedPublishers.includes(7)}
+                      onChange={() => handleCheckboxChange(7)}
+                    />
+                    <Label htmlFor="7">POLRI</Label>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <Checkbox
+                      id="8"
+                      checked={selectedPublishers.includes(8)}
+                      onChange={() => handleCheckboxChange(8)}
+                    />
+                    <Label htmlFor="8">KSP</Label>
+                  </div>
+                </div>
+              </div>
+              <SuggestionModal
+                id={Number(id)}
+                numberOfSuggestion={detail?.numberOfSuggestion}
+              />
+              <div className="px-3 py-3 border mx-3">
+                <p>{t("information")}:</p>
+                <p className="text-sm text-slate-400">{detail?.statusName}</p>
+                <p>Komentar</p>
+                <p>{approval?.message}</p>
+                <p className="text-right text-sm">
+                  {" "}
+                  {approval?.approvalBy?.fullname} |{" "}
+                  {formatDateToIndonesian(approval?.approvalDate)}
+                </p>
+                <ApprovalHistoryModal id={Number(id)} />
+              </div>
+              {/* {detail?.isPublish == false ? (
+                <div className="p-3">
+                  <Button className="bg-blue-600">Publish</Button>
+                </div>
+              ) : (
+                ""
+              )} */}
+
+              <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+                <DialogContent size="md">
+                  <DialogHeader>
+                    <DialogTitle>{t("leave-comment")}</DialogTitle>
+                  </DialogHeader>
+                  {status == "2"
+                    ? files?.map((file, index) => (
+                        <div
+                          key={file.id}
+                          className="flex flex-row gap-2 items-center"
+                        >
+                          {/* <img src={file.url} className="w-[200px]" /> */}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="48"
+                            height="48"
+                            viewBox="0 0 24 24"
+                          >
+                            <g fill="none" fill-rule="evenodd">
+                              <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+                              <path
+                                fill="currentColor"
+                                d="M20 3a2 2 0 0 1 1.995 1.85L22 5v14a2 2 0 0 1-1.85 1.995L20 21H4a2 2 0 0 1-1.995-1.85L2 19V5a2 2 0 0 1 1.85-1.995L4 3zm0 2H4v14h16zm-9.66 2.638l.518.23l.338.16l.387.19l.43.218l.47.25l.507.28l.266.152l.518.305l.474.292l.43.273l.38.253l.48.33l.364.263l.095.07a1.234 1.234 0 0 1 0 1.98l-.323.235l-.44.308l-.356.239l-.405.263l-.453.283l-.499.3l-.534.309l-.509.282l-.471.25l-.43.22l-.386.188l-.622.288l-.23.1a1.234 1.234 0 0 1-1.714-.99l-.058-.565l-.032-.374l-.042-.664l-.023-.508l-.015-.555l-.004-.294l-.002-.305q0-.31.006-.6l.015-.555l.023-.507l.027-.457l.03-.401l.075-.744a1.235 1.235 0 0 1 1.715-.992m.611 2.501l-.436-.218l-.029.487l-.022.551l-.013.61l-.002.325l.002.325l.013.609l.01.283l.026.52l.015.235l.434-.218l.487-.256l.535-.294l.284-.162l.551-.326l.494-.306l.436-.28l.196-.13l-.407-.27l-.466-.294a30 30 0 0 0-.803-.48l-.283-.161l-.534-.294z"
+                              />
+                            </g>
+                          </svg>
+                          <div className="flex flex-col gap-2 w-full">
+                            <div className="flex justify-between text-sm">
+                              {file.fileName}
+                              <a
+                                onClick={() =>
+                                  handleDeleteFileApproval(file.id)
+                                }
+                              >
+                                <Icon icon="humbleicons:times" color="red" />
+                              </a>
+                            </div>
+                            {isUserMabesApprover && (
+                              <div className="flex flex-row gap-2">
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    value="all"
+                                    checked={filePlacements[index]?.includes(
+                                      "all"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(index, "all", Boolean(e))
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    {t("all")}
+                                  </label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    checked={filePlacements[index]?.includes(
+                                      "mabes"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(index, "mabes", Boolean(e))
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    Nasional
+                                  </label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    checked={filePlacements[index]?.includes(
+                                      "polda"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(index, "polda", Boolean(e))
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    Wilayah
+                                  </label>
+                                </div>
+
+                                <div className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id="terms"
+                                    checked={filePlacements[index]?.includes(
+                                      "international"
+                                    )}
+                                    onCheckedChange={(e) =>
+                                      setupPlacement(
+                                        index,
+                                        "international",
+                                        Boolean(e)
+                                      )
+                                    }
+                                  />
+                                  <label
+                                    htmlFor="terms"
+                                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    Internasional
+                                  </label>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))
+                    : ""}
+                  <div className="flex flex-col gap-4">
+                    <Textarea
+                      placeholder="Type your message here."
+                      value={description}
+                      onChange={(e) => setDescription(e.target.value)}
+                    />
+                  </div>
+                  {status == "3" || status == "4" ? (
+                    <div className="flex flex-row gap-2">
+                      <Badge
+                        color={
+                          description === "Kualitas media kurang baik"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setDescription("Kualitas media kurang baik")
+                        }
+                      >
+                        Kualitas media kurang baik
+                      </Badge>
+
+                      <Badge
+                        color={
+                          description === "Deskripsi kurang lengkap"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setDescription("Deskripsi kurang lengkap")
+                        }
+                      >
+                        Deskripsi kurang lengkap
+                      </Badge>
+                      <Badge
+                        color={
+                          description === "Judul kurang tepat"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Judul kurang tepat")}
+                      >
+                        Judul kurang tepat
+                      </Badge>
+                    </div>
+                  ) : (
+                    <div className="flex flex-row gap-2">
+                      <Badge
+                        color={
+                          description === "Konten sangat bagus"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Konten sangat bagus")}
+                      >
+                        Konten sangat bagus
+                      </Badge>
+                      <Badge
+                        color={
+                          description === "Konten menarik"
+                            ? "primary"
+                            : "default"
+                        }
+                        className="cursor-pointer"
+                        onClick={() => setDescription("Konten menarik")}
+                      >
+                        Konten menarik
+                      </Badge>
+                    </div>
+                  )}
+                  <DialogFooter>
+                    <Button
+                      type="button"
+                      color="primary"
+                      onClick={() => submit()}
+                    >
+                      {t("submit")}
+                    </Button>
+                    <Button
+                      type="button"
+                      color="destructive"
+                      onClick={() => setModalOpen(false)}
+                    >
+                      {t("cancel")}
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </Card>
+            {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
+              Number(detail?.uploadedById) == Number(userId) ? (
+                ""
+              ) : (
+                <div className="flex flex-col gap-2 p-3">
+                  <Button
+                    onClick={() => actionApproval("2")}
+                    color="primary"
+                    type="button"
+                  >
+                    <Icon icon="fa:check" className="mr-3" /> {t("accept")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("3")}
+                    className="bg-orange-400 hover:bg-orange-300"
+                    type="button"
+                  >
+                    <Icon icon="fa:comment-o" className="mr-3" />{" "}
+                    {t("revision")}
+                  </Button>
+                  <Button
+                    onClick={() => actionApproval("4")}
+                    color="destructive"
+                    type="button"
+                  >
+                    <Icon icon="fa:times" className="mr-3" />
+                    {t("reject")}
+                  </Button>
+                </div>
+              )
+            ) : (
+              ""
+            )}
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/video-form.tsx b/components/form/content/task-ta/video-form.tsx
new file mode 100644
index 00000000..e27a0a94
--- /dev/null
+++ b/components/form/content/task-ta/video-form.tsx
@@ -0,0 +1,1157 @@
+"use client";
+import React, {
+  ChangeEvent,
+  useEffect,
+  useRef,
+  Fragment,
+  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 { Upload } from "tus-js-client";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { redirect, 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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/service/content/content";
+import { uploadThumbnailBlog } from "@/service/blog/blog";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/service/content/ai";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react";
+import { CloudUpload } from "lucide-react";
+import Image from "next/image";
+import { error, loading } from "@/config/swal";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import dynamic from "next/dynamic";
+import { getCsrfToken } from "@/service/auth";
+import { Link } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type Option = {
+  id: string;
+  label: string;
+};
+
+export default function FormVideo() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type VideoSchema = z.infer<typeof videoSchema>;
+
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+  const roleId = getCookiesDecrypt("urie");
+
+  const t = useTranslations("Form");
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [thumbnail, setThumbnail] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [selectedLanguage, setSelectedLanguage] = useState("");
+
+  const [selectedSEO, setSelectedSEO] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
+  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
+  const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
+
+  const [articleIds, setArticleIds] = useState<string[]>([]);
+  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
+  const [articleBody, setArticleBody] = useState<string>("");
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
+    null
+  );
+  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
+  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
+  const [selectedSize, setSelectedSize] = useState("");
+  const [detailData, setDetailData] = useState<any>(null);
+  const [articleImages, setArticleImages] = useState<string[]>([]);
+  const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  let fileTypeId = "2";
+  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 [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const [files, setFiles] = useState<FileWithPreview[]>([]);
+
+  const options: Option[] = [
+    { id: "all", label: "SEMUA" },
+    { id: "5", label: "UMUM" },
+    { id: "6", label: "JOURNALIS" },
+    { id: "7", label: "POLRI" },
+    { id: "8", label: "KSP" },
+  ];
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    accept: {
+      "video/*": [],
+    },
+  });
+
+  const videoSchema = z.object({
+    title: z.string().min(1, { message: "Judul diperlukan" }),
+    description: z
+      .string()
+      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
+      .or(
+        z.literal(articleBody || "").refine((val) => val.length > 0, {
+          message: "Deskripsi diperlukan.",
+        })
+      ),
+    creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+    // tags: z.string().min(1, { message: "Judul diperlukan" }),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useForm<VideoSchema>({
+    resolver: zodResolver(videoSchema),
+  });
+
+  const doGenerateMainKeyword = async () => {
+    console.log(selectedMainKeyword);
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const titleData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for title with data:", titleData);
+        const titleRes = await getGenerateTitle(titleData);
+        setTitle(titleRes?.data?.data || "");
+        console.log("Generated title:", titleRes?.data?.data);
+
+        const keywordsData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for keywords with data:", keywordsData);
+        const keywordsRes = await getGenerateKeywords(keywordsData);
+        setSelectedSEO(keywordsRes?.data?.data || []);
+        console.log("Generated keywords:", keywordsRes?.data?.data);
+      } catch (error) {
+        console.error("Error during generation process:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const doGenerateTitle = async () => {
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const titleData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for title with data:", titleData);
+        const titleRes = await getGenerateTitle(titleData);
+        setTitle(titleRes?.data?.data || "");
+        console.log("Generated title:", titleRes?.data?.data);
+      } catch (error) {
+        console.error("Error generating title:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const doGenerateKeyword = async () => {
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const keywordsData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for keywords with data:", keywordsData);
+        const keywordsRes = await getGenerateKeywords(keywordsData);
+        setSelectedSEO(keywordsRes?.data?.data || []);
+        console.log("Generated keywords:", keywordsRes?.data?.data);
+      } catch (error) {
+        console.error("Error generating keywords:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const handleGenerateArtikel = async () => {
+    const request = {
+      advConfig: selectedAdvConfig,
+      style: selectedWritingStyle,
+      website: "None",
+      connectToWeb: true,
+      lang: selectedLanguage,
+      pointOfView: "None",
+      title: title,
+      imageSource: "Web",
+      mainKeyword: selectedMainKeyword,
+      additionalKeywords: selectedSEO,
+      targetCountry: null,
+      articleSize: selectedSize,
+      projectId: 2,
+      createdBy: roleId,
+      clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
+    };
+
+    const res = await generateDataArticle(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+  };
+
+  const handleArticleIdClick = async (id: string) => {
+    setIsLoadingData(true);
+    let retryCount = 0;
+    const maxRetries = 20;
+
+    try {
+      const waitForStatusUpdate = async () => {
+        while (retryCount < maxRetries) {
+          const res = await getDetailArticle(id);
+          const articleData = res?.data?.data;
+
+          if (articleData?.status === 2) {
+            return articleData;
+          }
+
+          retryCount++;
+          await new Promise((resolve) => setTimeout(resolve, 5000));
+        }
+
+        throw new Error("Timeout: Artikel belum selesai diproses.");
+      };
+      const articleData = await waitForStatusUpdate();
+      const cleanArticleBody = articleData?.articleBody?.replace(
+        /<img[^>]*>/g,
+        ""
+      );
+      const articleImagesData = articleData?.imagesUrl?.split(",");
+      setArticleBody(cleanArticleBody || "");
+      setDetailData(articleData);
+      setSelectedArticleId(id);
+      setArticleImages(articleImagesData || []);
+    } catch (error) {
+      console.error("Error fetching article details:", error);
+    } finally {
+      setIsLoadingData(false);
+    }
+  };
+
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && e.currentTarget.value.trim()) {
+      e.preventDefault();
+      const newTag = e.currentTarget.value.trim();
+      if (!tags.includes(newTag)) {
+        setTags((prevTags) => [...prevTags, newTag]); // Add new tag
+        if (inputRef.current) {
+          inputRef.current.value = ""; // Clear input field
+        }
+      }
+    }
+  };
+
+  const handleRemoveTag = (index: number) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // Remove tag
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+      // setVideoActive(fileTypeId == '2');
+      // getRoles();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data?.data?.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  const handleCheckboxChange = (id: string): void => {
+    if (id === "all") {
+      if (publishedFor.includes("all")) {
+        // Uncheck all checkboxes
+        setPublishedFor([]);
+      } else {
+        // Select all checkboxes
+        setPublishedFor(
+          options
+            .filter((opt: any) => opt.id !== "all")
+            .map((opt: any) => opt.id)
+        );
+      }
+    } else {
+      const updatedPublishedFor = publishedFor.includes(id)
+        ? publishedFor.filter((item) => item !== id)
+        : [...publishedFor, id];
+
+      // Remove "all" if any checkbox is unchecked
+      if (publishedFor.includes("all") && id !== "all") {
+        setPublishedFor(updatedPublishedFor.filter((item) => item !== "all"));
+      } else {
+        setPublishedFor(updatedPublishedFor);
+      }
+    }
+  };
+
+  const save = async (data: VideoSchema) => {
+    loading();
+    const finalTags = tags.join(", ");
+    const finalTitle = isSwitchOn ? title : data.title;
+    const finalDescription = articleBody || data.description;
+    if (!finalDescription.trim()) {
+      MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
+      return;
+    }
+    let requestData: {
+      title: string;
+      description: string;
+      htmlDescription: string;
+      fileTypeId: string;
+      categoryId: any;
+      subCategoryId: any;
+      uploadedBy: string;
+      statusId: string;
+      publishedFor: string;
+      creatorName: string;
+      tags: string;
+      isYoutube: boolean;
+      isInternationalMedia: boolean;
+      attachFromScheduleId?: number; // ✅ Tambahkan properti ini
+    } = {
+      ...data,
+      title: finalTitle,
+      description: finalDescription,
+      htmlDescription: finalDescription,
+      fileTypeId,
+      categoryId: selectedCategory,
+      subCategoryId: selectedCategory,
+      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+      statusId: "1",
+      publishedFor: publishedFor.join(","),
+      creatorName: data.creatorName,
+      tags: finalTags,
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    let id = Cookies.get("idCreate");
+
+    if (scheduleId !== undefined) {
+      requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
+    }
+
+    if (id == undefined) {
+      const response = await createMedia(requestData);
+      console.log("Form Data Submitted:", requestData);
+
+      if (response?.error) {
+        MySwal.fire("Error", response?.message, "error");
+        return;
+      }
+      Cookies.set("idCreate", response?.data?.data, { expires: 1 });
+      id = response?.data?.data;
+
+      // Upload Thumbnail
+      const formMedia = new FormData();
+      const thumbnail = files[0];
+      formMedia.append("file", thumbnail);
+      const responseThumbnail = await uploadThumbnail(id, formMedia);
+      if (responseThumbnail?.error == true) {
+        error(responseThumbnail?.message);
+        return false;
+      }
+    }
+
+    // Upload File
+    const progressInfoArr = [];
+    for (const item of files) {
+      progressInfoArr.push({ percentage: 0, fileName: item.name });
+    }
+    progressInfo = progressInfoArr;
+    setIsStartUpload(true);
+    setProgressList(progressInfoArr);
+
+    close();
+    // showProgress();
+    files.map(async (item: any, index: number) => {
+      await uploadResumableFile(index, String(id), item, "0");
+    });
+
+    Cookies.remove("idCreate");
+
+    // MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
+  };
+
+  const onSubmit = (data: VideoSchema) => {
+    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);
+      }
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    duration: string
+  ) {
+    console.log(idx, id, file, duration);
+
+    // const placements = getPlacement(file.placements);
+    // console.log("Placementttt:  : ", placements);
+    const resCsrf = await getCsrfToken();
+    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}/media/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        mediaid: id,
+        filename: file.name,
+        filetype: file.type,
+        duration,
+        isWatermark: "true", // hardcode
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        progressInfo[idx].percentage = uploadPersen;
+        counterUpdateProgress++;
+        console.log(counterUpdateProgress);
+        setProgressList(progressInfo);
+        setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        uploadPersen = 100;
+        progressInfo[idx].percentage = 100;
+        counterUpdateProgress++;
+        setCounterProgress(counterUpdateProgress);
+        successTodo();
+      },
+    });
+
+    upload.start();
+  }
+
+  const successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  function successTodo() {
+    let counter = 0;
+    for (const element of progressInfo) {
+      if (element.percentage == 100) {
+        counter++;
+      }
+    }
+    if (counter == progressInfo.length) {
+      setIsStartUpload(false);
+      // hideProgress();
+      Cookies.remove("idCreate");
+      successSubmit("/in/contributor/content/video");
+    }
+  }
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setThumbnail(file);
+      console.log("Selected Thumbnail:", file);
+    }
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+    }
+  };
+
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file.type.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
+
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const fileList = files.map((file) => (
+    <div
+      key={file.name}
+      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        {/* <div className="file-preview">{renderFilePreview(file)}</div> */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48"
+          viewBox="0 0 24 24"
+        >
+          <g fill="none" fillRule="evenodd">
+            <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+            <path
+              fill="currentColor"
+              d="M20 3a2 2 0 0 1 1.995 1.85L22 5v14a2 2 0 0 1-1.85 1.995L20 21H4a2 2 0 0 1-1.995-1.85L2 19V5a2 2 0 0 1 1.85-1.995L4 3zm0 2H4v14h16zm-9.66 2.638l.518.23l.338.16l.387.19l.43.218l.47.25l.507.28l.266.152l.518.305l.474.292l.43.273l.38.253l.48.33l.364.263l.095.07a1.234 1.234 0 0 1 0 1.98l-.323.235l-.44.308l-.356.239l-.405.263l-.453.283l-.499.3l-.534.309l-.509.282l-.471.25l-.43.22l-.386.188l-.622.288l-.23.1a1.234 1.234 0 0 1-1.714-.99l-.058-.565l-.032-.374l-.042-.664l-.023-.508l-.015-.555l-.004-.294l-.002-.305q0-.31.006-.6l.015-.555l.023-.507l.027-.457l.03-.401l.075-.744a1.235 1.235 0 0 1 1.715-.992m.611 2.501l-.436-.218l-.029.487l-.022.551l-.013.61l-.002.325l.002.325l.013.609l.01.283l.026.52l.015.235l.434-.218l.487-.256l.535-.294l.284-.162l.551-.326l.494-.306l.436-.28l.196-.13l-.407-.27l-.466-.294a30 30 0 0 0-.803-.48l-.283-.161l-.534-.294z"
+            />
+          </g>
+        </svg>
+        <div>
+          <div className=" text-sm  text-card-foreground">{file.name}</div>
+          <div className=" text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className=" border-none rounded-full"
+        onClick={() => handleRemoveFile(file)}
+      >
+        <Icon icon="tabler:x" className=" h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+  };
+
+  useEffect(() => {
+    // Jika input title kosong, isi dengan hasil generate title
+    if (!getValues("title") && title) {
+      setValue("title", title);
+    }
+  }, [title, getValues, setValue]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col lg:flex-row gap-10">
+        <Card className="w-full lg:w-8/12">
+          <div className="px-6 py-6">
+            <p className="text-lg font-semibold mb-3">{t("form-video")}</p>
+            <div className="gap-5 mb-5">
+              <div className="space-y-2 py-3">
+                <Label>{t("title")}</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.title?.message && (
+                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                )}
+              </div>
+
+              <div className="flex items-center">
+                <div className="py-3 w-full space-y-2">
+                  <Label>{t("category")}</Label>
+                  <Select
+                    value={selectedCategory} // Ensure selectedTarget is updated correctly
+                    onValueChange={(id) => {
+                      console.log("Selected Category ID:", id);
+                      setSelectedCategory(id);
+                    }}
+                  >
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {categories.map((category) => (
+                        <SelectItem
+                          key={category.id}
+                          value={category.id.toString()}
+                        >
+                          {category.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="flex flex-row items-center gap-3 py-2">
+                <Label>{t("ai-assistance")}</Label>
+                <div className="flex items-center gap-3">
+                  <Switch
+                    defaultChecked={isSwitchOn}
+                    color="primary"
+                    id="c2"
+                    onCheckedChange={(checked: boolean) =>
+                      setIsSwitchOn(checked)
+                    }
+                  />
+                </div>
+              </div>
+              {isSwitchOn && (
+                <div>
+                  <div className="flex flex-row gap-3">
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("language")}</Label>
+                      <Select onValueChange={setSelectedLanguage}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="id">Indonesia</SelectItem>
+                          <SelectItem value="en">English</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("writing-style")}</Label>
+                      <Select onValueChange={setSelectedWritingStyle}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="friendly">Friendly</SelectItem>
+                          <SelectItem value="profesional">
+                            Profesional
+                          </SelectItem>
+                          <SelectItem value="informational">
+                            Informational
+                          </SelectItem>
+                          <SelectItem value="neutral">Neutral</SelectItem>
+                          <SelectItem value="witty">Witty</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("article-size")}</Label>
+                      <Select onValueChange={setSelectedSize}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Pilih" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="news">
+                            News (300 - 900 words)
+                          </SelectItem>
+                          <SelectItem value="info">
+                            Info (900 - 2000 words)
+                          </SelectItem>
+                          <SelectItem value="detail">
+                            Detail (2000 - 5000 words)
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("main-keyword")}</Label>
+                      <Button
+                        variant="outline"
+                        color="primary"
+                        onClick={doGenerateMainKeyword}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Processing..." : "Proses"}
+                      </Button>
+                    </div>
+                    <div>
+                      <Input
+                        size="md"
+                        type="text"
+                        value={selectedMainKeyword}
+                        onChange={(e) => setSelectedMainKeyword(e.target.value)}
+                        placeholder="Enter Main Keyword"
+                      />
+                      {/* )}
+                  /> */}
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("title")}</Label>
+                      <Button
+                        variant="outline"
+                        color="primary"
+                        onClick={doGenerateTitle}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Generating..." : "Generate"}
+                      </Button>
+                    </div>
+                    <div>
+                      <Input
+                        size="md"
+                        type="text"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        placeholder="Generated Title"
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <div className="flex flex-row items-center gap-3 mb-3">
+                      <Label>{t("seo")}</Label>
+                      <Button
+                        variant={"outline"}
+                        color="primary"
+                        onClick={doGenerateKeyword}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? "Generating..." : "Generate"}
+                      </Button>
+                    </div>
+                    <p className="font-semibold">
+                      {t("Keywords to include in the text")}
+                    </p>
+                    <p className="text-sm">{t("title-key")}</p>
+                    <div className="mt-3">
+                      <Textarea
+                        value={selectedSEO}
+                        onChange={(e) => setSelectedSEO(e.target.value)}
+                        placeholder="Enter Title"
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5">
+                    <Label>{t("special-instructions")} (Optional)</Label>
+                    <div className="mt-3">
+                      <Controller
+                        control={control}
+                        name="title"
+                        render={({ field }) => (
+                          <Textarea
+                            value={field.value}
+                            onChange={field.onChange}
+                            placeholder="Enter Title"
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <div className="my-5">
+                      <Button
+                        // variant={"outline"}
+                        color="primary"
+                        onClick={handleGenerateArtikel}
+                        size="sm"
+                      >
+                        Generate Article
+                      </Button>
+                    </div>
+
+                    {isGeneratedArticle && (
+                      <div className="mt-3 pb-0 flex flex-row ">
+                        {articleIds.map((id: string, index: number) => (
+                          <p
+                            key={index}
+                            className={`mr-3 px-3 py-2 rounded-md ${
+                              selectedArticleId === id
+                                ? "bg-green-500 text-white"
+                                : "border-2 border-green-500 text-green-500"
+                            }`}
+                            onClick={() => handleArticleIdClick(id)}
+                          >
+                            {"Narasi " + (index + 1)}
+                          </p>
+                        ))}
+                      </div>
+                    )}
+
+                    <div className="pt-3">
+                      <div className="flex flex-row justify-between items-center">
+                        {selectedArticleId && (
+                          <Link
+                            href={`/contributor/content/video/update-seo/${selectedArticleId}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <Button
+                              className="mb-2"
+                              size="sm"
+                              variant={"outline"}
+                              color="primary"
+                            >
+                              {t("update")}
+                            </Button>
+                          </Link>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+              <div className="space-y-2">
+                <Label>{t("description")}</Label>
+                <Controller
+                  control={control}
+                  name="description"
+                  render={({ field: { onChange, value } }) =>
+                    isLoadingData ? (
+                      <div className="flex justify-center items-center h-40">
+                        <p className="text-gray-500">Loading Proses Data...</p>
+                      </div>
+                    ) : (
+                      <CustomEditor
+                        onChange={onChange}
+                        initialData={articleBody || value}
+                      />
+                    )
+                  }
+                />
+                {errors.description?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.description.message}
+                  </p>
+                )}
+              </div>
+              <div className="py-3 space-y-2">
+                <Label>{t("select-file")}</Label>
+                {/* <Input
+                  id="fileInput"
+                  type="file"
+                  onChange={handleImageChange}
+                /> */}
+                <Fragment>
+                  <div {...getRootProps({ className: "dropzone" })}>
+                    <input {...getInputProps()} />
+                    <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                      <CloudUpload className="text-default-300 w-10 h-10" />
+                      <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                        {/* Drop files here or click to upload. */}
+                        {t("drag-file")}
+                      </h4>
+                      <div className=" text-xs text-muted-foreground">
+                        {t("upload-file-video-max")}
+                      </div>
+                    </div>
+                  </div>
+                  {files.length ? (
+                    <Fragment>
+                      <div>{fileList}</div>
+                      <div className=" flex justify-between gap-2">
+                        {/* <div className="flex flex-row items-center gap-3 py-3">
+                          <Label>{t("watermark")}</Label>
+                          <div className="flex items-center gap-3">
+                            <Switch defaultChecked color="primary" id="c2" />
+                          </div>
+                        </div> */}
+                        <Button
+                          color="destructive"
+                          onClick={handleRemoveAllFiles}
+                        >
+                          {t("remove-all")}
+                        </Button>
+                      </div>
+                    </Fragment>
+                  ) : null}
+                </Fragment>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+          </div>
+        </Card>
+        <div className="w-full lg:w-4/12">
+          <Card className=" h-[800px]">
+            <div className="px-3 py-3">
+              <div className="space-y-2">
+                <Label>{t("creator")}</Label>
+                <Controller
+                  control={control}
+                  name="creatorName"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.creatorName?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.creatorName.message}
+                  </p>
+                )}
+              </div>
+            </div>
+            {/* <div className="px-3 py-3">
+              <Label htmlFor="fileInput">Gambar Utama</Label>
+              <Input id="fileInput" type="file" onChange={handleImageChange} />
+            </div> */}
+            {preview && (
+              <div className="mt-3 px-3">
+                <img
+                  src={preview}
+                  alt="Thumbnail Preview"
+                  className="w-full h-auto rounded"
+                />
+              </div>
+            )}
+            <div className="px-3 py-3 space-y-2">
+              <Label htmlFor="tags">{t("tags")}</Label>
+
+              <Input
+                type="text"
+                id="tags"
+                placeholder="Add a tag and press Enter"
+                onKeyDown={handleAddTag}
+                ref={inputRef}
+              />
+              <div className="mt-3 ">
+                {tags.map((tag, index) => (
+                  <span
+                    key={index}
+                    className=" px-1 py-1 rounded-lg bg-black text-white mr-2 text-sm font-sans"
+                  >
+                    {tag}{" "}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTag(index)}
+                      className="remove-tag-button"
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div className="px-3 py-3">
+              <div className="flex flex-col gap-3 space-y-2">
+                <Label>{t("publish-target")}</Label>
+                {options.map((option) => (
+                  <div key={option.id} className="flex gap-2 items-center">
+                    <Checkbox
+                      id={option.id}
+                      checked={
+                        option.id === "all"
+                          ? publishedFor.length ===
+                            options.filter((opt: any) => opt.id !== "all")
+                              .length
+                          : publishedFor.includes(option.id)
+                      }
+                      onCheckedChange={() => handleCheckboxChange(option.id)}
+                    />
+                    <Label htmlFor={option.id}>{option.label}</Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+          <div className="flex flex-row justify-end gap-3">
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                {t("submit")}
+              </Button>
+            </div>
+            <div className="mt-4">
+              <Button type="submit" color="primary" variant="outline">
+                {t("cancel")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/components/form/content/task-ta/video-update-form.tsx b/components/form/content/task-ta/video-update-form.tsx
new file mode 100644
index 00000000..c081082b
--- /dev/null
+++ b/components/form/content/task-ta/video-update-form.tsx
@@ -0,0 +1,993 @@
+"use client";
+import React, {
+  ChangeEvent,
+  Fragment,
+  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 { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  deleteFile,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/service/content/content";
+import { detailMedia } from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { CloudUpload, MailIcon } from "lucide-react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import "swiper/css";
+import "swiper/css/navigation";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+import { files } from "@/app/[locale]/(protected)/app/projects/[id]/data";
+import { useDropzone } from "react-dropzone";
+import Image from "next/image";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Upload } from "tus-js-client";
+import { getCsrfToken } from "@/service/auth";
+import { error, loading } from "@/lib/swal";
+import { useTranslations } from "next-intl";
+import dynamic from "next/dynamic";
+
+const videoSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type Detail = {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  categoryId: {
+    id: number;
+    name: string;
+  };
+  creatorName: string;
+  categoryName: string;
+  thumbnailLink: string;
+  tags: string;
+};
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+type Option = {
+  id: string;
+  name: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormVideoUpdate() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+
+  const { id } = useParams() as { id: string };
+  console.log(id);
+  const editor = useRef(null);
+  type VideoSchema = z.infer<typeof videoSchema>;
+
+  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 t = useTranslations("Form");
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [detail, setDetail] = useState<Detail>();
+  const [refresh, setRefresh] = useState(false);
+  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [detailVideo, setDetailVideo] = useState<any>([]);
+  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
+
+  const [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [selectedOptions, setSelectedOptions] = useState<{
+    [fileId: number]: string[];
+  }>({});
+
+  const options: Option[] = [
+    { id: "all", name: "SEMUA" },
+    { id: "5", name: "UMUM" },
+    { id: "6", name: "JOURNALIS" },
+    { id: "7", name: "POLRI" },
+    { id: "8", name: "KSP" },
+  ];
+
+  let fileTypeId = "2";
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    accept: {
+      "video/*": [],
+    },
+  });
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<VideoSchema>({
+    resolver: zodResolver(videoSchema),
+  });
+
+  // const handleKeyDown = (e: any) => {
+  //   const newTag = e.target.value.trim(); // Ambil nilai input
+  //   if (e.key === "Enter" && newTag) {
+  //     e.preventDefault(); // Hentikan submit form
+  //     if (!tags.includes(newTag)) {
+  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
+  //       setValue("tags", ""); // Kosongkan input
+  //     }
+  //   }
+  // };
+
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const files = Array.from(event.target.files);
+      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
+      console.log("DATAFILE::", selectedFiles);
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+    }
+
+    initState();
+  }, []);
+
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && e.currentTarget.value.trim()) {
+      e.preventDefault();
+      const newTag = e.currentTarget.value.trim();
+      if (!tags.includes(newTag)) {
+        setTags((prevTags) => [...prevTags, newTag]); // Tambahkan tag baru
+        if (inputRef.current) {
+          inputRef.current.value = ""; // Kosongkan input
+        }
+      }
+    }
+  };
+
+  const handleRemoveTag = (index: number) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
+  };
+
+  const handleEditTag = (index: number, newValue: string) => {
+    setTags((prevTags) =>
+      prevTags.map((tag, i) => (i === index ? newValue : tag))
+    );
+  };
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data?.data?.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+
+        if (details?.files) {
+          setFiles(details.files);
+          const initialOptions: { [key: number]: string[] } = {};
+          details.files.forEach((file: any) => {
+            if (file.placements) {
+              initialOptions[file.id] = mapPlacementsToOptions(file.placements);
+            }
+          });
+          setSelectedOptions(initialOptions);
+        }
+
+        if (details?.publishedFor) {
+          // Split string "7" to an array ["7"] if needed
+          setPublishedFor(details.publishedFor.split(","));
+        }
+
+        if (details?.tags) {
+          setTags(details.tags.split(",").map((tag: string) => tag.trim()));
+        }
+
+        const matchingCategory = categories.find(
+          (category) => category.id === details.categoryId
+        );
+
+        if (matchingCategory) {
+          setSelectedTarget(matchingCategory.name);
+        }
+
+        setSelectedTarget(details.categoryId); // Untuk dropdown
+
+        const filesData = details.files || [];
+        const fileUrls = filesData.map((files: { url: string }) =>
+          files.url ? files.url : "default-image.jpg"
+        );
+        setDetailVideo(fileUrls);
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const mapPlacementsToOptions = (placements: string): string[] => {
+    const mapping: Record<string, string> = {
+      all: "all",
+      mabes: "nasional",
+      polda: "wilayah",
+      polres: "internasional",
+    };
+
+    // Jika placements hanya "all", langsung aktifkan semua checkbox
+    if (placements.trim() === "all") {
+      return ["all", "nasional", "wilayah", "internasional"];
+    }
+
+    const options = placements
+      .split(",")
+      .map((p) => mapping[p.trim()])
+      .filter(Boolean);
+
+    const allSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
+      options.includes(opt)
+    );
+
+    return allSelected ? ["all", ...options] : options;
+  };
+
+  const handleCheckboxChange = (id: string) => {
+    if (id === "all") {
+      // Select all options except "all"
+      const allOptions = options
+        .filter((opt) => opt.id !== "all")
+        .map((opt) => opt.id);
+      setPublishedFor(
+        publishedFor.length === allOptions.length ? [] : allOptions
+      );
+    } else {
+      // Toggle individual option
+      setPublishedFor((prev) =>
+        prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+      );
+    }
+  };
+
+  const save = async (data: VideoSchema) => {
+    loading();
+    const finalTags = tags.join(", ");
+    const requestData = {
+      ...data,
+      id: detail?.id,
+      title: data.title,
+      description: data.description,
+      htmlDescription: data.description,
+      fileTypeId,
+      categoryId: selectedTarget,
+      subCategoryId: selectedTarget,
+      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+      statusId: "1",
+      publishedFor: publishedFor.join(","),
+      creatorName: data.creatorName,
+      tags: finalTags,
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    const response = await createMedia(requestData);
+    console.log("Form Data Submitted:", requestData);
+
+    const formMedia = new FormData();
+    const thumbnail = files[0];
+    formMedia.append("file", thumbnail);
+    const responseThumbnail = await uploadThumbnail(id, formMedia);
+    if (responseThumbnail?.error == true) {
+      error(responseThumbnail?.message);
+      return false;
+    }
+
+    const progressInfoArr = [];
+    for (const item of files) {
+      progressInfoArr.push({ percentage: 0, fileName: item.name });
+    }
+    progressInfo = progressInfoArr;
+    setIsStartUpload(true);
+    setProgressList(progressInfoArr);
+
+    close();
+    // showProgress();
+    files.map(async (item: any, index: number) => {
+      await uploadResumableFile(index, String(id), item, "0");
+    });
+
+    // MySwal.fire({
+    //   title: "Sukses",
+    //   text: "Data berhasil disimpan.",
+    //   icon: "success",
+    //   confirmButtonColor: "#3085d6",
+    //   confirmButtonText: "OK",
+    // }).then(() => {
+    //   router.push("/en/contributor/content/video");
+    // });
+  };
+
+  const onSubmit = (data: VideoSchema) => {
+    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);
+      }
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    duration: string
+  ) {
+    console.log(idx, id, file, duration);
+
+    // const placements = getPlacement(file.placements);
+    // console.log("Placementttt:  : ", placements);
+    const resCsrf = await getCsrfToken();
+    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}/media/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        mediaid: id,
+        filename: file.name,
+        filetype: file.type,
+        duration,
+        isWatermark: "false", // hardcode
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        progressInfo[idx].percentage = uploadPersen;
+        counterUpdateProgress++;
+        console.log(counterUpdateProgress);
+        setProgressList(progressInfo);
+        setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        uploadPersen = 100;
+        progressInfo[idx].percentage = 100;
+        counterUpdateProgress++;
+        setCounterProgress(counterUpdateProgress);
+        successTodo();
+      },
+    });
+
+    upload.start();
+  }
+
+  const successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  function successTodo() {
+    let counter = 0;
+    for (const element of progressInfo) {
+      if (element.percentage == 100) {
+        counter++;
+      }
+    }
+    if (counter == progressInfo.length) {
+      setIsStartUpload(false);
+      // hideProgress();
+      Cookies.remove("idCreate");
+      successSubmit("/in/contributor/content/video");
+    }
+  }
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+  };
+
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file?.type?.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
+
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const fileList = files.map((file: any) => (
+    <div
+      key={file.id} // Gunakan ID file sebagai key
+      className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        <div className="file-preview">{renderFilePreview(file)}</div>
+        <div>
+          <div className="text-sm text-card-foreground">
+            {file.fileName || file.name}
+          </div>
+          <div className="text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className="border-none rounded-full"
+        onClick={() => handleDeleteFile(file.id)} // Kirim ID spesifik
+      >
+        <Icon icon="tabler:x" className="h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  const handleCheckboxChangeImage = (fileId: number, value: string) => {
+    setSelectedOptions((prev: any) => {
+      const currentSelections = prev[fileId] || [];
+      if (value === "all") {
+        // If "all" is clicked, toggle all options
+        if (currentSelections.includes("all")) {
+          return { ...prev, [fileId]: [] }; // Deselect all
+        }
+        return {
+          ...prev,
+          [fileId]: ["all", "nasional", "wilayah", "internasional"],
+        }; // Select all
+      } else {
+        // If any other checkbox is clicked, toggle that checkbox
+        const updatedSelections = currentSelections.includes(value)
+          ? currentSelections.filter((option: any) => option !== value)
+          : [...currentSelections, value];
+
+        // If all individual options are selected, include "all" automatically
+        const isAllSelected = ["nasional", "wilayah", "internasional"].every(
+          (opt) => updatedSelections.includes(opt)
+        );
+        return {
+          ...prev,
+          [fileId]: isAllSelected
+            ? ["all", ...updatedSelections]
+            : updatedSelections.filter((opt: any) => opt !== "all"),
+        };
+      }
+    });
+  };
+
+  function success() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        // window.location.reload();
+      }
+    });
+  }
+
+  const handleDeleteFile = (id: number) => {
+    MySwal.fire({
+      title: "Hapus file",
+      text: "Apakah Anda yakin ingin menghapus file ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#3085d6",
+      confirmButtonColor: "#d33",
+      confirmButtonText: "Hapus",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        doDelete(id);
+      }
+    });
+  };
+
+  async function doDelete(id: number) {
+    const data = { id };
+
+    try {
+      const response = await deleteFile(data);
+      if (response?.error) {
+        error(response.message);
+        return;
+      }
+
+      // Jika berhasil, hapus file dari state lokal
+      setFiles((prevFiles: any) =>
+        prevFiles.filter((file: any) => file.id !== id)
+      );
+      success();
+    } catch (err) {
+      error("Terjadi kesalahan saat menghapus file");
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {detail !== undefined ? (
+        <div className="flex flex-col lg:flex-row gap-10">
+          <Card className="w-full lg:w-8/12">
+            <div className="px-6 py-6">
+              <p className="text-lg font-semibold mb-3">{t("form-video")}</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>{t("title")}</Label>
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        defaultValue={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 items-center">
+                  <div className="py-3 w-full space-y-2">
+                    <Label>{t("category")}</Label>
+                    <Select
+                      defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
+                      onValueChange={(id) => {
+                        console.log("Selected Category:", id);
+                        setSelectedTarget(id);
+                      }}
+                    >
+                      <SelectTrigger size="md">
+                        <SelectValue placeholder="Pilih" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {categories.map((category) => (
+                          <SelectItem key={category.id} value={category.id}>
+                            {category.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="py-3 space-y-2">
+                  <Label>{t("description")}</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <CustomEditor
+                        onChange={onChange}
+                        initialData={detail?.description || value}
+                      />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+                <div className="py-3 space-y-2">
+                  <Label>{t("select-file")}</Label>
+                  {/* <Input
+                  id="fileInput"
+                  type="file"
+                  onChange={handleImageChange}
+                /> */}
+                  <Fragment>
+                    <div {...getRootProps({ className: "dropzone" })}>
+                      <input {...getInputProps()} />
+                      <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                        <CloudUpload className="text-default-300 w-10 h-10" />
+                        <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                          {/* Drop files here or click to upload. */}
+                          {t("drag-file")}
+                        </h4>
+                        <div className=" text-xs text-muted-foreground">
+                          {t("upload-file-video-max")}
+                        </div>
+                      </div>
+                    </div>
+                    {files.length ? (
+                      <Fragment>
+                        <div>{fileList}</div>
+                        <div className=" flex justify-between gap-2">
+                          <div className="flex flex-row items-center gap-3 py-3">
+                            <Label>{t("watermark")}</Label>
+                            <div className="flex items-center gap-3">
+                              <Switch defaultChecked color="primary" id="c2" />
+                            </div>
+                          </div>
+                          {/* <Button
+                            color="destructive"
+                            onClick={handleRemoveAllFiles}
+                          >
+                            Remove All
+                          </Button> */}
+                        </div>
+                      </Fragment>
+                    ) : null}
+                    {files.length > 0 && (
+                      <div className="mt-4 space-y-2">
+                        <Label className="text-lg font-semibold">
+                          {" "}
+                          {t("file-media")}
+                        </Label>
+                        <div className="grid gap-4">
+                          {files.map((file: any) => (
+                            <div
+                              key={file.id}
+                              className="flex items-center border p-2 rounded-md"
+                            >
+                              <img
+                                src={file.thumbnailFileUrl}
+                                alt={file.fileName}
+                                className="w-16 h-16 object-cover rounded-md mr-4"
+                              />
+                              <div className="flex flex-wrap gap-3 items-center ">
+                                <div className="flex-grow">
+                                  <p className="font-medium">{file.fileName}</p>
+                                  <a
+                                    href={file.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-blue-500 text-sm"
+                                  >
+                                    {t("view-file")}
+                                  </a>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("all")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "all"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>{t("all")}</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("nasional")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "nasional"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Nasional</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("wilayah")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "wilayah"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Wilayah</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("internasional")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "internasional"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Internasional</span>
+                                  </Label>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </Fragment>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-full lg:w-4/12">
+            <Card className=" h-[800px]">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("creator")}</Label>
+                  <Controller
+                    control={control}
+                    name="creatorName"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        defaultValue={detail?.creatorName}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.creatorName?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.creatorName.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="mt-3 px-3 space-y-2">
+                <Label>{t("preview")}</Label>
+                <Card className="mt-2">
+                  <img
+                    src={detail.thumbnailLink}
+                    alt="Thumbnail Gambar Utama"
+                    className="w-full h-auto rounded"
+                  />
+                </Card>
+              </div>
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>{t("tags")}</Label>
+                  <Input
+                    type="text"
+                    id="tags"
+                    placeholder="Add a tag and press Enter"
+                    onKeyDown={handleAddTag}
+                    ref={inputRef}
+                  />
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    {tags.map((tag, index) => (
+                      <span
+                        key={index}
+                        className="flex  items-center gap-2 px-2 py-1 rounded-lg bg-black text-white text-sm"
+                      >
+                        <input
+                          type="text"
+                          value={tag}
+                          onChange={(e) => handleEditTag(index, e.target.value)}
+                          className="bg-black text-white border-none focus:outline-none w-auto"
+                        />
+                        <button
+                          value={tag}
+                          type="button"
+                          onClick={() => handleRemoveTag(index)}
+                          className="remove-tag-button text-white"
+                        >
+                          ×
+                        </button>
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div className="px-3 py-3">
+                <div className="flex flex-col gap-6 space-y-2">
+                  <Label>{t("publish-target")}</Label>
+                  {options.map((option: Option) => (
+                    <div key={option.id} className="flex gap-2 items-center">
+                      <Checkbox
+                        id={option.id}
+                        checked={
+                          option.id === "all"
+                            ? publishedFor.length ===
+                              options.filter((opt) => opt.id !== "all").length
+                            : publishedFor.includes(option.id)
+                        }
+                        onCheckedChange={() => handleCheckboxChange(option.id)}
+                      />
+                      <Label htmlFor={option.id}>{option.name}</Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
+                <MailIcon />
+                <p className="">{t("suggestion-box")} (0)</p>
+              </div>
+              <div className="px-3 py-3">
+                <p>{t("information")}:</p>
+                {/* <p>{detail?.status}</p> */}
+              </div>
+            </Card>
+            <div className="flex flex-row justify-end gap-3">
+              <div className="mt-4">
+                <Button type="submit" color="primary">
+                  {t("submit")}
+                </Button>
+              </div>
+              <div className="mt-4">
+                <Button type="submit" color="primary" variant="outline">
+                  {t("cancel")}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}
diff --git a/components/form/shared/file-uploader.tsx b/components/form/shared/file-uploader.tsx
index e5fd8875..64d2e1a5 100644
--- a/components/form/shared/file-uploader.tsx
+++ b/components/form/shared/file-uploader.tsx
@@ -11,118 +11,121 @@ interface FileWithPreview extends File {
 }
 
 interface FileUploaderProps {
-    onDrop: (files: FileWithPreview[]) => void;
-    accept: Accept;
-    maxSize: number;
-    label: string;
-    className?: string;
-    isMultiple?: boolean;
+  onDrop: (files: FileWithPreview[]) => void;
+  accept: Accept;
+  maxSize: number;
+  label: string;
+  className?: string;
+  isMultiple?: boolean;
 }
 
-const FileUploader = ({ onDrop, accept, maxSize, label, className = "", isMultiple = true }: FileUploaderProps) => {
-    const [files, setFiles] = useState<FileWithPreview[]>([]);
+const FileUploader = ({
+  onDrop,
+  accept,
+  maxSize,
+  label,
+  className = "",
+  isMultiple = true,
+}: FileUploaderProps) => {
+  const [files, setFiles] = useState<FileWithPreview[]>([]);
 
-    const { getRootProps, getInputProps } = useDropzone({
-        accept,
-        maxSize: maxSize * 1024 * 1024,
-        onDrop: (acceptedFiles) => {
-            const mappedFiles = acceptedFiles.map((file) => Object.assign(file));
-            setFiles((prevFiles) => [...prevFiles, ...mappedFiles]);
-            onDrop(mappedFiles);
-        },
-    });
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: accept,
+    maxSize: maxSize * 1024 * 1024,
+    onDrop: (acceptedFiles) => {
+      const mappedFiles = acceptedFiles.map((file) => Object.assign(file));
+      setFiles((prevFiles) => [...prevFiles, ...mappedFiles]);
+      onDrop(mappedFiles);
+    },
+  });
 
-    const renderFilePreview = (file: FileWithPreview) => {
-      if (file.type.startsWith("image")) {
-        return (
-          <Image
-            width={48}
-            height={48}
-            alt={file.name}
-            src={URL.createObjectURL(file)}
-            className=" rounded border p-0.5"
-          />
-        );
-      } else {
-        return <Icon icon="tabler:file-description" />;
-      }
-    };
-  
-    const handleRemoveFile = (file: FileWithPreview) => {
-      const uploadedFiles = files;
-      const filtered = uploadedFiles.filter((i) => i.name !== file.name);
-      setFiles([...filtered]);
-    };
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file.type.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
 
-    const handleRemoveAllFiles = () => {
-        setFiles([]);
-        onDrop([]);
-    };
-  
-    const fileList = files.map((file) => (
-      <div
-        key={file.name}
-        className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-      >
-        <div className="flex gap-3 items-center">
-          <div className="file-preview">{renderFilePreview(file)}</div>
-          <div>
-            <div className=" text-sm  text-card-foreground">{file.name}</div>
-            <div className=" text-xs font-light text-muted-foreground">
-              {Math.round(file.size / 100) / 10 > 1000 ? (
-                <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
-              ) : (
-                <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
-              )}
-              {" kb"}
-            </div>
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+    onDrop([]);
+  };
+
+  const fileList = files.map((file) => (
+    <div
+      key={file.name}
+      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        <div className="file-preview">{renderFilePreview(file)}</div>
+        <div>
+          <div className=" text-sm  text-card-foreground">{file.name}</div>
+          <div className=" text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
           </div>
         </div>
-  
-        <Button
-          size="icon"
-          color="destructive"
-          variant="outline"
-          className=" border-none rounded-full"
-          onClick={() => handleRemoveFile(file)}
-        >
-          <Icon icon="tabler:x" className=" h-5 w-5" />
-        </Button>
       </div>
-    ));
-    
-    return (
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className=" border-none rounded-full"
+        onClick={() => handleRemoveFile(file)}
+      >
+        <Icon icon="tabler:x" className=" h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  return (
+    <Fragment>
+      <div {...getRootProps({ className: "dropzone" })} className={className}>
+        <input {...getInputProps()} />
+        <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+          <CloudUpload className="text-default-300 w-10 h-10" />
+          <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+            {/* Drop files here or click to upload. */}
+            Tarik file disini atau klik untuk upload.
+          </h4>
+          <div className=" text-xs text-muted-foreground">
+            ( {label}
+            Ukuran maksimal {maxSize} MB.)
+          </div>
+        </div>
+      </div>
+      {files.length ? (
         <Fragment>
-            <div {...getRootProps({ className: "dropzone" })} className={className}>
-                <input {...getInputProps()} />
-                <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
-                <CloudUpload className="text-default-300 w-10 h-10" />
-                <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
-                    {/* Drop files here or click to upload. */}
-                    Tarik file disini atau klik untuk upload. 
-                </h4>
-                <div className=" text-xs text-muted-foreground">
-                    ( {label}
-                    Ukuran maksimal {maxSize} MB.)
-                </div>
-                </div>
-            </div>
-            {files.length ? (
-                <Fragment>
-                    <div>{fileList}</div>
-                    <div className=" flex justify-between gap-2">
-                        <Button
-                        color="destructive"
-                        onClick={handleRemoveAllFiles}
-                        >
-                            Remove All
-                        </Button>
-                    </div>
-                </Fragment>
-            ) : null}
+          <div>{fileList}</div>
+          <div className=" flex justify-between gap-2">
+            <Button color="destructive" onClick={handleRemoveAllFiles}>
+              Remove All
+            </Button>
+          </div>
         </Fragment>
-    );
-}
+      ) : null}
+    </Fragment>
+  );
+};
 
-
-export default FileUploader;
\ No newline at end of file
+export default FileUploader;
diff --git a/components/form/task-ta/task-ta-detail-form.tsx b/components/form/task-ta/task-ta-detail-form.tsx
index a5a96ed5..4b6da568 100644
--- a/components/form/task-ta/task-ta-detail-form.tsx
+++ b/components/form/task-ta/task-ta-detail-form.tsx
@@ -1506,12 +1506,12 @@ export default function FormTaskTaDetail() {
                             <Link
                               href={
                                 Number(item?.fileType?.id) == 1
-                                  ? `/contributor/content/image/detail/${item?.id}`
+                                  ? `/contributor/task-ta/detail-upload/image/${item?.id}`
                                   : Number(item?.fileType?.id) == 2
-                                  ? `/contributor/content/video/detail/${item?.id}`
+                                  ? `/contributor/task-ta/detail-upload/video/${item?.id}`
                                   : Number(item?.fileType?.id) == 3
-                                  ? `/contributor/content/teks/detail/${item?.id}`
-                                  : `/contributor/content/audio/detail/${item?.id}`
+                                  ? `/contributor/task-ta/detail-upload/teks/${item?.id}`
+                                  : `/contributor/task-ta/detail-upload/audio/${item?.id}`
                               }
                             >
                               {item.title}
diff --git a/components/form/task-ta/task-ta-upload-form.tsx b/components/form/task-ta/task-ta-upload-form.tsx
index 6c43ab91..e4cdd01e 100644
--- a/components/form/task-ta/task-ta-upload-form.tsx
+++ b/components/form/task-ta/task-ta-upload-form.tsx
@@ -187,7 +187,7 @@ export default function FormTaskTaNew() {
           message: "Deskripsi diperlukan.",
         })
       ),
-    creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+    // creatorName: z.string().min(1, { message: "Creator diperlukan" }),
     // tags: z.string().min(1, { message: "Judul diperlukan" }),
   });
 
@@ -370,13 +370,13 @@ export default function FormTaskTaNew() {
       description: finalDescription,
       htmlDescription: finalDescription,
       fileTypeId: fileTypeId,
-      categoryId: selectedCategory,
+      categoryId: "235",
       subCategoryId: selectedCategory,
       uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
       statusId: "1",
       publishedFor: publishedFor.join(","),
-      creatorName: data.creatorName,
-      tags: finalTags,
+      creatorName: "Penugasan-Ta",
+      tags: "penugasan-Ta",
       isYoutube: false,
       isInternationalMedia: false,
     };
@@ -648,7 +648,7 @@ export default function FormTaskTaNew() {
       {detail !== undefined ? (
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="flex flex-col lg:flex-row gap-10">
-            <Card className="w-full lg:w-8/12">
+            <Card className="w-full lg:w-full">
               <div className="px-6 py-6">
                 <div className="gap-5 mb-5">
                   {/* Input Title */}
@@ -690,7 +690,7 @@ export default function FormTaskTaNew() {
                       </Select>
                     </div>
 
-                    <div className="py-3 space-y-2 w-9/12">
+                    {/* <div className="py-3 space-y-2 w-9/12">
                       <Label>{t("category")}</Label>
                       <Select
                         value={selectedCategory} // Ensure selectedTarget is updated correctly
@@ -713,7 +713,7 @@ export default function FormTaskTaNew() {
                           ))}
                         </SelectContent>
                       </Select>
-                    </div>
+                    </div> */}
                   </div>
 
                   <div className="py-3 space-y-2">
@@ -830,11 +830,24 @@ export default function FormTaskTaNew() {
                   </div>
                 </div>
 
-                {/* Submit Button */}
+                <div className="flex flex-row justify-end gap-3">
+                  <div className="mt-4">
+                    <Button type="submit" color="primary">
+                      {t("submit")}
+                    </Button>
+                  </div>
+                  <div className="mt-4">
+                    <Link href={"/contributor/content/image"}>
+                      <Button type="submit" color="primary" variant="outline">
+                        {t("cancel")}
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
               </div>
             </Card>
-            <div className="w-full lg:w-4/12">
-              <Card className=" h-[500px]">
+            {/* <div className="w-full lg:w-4/12"> */}
+            {/* <Card className=" h-[500px]">
                 <div className="px-3 py-3">
                   <div className="space-y-2">
                     <Label>{t("creator")}</Label>
@@ -908,22 +921,8 @@ export default function FormTaskTaNew() {
                     ))}
                   </div>
                 </div>
-              </Card>
-              <div className="flex flex-row justify-end gap-3">
-                <div className="mt-4">
-                  <Button type="submit" color="primary">
-                    {t("submit")}
-                  </Button>
-                </div>
-                <div className="mt-4">
-                  <Link href={"/contributor/content/image"}>
-                    <Button type="submit" color="primary" variant="outline">
-                      {t("cancel")}
-                    </Button>
-                  </Link>
-                </div>
-              </div>
-            </div>
+              </Card> */}
+            {/* </div> */}
           </div>
         </form>
       ) : (
diff --git a/components/form/task/task-form.tsx b/components/form/task/task-form.tsx
index 3a3af009..4ba06f5b 100644
--- a/components/form/task/task-form.tsx
+++ b/components/form/task/task-form.tsx
@@ -805,8 +805,7 @@ export default function FormTask() {
                   <Label>{t("audio-visual")}</Label>
                   <FileUploader
                     accept={{
-                      "mp4/*": [],
-                      "mov/*": [],
+                      "video/*": [],
                     }}
                     maxSize={100}
                     label="Upload file dengan format .mp4 atau .mov."
@@ -828,7 +827,7 @@ export default function FormTask() {
                   <Label>{t("text")}</Label>
                   <FileUploader
                     accept={{
-                      "pdf/*": [],
+                      "application/pdf": [],
                     }}
                     maxSize={100}
                     label="Upload file dengan format .pdf."
@@ -848,8 +847,7 @@ export default function FormTask() {
                   />
                   <FileUploader
                     accept={{
-                      "mp3/*": [],
-                      "wav/*": [],
+                      "audio/*": [],
                     }}
                     maxSize={100}
                     label="Upload file dengan format .mp3 atau .wav."
diff --git a/components/partials/auth/login-form.tsx b/components/partials/auth/login-form.tsx
index 87f4ab61..1d68e8f5 100644
--- a/components/partials/auth/login-form.tsx
+++ b/components/partials/auth/login-form.tsx
@@ -149,6 +149,7 @@ const LoginForm = () => {
         console.log("PROFILE : ", profile?.data?.data);
 
         if (
+          profile?.data?.data?.isInternational == true ||
           profile?.data?.data?.isActive == false ||
           profile?.data?.data?.isDelete == true
         ) {
@@ -224,8 +225,6 @@ const LoginForm = () => {
             Number(profile?.data?.data?.roleId) == 10 ||
             Number(profile?.data?.data?.roleId) == 11 ||
             Number(profile?.data?.data?.roleId) == 12 ||
-            Number(profile?.data?.data?.roleId) == 14 ||
-            Number(profile?.data?.data?.roleId) == 15 ||
             Number(profile?.data?.data?.roleId) == 18 ||
             Number(profile?.data?.data?.roleId) == 19
           ) {
@@ -282,17 +281,17 @@ const LoginForm = () => {
       return false;
     }
     const msg = response?.data?.message;
-    onSubmit(data);
+    // onSubmit(data);
 
-    // if (msg == "Continue to setup email") {
-    //   setStep(2);
-    // } else if (msg == "Email is valid and OTP has been sent") {
-    //   setStep(3);
-    // } else if (msg == "Username & password valid") {
-    //   onSubmit(data);
-    // } else {
-    //   error("Username / password incorrect");
-    // }
+    if (msg == "Continue to setup email") {
+      setStep(2);
+    } else if (msg == "Email is valid and OTP has been sent") {
+      setStep(3);
+    } else if (msg == "Username & password valid") {
+      onSubmit(data);
+    } else {
+      error("Username / password incorrect");
+    }
     // else {
     //   setStep(1);
     // }
@@ -536,10 +535,10 @@ const LoginForm = () => {
               </div>
 
               <Button
-                type="submit"
+                type="button"
                 fullWidth
-                // onClick={handleEmailValidation}
-                // disabled={isPending}
+                onClick={handleEmailValidation}
+                disabled={isPending}
               >
                 Selanjutnya
               </Button>