feat:upload task ta

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

@@ -172,7 +172,9 @@ const useTableColumns = () => {
                 </DropdownMenuItem>
               </Link>
               {roleId == 12 && (
-                <Link href={`/contributor/task-ta/upload-task`}>
+                <Link
+                  href={`/contributor/task-ta/upload-task/${row.original.id}`}
+                >
                   <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

app/[locale]/(protected)/dashboard/executive/page.tsx

@@ -265,10 +265,7 @@ export default function ExecutiveDashboard() {
         <Card className="rounded-sm p-3 h-[750px]">
           <div className="flex flex-row justify-between mx-3">
             <p className="text-base font-semibold">
-              Heatmap Konten Dengan Interaksi
+              Heatmap Konten dan Kategori dengan Interaksi
-            </p>
-            <p className="text-base font-semibold">
-              Heatmap Kategori Dengan Interaksi
             </p>
           </div>
           <div className="my-5">

components/form/content/audio-form.tsx

@@ -948,6 +948,8 @@ export default function FormAudio() {
                         {selectedArticleId && (
                           <Link
                             href={`/contributor/content/audio/update-seo/${selectedArticleId}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
                           >
                             <Button
                               className="mb-2"

components/form/content/image-form.tsx

@@ -16,7 +16,7 @@ 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 { redirect, useParams, useRouter } from "next/navigation";
 import {
   Select,
   SelectContent,
@@ -57,7 +57,7 @@ import dynamic from "next/dynamic";
 import { getCsrfToken } from "@/service/auth";
 import { Link } from "@/i18n/routing";
 import { request } from "http";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -85,6 +85,8 @@ export default function FormImage() {
   const router = useRouter();
   const editor = useRef(null);
   type ImageSchema = z.infer<typeof imageSchema>;
+  const params = useParams();
+  const locale = params?.locale;
 
   const t = useTranslations("Form");
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
@@ -466,7 +468,7 @@ export default function FormImage() {
       tags: string;
       isYoutube: boolean;
       isInternationalMedia: boolean;
-      attachFromScheduleId?: number; // ✅ Tambahkan properti ini
+      attachFromScheduleId?: number;
     } = {
       ...data,
       title: finalTitle,
@@ -951,18 +953,18 @@ export default function FormImage() {
                     <div className="pt-3">
                       <div className="flex flex-row justify-between items-center">
                         {selectedArticleId && (
-                          <Link
-                            href={`/contributor/content/image/update-seo/${selectedArticleId}`}
-                          >
                           <Button
                             className="mb-2"
                             size="sm"
                             variant={"outline"}
                             color="primary"
+                            onClick={() => {
+                              const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
+                              window.open(url, "_blank", "noopener,noreferrer");
+                            }}
                           >
                             {t("update")}
                           </Button>
-                          </Link>
                         )}
                       </div>
                     </div>

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

@@ -62,6 +62,8 @@ import {
   Legend,
   ChartOptions,
 } from "chart.js";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/routing";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 const imageSchema = z.object({
@@ -127,6 +129,7 @@ export default function FormImageSeo() {
 
   let progressInfo: any = [];
   let counterUpdateProgress = 0;
+  const t = useTranslations("Form");
   const [progressList, setProgressList] = useState<any>([]);
   let uploadPersen = 0;
   const [isStartUpload, setIsStartUpload] = useState(false);
@@ -567,9 +570,10 @@ export default function FormImageSeo() {
 
   return (
     <div>
+      <form onSubmit={handleSubmit(onSubmit)}>
         <div className="mx-5 mb-3">
-        <Card>
+          <Card className="p-0">
-          <Tabs defaultValue="content" className="">
+            <Tabs defaultValue="content" className="p-0">
               <TabsList className="grid w-[300px] grid-cols-2 bg-slate-400 my-3 mx-3 ">
                 <TabsTrigger
                   value="content"
@@ -610,7 +614,10 @@ export default function FormImageSeo() {
                     <div className="flex flex-row gap-3 w-full">
                       <div className="w-full">
                         <Label htmlFor="username">Meta Title</Label>
-                      <Textarea id="metaTitle" value={articleData?.metaTitle} />
+                        <Textarea
+                          id="metaTitle"
+                          value={articleData?.metaTitle}
+                        />
                       </div>
                       <div className="w-full">
                         <Label htmlFor="username">Meta Description</Label>
@@ -750,8 +757,23 @@ export default function FormImageSeo() {
                 </CardContent>
               </TabsContent>
             </Tabs>
+            <div className="flex flex-row justify-star gap-3 mx-5">
+              <div className="mb-3">
+                <Link href={"/contributor/content/image"}>
+                  <Button type="submit" color="primary" variant="outline">
+                    {t("cancel")}
+                  </Button>
+                </Link>
+              </div>
+              <div className="mb-3">
+                <Button type="submit" color="primary">
+                  {t("submit")}
+                </Button>
+              </div>
+            </div>
           </Card>
         </div>
+      </form>
     </div>
   );
 }

components/form/content/teks-form.tsx

@@ -945,6 +945,8 @@ export default function FormTeks() {
                         {selectedArticleId && (
                           <Link
                             href={`/contributor/content/teks/update-seo/${selectedArticleId}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
                           >
                             <Button
                               className="mb-2"

components/form/content/video-form.tsx

@@ -944,6 +944,8 @@ export default function FormVideo() {
                         {selectedArticleId && (
                           <Link
                             href={`/contributor/content/video/update-seo/${selectedArticleId}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
                           >
                             <Button
                               className="mb-2"

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

@@ -33,7 +33,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
+import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
 import { AudioRecorder } from "react-audio-voice-recorder";
 import FileUploader from "@/components/form/shared/file-uploader";
 import { Upload } from "tus-js-client";
@@ -42,6 +42,18 @@ import { getCsrfToken } from "@/service/auth";
 import { loading } from "@/lib/swal";
 import { useTranslations } from "next-intl";
 import dynamic from "next/dynamic";
+import { cn } from "@/lib/utils";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { addDays, format, setDate } from "date-fns";
+import { DateRange } from "react-day-picker";
+import TimePicker from "react-time-picker";
+import "react-time-picker/dist/TimePicker.css";
+import "react-clock/dist/Clock.css";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -134,6 +146,9 @@ export default function FormTaskTa() {
   const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
   const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
   const [voiceNoteLink, setVoiceNoteLink] = useState("");
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2024, 0, 1),
+  });
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -478,7 +493,7 @@ export default function FormTaskTa() {
     };
 
     const upload = new Upload(file, {
-      endpoint: `${process.env.NEXT_PUBLIC_API}/assignment/file/upload`,
+      endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
       headers: headers,
       retryDelays: [0, 3000, 6000, 12_000, 24_000],
       chunkSize: 20_000,
@@ -735,6 +750,46 @@ export default function FormTaskTa() {
                 <Label htmlFor="tugas-harian">Tugas Harian</Label>
               </RadioGroup>
             </div>
+            <div className="flex flex-col space-y-2 mt-5">
+              <Label className="mr-3 mb-1">Tanggal</Label>
+              <Popover>
+                <PopoverTrigger asChild className="px-0">
+                  <Button
+                    size="md"
+                    id="date"
+                    variant={"outline"}
+                    className={cn(
+                      "w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
+                      !date && "text-muted-foreground"
+                    )}
+                  >
+                    <CalendarIcon size={15} className="mr-3" />
+                    {date?.from ? (
+                      date.to ? (
+                        <>
+                          {format(date.from, "LLL dd, y")} -{" "}
+                          {format(date.to, "LLL dd, y")}
+                        </>
+                      ) : (
+                        format(date.from, "LLL dd, y")
+                      )
+                    ) : (
+                      <span>Pick a date</span>
+                    )}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    initialFocus
+                    mode="range"
+                    defaultMonth={date?.from}
+                    selected={date}
+                    onSelect={setDate}
+                    numberOfMonths={1}
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
             <div className="mt-5 space-y-2">
               <Label>{t("areas-expertise")}</Label>
               <div className="flex flex-wrap gap-4">
@@ -779,27 +834,6 @@ export default function FormTaskTa() {
                 ))}
               </div>
             </div>
-            {/* <div className="mt-5">
-              <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-5 space-y-2">
               <Label>{t("description")}</Label>
               <Controller

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

@@ -16,7 +16,7 @@ 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 { redirect, useParams, useRouter } from "next/navigation";
 import {
   Select,
   SelectContent,
@@ -47,7 +47,7 @@ import {
 import { getCookiesDecrypt } from "@/lib/utils";
 import { useDropzone } from "react-dropzone";
 import { Icon } from "@iconify/react";
-import { CloudUpload } from "lucide-react";
+import { CloudUpload, Trash2 } from "lucide-react";
 import Image from "next/image";
 import { error, loading } from "@/config/swal";
 import { Item } from "@radix-ui/react-dropdown-menu";
@@ -58,6 +58,10 @@ import { getCsrfToken } from "@/service/auth";
 import { Link } from "@/i18n/routing";
 import { request } from "http";
 import { useTranslations } from "next-intl";
+import FileUploader from "../shared/file-uploader";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { getTaskTa } from "@/service/task";
+import { taskDetail } from "./task-ta-form";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -92,6 +96,8 @@ export default function FormTaskTaNew() {
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
+  const { id } = useParams() as { id: string };
+  console.log(id);
 
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<any>();
@@ -120,6 +126,19 @@ export default function FormTaskTaNew() {
   const [articleImages, setArticleImages] = useState<string[]>([]);
   const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
+  const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]);
+  const [videoFiles, setVideoFiles] = useState<FileWithPreview[]>([]);
+  const [textFiles, setTextFiles] = useState<FileWithPreview[]>([]);
+  const [audioFiles, setAudioFiles] = useState<FileWithPreview[]>([]);
+  const [isImageUploadFinish, setIsImageUploadFinish] = useState(false);
+  const [isVideoUploadFinish, setIsVideoUploadFinish] = useState(false);
+  const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
+  const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [links, setLinks] = useState<string[]>([""]);
+  const [timer, setTimer] = useState<number>(120);
+  const [fileTypeId, setFileTypeId] = useState<string>("");
 
   const [content, setContent] = useState("");
 
@@ -131,7 +150,6 @@ export default function FormTaskTaNew() {
     polres: false,
   });
 
-  let fileTypeId = "1";
   let progressInfo: any = [];
   let counterUpdateProgress = 0;
   const [progressList, setProgressList] = useState<any>([]);
@@ -142,6 +160,8 @@ export default function FormTaskTaNew() {
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   const [filesTemp, setFilesTemp] = useState<File[]>([]);
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const [detail, setDetail] = useState<taskDetail>();
+  const [refresh] = useState(false);
 
   const options: Option[] = [
     { id: "all", label: "SEMUA" },
@@ -181,181 +201,42 @@ export default function FormTaskTaNew() {
     resolver: zodResolver(imageSchema),
   });
 
-  const doGenerateMainKeyword = async () => {
+  const handleLinkChange = (index: number, value: string) => {
-    console.log(selectedMainKeyword);
+    const updatedLinks = [...links];
-    if (selectedMainKeyword?.length > 1) {
+    updatedLinks[index] = value;
-      try {
+    setLinks(updatedLinks);
-        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 () => {
+  const handleAddRow = () => {
-    if (selectedMainKeyword?.length > 1) {
+    setLinks([...links, ""]);
-      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 () => {
+  // Remove a specific link row
-    if (selectedMainKeyword?.length > 1) {
+  const handleRemoveRow = (index: number) => {
-      try {
+    const updatedLinks = links.filter((_: any, i: any) => i !== index);
-        setIsLoading(true);
+    setLinks(updatedLinks);
-        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 addAudioElement = (blob: Blob) => {
-    const request = {
+    const url = URL.createObjectURL(blob);
-      advConfig: selectedAdvConfig,
+    const audio = document.createElement("audio");
-      style: selectedWritingStyle,
+    audio.src = url;
-      website: "None",
+    audio.controls = true;
-      connectToWeb: true,
+    document.body.appendChild(audio);
-      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);
+    // Convert Blob to File and add preview
-    close();
+    const fileWithPreview: FileWithPreview = Object.assign(
-
+      new File([blob], "voiceNote.webm", { type: "audio/webm" }),
-    if (res?.error) {
+      { preview: url }
-      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 || "");
+    // Add to state
-      setDetailData(articleData);
+    setAudioFile(fileWithPreview);
-      setSelectedArticleId(id);
+    setAudioFiles((prev) => [...prev, fileWithPreview]);
-      setArticleImages(articleImagesData || []);
+  };
-    } catch (error) {
+
-      console.error("Error fetching article details:", error);
+  const handleDeleteAudio = (index: number) => {
-    } finally {
+    setAudioFiles((prev) => prev.filter((_, idx) => idx !== index));
-      setIsLoadingData(false);
-    }
   };
 
   const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -441,6 +322,20 @@ export default function FormTaskTaNew() {
     }
   };
 
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await getTaskTa(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+
+        // Add more state setting here based on other fields like broadcastType, taskOutput, etc.
+      }
+    }
+    initState();
+  }, [id, refresh]);
+
   const save = async (data: ImageSchema) => {
     loading();
     const finalTags = tags.join(", ");
@@ -453,6 +348,7 @@ export default function FormTaskTaNew() {
     }
 
     let requestData: {
+      assignmentExpertId: any;
       title: string;
       description: string;
       htmlDescription: string;
@@ -469,10 +365,11 @@ export default function FormTaskTaNew() {
       attachFromScheduleId?: number; // ✅ Tambahkan properti ini
     } = {
       ...data,
+      assignmentExpertId: detail?.id || null,
       title: finalTitle,
       description: finalDescription,
       htmlDescription: finalDescription,
-      fileTypeId,
+      fileTypeId: fileTypeId,
       categoryId: selectedCategory,
       subCategoryId: selectedCategory,
       uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
@@ -498,36 +395,41 @@ export default function FormTaskTaNew() {
       id = response?.data?.data;
 
       // Upload Thumbnail
-      const formMedia = new FormData();
+      loading();
-      const thumbnail = files[0];
+      if (imageFiles?.length == 0) {
-      formMedia.append("file", thumbnail);
+        setIsImageUploadFinish(true);
-      const responseThumbnail = await uploadThumbnail(id, formMedia);
-      if (responseThumbnail?.error == true) {
-        error(responseThumbnail?.message);
-        return false;
       }
+      imageFiles?.map(async (item: any, index: number) => {
+        await uploadResumableFile(index, String(id), item, "1", "0");
+      });
+
+      if (videoFiles?.length == 0) {
+        setIsVideoUploadFinish(true);
       }
+      videoFiles?.map(async (item: any, index: number) => {
+        await uploadResumableFile(index, String(id), item, "2", "0");
+      });
 
-    // Upload File
+      if (textFiles?.length == 0) {
-    const progressInfoArr = files.map((item) => ({
+        setIsTextUploadFinish(true);
-      percentage: 0,
+      }
-      fileName: item.name,
+      textFiles?.map(async (item: any, index: number) => {
-    }));
+        await uploadResumableFile(index, String(id), item, "3", "0");
-    progressInfo = progressInfoArr;
+      });
-    setIsStartUpload(true);
-    setProgressList(progressInfoArr);
 
-    close();
+      if (audioFiles?.length == 0) {
-    files.map(async (item: any, index: number) => {
+        setIsAudioUploadFinish(true);
+      }
+      audioFiles.map(async (item: FileWithPreview, index: number) => {
         await uploadResumableFile(
           index,
           String(id),
-        item,
+          item, // Use .file to access the actual File object
-        fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
+          "4",
+          "0" // Optional: Replace with actual duration if available
         );
       });
-
+    }
-    Cookies.remove("idCreate");
   };
 
   const onSubmit = (data: ImageSchema) => {
@@ -550,12 +452,10 @@ export default function FormTaskTaNew() {
     idx: number,
     id: string,
     file: any,
+    fileTypeId: string,
     duration: string
   ) {
-    console.log(idx, id, file, duration);
+    console.log(idx, id, file, fileTypeId, duration);
-
-    // const placements = getPlacement(file.placements);
-    // console.log("Placementttt:  : ", placements);
 
     const resCsrf = await getCsrfToken();
     const csrfToken = resCsrf?.data?.token;
@@ -572,9 +472,10 @@ export default function FormTaskTaNew() {
       metadata: {
         mediaid: id,
         filename: file.name,
-        filetype: file.type,
+        contentType: file.type,
+        fileTypeId: fileTypeId,
         duration,
-        isWatermark: "true", // hardcode
+        isWatermark: "true",
       },
       onBeforeRequest: function (req) {
         var xhr = req.getUnderlyingObject();
@@ -589,25 +490,56 @@ export default function FormTaskTaNew() {
         bytesAccepted: any,
         bytesTotal: any
       ) => {
-        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
-        progressInfo[idx].percentage = uploadPersen;
+        // progressInfo[idx].percentage = uploadPersen;
-        counterUpdateProgress++;
+        // counterUpdateProgress++;
-        console.log(counterUpdateProgress);
+        // console.log(counterUpdateProgress);
-        setProgressList(progressInfo);
+        // setProgressList(progressInfo);
-        setCounterProgress(counterUpdateProgress);
+        // setCounterProgress(counterUpdateProgress);
       },
       onSuccess: async () => {
-        uploadPersen = 100;
+        // uploadPersen = 100;
-        progressInfo[idx].percentage = 100;
+        // progressInfo[idx].percentage = 100;
-        counterUpdateProgress++;
+        // counterUpdateProgress++;
-        setCounterProgress(counterUpdateProgress);
+        // setCounterProgress(counterUpdateProgress);
         successTodo();
+        if (fileTypeId == "1") {
+          setIsImageUploadFinish(true);
+        } else if (fileTypeId == "2") {
+          setIsVideoUploadFinish(true);
+        }
+        if (fileTypeId == "3") {
+          setIsTextUploadFinish(true);
+        }
+        if (fileTypeId == "4") {
+          setIsAudioUploadFinish(true);
+        }
       },
     });
 
     upload.start();
   }
 
+  useEffect(() => {
+    successTodo();
+  }, [
+    isImageUploadFinish,
+    isVideoUploadFinish,
+    isAudioUploadFinish,
+    isTextUploadFinish,
+  ]);
+
+  function successTodo() {
+    if (
+      isImageUploadFinish &&
+      isVideoUploadFinish &&
+      isAudioUploadFinish &&
+      isTextUploadFinish
+    ) {
+      successSubmit("/in/contributor/task-ta");
+    }
+  }
+
   const successSubmit = (redirect: string) => {
     MySwal.fire({
       title: "Sukses",
@@ -620,20 +552,20 @@ export default function FormTaskTaNew() {
     });
   };
 
-  function successTodo() {
+  // function successTodo() {
-    let counter = 0;
+  //   let counter = 0;
-    for (const element of progressInfo) {
+  //   for (const element of progressInfo) {
-      if (element.percentage == 100) {
+  //     if (element.percentage == 100) {
-        counter++;
+  //       counter++;
-      }
+  //     }
-    }
+  //   }
-    if (counter == progressInfo.length) {
+  //   if (counter == progressInfo.length) {
-      setIsStartUpload(false);
+  //     setIsStartUpload(false);
-      // hideProgress();
+  //     // hideProgress();
-      Cookies.remove("idCreate");
+  //     Cookies.remove("idCreate");
-      successSubmit("in/contributor/content/image/");
+  //     successSubmit("in/contributor/content/image/");
-    }
+  //   }
-  }
+  // }
 
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -712,6 +644,8 @@ export default function FormTaskTaNew() {
   }, [title, getValues, setValue]);
 
   return (
+    <div>
+      {detail !== undefined ? (
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="flex flex-col lg:flex-row gap-10">
             <Card className="w-full lg:w-8/12">
@@ -727,28 +661,31 @@ export default function FormTaskTaNew() {
                         <Input
                           size="md"
                           type="text"
-                      value={field.value}
+                          defaultValue={detail?.title}
                           onChange={field.onChange}
                           placeholder="Enter Title"
                         />
                       )}
                     />
                     {errors.title?.message && (
-                  <p className="text-red-400 text-sm">{errors.title.message}</p>
+                      <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}>
+                      <Select onValueChange={(val) => setFileTypeId(val)}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Choose" />
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="2">Audio Visual</SelectItem>
-                      <SelectItem value="3">Audio</SelectItem>
+                          <SelectItem value="4">Audio</SelectItem>
                           <SelectItem value="1">Image</SelectItem>
-                      <SelectItem value="4">Teks</SelectItem>
+                          <SelectItem value="3">Teks</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
@@ -787,7 +724,9 @@ export default function FormTaskTaNew() {
                       render={({ field: { onChange, value } }) =>
                         isLoadingData ? (
                           <div className="flex justify-center items-center h-40">
-                        <p className="text-gray-500">Loading Proses Data...</p>
+                            <p className="text-gray-500">
+                              Loading Proses Data...
+                            </p>
                           </div>
                         ) : (
                           <CustomEditor
@@ -803,47 +742,91 @@ export default function FormTaskTaNew() {
                       </p>
                     )}
                   </div>
-              <div className="py-3 space-y-2">
+                  <div className="space-y-2.5 mt-5">
-                <Label>{t("select-file")}</Label>
+                    <Label htmlFor="attachments">{t("attachment")}</Label>
-                {/* <Input
+                    <div className="space-y-3">
-                  id="fileInput"
+                      {fileTypeId === "2" && (
-                  type="file"
+                        <div>
-                  onChange={handleImageChange}
+                          <Label>{t("audio-visual")}</Label>
-                /> */}
+                          <FileUploader
-                <Fragment>
+                            accept={{ "mp4/*": [], "mov/*": [] }}
-                  <div {...getRootProps({ className: "dropzone" })}>
+                            maxSize={100}
-                    <input {...getInputProps()} />
+                            label="Upload file dengan format .mp4 atau .mov."
-                    <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">
+                            onDrop={(files) => setVideoFiles(files)}
-                      <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>
+                      )}
+
+                      {fileTypeId === "1" && (
+                        <div className="space-y-2">
+                          <Label>{t("image")}</Label>
+                          <FileUploader
+                            accept={{ "image/*": [] }}
+                            maxSize={100}
+                            label="Upload file dengan format .png, .jpg, atau .jpeg."
+                            onDrop={(files) => setImageFiles(files)}
+                          />
                         </div>
+                      )}
+
+                      {fileTypeId === "3" && (
+                        <div className="space-y-2">
+                          <Label>{t("text")}</Label>
+                          <FileUploader
+                            accept={{ "pdf/*": [] }}
+                            maxSize={100}
+                            label="Upload file dengan format .pdf."
+                            onDrop={(files) => setTextFiles(files)}
+                          />
                         </div>
-                  {files.length ? (
+                      )}
-                    <Fragment>
+
-                      <div>{fileList}</div>
+                      {fileTypeId === "4" && (
-                      <div className=" flex justify-between gap-2">
+                        <div className="space-y-2">
-                        <div className="flex flex-row items-center gap-3 py-3">
+                          <Label>{t("audio")}</Label>
-                          <Label>{t("watermark")}</Label>
+                          <AudioRecorder
-                          <div className="flex items-center gap-3">
+                            onRecordingComplete={addAudioElement}
-                            <Switch defaultChecked color="primary" id="c2" />
+                            audioTrackConstraints={{
+                              noiseSuppression: true,
+                              echoCancellation: true,
+                            }}
+                            downloadOnSavePress={true}
+                            downloadFileExtension="webm"
+                          />
+                          <FileUploader
+                            accept={{ "mp3/*": [], "wav/*": [] }}
+                            maxSize={100}
+                            label="Upload file dengan format .mp3 atau .wav."
+                            onDrop={(files) =>
+                              setAudioFiles((prev) => [...prev, ...files])
+                            }
+                            className="mt-2"
+                          />
                         </div>
-                        </div>
+                      )}
-                        <Button
+
-                          color="destructive"
+                      {fileTypeId === "4" &&
-                          onClick={handleRemoveAllFiles}
+                        audioFiles?.map((audio: any, idx: any) => (
+                          <div
+                            key={idx}
+                            className="flex flex-row justify-between items-center"
                           >
-                          {t("remove-all")}
+                            <p>{t("voice-note")}</p>
+                            <Button
+                              type="button"
+                              onClick={() => handleDeleteAudio(idx)}
+                              size="sm"
+                              color="destructive"
+                            >
+                              X
                             </Button>
                           </div>
-                    </Fragment>
+                        ))}
-                  ) : null}
+
-                </Fragment>
+                      {isRecording && (
+                        <p>Recording... {timer} seconds remaining</p>
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -916,7 +899,9 @@ export default function FormTaskTaNew() {
                                   .length
                               : publishedFor.includes(option.id)
                           }
-                      onCheckedChange={() => handleCheckboxChange(option.id)}
+                          onCheckedChange={() =>
+                            handleCheckboxChange(option.id)
+                          }
                         />
                         <Label htmlFor={option.id}>{option.label}</Label>
                       </div>
@@ -941,5 +926,9 @@ export default function FormTaskTaNew() {
             </div>
           </div>
         </form>
+      ) : (
+        ""
+      )}
+    </div>
   );
 }

components/landing-page/navbar.tsx

@@ -102,7 +102,7 @@ const Navbar = () => {
       Cookies.remove(cookieName);
     });
 
-    router.push("/");
+    window.location.href = "/";
   };
 
   // const profilePicture = Cookies.get("profile_picture");
@@ -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>