From ede150383d792403927e8249b63ed82308510c22 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Thu, 1 May 2025 15:19:35 +0800
Subject: [PATCH] feat:upload task ta

---
 .../task-ta/components/columns.tsx            |   4 +-
 .../task-ta/upload-task/{ => [id]}/page.tsx   |   0
 .../(protected)/dashboard/executive/page.tsx  |   5 +-
 components/form/content/audio-form.tsx        |   2 +
 components/form/content/image-form.tsx        |  30 +-
 components/form/content/image-update-seo.tsx  | 352 +++----
 components/form/content/teks-form.tsx         |   2 +
 components/form/content/video-form.tsx        |   2 +
 components/form/task-ta/task-ta-form.tsx      |  80 +-
 components/form/task-ta/task-ta-new.tsx       | 877 +++++++++---------
 components/landing-page/navbar.tsx            |  10 +-
 11 files changed, 708 insertions(+), 656 deletions(-)
 rename app/[locale]/(protected)/contributor/task-ta/upload-task/{ => [id]}/page.tsx (100%)

diff --git a/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx b/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx
index 0a49cdda..9a9ae4db 100644
--- a/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx
+++ b/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
diff --git a/app/[locale]/(protected)/contributor/task-ta/upload-task/page.tsx b/app/[locale]/(protected)/contributor/task-ta/upload-task/[id]/page.tsx
similarity index 100%
rename from app/[locale]/(protected)/contributor/task-ta/upload-task/page.tsx
rename to app/[locale]/(protected)/contributor/task-ta/upload-task/[id]/page.tsx
diff --git a/app/[locale]/(protected)/dashboard/executive/page.tsx b/app/[locale]/(protected)/dashboard/executive/page.tsx
index b3246212..e161b04c 100644
--- a/app/[locale]/(protected)/dashboard/executive/page.tsx
+++ b/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
-            </p>
-            <p className="text-base font-semibold">
-              Heatmap Kategori Dengan Interaksi
+              Heatmap Konten dan Kategori dengan Interaksi
             </p>
           </div>
           <div className="my-5">
diff --git a/components/form/content/audio-form.tsx b/components/form/content/audio-form.tsx
index b8eeebe7..3ff74041 100644
--- a/components/form/content/audio-form.tsx
+++ b/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"
diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx
index 4e255e53..743dfc29 100644
--- a/components/form/content/image-form.tsx
+++ b/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");
+                            }}
                           >
-                            <Button
-                              className="mb-2"
-                              size="sm"
-                              variant={"outline"}
-                              color="primary"
-                            >
-                              {t("update")}
-                            </Button>
-                          </Link>
+                            {t("update")}
+                          </Button>
                         )}
                       </div>
                     </div>
diff --git a/components/form/content/image-update-seo.tsx b/components/form/content/image-update-seo.tsx
index 0e7ea12e..f5426ba4 100644
--- a/components/form/content/image-update-seo.tsx
+++ b/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,61 +570,174 @@ export default function FormImageSeo() {
 
   return (
     <div>
-      <div className="mx-5 mb-3">
-        <Card>
-          <Tabs defaultValue="content" className="">
-            <TabsList className="grid w-[300px] grid-cols-2 bg-slate-400 my-3 mx-3 ">
-              <TabsTrigger
-                value="content"
-                className="data-[state=active]:text-black text-gray-500 data-[state=active]:rounded-md"
-              >
-                Konten
-              </TabsTrigger>
-              <TabsTrigger
-                value="checker"
-                className="data-[state=active]:text-black text-gray-500 data-[state=active]:rounded-md"
-              >
-                Checker
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="content">
-              {articleData !== undefined ? (
-                <CardContent className="space-y-2 my-3">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="mx-5 mb-3">
+          <Card className="p-0">
+            <Tabs defaultValue="content" className="p-0">
+              <TabsList className="grid w-[300px] grid-cols-2 bg-slate-400 my-3 mx-3 ">
+                <TabsTrigger
+                  value="content"
+                  className="data-[state=active]:text-black text-gray-500 data-[state=active]:rounded-md"
+                >
+                  Konten
+                </TabsTrigger>
+                <TabsTrigger
+                  value="checker"
+                  className="data-[state=active]:text-black text-gray-500 data-[state=active]:rounded-md"
+                >
+                  Checker
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="content">
+                {articleData !== undefined ? (
+                  <CardContent className="space-y-2 my-3">
+                    <div className="space-y-1">
+                      <Label htmlFor="name">Judul</Label>
+                      <Input id="name" defaultValue={articleData?.title} />
+                    </div>
+                    <div className="flex flex-row gap-3 w-full">
+                      <div className="w-full">
+                        <Label htmlFor="username">Main Keyword</Label>
+                        <Textarea
+                          id="mainKeyword"
+                          value={articleData?.mainKeyword}
+                        />
+                      </div>
+                      <div className="w-full">
+                        <Label htmlFor="username">Additional Keyword</Label>
+                        <Textarea
+                          id="additionalKeywords"
+                          value={articleData?.additionalKeywords}
+                        />
+                      </div>
+                    </div>
+                    <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}
+                        />
+                      </div>
+                      <div className="w-full">
+                        <Label htmlFor="username">Meta Description</Label>
+                        <Textarea
+                          id="metaDescription"
+                          value={articleData?.metaDescription}
+                        />
+                      </div>
+                    </div>
+                    <div className="py-3">
+                      <Label>Article</Label>
+                      <Controller
+                        control={control}
+                        name="description"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={onChange}
+                            initialData={articleBody}
+                          />
+                        )}
+                      />
+                      {errors.description?.message && (
+                        <p className="text-red-400 text-sm">
+                          {errors.description.message}
+                        </p>
+                      )}
+                    </div>
+                  </CardContent>
+                ) : (
+                  ""
+                )}
+              </TabsContent>
+              <TabsContent value="checker">
+                <CardContent className="space-y-2">
+                  <div className="flex items-start justify-start">
+                    <Pie
+                      data={data}
+                      options={options}
+                      className="text-left flex items-start justify-start"
+                    />
+                  </div>
                   <div className="space-y-1">
-                    <Label htmlFor="name">Judul</Label>
-                    <Input id="name" defaultValue={articleData?.title} />
-                  </div>
-                  <div className="flex flex-row gap-3 w-full">
-                    <div className="w-full">
-                      <Label htmlFor="username">Main Keyword</Label>
-                      <Textarea
-                        id="mainKeyword"
-                        value={articleData?.mainKeyword}
-                      />
-                    </div>
-                    <div className="w-full">
-                      <Label htmlFor="username">Additional Keyword</Label>
-                      <Textarea
-                        id="additionalKeywords"
-                        value={articleData?.additionalKeywords}
-                      />
-                    </div>
-                  </div>
-                  <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} />
-                    </div>
-                    <div className="w-full">
-                      <Label htmlFor="username">Meta Description</Label>
-                      <Textarea
-                        id="metaDescription"
-                        value={articleData?.metaDescription}
-                      />
-                    </div>
+                    <Accordion type="single" collapsible className="w-full ">
+                      <AccordionItem
+                        value="error"
+                        className="border border-red-600"
+                      >
+                        <AccordionTrigger>
+                          <div className="flex items-center">
+                            <XIcon className="text-red-600" />
+                            Errors ({errorSEO.length})
+                          </div>
+                        </AccordionTrigger>
+                        <AccordionContent>
+                          {errorSEO.length > 0 ? (
+                            <ul className="list-disc list-inside">
+                              {errorSEO.map((item, index) => (
+                                <li key={index}>{item}</li>
+                              ))}
+                            </ul>
+                          ) : (
+                            <p>No errors found.</p>
+                          )}
+                        </AccordionContent>
+                      </AccordionItem>
+
+                      <AccordionItem
+                        value="warning"
+                        className="border border-yellow-600"
+                      >
+                        <AccordionTrigger>
+                          <div className="flex items-center">
+                            <XIcon className="text-yellow-600" />
+                            Warnings ({warningSEO.length})
+                          </div>
+                        </AccordionTrigger>
+                        <AccordionContent>
+                          {warningSEO.length > 0 ? (
+                            <ul className="list-disc list-inside">
+                              {warningSEO.map((item, index) => (
+                                <li key={index}>{item}</li>
+                              ))}
+                            </ul>
+                          ) : (
+                            <p>No warnings found.</p>
+                          )}
+                        </AccordionContent>
+                      </AccordionItem>
+
+                      <AccordionItem
+                        value="optimized"
+                        className="border border-green-600"
+                      >
+                        <AccordionTrigger>
+                          <div className="flex items-center">
+                            <XIcon className="text-green-600" />
+                            Optimized ({optimizedSEO.length})
+                          </div>
+                        </AccordionTrigger>
+                        <AccordionContent>
+                          {optimizedSEO.length > 0 ? (
+                            <ul className="list-disc list-inside">
+                              {optimizedSEO.map((item, index) => (
+                                <li key={index}>{item}</li>
+                              ))}
+                            </ul>
+                          ) : (
+                            <p>No optimizations found.</p>
+                          )}
+                        </AccordionContent>
+                      </AccordionItem>
+                    </Accordion>
                   </div>
                   <div className="py-3">
-                    <Label>Article</Label>
+                    <div className="flex flex-row justify-between items-center mb-3">
+                      <Label>Article</Label>
+                      <Button size="md" className="bg-blue-500">
+                        Select Image From Content Bank
+                      </Button>
+                    </div>
                     <Controller
                       control={control}
                       name="description"
@@ -639,119 +755,25 @@ export default function FormImageSeo() {
                     )}
                   </div>
                 </CardContent>
-              ) : (
-                ""
-              )}
-            </TabsContent>
-            <TabsContent value="checker">
-              <CardContent className="space-y-2">
-                <div className="flex items-start justify-start">
-                  <Pie
-                    data={data}
-                    options={options}
-                    className="text-left flex items-start justify-start"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Accordion type="single" collapsible className="w-full ">
-                    <AccordionItem
-                      value="error"
-                      className="border border-red-600"
-                    >
-                      <AccordionTrigger>
-                        <div className="flex items-center">
-                          <XIcon className="text-red-600" />
-                          Errors ({errorSEO.length})
-                        </div>
-                      </AccordionTrigger>
-                      <AccordionContent>
-                        {errorSEO.length > 0 ? (
-                          <ul className="list-disc list-inside">
-                            {errorSEO.map((item, index) => (
-                              <li key={index}>{item}</li>
-                            ))}
-                          </ul>
-                        ) : (
-                          <p>No errors found.</p>
-                        )}
-                      </AccordionContent>
-                    </AccordionItem>
-
-                    <AccordionItem
-                      value="warning"
-                      className="border border-yellow-600"
-                    >
-                      <AccordionTrigger>
-                        <div className="flex items-center">
-                          <XIcon className="text-yellow-600" />
-                          Warnings ({warningSEO.length})
-                        </div>
-                      </AccordionTrigger>
-                      <AccordionContent>
-                        {warningSEO.length > 0 ? (
-                          <ul className="list-disc list-inside">
-                            {warningSEO.map((item, index) => (
-                              <li key={index}>{item}</li>
-                            ))}
-                          </ul>
-                        ) : (
-                          <p>No warnings found.</p>
-                        )}
-                      </AccordionContent>
-                    </AccordionItem>
-
-                    <AccordionItem
-                      value="optimized"
-                      className="border border-green-600"
-                    >
-                      <AccordionTrigger>
-                        <div className="flex items-center">
-                          <XIcon className="text-green-600" />
-                          Optimized ({optimizedSEO.length})
-                        </div>
-                      </AccordionTrigger>
-                      <AccordionContent>
-                        {optimizedSEO.length > 0 ? (
-                          <ul className="list-disc list-inside">
-                            {optimizedSEO.map((item, index) => (
-                              <li key={index}>{item}</li>
-                            ))}
-                          </ul>
-                        ) : (
-                          <p>No optimizations found.</p>
-                        )}
-                      </AccordionContent>
-                    </AccordionItem>
-                  </Accordion>
-                </div>
-                <div className="py-3">
-                  <div className="flex flex-row justify-between items-center mb-3">
-                    <Label>Article</Label>
-                    <Button size="md" className="bg-blue-500">
-                      Select Image From Content Bank
-                    </Button>
-                  </div>
-                  <Controller
-                    control={control}
-                    name="description"
-                    render={({ field: { onChange, value } }) => (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody}
-                      />
-                    )}
-                  />
-                  {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
-                  )}
-                </div>
-              </CardContent>
-            </TabsContent>
-          </Tabs>
-        </Card>
-      </div>
+              </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>
   );
 }
diff --git a/components/form/content/teks-form.tsx b/components/form/content/teks-form.tsx
index d4b6fdbb..ffc993b4 100644
--- a/components/form/content/teks-form.tsx
+++ b/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"
diff --git a/components/form/content/video-form.tsx b/components/form/content/video-form.tsx
index f27460ee..e6e4be2d 100644
--- a/components/form/content/video-form.tsx
+++ b/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"
diff --git a/components/form/task-ta/task-ta-form.tsx b/components/form/task-ta/task-ta-form.tsx
index 3005e8a7..16cb4b9f 100644
--- a/components/form/task-ta/task-ta-form.tsx
+++ b/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
diff --git a/components/form/task-ta/task-ta-new.tsx b/components/form/task-ta/task-ta-new.tsx
index ee649606..6c43ab91 100644
--- a/components/form/task-ta/task-ta-new.tsx
+++ b/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 () => {
-    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 handleLinkChange = (index: number, value: string) => {
+    const updatedLinks = [...links];
+    updatedLinks[index] = value;
+    setLinks(updatedLinks);
   };
 
-  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 handleAddRow = () => {
+    setLinks([...links, ""]);
   };
 
-  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.");
-    }
+  // Remove a specific link row
+  const handleRemoveRow = (index: number) => {
+    const updatedLinks = links.filter((_: any, i: any) => i !== index);
+    setLinks(updatedLinks);
   };
 
-  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 addAudioElement = (blob: Blob) => {
+    const url = URL.createObjectURL(blob);
+    const audio = document.createElement("audio");
+    audio.src = url;
+    audio.controls = true;
+    document.body.appendChild(audio);
 
-    const res = await generateDataArticle(request);
-    close();
+    // Convert Blob to File and add preview
+    const fileWithPreview: FileWithPreview = Object.assign(
+      new File([blob], "voiceNote.webm", { type: "audio/webm" }),
+      { preview: url }
+    );
 
-    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));
+    // Add to state
+    setAudioFile(fileWithPreview);
+    setAudioFiles((prev) => [...prev, fileWithPreview]);
   };
 
-  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 handleDeleteAudio = (index: number) => {
+    setAudioFiles((prev) => prev.filter((_, idx) => idx !== index));
   };
 
   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();
-      const thumbnail = files[0];
-      formMedia.append("file", thumbnail);
-      const responseThumbnail = await uploadThumbnail(id, formMedia);
-      if (responseThumbnail?.error == true) {
-        error(responseThumbnail?.message);
-        return false;
+      loading();
+      if (imageFiles?.length == 0) {
+        setIsImageUploadFinish(true);
       }
+      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");
+      });
+
+      if (textFiles?.length == 0) {
+        setIsTextUploadFinish(true);
+      }
+      textFiles?.map(async (item: any, index: number) => {
+        await uploadResumableFile(index, String(id), item, "3", "0");
+      });
+
+      if (audioFiles?.length == 0) {
+        setIsAudioUploadFinish(true);
+      }
+      audioFiles.map(async (item: FileWithPreview, index: number) => {
+        await uploadResumableFile(
+          index,
+          String(id),
+          item, // Use .file to access the actual File object
+          "4",
+          "0" // Optional: Replace with actual duration if available
+        );
+      });
     }
-
-    // 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) => {
@@ -550,12 +452,10 @@ export default function FormTaskTaNew() {
     idx: number,
     id: string,
     file: any,
+    fileTypeId: string,
     duration: string
   ) {
-    console.log(idx, id, file, duration);
-
-    // const placements = getPlacement(file.placements);
-    // console.log("Placementttt:  : ", placements);
+    console.log(idx, id, file, fileTypeId, duration);
 
     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);
-        progressInfo[idx].percentage = uploadPersen;
-        counterUpdateProgress++;
-        console.log(counterUpdateProgress);
-        setProgressList(progressInfo);
-        setCounterProgress(counterUpdateProgress);
+        // 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);
+        // uploadPersen = 100;
+        // progressInfo[idx].percentage = 100;
+        // 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() {
-    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/");
-    }
-  }
+  // 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];
@@ -712,234 +644,291 @@ export default function FormTaskTaNew() {
   }, [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"
+    <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">
+              <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"
+                          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-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>
+                    {errors.title?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.title.message}
+                      </p>
+                    )}
+                  </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="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={(val) => setFileTypeId(val)}>
+                        <SelectTrigger size="md">
+                          <SelectValue placeholder="Choose" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="2">Audio Visual</SelectItem>
+                          <SelectItem value="4">Audio</SelectItem>
+                          <SelectItem value="1">Image</SelectItem>
+                          <SelectItem value="3">Teks</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </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 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>
-                  {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)
+                  <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}
+                          />
+                        )
                       }
-                      onCheckedChange={() => handleCheckboxChange(option.id)}
                     />
-                    <Label htmlFor={option.id}>{option.label}</Label>
+                    {errors.description?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.description.message}
+                      </p>
+                    )}
                   </div>
-                ))}
+                  <div className="space-y-2.5 mt-5">
+                    <Label htmlFor="attachments">{t("attachment")}</Label>
+                    <div className="space-y-3">
+                      {fileTypeId === "2" && (
+                        <div>
+                          <Label>{t("audio-visual")}</Label>
+                          <FileUploader
+                            accept={{ "mp4/*": [], "mov/*": [] }}
+                            maxSize={100}
+                            label="Upload file dengan format .mp4 atau .mov."
+                            onDrop={(files) => setVideoFiles(files)}
+                          />
+                        </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>
+                      )}
+
+                      {fileTypeId === "4" && (
+                        <div className="space-y-2">
+                          <Label>{t("audio")}</Label>
+                          <AudioRecorder
+                            onRecordingComplete={addAudioElement}
+                            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>
+                      )}
+
+                      {fileTypeId === "4" &&
+                        audioFiles?.map((audio: any, idx: any) => (
+                          <div
+                            key={idx}
+                            className="flex flex-row justify-between items-center"
+                          >
+                            <p>{t("voice-note")}</p>
+                            <Button
+                              type="button"
+                              onClick={() => handleDeleteAudio(idx)}
+                              size="sm"
+                              color="destructive"
+                            >
+                              X
+                            </Button>
+                          </div>
+                        ))}
+
+                      {isRecording && (
+                        <p>Recording... {timer} seconds remaining</p>
+                      )}
+                    </div>
+                  </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>
-          </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>
+        </form>
+      ) : (
+        ""
+      )}
+    </div>
   );
 }
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index ae659f31..31580f91 100644
--- a/components/landing-page/navbar.tsx
+++ b/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>