feat:detail content,task edit,publish planning

app/[locale]/(protected)/contributor/content/image/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,12 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <a href="/contributor/task/detail/[id]">
+            <Link href={`/contributor/content/image/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>
             <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/image/detail/[id]/page.tsx

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

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

@@ -118,10 +118,12 @@ const columns: ColumnDef<any>[] = [
                 View
               </DropdownMenuItem>
             </Link>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+            <Link href={`/contributor/task/update/${row.original.id}`}>
-              <SquarePen className="w-4 h-4 me-1.5" />
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              Edit
+                <SquarePen className="w-4 h-4 me-1.5" />
-            </DropdownMenuItem>
+                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/task/update/[id]/page.tsx

@@ -0,0 +1,18 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormTaskDetail from "@/components/form/task/task-detail-form";
+import FormTaskEdit from "@/components/form/task/task-edit-form";
+
+const TaskDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormTaskEdit />
+      </div>
+    </div>
+  );
+};
+
+export default TaskDetailPage;

components/form/blog/blog--detail-form.tsx

@@ -30,12 +30,13 @@ import {
   listEnableCategory,
 } from "@/service/content/content";
 import { getBlog, postBlog } from "@/service/blog/blog";
+import { Badge } from "@/components/ui/badge";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   slug: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
+  narration: z
     .string()
     .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   categoryName: z.string().min(1, { message: "Kategori diperlukan" }),
@@ -49,11 +50,12 @@ type Category = {
 type Detail = {
   id: string;
   title: string;
-  description: string;
+  narration: string;
   slug: string;
   metadata: string;
   categoryName: string;
   thumbnailLink: string;
+  tags: string;
 };
 
 const initialCategories: Category[] = [
@@ -115,17 +117,6 @@ export default function FormBlogDetail() {
     resolver: zodResolver(taskSchema),
   });
 
-  // 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));
   };
@@ -162,7 +153,7 @@ export default function FormBlogDetail() {
     const requestData = {
       ...data,
       title: data.title,
-      description: data.description,
+      description: data.narration,
       categoryId: selectedTarget,
       slug: data.slug,
       metadata: data.meta,
@@ -244,19 +235,19 @@ export default function FormBlogDetail() {
                   <Label>Deskripsi</Label>
                   <Controller
                     control={control}
-                    name="description"
+                    name="narration"
                     render={({ field: { onChange, value } }) => (
                       <JoditEditor
                         ref={editor}
-                        value={detail.description}
+                        value={detail.narration}
                         onChange={onChange}
                         className="dark:text-black"
                       />
                     )}
                   />
-                  {errors.description?.message && (
+                  {errors.narration?.message && (
                     <p className="text-red-400 text-sm">
-                      {errors.description.message}
+                      {errors.narration.message}
                     </p>
                   )}
                 </div>
@@ -372,39 +363,18 @@ export default function FormBlogDetail() {
                 />
               </div>
               <div className="px-3 py-3">
-                <Label>Tags</Label>
+                <div className="space-y-2">
-                {/* <Controller
+                  <Label>Tag</Label>
-                control={control}
+                  <div className="flex flex-wrap gap-2">
-                name="tags"
+                    {detail?.tags?.split(",").map((tag, index) => (
-                render={({ field }) => (
+                      <Badge
-                  <Input
+                        key={index}
-                    size="md"
+                        className="border rounded-md  px-2 py-2"
-                    type="text"
-                    value={field.value}
-                    onChange={field.onChange}
-                    placeholder="Enter Title"
-                    onKeyDown={handleKeyDown}
-                  />
-                )}
-              /> */}
-                <div className="text-sm text-red-500">
-                  {tags.length === 0 && "Please add at least one tag."}
-                </div>
-                <div className="flex flex-wrap gap-2 border border-gray-300 mt-2 rounded-md p-2 items-center">
-                  {tags.map((tag, index) => (
-                    <div
-                      key={index}
-                      className="flex items-center gap-1 bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-medium"
-                    >
-                      <span>{tag}</span>
-                      <button
-                        className="text-blue-600 hover:text-blue-800 focus:outline-none"
-                        onClick={() => handleRemoveTag(index)}
                       >
-                        ×
+                        {tag.trim()}
-                      </button>
+                      </Badge>
-                    </div>
+                    ))}
-                  ))}
+                  </div>
                 </div>
               </div>
             </Card>

components/form/blog/blog-form.tsx

@@ -29,16 +29,16 @@ import {
   getTagsBySubCategoryId,
   listEnableCategory,
 } from "@/service/content/content";
-import { postBlog } from "@/service/blog/blog";
+import { postBlog, uploadThumbnailBlog } from "@/service/blog/blog";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   slug: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
+  narration: z
     .string()
     .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
-  // tags: z.string().min(1, { message: "Judul diperlukan" }),
+  tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
 
 type Category = {
@@ -81,6 +81,8 @@ export default function FormBlog() {
   const [selectedCategory, setSelectedCategory] = useState<any>();
   const [tags, setTags] = useState<any[]>([]);
   const [isDraft, setIsDraft] = useState(false);
+  const [thumbnail, setThumbnail] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
 
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
@@ -115,14 +117,6 @@ export default function FormBlog() {
     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));
   };
@@ -166,11 +160,11 @@ export default function FormBlog() {
     const requestData = {
       ...data,
       title: data.title,
-      description: data.description,
+      narration: data.narration,
       categoryId: selectedTarget,
       slug: data.slug,
       metadata: data.meta,
-      // tags: data.tags,
+      tags: data.tags,
       isDraft,
     };
 
@@ -178,15 +172,25 @@ export default function FormBlog() {
     console.log("Form Data Submitted:", requestData);
     console.log("response", response);
 
-    MySwal.fire({
+    if (response.error) {
-      title: "Sukses",
+      MySwal.fire("Error", response.message, "error");
-      text: "Data berhasil disimpan.",
+      return;
-      icon: "success",
+    }
-      confirmButtonColor: "#3085d6",
+
-      confirmButtonText: "OK",
+    const blogId = response.data.data.id;
-    }).then(() => {
+    if (blogId && thumbnail) {
-      router.push("/en/contributor/blog");
+      const formMedia = new FormData();
-    });
+      formMedia.append("file", thumbnail);
+
+      const responseThumbnail = await uploadThumbnailBlog(blogId, formMedia);
+
+      if (responseThumbnail.error) {
+        MySwal.fire("Error", responseThumbnail.message, "error");
+        return;
+      }
+    }
+
+    MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
   };
 
   const onSubmit = (data: TaskSchema) => {
@@ -195,9 +199,8 @@ export default function FormBlog() {
       text: "Apakah Anda yakin ingin menyimpan data ini?",
       icon: "warning",
       showCancelButton: true,
-      cancelButtonColor: "#d33",
-      confirmButtonColor: "#3085d6",
       confirmButtonText: "Simpan",
+      cancelButtonText: "Batal",
     }).then((result) => {
       if (result.isConfirmed) {
         save(data);
@@ -205,6 +208,17 @@ export default function FormBlog() {
     });
   };
 
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setThumbnail(file);
+      console.log("Selected Thumbnail:", file);
+    }
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+    }
+  };
+
   const handlePublish = () => {
     setIsDraft(false);
   };
@@ -245,7 +259,7 @@ export default function FormBlog() {
                 <Label>Deskripsi</Label>
                 <Controller
                   control={control}
-                  name="description"
+                  name="narration"
                   render={({ field: { onChange, value } }) => (
                     <JoditEditor
                       ref={editor}
@@ -255,9 +269,9 @@ export default function FormBlog() {
                     />
                   )}
                 />
-                {errors.description?.message && (
+                {errors.narration?.message && (
                   <p className="text-red-400 text-sm">
-                    {errors.description.message}
+                    {errors.narration.message}
                   </p>
                 )}
               </div>
@@ -311,22 +325,20 @@ export default function FormBlog() {
           </div>
         </Card>
         <div className="w-4/12">
-          <Card className=" h-[500px]">
+          <Card className=" h-[550px]">
             <div className="px-3 py-3">
               <Label htmlFor="fileInput">Gambar Utama</Label>
-              <Input
+              <Input id="fileInput" type="file" onChange={handleImageChange} />
-                id="fileInput"
-                type="file"
-                // onChange={(e) => {
-                //   const file = e.target.files[0];
-                //   if (file) {
-                //     console.log("Selected File:", file);
-                //     // Tambahkan logika jika diperlukan, misalnya upload file ke server
-                //   }
-                // }}
-                className=""
-              />
             </div>
+            {preview && (
+              <div className="mt-3 px-3">
+                <img
+                  src={preview}
+                  alt="Thumbnail Preview"
+                  className="w-full h-auto rounded"
+                />
+              </div>
+            )}
             <div className="px-3 py-3">
               <label
                 htmlFor="kategori"
@@ -355,7 +367,7 @@ export default function FormBlog() {
             </div>
             <div className="px-3 py-3">
               <Label>Tags</Label>
-              {/* <Controller
+              <Controller
                 control={control}
                 name="tags"
                 render={({ field }) => (
@@ -365,11 +377,10 @@ export default function FormBlog() {
                     value={field.value}
                     onChange={field.onChange}
                     placeholder="Enter Title"
-                    onKeyDown={handleKeyDown}
                   />
                 )}
-              /> */}
+              />
-              <div className="text-sm text-red-500">
+              {/* <div className="text-sm text-red-500">
                 {tags.length === 0 && "Please add at least one tag."}
               </div>
               <div className="flex flex-wrap gap-2 border border-gray-300 mt-2 rounded-md p-2 items-center">
@@ -387,7 +398,7 @@ export default function FormBlog() {
                     </button>
                   </div>
                 ))}
-              </div>
+              </div> */}
             </div>
           </Card>
           <div className="flex flex-row justify-end gap-3">

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

@@ -0,0 +1,427 @@
+"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 { createTask } from "@/config/api";
+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;
+  category: {
+    id: number;
+    name: string;
+  };
+  categoryName: string;
+  thumbnailLink: string;
+  tags: string;
+};
+
+export default function FormImageDetail() {
+  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 = "1";
+
+  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,
+      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"
+                        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>
+              </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?.categoryName}
+                        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>
+        </div>
+      ) : (
+        ""
+      )}
+    </form>
+  );
+}

components/form/content/image-form.tsx

@@ -30,7 +30,7 @@ import {
   listEnableCategory,
 } from "@/service/content/content";
 
-const taskSchema = z.object({
+const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   description: z
     .string()
@@ -48,7 +48,7 @@ export default function FormImage() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
   const editor = useRef(null);
-  type TaskSchema = z.infer<typeof taskSchema>;
+  type ImageSchema = z.infer<typeof imageSchema>;
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
@@ -74,8 +74,8 @@ export default function FormImage() {
     handleSubmit,
     setValue,
     formState: { errors },
-  } = useForm<TaskSchema>({
+  } = useForm<ImageSchema>({
-    resolver: zodResolver(taskSchema),
+    resolver: zodResolver(imageSchema),
   });
 
   // const handleKeyDown = (e: any) => {
@@ -140,7 +140,7 @@ export default function FormImage() {
     }
   };
 
-  const save = async (data: TaskSchema) => {
+  const save = async (data: ImageSchema) => {
     const requestData = {
       ...data,
       title: data.title,
@@ -151,7 +151,7 @@ export default function FormImage() {
       subCategoryId: selectedTarget,
       uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
       statusId: "1",
-      publishedFor: 1,
+      publishedFor: "6",
       creatorName: data.creatorName,
       tags: "siap",
       isYoutube: false,
@@ -168,11 +168,11 @@ export default function FormImage() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/contributor/content/image");
+      router.push("/en/contributor/content/image");
     });
   };
 
-  const onSubmit = (data: TaskSchema) => {
+  const onSubmit = (data: ImageSchema) => {
     MySwal.fire({
       title: "Simpan Data",
       text: "Apakah Anda yakin ingin menyimpan data ini?",
@@ -220,9 +220,9 @@ export default function FormImage() {
                   <Label>Kategori</Label>
                   <Select
                     value={selectedTarget} // Ensure selectedTarget is updated correctly
-                    onValueChange={(value) => {
+                    onValueChange={(id) => {
-                      console.log("Selected Category ID:", value);
+                      console.log("Selected Category ID:", id);
-                      setSelectedTarget(value);
+                      setSelectedTarget(id);
                     }}
                   >
                     <SelectTrigger size="md">

components/form/planning/mediahub-publish.tsx

@@ -183,6 +183,22 @@ export default function PublishMediahub() {
     }
   }, [detail?.fileTypeOutput]);
 
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
   const save = async (data: TaskSchema) => {
     const fileTypeMapping = {
       all: "1",
@@ -192,6 +208,17 @@ export default function PublishMediahub() {
       text: "5",
     };
 
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+
     const selectedOutputs = Object.keys(taskOutput)
       .filter((key) => taskOutput[key as keyof typeof taskOutput])
       .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
@@ -201,7 +228,6 @@ export default function PublishMediahub() {
       id?: number;
       title: string;
       target: string;
-      taskType: string;
       assignedToLevel: any;
       assignmentPurpose: any;
       assignmentTypeId: string;
@@ -211,14 +237,14 @@ export default function PublishMediahub() {
       date: any;
       assignmentMainTypeId: number;
       planningTypeId: number;
+      time: string;
     } = {
       ...data,
       // assignmentType,
       // assignmentCategory,
       target: selectedTarget,
-      taskType: taskType,
+      assignedToLevel: handlePoldaPolresChange(),
-      assignedToLevel: checkedLevels,
+      assignmentPurpose: assignmentPurposeString,
-      assignmentPurpose: unitSelection,
       assignmentTypeId: type,
       fileTypeOutput: selectedOutputs,
       description: data.description,
@@ -226,6 +252,7 @@ export default function PublishMediahub() {
       title: data.title,
       date: startDate,
       planningTypeId: 1,
+      time: "1",
       assignmentMainTypeId: 1,
     };
 
@@ -267,18 +294,6 @@ export default function PublishMediahub() {
     });
   };
 
-  const handleCheckboxChange = (levelId: any) => {
-    setCheckedLevels((prev: any) => {
-      const updatedLevels = new Set(prev);
-      if (updatedLevels.has(levelId)) {
-        updatedLevels.delete(levelId);
-      } else {
-        updatedLevels.add(levelId);
-      }
-      return updatedLevels;
-    });
-  };
-
   const toggleExpand = (poldaId: any) => {
     setExpandedPolda((prev: any) => ({
       ...prev,

components/form/planning/medsos-publish.tsx

@@ -178,6 +178,22 @@ export default function PublishMedsos() {
     }
   }, [detail?.fileTypeOutput]);
 
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
   const save = async (data: TaskSchema) => {
     const fileTypeMapping = {
       all: "1",
@@ -187,6 +203,17 @@ export default function PublishMedsos() {
       text: "5",
     };
 
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+
     const selectedOutputs = Object.keys(taskOutput)
       .filter((key) => taskOutput[key as keyof typeof taskOutput])
       .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
@@ -196,7 +223,6 @@ export default function PublishMedsos() {
       id?: number;
       title: string;
       target: string;
-      taskType: string;
       assignedToLevel: any;
       assignmentPurpose: any;
       assignmentTypeId: string;
@@ -211,9 +237,8 @@ export default function PublishMedsos() {
       // assignmentType,
       // assignmentCategory,
       target: selectedTarget,
-      taskType: taskType,
+      assignedToLevel: handlePoldaPolresChange(),
-      assignedToLevel: checkedLevels,
+      assignmentPurpose: assignmentPurposeString,
-      assignmentPurpose: unitSelection,
       assignmentTypeId: type,
       fileTypeOutput: selectedOutputs,
       description: data.description,
@@ -262,18 +287,6 @@ export default function PublishMedsos() {
     });
   };
 
-  const handleCheckboxChange = (levelId: any) => {
-    setCheckedLevels((prev: any) => {
-      const updatedLevels = new Set(prev);
-      if (updatedLevels.has(levelId)) {
-        updatedLevels.delete(levelId);
-      } else {
-        updatedLevels.add(levelId);
-      }
-      return updatedLevels;
-    });
-  };
-
   const toggleExpand = (poldaId: any) => {
     setExpandedPolda((prev: any) => ({
       ...prev,
@@ -298,7 +311,7 @@ export default function PublishMedsos() {
                     <Input
                       size="md"
                       type="text"
-                      value={detail?.title}
+                      defaultValue={detail?.title}
                       onChange={field.onChange}
                       placeholder="Enter Title"
                     />

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

@@ -35,6 +35,7 @@ import {
 import { ChevronDown, ChevronUp } from "lucide-react";
 
 const taskSchema = z.object({
+  uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
   title: z.string().min(1, { message: "Judul diperlukan" }),
   naration: z.string().min(2, {
     message: "Narasi Penugasan harus lebih dari 2 karakter.",
@@ -43,8 +44,10 @@ const taskSchema = z.object({
 
 export type taskDetail = {
   id: number;
+  uniqueCode: string;
   title: string;
   fileTypeOutput: string;
+  assignedToRole: string;
   assignedToTopLevel: string;
   assignmentType: {
     id: number;
@@ -281,8 +284,24 @@ export default function FormTaskDetail() {
         {detail !== undefined ? (
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="gap-5 mb-5">
-              {/* Input Title */}
               <div className="space-y-2">
+                <Label>Kode Unik</Label>
+                <Controller
+                  control={control}
+                  name="uniqueCode"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={detail?.uniqueCode}
+                      onChange={field.onChange}
+                      placeholder="Enter uniqueCode"
+                      readOnly
+                    />
+                  )}
+                />
+              </div>
+              <div className="space-y-2 mt-6">
                 <Label>Judul</Label>
                 <Controller
                   control={control}
@@ -304,14 +323,17 @@ export default function FormTaskDetail() {
               <div className="flex flex-row items-center">
                 <div className="mt-6">
                   <Label>Tujuan Pemilihan Tugas</Label>
-                  <Select onValueChange={setSelectedTarget}>
+                  <Select
+                    onValueChange={setSelectedTarget}
+                    value={detail.assignedToRole}
+                  >
                     <SelectTrigger size="md">
                       <SelectValue placeholder="Pilih" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="all">Semua Pengguna</SelectItem>
+                      <SelectItem value="3,4">Semua Pengguna</SelectItem>
-                      <SelectItem value="contributor">Kontributor</SelectItem>
+                      <SelectItem value="4">Kontributor</SelectItem>
-                      <SelectItem value="approver">Approver</SelectItem>
+                      <SelectItem value="3">Approver</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>

components/form/task/task-edit-form.tsx

@@ -0,0 +1,596 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import JoditEditor from "jodit-react";
+import {
+  createTask,
+  getTask,
+  getUserLevelForAssignments,
+} from "@/service/task";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+const taskSchema = z.object({
+  // uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  naration: z.string().min(2, {
+    message: "Narasi Penugasan harus lebih dari 2 karakter.",
+  }),
+});
+
+export type taskDetail = {
+  id: number;
+  uniqueCode: string;
+  title: string;
+  fileTypeOutput: string;
+  assignedToRole: string;
+  assignedToTopLevel: string;
+  assignmentType: {
+    id: number;
+    name: string;
+  };
+  assignmentMainType: {
+    id: number;
+    name: string;
+  };
+  taskType: string;
+  broadcastType: string;
+  narration: string;
+  is_active: string;
+};
+
+export default function FormTaskEdit() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const { id } = useParams() as { id: string };
+  console.log(id);
+
+  // State for various form fields
+  const [taskOutput, setTaskOutput] = useState({
+    all: false,
+    video: false,
+    audio: false,
+    image: false,
+    text: false,
+  });
+
+  // const [assignmentType, setAssignmentType] = useState("mediahub");
+  // const [assignmentCategory, setAssignmentCategory] = useState("publication");
+  const [mainType, setMainType] = useState<string>("1");
+  const [taskType, setTaskType] = useState<string>("atensi-khusus");
+  const [broadcastType, setBroadcastType] = useState<string>(""); // untuk Tipe Penugasan
+  const [type, setType] = useState<string>("1");
+  const [selectedTarget, setSelectedTarget] = useState("3,4");
+  const [detail, setDetail] = useState<taskDetail>();
+  const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]); // Data Polda dan Polres
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+  });
+
+  // const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const selectedValue = Number(event.target.value);
+  //   setMainType(selectedValue);
+
+  //   setPlatformTypeVisible(selectedValue === 2);
+  // };
+
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response.data.data.list);
+        const initialExpandedState = response.data.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await getTask(id);
+        const details = response.data?.data;
+
+        setDetail(details);
+
+        if (details?.assignedToLevel) {
+          const levels = new Set(
+            details.assignedToLevel.split(",").map(Number)
+          );
+          setCheckedLevels(levels);
+        }
+
+        // Add more state setting here based on other fields like broadcastType, taskOutput, etc.
+      }
+    }
+    initState();
+  }, [id, refresh]);
+
+  useEffect(() => {
+    if (detail?.broadcastType) {
+      setBroadcastType(detail.broadcastType); // Mengatur nilai broadcastType dari API
+    }
+  }, [detail?.broadcastType]);
+
+  useEffect(() => {
+    if (detail?.fileTypeOutput) {
+      const outputSet = new Set(detail.fileTypeOutput.split(",").map(Number)); // Membagi string ke dalam array dan mengonversi ke nomor
+      setTaskOutput({
+        all: outputSet.has(0),
+        video: outputSet.has(2),
+        audio: outputSet.has(4),
+        image: outputSet.has(1),
+        text: outputSet.has(3),
+      });
+    }
+  }, [detail?.fileTypeOutput]);
+
+  useEffect(() => {
+    if (detail?.assignedToTopLevel) {
+      const outputSet = new Set(
+        detail.assignedToTopLevel.split(",").map(Number)
+      );
+      setUnitSelection({
+        allUnit: outputSet.has(0),
+        mabes: outputSet.has(1),
+        polda: outputSet.has(2),
+        polres: outputSet.has(3),
+      });
+    }
+  }, [detail?.fileTypeOutput]);
+
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
+  const save = async (data: TaskSchema) => {
+    const fileTypeMapping = {
+      all: "1",
+      video: "2",
+      audio: "3",
+      image: "4",
+      text: "5",
+    };
+
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+
+    const selectedOutputs = Object.keys(taskOutput)
+      .filter((key) => taskOutput[key as keyof typeof taskOutput]) // Ambil hanya yang `true`
+      .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping]) // Konversi ke nilai string
+      .join(",");
+
+    const requestData: {
+      id?: any;
+      title: string;
+      assignedToLevel: any;
+      assignmentPurpose: any;
+      assignmentTypeId: string;
+      fileTypeOutput: string;
+      narration: string;
+      platformType: string | null;
+      assignmentMainTypeId: any;
+      taskType: string;
+      assignedToRole: string;
+      broadcastType: string;
+    } = {
+      ...data,
+      // assignmentType,
+      // assignmentCategory,
+      id: detail?.id || null,
+      assignedToLevel: handlePoldaPolresChange(),
+      assignmentPurpose: assignmentPurposeString,
+      assignedToRole: selectedTarget,
+      taskType: taskType,
+      broadcastType: broadcastType,
+      assignmentMainTypeId: mainType,
+      assignmentTypeId: type,
+      fileTypeOutput: selectedOutputs,
+      narration: data.naration,
+      platformType: "",
+      title: data.title,
+    };
+
+    const response = await createTask(requestData);
+
+    console.log("Form Data Submitted:", requestData);
+    console.log("response", response);
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/en/contributor/task");
+    });
+  };
+
+  const onSubmit = (data: TaskSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
+  return (
+    <Card>
+      <div className="px-6 py-6">
+        <p className="text-lg font-semibold mb-3">Form Penugasan</p>
+        {detail !== undefined ? (
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="gap-5 mb-5">
+              {/* <div className="space-y-2">
+                <Label>Kode Unik</Label>
+                <Controller
+                  control={control}
+                  name="uniqueCode"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={detail?.uniqueCode}
+                      onChange={field.onChange}
+                      placeholder="Enter uniqueCode"
+                      readOnly
+                    />
+                  )}
+                />
+              </div> */}
+              <div className="space-y-2 mt-6">
+                <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 flex-row items-center">
+                <div className="mt-6">
+                  <Label>Tujuan Pemilihan Tugas</Label>
+                  <Select
+                    onValueChange={setSelectedTarget}
+                    value={detail.assignedToRole}
+                  >
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="3,4">Semua Pengguna</SelectItem>
+                      <SelectItem value="4">Kontributor</SelectItem>
+                      <SelectItem value="3">Approver</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex flex-wrap gap-3 mt-6 pt-5 ml-3">
+                  {Object.keys(unitSelection).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={
+                          unitSelection[key as keyof typeof unitSelection]
+                        }
+                        onCheckedChange={(value) =>
+                          setUnitSelection({ ...unitSelection, [key]: value })
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+                <div className="mt-6 pt-5 pl-3">
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="soft" size="sm" color="primary">
+                        [Kustom]
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                      <DialogHeader>
+                        <DialogTitle>
+                          Daftar Wilayah Polda dan Polres
+                        </DialogTitle>
+                      </DialogHeader>
+                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                        {listDest.map((polda: any) => (
+                          <div key={polda.id} className="border p-2">
+                            <Label className="flex items-center">
+                              <Checkbox
+                                checked={checkedLevels.has(polda.id)}
+                                onCheckedChange={() =>
+                                  handleCheckboxChange(polda.id)
+                                }
+                                className="mr-3"
+                              />
+                              {polda.name}
+                              <button
+                                onClick={() => toggleExpand(polda.id)}
+                                className="ml-2 focus:outline-none"
+                              >
+                                {expandedPolda[polda.id] ? (
+                                  <ChevronUp size={16} />
+                                ) : (
+                                  <ChevronDown size={16} />
+                                )}
+                              </button>
+                            </Label>
+                            {expandedPolda[polda.id] && (
+                              <div className="ml-6 mt-2">
+                                <Label className="block">
+                                  <Checkbox
+                                    checked={polda?.subDestination?.every(
+                                      (polres: any) =>
+                                        checkedLevels.has(polres.id)
+                                    )}
+                                    onCheckedChange={(isChecked) => {
+                                      const updatedLevels = new Set(
+                                        checkedLevels
+                                      );
+                                      polda?.subDestination?.forEach(
+                                        (polres: any) => {
+                                          if (isChecked) {
+                                            updatedLevels.add(polres.id);
+                                          } else {
+                                            updatedLevels.delete(polres.id);
+                                          }
+                                        }
+                                      );
+                                      setCheckedLevels(updatedLevels);
+                                    }}
+                                    className="mr-2"
+                                  />
+                                  Pilih Semua Polres
+                                </Label>
+                                {polda?.subDestination?.map((polres: any) => (
+                                  <Label key={polres.id} className="block mt-1">
+                                    <Checkbox
+                                      checked={checkedLevels.has(polres.id)}
+                                      onCheckedChange={() =>
+                                        handleCheckboxChange(polres.id)
+                                      }
+                                      className="mr-2"
+                                    />
+                                    {polres.name}
+                                  </Label>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                </div>
+              </div>
+              <div className="mt-6">
+                <Label>Tipe Penugasan</Label>
+                <RadioGroup
+                  value={detail.assignmentMainType.id.toString()} // State yang dipetakan ke value RadioGroup
+                  onValueChange={(value) => setMainType(value)}
+                  // value={String(mainType)}
+                  // onValueChange={(value) => setMainType(Number(value))}
+                  className="flex flex-wrap gap-3"
+                >
+                  <RadioGroupItem value="1" id="mediahub" />
+                  <Label htmlFor="mediahub">Mediahub</Label>
+                  <RadioGroupItem value="2" id="medsos-mediahub" />
+                  <Label htmlFor="medsos-mediahub">Medsos Mediahub</Label>
+                </RadioGroup>
+              </div>
+              <div className="mt-6">
+                <Label>Jenis Tugas </Label>
+                <RadioGroup
+                  value={detail.taskType.toString()}
+                  onValueChange={(value) => setTaskType(String(value))}
+                  className="flex flex-wrap gap-3"
+                >
+                  <RadioGroupItem value="atensi-khusus" id="khusus" />
+                  <Label htmlFor="atensi-khusus">Atensi Khusus</Label>
+                  <RadioGroupItem value="tugas-harian" id="harian" />
+                  <Label htmlFor="tugas-harian">Tugas Harian</Label>
+                </RadioGroup>
+              </div>
+              {/* RadioGroup Assignment Category */}
+              <div className="mt-6">
+                <Label>Jenis Penugasan</Label>
+                <RadioGroup
+                  value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
+                  onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
+                  className="flex flex-wrap gap-3"
+                >
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="1" id="publication" />
+                    <Label htmlFor="publication">Publikasi</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="2" id="amplification" />
+                    <Label htmlFor="amplification">Amplifikasi</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="3" id="contra" />
+                    <Label htmlFor="contra">Kontra</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+              <div className="mt-6">
+                <Label>Output Tugas</Label>
+                <div className="flex flex-wrap gap-3">
+                  {Object.keys(taskOutput).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={taskOutput[key as keyof typeof taskOutput]}
+                        onCheckedChange={(value) =>
+                          setTaskOutput({ ...taskOutput, [key]: value })
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="mt-6">
+                <Label>Broadcast </Label>
+                <RadioGroup
+                  value={broadcastType} // Nilai terpilih diambil dari state broadcastType
+                  onValueChange={(value) => setBroadcastType(value)} // Mengatur nilai saat radio berubah
+                  className="flex flex-wrap gap-3"
+                >
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="all" id="all" />
+                    <Label htmlFor="all">Semua</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="email" id="email" />
+                    <Label htmlFor="email">Email Blast</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="whatsapp" id="whatsapp" />
+                    <Label htmlFor="whatsapp">WhatsApp Blast</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+              <div className="mt-6">
+                <Label>Narasi Penugasan</Label>
+                <Controller
+                  control={control}
+                  name="naration"
+                  render={({ field: { onChange, value } }) => (
+                    <JoditEditor
+                      ref={editor}
+                      value={detail?.narration}
+                      onChange={onChange}
+                      className="dark:text-black"
+                    />
+                  )}
+                />
+                {errors.naration?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.naration.message}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                Submit
+              </Button>
+            </div>
+          </form>
+        ) : (
+          ""
+        )}
+      </div>
+    </Card>
+  );
+}

components/form/task/task-form.tsx

@@ -20,7 +20,19 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import JoditEditor from "jodit-react";
-import { createTask, getTask } from "@/service/task";
+import {
+  createTask,
+  getTask,
+  getUserLevelForAssignments,
+} from "@/service/task";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ChevronDown, ChevronUp } from "lucide-react";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -34,6 +46,7 @@ export type taskDetail = {
   title: string;
   fileTypeOutput: string;
   assignedToTopLevel: string;
+  assignedToLevel: string;
   assignmentType: {
     id: number;
     name: string;
@@ -71,9 +84,13 @@ export default function FormTask() {
   const [taskType, setTaskType] = useState<string>("atensi-khusus");
   const [broadcastType, setBroadcastType] = useState<string>(""); // untuk Tipe Penugasan
   const [type, setType] = useState<string>("1");
-  const [selectedTarget, setSelectedTarget] = useState("all");
+  const [selectedTarget, setSelectedTarget] = useState("3,4");
   const [detail, setDetail] = useState<taskDetail>();
   const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]); // Data Polda dan Polres
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -96,7 +113,47 @@ export default function FormTask() {
   //   setMainType(selectedValue);
 
   //   setPlatformTypeVisible(selectedValue === 2);
+
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response.data.data.list);
+        const initialExpandedState = response.data.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
   // };
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
 
   const save = async (data: TaskSchema) => {
     const fileTypeMapping = {
@@ -107,25 +164,47 @@ export default function FormTask() {
       text: "5",
     };
 
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+
     const selectedOutputs = Object.keys(taskOutput)
       .filter((key) => taskOutput[key as keyof typeof taskOutput]) // Ambil hanya yang `true`
       .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping]) // Konversi ke nilai string
       .join(",");
 
-    const requestData = {
+    const requestData: {
+      id?: number;
+      title: string;
+      assignedToLevel: any;
+      assignmentPurpose: any;
+      assignmentTypeId: string;
+      fileTypeOutput: string;
+      narration: string;
+      platformType: string | null;
+      assignmentMainTypeId: any;
+      taskType: string;
+      assignedToRole: string;
+      broadcastType: string;
+    } = {
       ...data,
       // assignmentType,
       // assignmentCategory,
-      target: selectedTarget,
+      assignedToLevel: handlePoldaPolresChange(),
-      unitSelection,
+      assignmentPurpose: assignmentPurposeString,
-      assignedToRole: "3",
+      assignedToRole: selectedTarget,
       taskType: taskType,
       broadcastType: broadcastType,
       assignmentMainTypeId: mainType,
-      assignmentPurpose: "1",
       assignmentTypeId: type,
       fileTypeOutput: selectedOutputs,
-      id: null,
       narration: data.naration,
       platformType: "",
       title: data.title,
@@ -163,6 +242,13 @@ export default function FormTask() {
     });
   };
 
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
   return (
     <Card>
       <div className="px-6 py-6">
@@ -198,9 +284,9 @@ export default function FormTask() {
                     <SelectValue placeholder="Pilih" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="all">Semua Pengguna</SelectItem>
+                    <SelectItem value="3,4">Semua Pengguna</SelectItem>
-                    <SelectItem value="contributor">Kontributor</SelectItem>
+                    <SelectItem value="4">Kontributor</SelectItem>
-                    <SelectItem value="approver">Approver</SelectItem>
+                    <SelectItem value="3">Approver</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
@@ -220,6 +306,82 @@ export default function FormTask() {
                   </div>
                 ))}
               </div>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button variant="soft" size="sm" color="primary">
+                    [Kustom]
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                  <DialogHeader>
+                    <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
+                  </DialogHeader>
+                  <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                    {listDest.map((polda: any) => (
+                      <div key={polda.id} className="border p-2">
+                        <Label className="flex items-center">
+                          <Checkbox
+                            checked={checkedLevels.has(polda.id)}
+                            onCheckedChange={() =>
+                              handleCheckboxChange(polda.id)
+                            }
+                            className="mr-3"
+                          />
+                          {polda.name}
+                          <button
+                            onClick={() => toggleExpand(polda.id)}
+                            className="ml-2 focus:outline-none"
+                          >
+                            {expandedPolda[polda.id] ? (
+                              <ChevronUp size={16} />
+                            ) : (
+                              <ChevronDown size={16} />
+                            )}
+                          </button>
+                        </Label>
+                        {expandedPolda[polda.id] && (
+                          <div className="ml-6 mt-2">
+                            <Label className="block">
+                              <Checkbox
+                                checked={polda?.subDestination?.every(
+                                  (polres: any) => checkedLevels.has(polres.id)
+                                )}
+                                onCheckedChange={(isChecked) => {
+                                  const updatedLevels = new Set(checkedLevels);
+                                  polda?.subDestination?.forEach(
+                                    (polres: any) => {
+                                      if (isChecked) {
+                                        updatedLevels.add(polres.id);
+                                      } else {
+                                        updatedLevels.delete(polres.id);
+                                      }
+                                    }
+                                  );
+                                  setCheckedLevels(updatedLevels);
+                                }}
+                                className="mr-2"
+                              />
+                              Pilih Semua Polres
+                            </Label>
+                            {polda?.subDestination?.map((polres: any) => (
+                              <Label key={polres.id} className="block mt-1">
+                                <Checkbox
+                                  checked={checkedLevels.has(polres.id)}
+                                  onCheckedChange={() =>
+                                    handleCheckboxChange(polres.id)
+                                  }
+                                  className="mr-2"
+                                />
+                                {polres.name}
+                              </Label>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </DialogContent>
+              </Dialog>
             </div>
             <div className="mt-5">
               <Label>Tipe Penugasan</Label>

package-lock.json

@@ -153,6 +153,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -1218,6 +1219,7 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -1234,6 +1236,7 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -1245,6 +1248,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -1775,6 +1779,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -1787,6 +1792,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1795,6 +1801,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -1824,6 +1831,7 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
@@ -3733,7 +3741,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -4027,6 +4035,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4040,6 +4049,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -4053,12 +4063,14 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -4103,7 +4115,8 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -4394,12 +4407,14 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -4421,6 +4436,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -4480,6 +4496,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -4579,6 +4596,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -4602,6 +4620,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -4786,6 +4805,7 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -4809,6 +4829,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -5484,7 +5505,8 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
     },
     "node_modules/diff": {
       "version": "5.2.0",
@@ -5509,7 +5531,8 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -5610,7 +5633,8 @@
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
     },
     "node_modules/elkjs": {
       "version": "0.9.3",
@@ -5658,7 +5682,8 @@
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
     },
     "node_modules/enhanced-resolve": {
       "version": "5.17.1",
@@ -6498,6 +6523,7 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -6513,6 +6539,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -6536,6 +6563,7 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -6579,6 +6607,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -6669,6 +6698,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
       "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -6737,6 +6767,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -6892,6 +6923,7 @@
       "version": "10.3.10",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
       "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.5",
@@ -6913,6 +6945,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -6924,6 +6957,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -6932,6 +6966,7 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -7899,6 +7934,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -8030,6 +8066,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8053,6 +8090,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8076,6 +8114,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -8120,6 +8159,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -8368,6 +8408,7 @@
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
       "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -8385,6 +8426,7 @@
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -8648,6 +8690,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
       "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -8756,7 +8799,8 @@
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true
     },
     "node_modules/lucide-react": {
       "version": "0.390.0",
@@ -9470,6 +9514,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -10257,6 +10302,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -10317,6 +10363,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -10365,6 +10412,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -10667,6 +10715,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10721,6 +10770,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -11019,6 +11069,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -11032,6 +11083,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -11070,6 +11122,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -11081,6 +11134,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11089,6 +11143,7 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -11106,6 +11161,7 @@
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
       "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11133,6 +11189,7 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -11149,6 +11206,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -11167,6 +11225,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11201,6 +11260,7 @@
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz",
       "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==",
+      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -11212,6 +11272,7 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11236,6 +11297,7 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -11247,7 +11309,8 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
     },
     "node_modules/preact": {
       "version": "10.12.1",
@@ -11357,6 +11420,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -11907,6 +11971,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -11915,6 +11980,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -12337,6 +12403,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -12409,6 +12476,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -12600,6 +12668,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -12611,6 +12680,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -12647,6 +12717,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -12776,6 +12847,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -12793,6 +12865,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -12805,12 +12878,14 @@
     "node_modules/string-width-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
     },
     "node_modules/string-width/node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -12822,6 +12897,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -12957,6 +13033,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -12969,6 +13046,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -13073,6 +13151,7 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -13094,6 +13173,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -13267,6 +13347,7 @@
       "version": "3.4.16",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",
       "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==",
+      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -13326,6 +13407,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -13334,6 +13416,7 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -13446,6 +13529,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -13508,7 +13592,8 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -13986,7 +14071,8 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
     },
     "node_modules/uuid": {
       "version": "9.0.1",
@@ -14225,6 +14311,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -14331,6 +14418,7 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -14348,6 +14436,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -14363,12 +14452,14 @@
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -14382,6 +14473,7 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -14393,6 +14485,7 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -14404,6 +14497,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },

service/blog/blog.ts

@@ -21,3 +21,8 @@ export async function getBlog(id: any) {
   const url = `blog/${id}`;
   return getAPIInterceptor(url);
 }
+
+export async function uploadThumbnailBlog(id: any, data: any) {
+  const url = `blog/${id}/thumbnail`;
+  return postAPIInterceptor(url, data);
+}

service/content/content.ts

@@ -152,6 +152,6 @@ export async function getTags() {
 }
 
 export async function createMedia(data: any) {
-  const pathUrl = "media";
+  const url = "media";
-  return postAPIInterceptor(pathUrl, data);
+  return postAPIInterceptor(url, data);
 }