feat:upload content video,teks,audio

app/[locale]/(protected)/contributor/content/audio/create/page.tsx

@@ -0,0 +1,15 @@
+import FormAudio from "@/components/form/content/audio-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+const AudioCreatePage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormAudio />
+      </div>
+    </div>
+  );
+};
+
+export default AudioCreatePage;

app/[locale]/(protected)/contributor/content/audio/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
-import { Link, UploadIcon } from "lucide-react";
+import { UploadIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import TableAudio from "./components/table-audio";
+import { Link } from "@/components/navigation";
 
 const ReactTableAudioPage = () => {
   return (
@@ -56,14 +57,16 @@ const ReactTableAudioPage = () => {
                   Konten Audio
                 </div>
                 <div className="flex-none">
-                  <Button color="primary" className="text-white">
+                  <Link href={"/contributor/content/audio/create"}>
-                    <UploadIcon />
+                    <Button color="primary" className="text-white">
-                    Unggah Audio
+                      <UploadIcon />
-                  </Button>
+                      Unggah Audio
-                  <Button color="primary" className="text-white ml-3">
+                    </Button>
+                  </Link>
+                  {/* <Button color="primary" className="text-white ml-3">
                     <UploadIcon />
                     Unggah Audio Dengan AI
-                  </Button>
+                  </Button> */}
                 </div>
               </div>
             </CardTitle>

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

@@ -12,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
+import { Link } from "@/components/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -139,12 +140,18 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <a href="/contributor/task/detail/[id]">
+            <Link href={`/contributor/content/teks/detail/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
                 View
               </DropdownMenuItem>
-            </a>
+            </Link>
+            <Link href={`/contributor/content/teks/update/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <SquarePen className="w-4 h-4 me-1.5" />
+                Edit
+              </DropdownMenuItem>
+            </Link>
             <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
               <Trash2 className="w-4 h-4 me-1.5" />
               Delete

app/[locale]/(protected)/contributor/content/teks/create/page.tsx

@@ -0,0 +1,16 @@
+import FormAudio from "@/components/form/content/audio-form";
+import FormTeks from "@/components/form/content/teks-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+const TeksCreatePage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormTeks />
+      </div>
+    </div>
+  );
+};
+
+export default TeksCreatePage;

app/[locale]/(protected)/contributor/content/teks/detail/[id]/page.tsx

@@ -0,0 +1,16 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormImageDetail from "@/components/form/content/image-detail-form";
+import FormTeksDetail from "@/components/form/content/teks-detail-form";
+
+const TeksDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormTeksDetail />
+      </div>
+    </div>
+  );
+};
+
+export default TeksDetailPage;

app/[locale]/(protected)/contributor/content/teks/page.tsx

@@ -6,6 +6,7 @@ import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import TableTeks from "./components/table-teks";
+import { Link } from "@/components/navigation";
 
 const ReactTableTeksPage = () => {
   return (
@@ -56,15 +57,18 @@ const ReactTableTeksPage = () => {
                 <div className="flex-1 text-xl font-medium text-default-900">
                   Konten Teks
                 </div>
+
                 <div className="flex-none">
-                  <Button color="primary" className="text-white">
+                  <Link href={"/contributor/content/teks/create"}>
-                    <UploadIcon />
+                    <Button color="primary" className="text-white">
-                    Unggah Teks
+                      <UploadIcon />
-                  </Button>
+                      Unggah Teks
-                  <Button color="primary" className="text-white ml-3">
+                    </Button>
+                  </Link>
+                  {/* <Button color="primary" className="text-white ml-3">
                     <UploadIcon />
                     Unggah Teks Dengan AI
-                  </Button>
+                  </Button> */}
                 </div>
               </div>
             </CardTitle>

app/[locale]/(protected)/contributor/content/teks/update/[id]/page.tsx

@@ -0,0 +1,17 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormImageDetail from "@/components/form/content/image-detail-form";
+import FormImageUpdate from "@/components/form/content/image-update-form";
+import FormTeksUpdate from "@/components/form/content/teks-update-form";
+
+const TeksUpdatePage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormTeksUpdate />
+      </div>
+    </div>
+  );
+};
+
+export default TeksUpdatePage;

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

@@ -12,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
+import { Link } from "@/components/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -139,12 +140,18 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <a href="/contributor/task/detail/[id]">
+            <Link href={`/contributor/content/video/detail/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
                 View
               </DropdownMenuItem>
-            </a>
+            </Link>
+            <Link href={`/contributor/content/video/update/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <SquarePen className="w-4 h-4 me-1.5" />
+                Edit
+              </DropdownMenuItem>
+            </Link>
             <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
               <Trash2 className="w-4 h-4 me-1.5" />
               Delete

app/[locale]/(protected)/contributor/content/video/detail/[id]/page.tsx

@@ -0,0 +1,16 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormImageDetail from "@/components/form/content/image-detail-form";
+import FormVideoDetail from "@/components/form/content/video-detail-form";
+
+const VideoDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormVideoDetail />
+      </div>
+    </div>
+  );
+};
+
+export default VideoDetailPage;

app/[locale]/(protected)/contributor/content/video/page.tsx

@@ -58,16 +58,16 @@ const ReactTableVideoPage = () => {
                   Konten Video
                 </div>
                 <div className="flex-none">
-                  <Link href={"/contributor/content/audio-visual/create"}>
+                  <Link href={"/contributor/content/video/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon />
                       Unggah Video
                     </Button>
                   </Link>
-                  <Button color="primary" className="text-white ml-3">
+                  {/* <Button color="primary" className="text-white ml-3">
                     <UploadIcon />
                     Unggah Video Dengan AI
-                  </Button>
+                  </Button> */}
                 </div>
               </div>
             </CardTitle>

app/[locale]/(protected)/contributor/content/video/update/[id]/page.tsx

@@ -0,0 +1,17 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormImageDetail from "@/components/form/content/image-detail-form";
+import FormImageUpdate from "@/components/form/content/image-update-form";
+import FormVideoUpdate from "@/components/form/content/video-update-form";
+
+const VideoUpdatePage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormVideoUpdate />
+      </div>
+    </div>
+  );
+};
+
+export default VideoUpdatePage;

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

@@ -336,9 +336,9 @@ export default function FormImageDetail() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push('/in/contributor/content/image');
+      router.push("/in/contributor/content/image");
     });
-  }
+  };
 
   return (
     <form>
@@ -426,7 +426,7 @@ export default function FormImageDetail() {
                     {detailThumb?.map((data: any) => (
                       <SwiperSlide key={data.id}>
                         <img
-                          className="object-fill h-full w-full"
+                          className="object-fill h-full w-full rounded-md"
                           src={data}
                           alt={` ${data.id}`}
                         />
@@ -733,7 +733,11 @@ export default function FormImageDetail() {
                     </div>
                   )}
                   <DialogFooter>
-                    <Button type="button" color="primary" onClick={submitApprovalSuccesss}>
+                    <Button
+                      type="button"
+                      color="primary"
+                      onClick={submitApprovalSuccesss}
+                    >
                       Submit
                     </Button>
                     <Button

components/form/content/image-form.tsx

@@ -51,6 +51,8 @@ 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";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -70,6 +72,11 @@ type Category = {
   name: string;
 };
 
+type Option = {
+  id: string;
+  label: string;
+};
+
 export default function FormImage() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
@@ -125,6 +132,15 @@ export default function FormImage() {
   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) => {
@@ -350,6 +366,33 @@ export default function FormImage() {
     }
   };
 
+  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(", ");
@@ -364,7 +407,7 @@ export default function FormImage() {
       subCategoryId: selectedCategory,
       uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
       statusId: "1",
-      publishedFor: "6",
+      publishedFor: publishedFor.join(","),
       creatorName: data.creatorName,
       tags: finalTags,
       isYoutube: false,
@@ -386,7 +429,7 @@ export default function FormImage() {
 
       // Upload Thumbnail
       const formMedia = new FormData();
-      console.log('Thumbnail : ', files[0]);
+      console.log("Thumbnail : ", files[0]);
       formMedia.append("file", files[0]);
       const responseThumbnail = await uploadThumbnail(id, formMedia);
       if (responseThumbnail?.error == true) {
@@ -977,28 +1020,24 @@ export default function FormImage() {
               </div>
             </div>
             <div className="px-3 py-3">
-              <div className="flex flex-col gap-6">
+              <div className="flex flex-col gap-3">
                 <Label>Target Publish</Label>
-                <div className="flex gap-2 items-center">
+                {options.map((option) => (
-                  <Checkbox id="all" />
+                  <div key={option.id} className="flex gap-1 items-center">
-                  <Label htmlFor="all">SEMUA</Label>
+                    <Checkbox
-                </div>
+                      id={option.id}
-                <div className="flex gap-2 items-center">
+                      checked={
-                  <Checkbox id="umum" />
+                        option.id === "all"
-                  <Label htmlFor="umum">UMUM</Label>
+                          ? publishedFor.length ===
-                </div>
+                            options.filter((opt: any) => opt.id !== "all")
-                <div className="flex gap-2 items-center">
+                              .length
-                  <Checkbox id="journalist" />
+                          : publishedFor.includes(option.id)
-                  <Label htmlFor="journalist">JOURNALIS</Label>
+                      }
-                </div>
+                      onChange={() => handleCheckboxChange(option.id)}
-                <div className="flex gap-2 items-center">
+                    />
-                  <Checkbox id="polri" />
+                    <Label htmlFor={option.id}>{option.label}</Label>
-                  <Label htmlFor="polri">POLRI</Label>
+                  </div>
-                </div>
+                ))}
-                <div className="flex gap-2 items-center">
-                  <Checkbox id="ksp" />
-                  <Label htmlFor="ksp">KSP</Label>
-                </div>
               </div>
             </div>
           </Card>

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

@@ -0,0 +1,761 @@
+"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 } 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";
+
+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;
+};
+
+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 [selectedTarget, setSelectedTarget] = useState("");
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
+  const [isMabesApprover, setIsMabesApprover] = useState(false);
+
+  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"
+    ) {
+      setIsMabesApprover(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((file: { thumbnailFileUrl: string }) =>
+          file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg"
+        );
+        setDetailThumb(fileUrls);
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const actionApproval = (e: string) => {
+    setStatus(e);
+    setModalOpen(true);
+    setDescription("");
+  };
+
+  const submit = async () => {
+    if (
+      (description?.length > 1 && Number(status) == 3) ||
+      Number(status) == 2 ||
+      Number(status) == 4
+    ) {
+      MySwal.fire({
+        title: "Simpan Approval",
+        text: "",
+        icon: "warning",
+        showCancelButton: true,
+        cancelButtonColor: "#d33",
+        confirmButtonColor: "#3085d6",
+        confirmButtonText: "Simpan",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          save();
+        }
+      });
+    }
+  };
+
+  async function save() {
+    const data = {
+      mediaUploadId: id,
+      statusId: status,
+      message: description,
+      files: [],
+      // files: isMabesApprover ? getPlacement() : [],
+    };
+
+    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();
+
+    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 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/image");
+    });
+  };
+
+  return (
+    <form>
+      {detail !== undefined ? (
+        <div className="flex 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">Form Konten Foto</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>Judul</Label>
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        value={detail?.title}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.title?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.title.message}
+                    </p>
+                  )}
+                </div>
+                <div className="flex items-center">
+                  <div className="py-3 w-full">
+                    <Label>Kategori</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">
+                  <Label>Deskripsi</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <JoditEditor
+                        ref={editor}
+                        value={detail?.description}
+                        onChange={onChange}
+                        className="dark:text-black"
+                      />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+
+                <Label className="text-xl text-black">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={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]"
+                            src={data}
+                            alt={` ${data.id}`}
+                          />
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-4/12">
+            <Card className=" h-[800px]">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>Kreator</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>Tag</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">
+                  <Label>Target Publish</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>
+              <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
+                <MailIcon />
+                <p className="">Kotak Saran (0)</p>
+              </div>
+              <div className="px-3 py-3 border mx-3">
+                <p>Keterangan:</p>
+                <p className="text-sm text-slate-400">{detail?.statusName}</p>
+              </div>
+              {/* {detail?.isPublish == false ? (
+                <div className="p-3">
+                  <Button className="bg-blue-600">Publish</Button>
+                </div>
+              ) : (
+                ""
+              )} */}
+              {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" /> Setujui
+                    </Button>
+                    <Button
+                      onClick={() => actionApproval("3")}
+                      className="bg-orange-400 hover:bg-orange-300"
+                      type="button"
+                    >
+                      <Icon icon="fa:comment-o" className="mr-3" /> Revisi
+                    </Button>
+                    <Button
+                      onClick={() => actionApproval("4")}
+                      color="destructive"
+                      type="button"
+                    >
+                      <Icon icon="fa:times" className="mr-3" />
+                      Tolak
+                    </Button>
+                  </div>
+                )
+              ) : (
+                ""
+              )}
+
+              <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+                <DialogContent size="md">
+                  <DialogHeader>
+                    <DialogTitle>Berikan Komentar</DialogTitle>
+                  </DialogHeader>
+                  {status == "2"
+                    ? files?.map((file) => (
+                        <div
+                          key={file.id}
+                          className="flex flex-row gap-2 items-center"
+                        >
+                          <img src={file.url} className="w-[200px]" />
+                          <div className="flex flex-col gap-2 w-full">
+                            <div className="flex justify-between text-sm">
+                              {file.fileName}
+                              <a>
+                                <Icon icon="humbleicons:times" color="red" />
+                              </a>
+                            </div>
+                            <div className="flex flex-row gap-2">
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="terms" />
+                                <label
+                                  htmlFor="terms"
+                                  className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                >
+                                  Semua
+                                </label>
+                              </div>
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="terms" />
+                                <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" />
+                                <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" />
+                                <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={submitApprovalSuccesss}
+                    >
+                      Submit
+                    </Button>
+                    <Button
+                      type="button"
+                      color="destructive"
+                      onClick={() => setModalOpen(false)}
+                    >
+                      Cancel
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </Card>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}

components/form/content/teks-update-form.tsx

@@ -0,0 +1,440 @@
+"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,
+} from "@/service/content/content";
+import { detailMedia } from "@/service/curated-content/curated-content";
+import { Badge } from "@/components/ui/badge";
+import { MailIcon } from "lucide-react";
+
+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;
+  categoryId: {
+    id: number;
+    name: string;
+  };
+  creatorName: string;
+  categoryName: string;
+  thumbnailLink: string;
+  tags: string;
+};
+
+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 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 [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 [selectedTarget, setSelectedTarget] = useState("");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  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
+  //     }
+  //   }
+  // };
+
+  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 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.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
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const save = async (data: ImageSchema) => {
+    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: "6",
+      creatorName: data.creatorName,
+      tags: "siap",
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    const response = await createMedia(requestData);
+    console.log("Form Data Submitted:", requestData);
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/en/contributor/content/image");
+    });
+  };
+
+  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);
+      }
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {detail !== undefined ? (
+        <div className="flex 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">Form Konten Foto</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>Judul</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">
+                    <Label>Kategori</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">
+                  <Label>Deskripsi</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <JoditEditor
+                        ref={editor}
+                        value={detail?.description}
+                        onChange={onChange}
+                        className="dark:text-black"
+                      />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-4/12">
+            <Card className=" h-[800px]">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>Kreator</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>Tag</Label>
+                  <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">
+                  <Label>Target Publish</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>
+              <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
+                <MailIcon />
+                <p className="">Kotak Saran (0)</p>
+              </div>
+              <div className="px-3 py-3">
+                <p>Keterangan:</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">
+                  Submit
+                </Button>
+              </div>
+              <div className="mt-4">
+                <Button type="submit" color="primary" variant="outline">
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}

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

@@ -0,0 +1,764 @@
+"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 } 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";
+
+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;
+};
+
+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<Detail>();
+  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 [selectedTarget, setSelectedTarget] = useState("");
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
+  const [isMabesApprover, setIsMabesApprover] = useState(false);
+
+  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"
+    ) {
+      setIsMabesApprover(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);
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const actionApproval = (e: string) => {
+    setStatus(e);
+    setModalOpen(true);
+    setDescription("");
+  };
+
+  const submit = async () => {
+    if (
+      (description?.length > 1 && Number(status) == 3) ||
+      Number(status) == 2 ||
+      Number(status) == 4
+    ) {
+      MySwal.fire({
+        title: "Simpan Approval",
+        text: "",
+        icon: "warning",
+        showCancelButton: true,
+        cancelButtonColor: "#d33",
+        confirmButtonColor: "#3085d6",
+        confirmButtonText: "Simpan",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          save();
+        }
+      });
+    }
+  };
+
+  async function save() {
+    const data = {
+      mediaUploadId: id,
+      statusId: status,
+      message: description,
+      files: [],
+      // files: isMabesApprover ? getPlacement() : [],
+    };
+
+    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();
+
+    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 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/image");
+    });
+  };
+
+  return (
+    <form>
+      {detail !== undefined ? (
+        <div className="flex 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">Form Konten Foto</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>Judul</Label>
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size="md"
+                        type="text"
+                        value={detail?.title}
+                        onChange={field.onChange}
+                        placeholder="Enter Title"
+                      />
+                    )}
+                  />
+                  {errors.title?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.title.message}
+                    </p>
+                  )}
+                </div>
+                <div className="flex items-center">
+                  <div className="py-3 w-full">
+                    <Label>Kategori</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">
+                  <Label>Deskripsi</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <JoditEditor
+                        ref={editor}
+                        value={detail?.description}
+                        onChange={onChange}
+                        className="dark:text-black"
+                      />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+
+                <Label className="text-xl text-black">File Mediaa</Label>
+                <div className="w-full  ">
+                  <Swiper
+                    thumbs={{ swiper: thumbsSwiper }}
+                    modules={[FreeMode, Navigation, Thumbs]}
+                    navigation={false}
+                    className="w-full"
+                  >
+                    {detailVideo?.map((data: any) => (
+                      <SwiperSlide key={data.id}>
+                        <video
+                          className="object-fill h-full w-full"
+                          src={data}
+                          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"
+                    >
+                      {detailVideo?.map((data: any) => (
+                        <SwiperSlide key={data.id}>
+                          <video
+                            className="object-cover h-[60px] w-[80px]"
+                            src={data}
+                            muted
+                            title={`Video ${data.id}`} // Mengganti alt dengan title
+                          />
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-4/12">
+            <Card className=" h-[800px]">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>Kreator</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>Tag</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">
+                  <Label>Target Publish</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>
+              <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
+                <MailIcon />
+                <p className="">Kotak Saran (0)</p>
+              </div>
+              <div className="px-3 py-3 border mx-3">
+                <p>Keterangan:</p>
+                <p className="text-sm text-slate-400">{detail?.statusName}</p>
+              </div>
+              {/* {detail?.isPublish == false ? (
+                <div className="p-3">
+                  <Button className="bg-blue-600">Publish</Button>
+                </div>
+              ) : (
+                ""
+              )} */}
+              {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" /> Setujui
+                    </Button>
+                    <Button
+                      onClick={() => actionApproval("3")}
+                      className="bg-orange-400 hover:bg-orange-300"
+                      type="button"
+                    >
+                      <Icon icon="fa:comment-o" className="mr-3" /> Revisi
+                    </Button>
+                    <Button
+                      onClick={() => actionApproval("4")}
+                      color="destructive"
+                      type="button"
+                    >
+                      <Icon icon="fa:times" className="mr-3" />
+                      Tolak
+                    </Button>
+                  </div>
+                )
+              ) : (
+                ""
+              )}
+
+              <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+                <DialogContent size="md">
+                  <DialogHeader>
+                    <DialogTitle>Berikan Komentar</DialogTitle>
+                  </DialogHeader>
+                  {status == "2"
+                    ? files?.map((file) => (
+                        <div
+                          key={file.id}
+                          className="flex flex-row gap-2 items-center"
+                        >
+                          <img src={file.url} className="w-[200px]" />
+                          <div className="flex flex-col gap-2 w-full">
+                            <div className="flex justify-between text-sm">
+                              {file.fileName}
+                              <a>
+                                <Icon icon="humbleicons:times" color="red" />
+                              </a>
+                            </div>
+                            <div className="flex flex-row gap-2">
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="terms" />
+                                <label
+                                  htmlFor="terms"
+                                  className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                >
+                                  Semua
+                                </label>
+                              </div>
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="terms" />
+                                <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" />
+                                <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" />
+                                <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={submitApprovalSuccesss}
+                    >
+                      Submit
+                    </Button>
+                    <Button
+                      type="button"
+                      color="destructive"
+                      onClick={() => setModalOpen(false)}
+                    >
+                      Cancel
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </Card>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}

components/form/content/video-update-form.tsx

@@ -0,0 +1,500 @@
+"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,
+} 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";
+
+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;
+  categoryId: {
+    id: number;
+    name: string;
+  };
+  creatorName: string;
+  categoryName: string;
+  thumbnailLink: string;
+  tags: string;
+};
+
+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 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 [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 [selectedTarget, setSelectedTarget] = useState("");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  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
+  //     }
+  //   }
+  // };
+
+  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 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.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);
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  const save = async (data: ImageSchema) => {
+    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: "6",
+      creatorName: data.creatorName,
+      tags: "siap",
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    const response = await createMedia(requestData);
+    console.log("Form Data Submitted:", requestData);
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/en/contributor/content/image");
+    });
+  };
+
+  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);
+      }
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {detail !== undefined ? (
+        <div className="flex 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">Form Konten Foto</p>
+              <div className="gap-5 mb-5">
+                {/* Input Title */}
+                <div className="space-y-2 py-3">
+                  <Label>Judul</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">
+                    <Label>Kategori</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">
+                  <Label>Deskripsi</Label>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field: { onChange, value } }) => (
+                      <JoditEditor
+                        ref={editor}
+                        value={detail?.description}
+                        onChange={onChange}
+                        className="dark:text-black"
+                      />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+                <Label className="text-xl text-black">File Mediaa</Label>
+                <div className="w-full  ">
+                  <Swiper
+                    thumbs={{ swiper: thumbsSwiper }}
+                    modules={[FreeMode, Navigation, Thumbs]}
+                    navigation={false}
+                    className="w-full"
+                  >
+                    {detailVideo?.map((data: any) => (
+                      <SwiperSlide key={data.id}>
+                        <video
+                          className="object-fill h-full w-full"
+                          src={data}
+                          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"
+                    >
+                      {detailVideo?.map((data: any) => (
+                        <SwiperSlide key={data.id}>
+                          <video
+                            className="object-cover h-[60px] w-[80px]"
+                            src={data}
+                            muted
+                            title={`Video ${data.id}`} // Mengganti alt dengan title
+                          />
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <div className="w-4/12">
+            <Card className=" h-[800px]">
+              <div className="px-3 py-3">
+                <div className="space-y-2">
+                  <Label>Kreator</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>Tag</Label>
+                  <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">
+                  <Label>Target Publish</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>
+              <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
+                <MailIcon />
+                <p className="">Kotak Saran (0)</p>
+              </div>
+              <div className="px-3 py-3">
+                <p>Keterangan:</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">
+                  Submit
+                </Button>
+              </div>
+              <div className="mt-4">
+                <Button type="submit" color="primary" variant="outline">
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}