feat:update landing,kurator

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { ColumnDef } from "@tanstack/react-table";
 
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { Eye, MoreVertical, SquarePen, Trash2, Upload } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -105,6 +105,7 @@ const useTableColumns = () => {
       cell: ({ row }) => {
         const router = useRouter();
         const MySwal = withReactContent(Swal);
+        const roleId = Number(getCookiesDecrypt("urie")) || 0;
 
         async function deleteProcess(id: any) {
           loading();
@@ -170,6 +171,14 @@ const useTableColumns = () => {
                   Edit
                 </DropdownMenuItem>
               </Link>
+              {roleId == 12 && (
+                <Link href={`/contributor/task-ta/upload-task`}>
+                  <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                    <Upload className="w-4 h-4 me-1.5" />
+                    Upload Tugas
+                  </DropdownMenuItem>
+                </Link>
+              )}
               <DropdownMenuItem
                 onClick={() => TaskDelete(row.original.id)}
                 className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"

app/[locale]/(protected)/contributor/task-ta/page.tsx

@@ -5,7 +5,11 @@ import { Button } from "@/components/ui/button";
 import { UploadIcon } from "lucide-react";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 import { Link } from "@/components/navigation";
-import { checkAuthorization, checkLoginSession } from "@/lib/utils";
+import {
+  checkAuthorization,
+  checkLoginSession,
+  getCookiesDecrypt,
+} from "@/lib/utils";
 import React, { useEffect } from "react";
 import { useTranslations } from "next-intl";
 import TaskTaTable from "./components/task-ta-table";
@@ -20,6 +24,7 @@ const TaskTaPage = () => {
 
     initState();
   }, []);
+  const roleId = Number(getCookiesDecrypt("urie")) || 0;
 
   return (
     <div>
@@ -33,12 +38,14 @@ const TaskTaPage = () => {
                   {t("tabel")} {t("task-ta")}
                 </div>
                 <div className="flex-none">
-                  <Link href={"/contributor/task-ta/create"}>
+                  {roleId !== 12 && (
-                    <Button color="primary" className="text-white">
+                    <Link href={"/contributor/task-ta/create"}>
-                      <UploadIcon size={18} className="mr-2" />
+                      <Button color="primary" className="text-white">
-                      {t("create-task")}
+                        <UploadIcon size={18} className="mr-2" />
-                    </Button>
+                        {t("create-task")}
-                  </Link>
+                      </Button>
+                    </Link>
+                  )}
                 </div>
               </div>
             </CardTitle>

app/[locale]/(protected)/contributor/task-ta/upload-task/page.tsx

@@ -0,0 +1,17 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTaskTa from "@/components/form/task-ta/task-ta-form";
+import FormTaskTaNew from "@/components/form/task-ta/task-ta-new";
+
+const TaskTaUploadPage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormTaskTaNew />
+      </div>
+    </div>
+  );
+};
+
+export default TaskTaUploadPage;

app/[locale]/(public)/image/detail/[slug]/page.tsx

@@ -582,7 +582,10 @@ const DetailInfo = () => {
                   {formatDateToIndonesian(
                     new Date(detailDataImage?.updatedAt)
                   )}{" "}
-                  {"WIB"}
+                  {detailDataImage?.timezone
+                    ? detailDataImage?.timezone
+                    : "WIB"}
+                   
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   &nbsp;|&nbsp;

app/[locale]/(public)/image/filter/page.tsx

@@ -698,11 +698,12 @@ const FilterPage = () => {
                                   }}
                                 />
                               </div>
-                              <div className="flex flex-row items-center gap-2 text-[10px] mx-2 mt-2">
+                              <div className="flex flex-row items-center gap-2 text-[10px] mx-1 mt-2">
                                 {formatDateToIndonesian(
                                   new Date(image?.createdAt)
                                 )}{" "}
-                                {image?.timezone ? image?.timezone : "WIB"}|{" "}
+                                {image?.timezone ? image?.timezone : "WIB"}
+                                &nbsp; |
                                 <Icon
                                   icon="formkit:eye"
                                   width="15"

components/form/blog/blog--update-form.tsx

@@ -202,7 +202,7 @@ export default function FormBlogUpdate() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/blog");
+      router.push("/in/contributor/blog");
     });
   };
 

components/form/blog/blog-form.tsx

@@ -214,7 +214,7 @@ export default function FormBlog() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/blog");
+      router.push("/in/contributor/blog");
     });
   };
 

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

@@ -344,7 +344,7 @@ export default function FormAudioUpdate() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/content/audio");
+      router.push("/in/contributor/content/audio");
     });
   };
 

components/form/content/audio-update-seo.tsx

@@ -401,7 +401,7 @@ export default function FormAudioSeo() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/content/image");
+      router.push("/in/contributor/content/image");
     });
   };
 

components/form/content/image-form.tsx

@@ -631,7 +631,7 @@ export default function FormImage() {
       setIsStartUpload(false);
       // hideProgress();
       Cookies.remove("idCreate");
-      successSubmit("/in/contributor/content/image/");
+      successSubmit("in/contributor/content/image/");
     }
   }
 

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

@@ -373,7 +373,7 @@ export default function FormImageUpdate() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/content/image");
+      router.push("/in/contributor/content/image");
     });
   };
 

components/form/content/image-update-seo.tsx

@@ -401,7 +401,7 @@ export default function FormImageSeo() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/content/image");
+      router.push("/in/contributor/content/image");
     });
   };
 

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

@@ -337,7 +337,7 @@ export default function FormTeksUpdate() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/content/teks");
+      router.push("/in/contributor/content/teks");
     });
   };
 

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

@@ -401,7 +401,7 @@ export default function FormTeksSeo() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/content/image");
+      router.push("/in/contributor/content/image");
     });
   };
 

components/form/planning/mediahub-publish.tsx

@@ -284,7 +284,7 @@ export default function PublishMediahub() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/planning/mediahub");
+      router.push("/in/contributor/planning/mediahub");
     });
   };
 

components/form/planning/medsos-publish.tsx

@@ -277,7 +277,7 @@ export default function PublishMedsos() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/planning/medsos-mediahub");
+      router.push("/in/contributor/planning/medsos-mediahub");
     });
   };
 

components/form/task-ta/task-ta-form.tsx

@@ -548,7 +548,7 @@ export default function FormTaskTa() {
       isAudioUploadFinish &&
       isTextUploadFinish
     ) {
-      successSubmit("/in/contributor/task");
+      successSubmit("/in/contributor/task-ta");
     }
   }
 

components/form/task-ta/task-ta-new.tsx

@@ -0,0 +1,945 @@
+"use client";
+import React, {
+  ChangeEvent,
+  useEffect,
+  useRef,
+  Fragment,
+  useState,
+} from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Upload } from "tus-js-client";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { redirect, useRouter } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import JoditEditor from "jodit-react";
+import { register } from "module";
+import { Switch } from "@/components/ui/switch";
+import Cookies from "js-cookie";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/service/content/content";
+import { uploadThumbnailBlog } from "@/service/blog/blog";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/service/content/ai";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react";
+import { CloudUpload } from "lucide-react";
+import Image from "next/image";
+import { error, loading } from "@/config/swal";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import { data } from "jquery";
+import { options } from "@fullcalendar/core/preact.js";
+import dynamic from "next/dynamic";
+import { getCsrfToken } from "@/service/auth";
+import { Link } from "@/i18n/routing";
+import { request } from "http";
+import { useTranslations } from "next-intl";
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+type Option = {
+  id: string;
+  label: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormTaskTaNew() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type ImageSchema = z.infer<typeof imageSchema>;
+
+  const t = useTranslations("Form");
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const taskId = Cookies.get("taskId");
+  const scheduleId = Cookies.get("scheduleId");
+  const scheduleType = Cookies.get("scheduleType");
+  const roleId = getCookiesDecrypt("urie");
+
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<any>();
+  const [tags, setTags] = useState<any[]>([]);
+  const [thumbnail, setThumbnail] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [selectedLanguage, setSelectedLanguage] = useState("");
+
+  const [selectedSEO, setSelectedSEO] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
+  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
+  const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
+
+  const [articleIds, setArticleIds] = useState<string[]>([]);
+  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
+  const [articleBody, setArticleBody] = useState<string>("");
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
+    null
+  );
+  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
+  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
+  const [selectedSize, setSelectedSize] = useState("");
+  const [detailData, setDetailData] = useState<any>(null);
+  const [articleImages, setArticleImages] = useState<string[]>([]);
+  const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [content, setContent] = useState("");
+
+  const [selectedTarget, setSelectedTarget] = useState("");
+  const [unitSelection, setUnitSelection] = useState({
+    allUnit: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+  });
+
+  let fileTypeId = "1";
+  let progressInfo: any = [];
+  let counterUpdateProgress = 0;
+  const [progressList, setProgressList] = useState<any>([]);
+  let uploadPersen = 0;
+  const [isStartUpload, setIsStartUpload] = useState(false);
+  const [counterProgress, setCounterProgress] = useState(0);
+
+  const [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [filesTemp, setFilesTemp] = useState<File[]>([]);
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+
+  const options: Option[] = [
+    { id: "all", label: "SEMUA" },
+    { id: "5", label: "UMUM" },
+    { id: "6", label: "JOURNALIS" },
+    { id: "7", label: "POLRI" },
+    { id: "8", label: "KSP" },
+  ];
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+  });
+
+  const imageSchema = z.object({
+    title: z.string().min(1, { message: "Judul diperlukan" }),
+    description: z
+      .string()
+      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
+      .or(
+        z.literal(articleBody || "").refine((val) => val.length > 0, {
+          message: "Deskripsi diperlukan.",
+        })
+      ),
+    creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+    // tags: z.string().min(1, { message: "Judul diperlukan" }),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useForm<ImageSchema>({
+    resolver: zodResolver(imageSchema),
+  });
+
+  const doGenerateMainKeyword = async () => {
+    console.log(selectedMainKeyword);
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const titleData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for title with data:", titleData);
+        const titleRes = await getGenerateTitle(titleData);
+        setTitle(titleRes?.data?.data || "");
+        console.log("Generated title:", titleRes?.data?.data);
+
+        const keywordsData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for keywords with data:", keywordsData);
+        const keywordsRes = await getGenerateKeywords(keywordsData);
+        setSelectedSEO(keywordsRes?.data?.data || []);
+        console.log("Generated keywords:", keywordsRes?.data?.data);
+      } catch (error) {
+        console.error("Error during generation process:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const doGenerateTitle = async () => {
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const titleData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for title with data:", titleData);
+        const titleRes = await getGenerateTitle(titleData);
+        setTitle(titleRes?.data?.data || "");
+        console.log("Generated title:", titleRes?.data?.data);
+      } catch (error) {
+        console.error("Error generating title:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const doGenerateKeyword = async () => {
+    if (selectedMainKeyword?.length > 1) {
+      try {
+        setIsLoading(true);
+        const keywordsData = {
+          keyword: selectedMainKeyword,
+          style: selectedWritingStyle,
+          website: "0",
+          connectToWeb: true,
+          lang: selectedLanguage,
+          pointOfView: "None",
+          clientId: "",
+        };
+        console.log("Sending request for keywords with data:", keywordsData);
+        const keywordsRes = await getGenerateKeywords(keywordsData);
+        setSelectedSEO(keywordsRes?.data?.data || []);
+        console.log("Generated keywords:", keywordsRes?.data?.data);
+      } catch (error) {
+        console.error("Error generating keywords:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      console.error("Please provide a valid main keyword.");
+    }
+  };
+
+  const handleGenerateArtikel = async () => {
+    const request = {
+      advConfig: selectedAdvConfig,
+      style: selectedWritingStyle,
+      website: "None",
+      connectToWeb: true,
+      lang: selectedLanguage,
+      pointOfView: "None",
+      title: title,
+      imageSource: "Web",
+      mainKeyword: selectedMainKeyword,
+      additionalKeywords: selectedSEO,
+      targetCountry: null,
+      articleSize: selectedSize,
+      projectId: 2,
+      createdBy: roleId,
+      clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
+    };
+
+    const res = await generateDataArticle(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+  };
+
+  const handleArticleIdClick = async (id: string) => {
+    setIsLoadingData(true);
+    let retryCount = 0;
+    const maxRetries = 20;
+
+    try {
+      const waitForStatusUpdate = async () => {
+        while (retryCount < maxRetries) {
+          const res = await getDetailArticle(id);
+          const articleData = res?.data?.data;
+
+          if (articleData?.status === 2) {
+            return articleData;
+          }
+
+          retryCount++;
+          await new Promise((resolve) => setTimeout(resolve, 5000));
+        }
+
+        throw new Error("Timeout: Artikel belum selesai diproses.");
+      };
+      const articleData = await waitForStatusUpdate();
+      const cleanArticleBody = articleData?.articleBody?.replace(
+        /<img[^>]*>/g,
+        ""
+      );
+      const articleImagesData = articleData?.imagesUrl?.split(",");
+      setArticleBody(cleanArticleBody || "");
+      setDetailData(articleData);
+      setSelectedArticleId(id);
+      setArticleImages(articleImagesData || []);
+    } catch (error) {
+      console.error("Error fetching article details:", error);
+    } finally {
+      setIsLoadingData(false);
+    }
+  };
+
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && e.currentTarget.value.trim()) {
+      e.preventDefault();
+      const newTag = e.currentTarget.value.trim();
+      if (!tags.includes(newTag)) {
+        setTags((prevTags) => [...prevTags, newTag]); // Add new tag
+        if (inputRef.current) {
+          inputRef.current.value = ""; // Clear input field
+        }
+      }
+    }
+  };
+
+  const handleRemoveTag = (index: number) => {
+    setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // Remove tag
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+      // setVideoActive(fileTypeId == '2');
+      // getRoles();
+    }
+
+    initState();
+  }, []);
+
+  const getCategories = async () => {
+    try {
+      const category = await listEnableCategory(fileTypeId);
+      const resCategory: Category[] = category?.data.data.content;
+
+      setCategories(resCategory);
+      console.log("data category", resCategory);
+
+      if (scheduleId && scheduleType === "3") {
+        const findCategory = resCategory.find((o) =>
+          o.name.toLowerCase().includes("pers rilis")
+        );
+
+        if (findCategory) {
+          // setValue("categoryId", findCategory.id);
+          setSelectedCategory(findCategory.id); // Set the selected category
+          const response = await getTagsBySubCategoryId(findCategory.id);
+          setTags(response?.data?.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    }
+  };
+
+  const handleCheckboxChange = (id: string): void => {
+    if (id === "all") {
+      if (publishedFor.includes("all")) {
+        // Uncheck all checkboxes
+        setPublishedFor([]);
+      } else {
+        // Select all checkboxes
+        setPublishedFor(
+          options
+            .filter((opt: any) => opt.id !== "all")
+            .map((opt: any) => opt.id)
+        );
+      }
+    } else {
+      const updatedPublishedFor = publishedFor.includes(id)
+        ? publishedFor.filter((item) => item !== id)
+        : [...publishedFor, id];
+
+      // Remove "all" if any checkbox is unchecked
+      if (publishedFor.includes("all") && id !== "all") {
+        setPublishedFor(updatedPublishedFor.filter((item) => item !== "all"));
+      } else {
+        setPublishedFor(updatedPublishedFor);
+      }
+    }
+  };
+
+  const save = async (data: ImageSchema) => {
+    loading();
+    const finalTags = tags.join(", ");
+    const finalTitle = isSwitchOn ? title : data.title;
+    const finalDescription = articleBody || data.description;
+
+    if (!finalDescription.trim()) {
+      MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
+      return;
+    }
+
+    let requestData: {
+      title: string;
+      description: string;
+      htmlDescription: string;
+      fileTypeId: string;
+      categoryId: any;
+      subCategoryId: any;
+      uploadedBy: string;
+      statusId: string;
+      publishedFor: string;
+      creatorName: string;
+      tags: string;
+      isYoutube: boolean;
+      isInternationalMedia: boolean;
+      attachFromScheduleId?: number; // ✅ Tambahkan properti ini
+    } = {
+      ...data,
+      title: finalTitle,
+      description: finalDescription,
+      htmlDescription: finalDescription,
+      fileTypeId,
+      categoryId: selectedCategory,
+      subCategoryId: selectedCategory,
+      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+      statusId: "1",
+      publishedFor: publishedFor.join(","),
+      creatorName: data.creatorName,
+      tags: finalTags,
+      isYoutube: false,
+      isInternationalMedia: false,
+    };
+
+    let id = Cookies.get("idCreate");
+
+    if (scheduleId !== undefined) {
+      requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
+    }
+
+    if (id == undefined) {
+      const response = await createMedia(requestData);
+      console.log("Form Data Submitted:", requestData);
+
+      Cookies.set("idCreate", response?.data?.data, { expires: 1 });
+      id = response?.data?.data;
+
+      // Upload Thumbnail
+      const formMedia = new FormData();
+      const thumbnail = files[0];
+      formMedia.append("file", thumbnail);
+      const responseThumbnail = await uploadThumbnail(id, formMedia);
+      if (responseThumbnail?.error == true) {
+        error(responseThumbnail?.message);
+        return false;
+      }
+    }
+
+    // Upload File
+    const progressInfoArr = files.map((item) => ({
+      percentage: 0,
+      fileName: item.name,
+    }));
+    progressInfo = progressInfoArr;
+    setIsStartUpload(true);
+    setProgressList(progressInfoArr);
+
+    close();
+    files.map(async (item: any, index: number) => {
+      await uploadResumableFile(
+        index,
+        String(id),
+        item,
+        fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
+      );
+    });
+
+    Cookies.remove("idCreate");
+  };
+
+  const onSubmit = (data: ImageSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    duration: string
+  ) {
+    console.log(idx, id, file, duration);
+
+    // const placements = getPlacement(file.placements);
+    // console.log("Placementttt:  : ", placements);
+
+    const resCsrf = await getCsrfToken();
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken,
+    };
+
+    const upload = new Upload(file, {
+      endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        mediaid: id,
+        filename: file.name,
+        filetype: file.type,
+        duration,
+        isWatermark: "true", // hardcode
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        progressInfo[idx].percentage = uploadPersen;
+        counterUpdateProgress++;
+        console.log(counterUpdateProgress);
+        setProgressList(progressInfo);
+        setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        uploadPersen = 100;
+        progressInfo[idx].percentage = 100;
+        counterUpdateProgress++;
+        setCounterProgress(counterUpdateProgress);
+        successTodo();
+      },
+    });
+
+    upload.start();
+  }
+
+  const successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  function successTodo() {
+    let counter = 0;
+    for (const element of progressInfo) {
+      if (element.percentage == 100) {
+        counter++;
+      }
+    }
+    if (counter == progressInfo.length) {
+      setIsStartUpload(false);
+      // hideProgress();
+      Cookies.remove("idCreate");
+      successSubmit("in/contributor/content/image/");
+    }
+  }
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setThumbnail(file);
+      console.log("Selected Thumbnail:", file);
+    }
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+    }
+  };
+
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file.type.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
+
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const fileList = files.map((file) => (
+    <div
+      key={file.name}
+      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+    >
+      <div className="flex gap-3 items-center">
+        <div className="file-preview">{renderFilePreview(file)}</div>
+        <div>
+          <div className=" text-sm  text-card-foreground">{file.name}</div>
+          <div className=" text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
+          </div>
+        </div>
+      </div>
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className=" border-none rounded-full"
+        onClick={() => handleRemoveFile(file)}
+      >
+        <Icon icon="tabler:x" className=" h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+  };
+
+  useEffect(() => {
+    // Jika input title kosong, isi dengan hasil generate title
+    if (!getValues("title") && title) {
+      setValue("title", title);
+    }
+  }, [title, getValues, setValue]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col lg:flex-row gap-10">
+        <Card className="w-full lg:w-8/12">
+          <div className="px-6 py-6">
+            <div className="gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2 py-3">
+                <Label>{t("title")}</Label>
+                <Controller
+                  control={control}
+                  name="title"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.title?.message && (
+                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                )}
+              </div>
+              <div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center gap-3">
+                <div className=" space-y-2 w-3/12">
+                  <Label>{t("assigment-type")}</Label>
+                  <Select onValueChange={setSelectedTarget}>
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Choose" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="2">Audio Visual</SelectItem>
+                      <SelectItem value="3">Audio</SelectItem>
+                      <SelectItem value="1">Image</SelectItem>
+                      <SelectItem value="4">Teks</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="py-3 space-y-2 w-9/12">
+                  <Label>{t("category")}</Label>
+                  <Select
+                    value={selectedCategory} // Ensure selectedTarget is updated correctly
+                    onValueChange={(id) => {
+                      console.log("Selected Category ID:", id);
+                      setSelectedCategory(id);
+                    }}
+                  >
+                    <SelectTrigger size="md">
+                      <SelectValue placeholder="Pilih" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {categories.map((category) => (
+                        <SelectItem
+                          key={category.id}
+                          value={category.id.toString()}
+                        >
+                          {category.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              <div className="py-3 space-y-2">
+                <Label>{t("description")}</Label>
+                <Controller
+                  control={control}
+                  name="description"
+                  render={({ field: { onChange, value } }) =>
+                    isLoadingData ? (
+                      <div className="flex justify-center items-center h-40">
+                        <p className="text-gray-500">Loading Proses Data...</p>
+                      </div>
+                    ) : (
+                      <CustomEditor
+                        onChange={onChange}
+                        initialData={articleBody || value}
+                      />
+                    )
+                  }
+                />
+                {errors.description?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.description.message}
+                  </p>
+                )}
+              </div>
+              <div className="py-3 space-y-2">
+                <Label>{t("select-file")}</Label>
+                {/* <Input
+                  id="fileInput"
+                  type="file"
+                  onChange={handleImageChange}
+                /> */}
+                <Fragment>
+                  <div {...getRootProps({ className: "dropzone" })}>
+                    <input {...getInputProps()} />
+                    <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                      <CloudUpload className="text-default-300 w-10 h-10" />
+                      <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                        {/* Drop files here or click to upload. */}
+                        {t("drag-file")}
+                      </h4>
+                      <div className=" text-xs text-muted-foreground">
+                        {t("upload-file-max")}
+                      </div>
+                    </div>
+                  </div>
+                  {files.length ? (
+                    <Fragment>
+                      <div>{fileList}</div>
+                      <div className=" flex justify-between gap-2">
+                        <div className="flex flex-row items-center gap-3 py-3">
+                          <Label>{t("watermark")}</Label>
+                          <div className="flex items-center gap-3">
+                            <Switch defaultChecked color="primary" id="c2" />
+                          </div>
+                        </div>
+                        <Button
+                          color="destructive"
+                          onClick={handleRemoveAllFiles}
+                        >
+                          {t("remove-all")}
+                        </Button>
+                      </div>
+                    </Fragment>
+                  ) : null}
+                </Fragment>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+          </div>
+        </Card>
+        <div className="w-full lg:w-4/12">
+          <Card className=" h-[500px]">
+            <div className="px-3 py-3">
+              <div className="space-y-2">
+                <Label>{t("creator")}</Label>
+                <Controller
+                  control={control}
+                  name="creatorName"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      value={field.value}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.creatorName?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.creatorName.message}
+                  </p>
+                )}
+              </div>
+            </div>
+            <div className="px-3 py-3 space-y-2">
+              <Label htmlFor="tags">{t("tags")}</Label>
+              <Input
+                type="text"
+                id="tags"
+                placeholder="Add a tag and press Enter"
+                onKeyDown={handleAddTag}
+                ref={inputRef}
+              />
+              <div className="mt-3 ">
+                {tags.map((tag, index) => (
+                  <span
+                    key={index}
+                    className=" px-1 py-1 rounded-lg bg-black text-white mr-2 text-sm font-sans"
+                  >
+                    {tag}{" "}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTag(index)}
+                      className="remove-tag-button"
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div className="px-3 py-3">
+              <div className="flex flex-col gap-3 space-y-2">
+                <Label>{t("publish-target")}</Label>
+                {options.map((option) => (
+                  <div key={option.id} className="flex gap-2 items-center">
+                    <Checkbox
+                      id={option.id}
+                      checked={
+                        option.id === "all"
+                          ? publishedFor.length ===
+                            options.filter((opt: any) => opt.id !== "all")
+                              .length
+                          : publishedFor.includes(option.id)
+                      }
+                      onCheckedChange={() => handleCheckboxChange(option.id)}
+                    />
+                    <Label htmlFor={option.id}>{option.label}</Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+          <div className="flex flex-row justify-end gap-3">
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                {t("submit")}
+              </Button>
+            </div>
+            <div className="mt-4">
+              <Link href={"/contributor/content/image"}>
+                <Button type="submit" color="primary" variant="outline">
+                  {t("cancel")}
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}

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

@@ -692,7 +692,7 @@ export default function FormTaskEdit() {
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="gap-5 mb-5">
               <div className="space-y-2">
-                <Label>Judul</Label>
+                <Label>{t("title")}</Label>
                 <Controller
                   control={control}
                   name="title"
@@ -712,7 +712,7 @@ export default function FormTaskEdit() {
               </div>
               <div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center">
                 <div className="mt-5  space-y-2">
-                  <Label>Tujuan Pemilihan Tugas</Label>
+                  <Label>{t("assignment-selection")}</Label>
                   <Select
                     onValueChange={setSelectedTarget}
                     value={detail.assignedToRole}
@@ -752,7 +752,7 @@ export default function FormTaskEdit() {
                   <Dialog>
                     <DialogTrigger asChild>
                       <Button variant="soft" size="sm" color="primary">
-                        [Kustom]
+                        [{t("custom")}]
                       </Button>
                     </DialogTrigger>
                     <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">

components/landing-page/hero.tsx

@@ -88,7 +88,7 @@ const HeroModal = ({ onClose }: { onClose: () => void }) => {
               <div className="relative h-[310px] lg:h-[420px]">
                 <button
                   onClick={onClose}
-                  className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white"
+                  className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8"
                 >
                   ✕
                 </button>
@@ -356,7 +356,7 @@ const Hero: React.FC = () => {
                   />
 
                   <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
-                    <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
+                    <div className="absolute top-0 left-0 bottom-0 w-1 bg-[#bb3523] rounded-bl-lg"></div>
                     <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
                       {list?.categoryName || "Liputan Kegiatan"}
                     </span>

components/landing-page/navbar.tsx

@@ -175,7 +175,7 @@ const Navbar = () => {
 
   return (
     <div className="bg-[#f7f7f7] dark:bg-black shadow-md sticky top-0 z-50">
-      <div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3">
+      <div className="flex items-center justify-between px-4 lg:px-20 gap-3">
         <div className="flex flex-row gap-8">
           {/* Logo */}
           <Link
@@ -1498,7 +1498,7 @@ const Navbar = () => {
                     <DropdownMenuSeparator />
                     <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
                       <div>
-                        <Link href={"/"}>
+                        {/* <Link href={"/"}>
                           <button
                             type="submit"
                             className="w-full flex items-center gap-2"
@@ -1507,7 +1507,7 @@ const Navbar = () => {
                             <Icon icon="heroicons:power" className="w-4 h-4" />
                             {t("logOut")}
                           </button>
-                        </Link>
+                        </Link> */}
                       </div>
                     </DropdownMenuItem>
                   </DropdownMenuContent>
@@ -1726,7 +1726,7 @@ const Navbar = () => {
                     <DropdownMenuSeparator />
                     <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
                       <div>
-                        <Link href={"/"}>
+                        {/* <Link href={"/"}>
                           <button
                             type="submit"
                             className="w-full flex items-center gap-2"
@@ -1735,7 +1735,7 @@ const Navbar = () => {
                             <Icon icon="heroicons:power" className="w-4 h-4" />
                             {t("logOut")}
                           </button>
-                        </Link>
+                        </Link> */}
                       </div>
                     </DropdownMenuItem>
                   </DropdownMenuContent>

components/partials/auth/login-form.tsx

@@ -264,8 +264,11 @@ const LoginForm = () => {
     } else if (msg == "Username & password valid") {
       onSubmit(data);
     } else {
-      setStep(1);
+      error("Username / password incorrect");
     }
+    // else {
+    //   setStep(1);
+    // }
   };
 
   const handleSetupEmail = async () => {

lib/menus.ts

@@ -2811,7 +2811,11 @@ export function getMenuList(pathname: string, t: any): Group[] {
         ],
       },
     ];
-  } else if (Number(roleId) == 11 || Number(roleId) == 19) {
+  } else if (
+    Number(roleId) == 11 ||
+    Number(roleId) == 19 ||
+    Number(roleId) == 12
+  ) {
     menusSelected = [
       {
         groupLabel: t("apps"),
@@ -3604,20 +3608,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
-        {
+        // {
-          groupLabel: "",
+        //   groupLabel: "",
-          id: "performance-polres",
+        //   id: "performance-satker",
-          menus: [
+        //   menus: [
-            {
+        //     {
-              id: "performance-polres",
+        //       id: "performance-polres",
-              href: "/admin/performance-satker",
+        //       href: "/admin/performance-satker",
-              label: t("performance-satker"),
+        //       label: t("performance-satker"),
-              active: pathname.includes("/admin/performance-satker"),
+        //       active: pathname.includes("/admin/performance-satker"),
-              icon: "ant-design:signal-filled",
+        //       icon: "ant-design:signal-filled",
-              submenus: [],
+        //       submenus: [],
-            },
+        //     },
-          ],
+        //   ],
-        },
+        // },
         {
           groupLabel: "",
           id: "media-tracking",