diff --git a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx b/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
index 791ea4f9..77fcfd17 100644
--- a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
+++ b/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
@@ -43,6 +43,7 @@ import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import columns from "./columns";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
@@ -192,56 +193,86 @@ const TableSPIT = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex items-center py-4">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="ml-auto" size="md">
-                Filter <ChevronDown />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              className="w-64 h-[150px] overflow-y-auto"
-            >
-              <div className="flex flex-row justify-between my-1 mx-1">
-                <p>Filter</p>
-              </div>
-              <div className="mx-2 my-1">
-                <Label>{t("date")}</Label>
-                <Input
-                  type="date"
-                  value={dateFilter}
-                  onChange={(e) => setDateFilter(e.target.value)}
-                  className="max-w-sm"
-                />
-              </div>
-              <Label className="ml-2 mt-2">Status</Label>
-              <div className="flex items-center px-4 py-1">
-                <input
-                  type="checkbox"
-                  id="status-2"
-                  className="mr-2"
-                  checked={statusFilter.includes(1)}
-                  onChange={() => handleStatusCheckboxChange(1)}
-                />
-                <label htmlFor="status-2" className="text-sm">
-                  Menunggu Review
-                </label>
-              </div>
-              <div className="flex items-center px-4 py-1">
-                <input
-                  type="checkbox"
-                  id="status-2"
-                  className="mr-2"
-                  checked={statusFilter.includes(2)}
-                  onChange={() => handleStatusCheckboxChange(2)}
-                />
-                <label htmlFor="status-2" className="text-sm">
-                  Diterima
-                </label>
-              </div>
-            </DropdownMenuContent>
-          </DropdownMenu>
+        <div className="flex fle-row items-center gap-3">
+          <div className="flex items-center py-4">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Filter <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                className="w-64 h-[150px] overflow-y-auto"
+              >
+                <div className="flex flex-row justify-between my-1 mx-1">
+                  <p>Filter</p>
+                </div>
+                <div className="mx-2 my-1">
+                  <Label>{t("date")}</Label>
+                  <Input
+                    type="date"
+                    value={dateFilter}
+                    onChange={(e) => setDateFilter(e.target.value)}
+                    className="max-w-sm"
+                  />
+                </div>
+                <Label className="ml-2 mt-2">Status</Label>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(1)}
+                    onChange={() => handleStatusCheckboxChange(1)}
+                  />
+                  <label htmlFor="status-2" className="text-sm">
+                    Menunggu Review
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(2)}
+                    onChange={() => handleStatusCheckboxChange(2)}
+                  />
+                  <label htmlFor="status-2" className="text-sm">
+                    Diterima
+                  </label>
+                </div>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <div className="flex items-center py-4">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Columns <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
       </div>
 
diff --git a/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx b/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
index 9d3d6fc5..c1d72b98 100644
--- a/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
+++ b/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Eye,
@@ -39,6 +40,7 @@ import {
 import { cn } from "@/lib/utils";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
@@ -163,17 +165,47 @@ const MediahubTable = () => {
               />
             </InputGroup>
           </div>
-          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
-            <Input
-              placeholder="Filter Status..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
-              className="max-w-sm "
-            />
+          <div className="flex flex-row items-center gap-3">
+            <div className="w-[150px] md:w-[250px] lg:w-[250px] border border-black rounded-md">
+              <Input
+                placeholder="Filter Status..."
+                value={
+                  (table.getColumn("status")?.getFilterValue() as string) ?? ""
+                }
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  table.getColumn("status")?.setFilterValue(event.target.value)
+                }
+                className="max-w-sm "
+              />
+            </div>
+            <div className="flex items-center py-4">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto" size="md">
+                    Columns <ChevronDown />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {table
+                    .getAllColumns()
+                    .filter((column) => column.getCanHide())
+                    .map((column) => {
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={column.id}
+                          className="capitalize"
+                          checked={column.getIsVisible()}
+                          onCheckedChange={(value) =>
+                            column.toggleVisibility(!!value)
+                          }
+                        >
+                          {column.id}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           </div>
         </div>
         <Table className="overflow-hidden mt-3">
diff --git a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
index b909ffeb..ab41096f 100644
--- a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
+++ b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Eye,
@@ -39,6 +40,7 @@ import {
 import { cn } from "@/lib/utils";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
@@ -162,17 +164,47 @@ const MedsosTable = () => {
               />
             </InputGroup>
           </div>
-          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
-            <Input
-              placeholder="Filter Status..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
-              className="max-w-sm "
-            />
+          <div className="flex flex-row items-center gap-3">
+            <div className="w-[150px] md:w-[250px] lg:w-[250px]">
+              <Input
+                placeholder="Filter Status..."
+                value={
+                  (table.getColumn("status")?.getFilterValue() as string) ?? ""
+                }
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  table.getColumn("status")?.setFilterValue(event.target.value)
+                }
+                className="max-w-sm "
+              />
+            </div>
+            <div className="flex items-center py-4">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto" size="md">
+                    Columns <ChevronDown />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {table
+                    .getAllColumns()
+                    .filter((column) => column.getCanHide())
+                    .map((column) => {
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={column.id}
+                          className="capitalize"
+                          checked={column.getIsVisible()}
+                          onCheckedChange={(value) =>
+                            column.toggleVisibility(!!value)
+                          }
+                        >
+                          {column.id}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           </div>
         </div>
         <Table className="overflow-hidden mt-3">
diff --git a/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx b/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
index a4524e72..33ce62ae 100644
--- a/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
@@ -36,6 +36,7 @@ import { Button } from "@/components/ui/button";
 import useTableColumns from "./columns";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
@@ -172,8 +173,8 @@ const EventTable = () => {
               />
             </InputGroup>
           </div>
-          <div className="flex flex-row">
-            <div className="mx-3">
+          <div className="flex flex-row gap-3 items-center">
+            <div className="">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button size="md" variant="outline">
@@ -244,6 +245,34 @@ const EventTable = () => {
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
+            <div className="flex items-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto" size="md">
+                    Columns <ChevronDown />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {table
+                    .getAllColumns()
+                    .filter((column) => column.getCanHide())
+                    .map((column) => {
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={column.id}
+                          className="capitalize"
+                          checked={column.getIsVisible()}
+                          onCheckedChange={(value) =>
+                            column.toggleVisibility(!!value)
+                          }
+                        >
+                          {column.id}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           </div>
         </div>
         <Table className="overflow-hidden mt-3">
diff --git a/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx b/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
index c409f222..a52a9ed6 100644
--- a/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
@@ -50,6 +50,7 @@ import { useTranslations } from "next-intl";
 import useTableColumns from "./columns";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
@@ -186,8 +187,8 @@ const PressConferenceTable = () => {
               />
             </InputGroup>
           </div>
-          <div className="flex flex-row gap-3">
-            <div className="mx-3">
+          <div className="flex flex-row items-center gap-3">
+            <div className="">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button size="md" variant="outline">
@@ -258,6 +259,34 @@ const PressConferenceTable = () => {
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
+            <div className="flex items-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto" size="md">
+                    Columns <ChevronDown />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {table
+                    .getAllColumns()
+                    .filter((column) => column.getCanHide())
+                    .map((column) => {
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={column.id}
+                          className="capitalize"
+                          checked={column.getIsVisible()}
+                          onCheckedChange={(value) =>
+                            column.toggleVisibility(!!value)
+                          }
+                        >
+                          {column.id}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           </div>
         </div>
         <Table className="overflow-hidden mt-3">
diff --git a/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx b/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
index 3315fc3e..68f90688 100644
--- a/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
@@ -51,6 +51,7 @@ import { Link } from "@/i18n/routing";
 import useTableColumns from "./columns";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
@@ -187,8 +188,8 @@ const PressReleaseTable = () => {
               />
             </InputGroup>
           </div>
-          <div className="flex flex-row">
-            <div className="mx-3">
+          <div className="flex flex-row items-center gap-3">
+            <div className="">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button size="md" variant="outline">
@@ -259,6 +260,34 @@ const PressReleaseTable = () => {
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
+            <div className="flex items-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="ml-auto" size="md">
+                    Columns <ChevronDown />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {table
+                    .getAllColumns()
+                    .filter((column) => column.getCanHide())
+                    .map((column) => {
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={column.id}
+                          className="capitalize"
+                          checked={column.getIsVisible()}
+                          onCheckedChange={(value) =>
+                            column.toggleVisibility(!!value)
+                          }
+                        >
+                          {column.id}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           </div>
         </div>
         <Table className="overflow-hidden mt-3">
diff --git a/app/[locale]/(protected)/contributor/task-ta/upload-task/[id]/page.tsx b/app/[locale]/(protected)/contributor/task-ta/upload-task/[id]/page.tsx
index 96600bfe..5ee62efc 100644
--- a/app/[locale]/(protected)/contributor/task-ta/upload-task/[id]/page.tsx
+++ b/app/[locale]/(protected)/contributor/task-ta/upload-task/[id]/page.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 import FormTaskTa from "@/components/form/task-ta/task-ta-form";
-import FormTaskTaNew from "@/components/form/task-ta/task-ta-new";
+import FormTaskTaNew from "@/components/form/task-ta/task-ta-upload-form";
 
 const TaskTaUploadPage = () => {
   return (
diff --git a/app/[locale]/(protected)/contributor/task/components/task-table.tsx b/app/[locale]/(protected)/contributor/task/components/task-table.tsx
index 50b45411..fdd7be32 100644
--- a/app/[locale]/(protected)/contributor/task/components/task-table.tsx
+++ b/app/[locale]/(protected)/contributor/task/components/task-table.tsx
@@ -40,6 +40,7 @@ import {
 import { cn } from "@/lib/utils";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuRadioGroup,
@@ -338,6 +339,35 @@ const TaskTable = () => {
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
+
+          <div className="flex items-center py-4">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Columns <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
         {/* <div className="flex-none">
             <Input
diff --git a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx b/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
index fc30c0ca..49ed6524 100644
--- a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
+++ b/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Eye,
@@ -39,6 +40,7 @@ import {
 import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuRadioGroup,
@@ -177,32 +179,62 @@ const CollaborationTable = () => {
             />
           </InputGroup>
         </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button size="md" variant="outline">
-              1 - {showData} Data
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56 text-sm">
-            <DropdownMenuRadioGroup
-              value={showData}
-              onValueChange={setShowData}
-            >
-              <DropdownMenuRadioItem value="10">
-                1 - 10 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="20">
-                1 - 20 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="25">
-                1 - 25 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="50">
-                1 - 50 Data
-              </DropdownMenuRadioItem>
-            </DropdownMenuRadioGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <div className="flex flex-row items-center gap-3">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56 text-sm">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <div className="flex items-center">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Columns <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
       </div>
 
       <Table className="overflow-hidden mt-3">
diff --git a/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx b/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
index f0f369c0..a2d87137 100644
--- a/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
+++ b/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Eye,
@@ -39,6 +40,7 @@ import {
 import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuRadioGroup,
@@ -186,32 +188,62 @@ const EscalationTable = () => {
             />
           </InputGroup>
         </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button size="md" variant="outline">
-              1 - {showData} Data
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56 text-sm">
-            <DropdownMenuRadioGroup
-              value={showData}
-              onValueChange={setShowData}
-            >
-              <DropdownMenuRadioItem value="10">
-                1 - 10 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="20">
-                1 - 20 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="25">
-                1 - 25 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="50">
-                1 - 50 Data
-              </DropdownMenuRadioItem>
-            </DropdownMenuRadioGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <div className="flex flex-row items-center gap-3">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56 text-sm">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <div className="flex items-center">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Columns <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
       </div>
       <Table className="overflow-hidden mt-3">
         <TableHeader>
diff --git a/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx b/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
index 4f1ea31a..d7656e7d 100644
--- a/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
+++ b/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Eye,
@@ -40,6 +41,7 @@ import {
 import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuRadioGroup,
@@ -184,32 +186,62 @@ const InternalTable = () => {
             />
           </InputGroup>
         </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button size="md" variant="outline">
-              1 - {showData} Data
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56 text-sm">
-            <DropdownMenuRadioGroup
-              value={showData}
-              onValueChange={setShowData}
-            >
-              <DropdownMenuRadioItem value="10">
-                1 - 10 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="20">
-                1 - 20 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="25">
-                1 - 25 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="50">
-                1 - 50 Data
-              </DropdownMenuRadioItem>
-            </DropdownMenuRadioGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <div className="flex flex-row items-center gap-3">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56 text-sm">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <div className="flex items-center">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Columns <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
       </div>
       <Table className="overflow-hidden mt-3">
         <TableHeader>
diff --git a/app/[locale]/(protected)/shared/contest/components/contest-table.tsx b/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
index e6576478..80ef2fcc 100644
--- a/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
+++ b/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
@@ -46,6 +46,7 @@ import { listContest } from "@/service/contest/contest";
 import useTableColumns from "./columns";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
@@ -172,8 +173,8 @@ const TaskTable = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex flex-row">
-          <div className="mx-3">
+        <div className="flex flex-row items-center gap-3">
+          <div className="">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button size="md" variant="outline">
@@ -256,6 +257,34 @@ const TaskTable = () => {
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
+          <div className="flex items-center">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Columns <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
       </div>
       <Table className="overflow-hidden mt-3">
diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/[id]/page.tsx
new file mode 100644
index 00000000..a9b8c706
--- /dev/null
+++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/[id]/page.tsx
@@ -0,0 +1,19 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTaskTa from "@/components/form/task-ta/task-ta-form";
+import FormAskExpert from "@/components/form/shared/ask-expert-form";
+import FormDoItYourself from "@/components/form/shared/do-it-yourself-form";
+import FormAcceptAssignment from "@/components/form/shared/accept-assignment-form";
+
+const AcceptAssignmentPage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormAcceptAssignment />
+      </div>
+    </div>
+  );
+};
+
+export default AcceptAssignmentPage;
diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/ask-the-expert/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/ask-the-expert/[id]/page.tsx
new file mode 100644
index 00000000..9e117862
--- /dev/null
+++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/ask-the-expert/[id]/page.tsx
@@ -0,0 +1,17 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTaskTa from "@/components/form/task-ta/task-ta-form";
+import FormAskExpert from "@/components/form/shared/ask-expert-form";
+
+const AskExpertCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormAskExpert />
+      </div>
+    </div>
+  );
+};
+
+export default AskExpertCreatePage;
diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/do-it-yourself/[id]/page.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/do-it-yourself/[id]/page.tsx
new file mode 100644
index 00000000..20c56cb2
--- /dev/null
+++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/do-it-yourself/[id]/page.tsx
@@ -0,0 +1,18 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTaskTa from "@/components/form/task-ta/task-ta-form";
+import FormAskExpert from "@/components/form/shared/ask-expert-form";
+import FormDoItYourself from "@/components/form/shared/do-it-yourself-form";
+
+const DoItYourselfCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormDoItYourself />
+      </div>
+    </div>
+  );
+};
+
+export default DoItYourselfCreatePage;
diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx
index 5c392d42..7c1806da 100644
--- a/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx
+++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { Link } from "@/components/navigation";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
@@ -8,6 +9,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
+import { getCookiesDecrypt } from "@/lib/utils";
 import { listCuratedContent } from "@/service/curated-content/curated-content";
 
 import { formatDateToIndonesian } from "@/utils/globals";
@@ -26,6 +28,7 @@ type ImageData = {
 
 const ImageSliderPage = () => {
   const router = useRouter();
+  const roleId = Number(getCookiesDecrypt("urie")) || 0;
   const [imageData, setImageData] = useState<ImageData[]>([]);
   const [page, setPage] = useState(1);
   const [limit] = useState(10);
@@ -88,6 +91,40 @@ const ImageSliderPage = () => {
                           </div>
                         </CardContent>
                       </Link>
+                      {roleId === 11 && (
+                        <div className="flex flex-row justify-between mx-3 mb-3">
+                          <Link
+                            href={`/shared/curated-content/giat-routine/image/ask-the-expert/${image.id}`}
+                          >
+                            <Button color="primary" size="md">
+                              Ask The Expert
+                            </Button>
+                          </Link>
+                          <Link
+                            href={`/shared/curated-content/giat-routine/image/do-it-yourself/${image.id}`}
+                          >
+                            <Button color="primary" size="md">
+                              Do it Yourself
+                            </Button>
+                          </Link>
+                        </div>
+                      )}
+
+                      {roleId === 12 && (
+                        <div className="mx-3 mb-3">
+                          <Link
+                            href={`/shared/curated-content/giat-routine/image/accept-assignment/${image.id}`}
+                          >
+                            <Button
+                              className="w-full "
+                              color="primary"
+                              size="md"
+                            >
+                              Accept Assignment
+                            </Button>
+                          </Link>
+                        </div>
+                      )}
                     </Card>
                   </div>
                 </CarouselItem>
diff --git a/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx b/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx
index e897a481..a18b8c41 100644
--- a/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx
+++ b/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { Link } from "@/components/navigation";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 72fd5a5c..6184d823 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -17,7 +17,7 @@ import LoadScript from "@/utils/globals";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "created by codeshaper",
+  description: "",
 };
 
 export default async function RootLayout({
@@ -33,15 +33,24 @@ export default async function RootLayout({
     <html lang={locale} dir={direction}>
       <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
+          rel="stylesheet"
+        />
         <LoadScript />
       </head>
       <body className={`${inter.className} dashcode-app`}>
         <NextIntlClientProvider messages={messages} locale={locale}>
           <AuthProvider>
             <ThemeProvider attribute="class" defaultTheme="light">
-              <DirectionProvider direction={direction}>{children}</DirectionProvider>
+              <DirectionProvider direction={direction}>
+                {children}
+              </DirectionProvider>
               <Toaster />
               <SonnerToaster />
             </ThemeProvider>
diff --git a/components/form/shared/accept-assignment-form.tsx b/components/form/shared/accept-assignment-form.tsx
new file mode 100644
index 00000000..69527547
--- /dev/null
+++ b/components/form/shared/accept-assignment-form.tsx
@@ -0,0 +1,1013 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import JoditEditor from "jodit-react";
+import {
+  createTask,
+  createTaskTa,
+  getTask,
+  getUserLevelForAssignments,
+} from "@/service/task";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+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";
+import { error } from "@/config/swal";
+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";
+import { detailMedia } from "@/service/curated-content/curated-content";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  naration: z.string().min(2, {
+    message: "Narasi Penugasan harus lebih dari 2 karakter.",
+  }),
+  // url: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+export type taskDetail = {
+  id: number;
+  title: string;
+  fileTypeOutput: string;
+  assignedToTopLevel: string;
+  assignedToLevel: string;
+  assignmentType: {
+    id: number;
+    name: string;
+  };
+  assignmentMainType: {
+    id: number;
+    name: string;
+  };
+  attachmentUrl: string;
+  taskType: string;
+  broadcastType: string;
+  narration: string;
+  is_active: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormAcceptAssignment() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const { id } = useParams() as { id: string };
+  console.log(id);
+
+  // State for various form fields
+  const [expertise, setExpertiseOutput] = useState({
+    semua: false,
+    komunikasi: false,
+    hukum: false,
+    bahasa: false,
+    ekonomi: false,
+    politik: false,
+    sosiologi: false,
+    ilmuadministrasipemerintah: false,
+    ti: false,
+  });
+  const [expert, setExpertOutput] = useState({
+    semua: false,
+  });
+
+  // const [assignmentType, setAssignmentType] = useState("mediahub");
+  // const [assignmentCategory, setAssignmentCategory] = useState("publication");
+  const [mainType, setMainType] = useState<string>("1");
+  const [taskType, setTaskType] = useState<string>("atensi-khusus");
+  const [broadcastType, setBroadcastType] = useState<string>("");
+  const [type, setType] = useState<string>("1");
+  const [selectedTarget, setSelectedTarget] = useState("3,4");
+  const [detail, setDetail] = useState<taskDetail>();
+  const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]);
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [timer, setTimer] = useState<number>(120);
+
+  const t = useTranslations("Form");
+  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 [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({
+    semua: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+    satker: false,
+  });
+
+  const [taskOutput, setTaskOutput] = useState({
+    all: false,
+    video: false,
+    audio: false,
+    image: false,
+    text: false,
+  });
+
+  const [links, setLinks] = useState<string[]>([""]);
+
+  const {
+    register,
+    control,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+    mode: "all",
+  });
+
+  // const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const selectedValue = Number(event.target.value);
+  //   setMainType(selectedValue);
+
+  //   setPlatformTypeVisible(selectedValue === 2);
+
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response?.data?.data.list);
+        console.log("polda", response?.data?.data?.list);
+        const initialExpandedState = response?.data?.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  // };
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
+  const handleUnitChange = (
+    key: keyof typeof unitSelection,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        mabes: value,
+        polda: value,
+        polres: value,
+        satker: value,
+      };
+      setUnitSelection(newState);
+    } else {
+      const updatedSelection = {
+        ...unitSelection,
+        [key]: value,
+      };
+
+      const allChecked = ["mabes", "polda", "polres", "satker"].every(
+        (k) => updatedSelection[k as keyof typeof unitSelection]
+      );
+
+      updatedSelection.semua = allChecked;
+
+      setUnitSelection(updatedSelection);
+    }
+  };
+
+  const handleExpertiseOutputChange = (
+    key: keyof typeof expertise,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        komunikasi: value,
+        hukum: value,
+        bahasa: value,
+        ekonomi: value,
+        politik: value,
+        sosiologi: value,
+        ilmuadministrasipemerintah: value,
+        ti: value,
+      };
+      setExpertiseOutput(newState);
+    } else {
+      const updated = {
+        ...expertise,
+        [key]: value,
+      };
+
+      const allChecked = ["video", "audio", "image", "text"].every(
+        (k) => updated[k as keyof typeof expertise]
+      );
+
+      updated.semua = allChecked;
+      setExpertiseOutput(updated);
+    }
+  };
+
+  const handleExpertOutputChange = (
+    key: keyof typeof expert,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+      };
+      setExpertOutput(newState);
+    } else {
+      const updated = {
+        ...expert,
+        [key]: value,
+      };
+
+      const allChecked = ["video", "audio", "image", "text"].every(
+        (k) => updated[k as keyof typeof expert]
+      );
+
+      updated.semua = allChecked;
+      setExpertOutput(updated);
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+      }
+    }
+    initState();
+  }, [id, refresh]);
+
+  const handleTaskOutputChange = (
+    key: keyof typeof taskOutput,
+    value: boolean
+  ) => {
+    if (key === "all") {
+      const newState = {
+        all: value,
+        video: value,
+        audio: value,
+        image: value,
+        text: value,
+      };
+      setTaskOutput(newState);
+    } else {
+      const updated = {
+        ...taskOutput,
+        [key]: value,
+      };
+
+      const allChecked = ["video", "audio", "image", "text"].every(
+        (k) => updated[k as keyof typeof taskOutput]
+      );
+
+      updated.all = allChecked;
+      setTaskOutput(updated);
+    }
+  };
+
+  const save = async (data: TaskSchema) => {
+    const fileTypeMapping = {
+      all: "1",
+      video: "2",
+      audio: "4",
+      image: "3",
+      text: "5",
+    };
+
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+      satker: "4",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+
+    const selectedOutputs = Object.keys(taskOutput)
+      .filter((key) => taskOutput[key as keyof typeof taskOutput])
+      .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
+      .join(",");
+
+    const requestData: {
+      id?: number;
+      title: string;
+      assignedToLevel: any;
+      assignedToUsers: any;
+      assignmentTypeId: string;
+      fileTypeOutput: string;
+      narration: string;
+      platformType: string | null;
+      assignmentMainTypeId: any;
+      assignmentType: string;
+      assignedToRole: string;
+      broadcastType: string;
+      expertCompetencies: string;
+      attachmentUrl: string[];
+    } = {
+      ...data,
+      // assignmentType,
+      // assignmentCategory,
+      assignedToLevel: handlePoldaPolresChange(),
+      assignedToUsers: assignmentPurposeString,
+      assignedToRole: selectedTarget,
+      assignmentType: taskType,
+      broadcastType: broadcastType,
+      assignmentMainTypeId: mainType,
+      assignmentTypeId: type,
+      fileTypeOutput: selectedOutputs,
+      narration: data.naration,
+      platformType: "",
+      expertCompetencies: "1,2,3",
+      title: data.title,
+      attachmentUrl: links,
+    };
+
+    const response = await createTaskTa(requestData);
+
+    console.log("Form Data Submitted:", requestData);
+    console.log("response", response);
+
+    const id = response?.data?.data.id;
+    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
+      );
+    });
+  };
+
+  const onSubmit = (data: TaskSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
+  const onRecordingStart = () => {
+    setIsRecording(true);
+
+    const countdown = setInterval(() => {
+      setTimer((prevTimer) => {
+        if (prevTimer <= 1) {
+          clearInterval(countdown);
+          return 0;
+        }
+        return prevTimer - 1;
+      });
+    }, 1000);
+
+    setTimeout(() => {
+      if (isRecording) {
+        handleStopRecording();
+      }
+    }, 120000);
+  };
+
+  const handleStopRecording = () => {
+    setIsRecording(false);
+    setTimer(120); // Reset the timer to 2 minutes for the next recording
+  };
+
+  const addAudioElement = (blob: Blob) => {
+    const url = URL.createObjectURL(blob);
+    const audio = document.createElement("audio");
+    audio.src = url;
+    audio.controls = true;
+    document.body.appendChild(audio);
+
+    // Convert Blob to File and add preview
+    const fileWithPreview: FileWithPreview = Object.assign(
+      new File([blob], "voiceNote.webm", { type: "audio/webm" }),
+      { preview: url }
+    );
+
+    // Add to state
+    setAudioFile(fileWithPreview);
+    setAudioFiles((prev) => [...prev, fileWithPreview]);
+  };
+
+  const handleDeleteAudio = (index: number) => {
+    setAudioFiles((prev) => prev.filter((_, idx) => idx !== index));
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    fileTypeId: string,
+    duration: string
+  ) {
+    console.log(idx, id, file, fileTypeId, duration);
+
+    const resCsrf = await getCsrfToken();
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken,
+    };
+
+    const upload = new Upload(file, {
+      endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        assignmentId: id,
+        filename: file.name,
+        contentType: file.type,
+        fileTypeId: fileTypeId,
+        duration,
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        // progressInfo[idx].percentage = uploadPersen;
+        // counterUpdateProgress++;
+        // console.log(counterUpdateProgress);
+        // setProgressList(progressInfo);
+        // setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        // uploadPersen = 100;
+        // progressInfo[idx].percentage = 100;
+        // counterUpdateProgress++;
+        // setCounterProgress(counterUpdateProgress);
+        successTodo();
+        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",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  const handleLinkChange = (index: number, value: string) => {
+    const updatedLinks = [...links];
+    updatedLinks[index] = value;
+    setLinks(updatedLinks);
+  };
+
+  const handleAddRow = () => {
+    setLinks([...links, ""]);
+  };
+
+  // Remove a specific link row
+  const handleRemoveRow = (index: number) => {
+    const updatedLinks = links.filter((_: any, i: any) => i !== index);
+    setLinks(updatedLinks);
+  };
+
+  return (
+    <Card>
+      <div className="px-6 py-6">
+        <p className="text-lg font-semibold mb-3">{t("form-task")}</p>
+        {detail !== undefined ? (
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2">
+                <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="mt-5 space-y-2">
+                <Label>{t("output-task")}</Label>
+                <div className="flex flex-wrap gap-4">
+                  {Object.keys(taskOutput).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={taskOutput[key as keyof typeof taskOutput]}
+                        onCheckedChange={(value) =>
+                          handleTaskOutputChange(
+                            key as keyof typeof taskOutput,
+                            value as boolean
+                          )
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="mt-5 space-y-2">
+                <Label>{t("assignment-selection")}</Label>
+                <div className="flex flex-wrap gap-3 ">
+                  {Object.keys(unitSelection).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={
+                          unitSelection[key as keyof typeof unitSelection]
+                        }
+                        onCheckedChange={(value) =>
+                          handleUnitChange(
+                            key as keyof typeof unitSelection,
+                            value as boolean
+                          )
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                  <div className=" lg:pl-3">
+                    <Dialog>
+                      <DialogTrigger asChild>
+                        <Button variant="soft" size="sm" color="primary">
+                          [{t("custom")}]
+                        </Button>
+                      </DialogTrigger>
+                      <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                        <DialogHeader>
+                          <DialogTitle>
+                            Daftar Wilayah Polda dan Polres
+                          </DialogTitle>
+                        </DialogHeader>
+                        <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                          {listDest.map((polda: any) => (
+                            <div key={polda.id} className="border p-2">
+                              <Label className="flex items-center">
+                                <Checkbox
+                                  checked={checkedLevels.has(polda.id)}
+                                  onCheckedChange={() =>
+                                    handleCheckboxChange(polda.id)
+                                  }
+                                  className="mr-3"
+                                />
+                                {polda.name}
+                                <button
+                                  onClick={() => toggleExpand(polda.id)}
+                                  className="ml-2 focus:outline-none"
+                                >
+                                  {expandedPolda[polda.id] ? (
+                                    <ChevronUp size={16} />
+                                  ) : (
+                                    <ChevronDown size={16} />
+                                  )}
+                                </button>
+                              </Label>
+                              {expandedPolda[polda.id] && (
+                                <div className="ml-6 mt-2">
+                                  <Label className="block">
+                                    <Checkbox
+                                      checked={polda?.subDestination?.every(
+                                        (polres: any) =>
+                                          checkedLevels.has(polres.id)
+                                      )}
+                                      onCheckedChange={(isChecked) => {
+                                        const updatedLevels = new Set(
+                                          checkedLevels
+                                        );
+                                        polda?.subDestination?.forEach(
+                                          (polres: any) => {
+                                            if (isChecked) {
+                                              updatedLevels.add(polres.id);
+                                            } else {
+                                              updatedLevels.delete(polres.id);
+                                            }
+                                          }
+                                        );
+                                        setCheckedLevels(updatedLevels);
+                                      }}
+                                      className="mr-2"
+                                    />
+                                    Pilih Semua Polres
+                                  </Label>
+                                  {polda?.subDestination?.map((polres: any) => (
+                                    <Label
+                                      key={polres.id}
+                                      className="block mt-1"
+                                    >
+                                      <Checkbox
+                                        checked={checkedLevels.has(polres.id)}
+                                        onCheckedChange={() =>
+                                          handleCheckboxChange(polres.id)
+                                        }
+                                        className="mr-2"
+                                      />
+                                      {polres.name}
+                                    </Label>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      </DialogContent>
+                    </Dialog>
+                  </div>
+                </div>
+              </div>
+              <div className="mt-5 space-y-2">
+                <Label>{t("type-of-task")}</Label>
+                <RadioGroup
+                  value={type} // State yang dipetakan ke value RadioGroup
+                  onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
+                  className="flex flex-wrap gap-3"
+                >
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="1" id="publication" />
+                    <Label htmlFor="publication">Publikasi</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="2" id="amplification" />
+                    <Label htmlFor="amplification">Amplifikasi</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="3" id="contra" />
+                    <Label htmlFor="contra">Kontra</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+              <div className="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("description")}</Label>
+                <Controller
+                  control={control}
+                  name="naration"
+                  render={({ field: { onChange, value } }) => (
+                    <CustomEditor onChange={onChange} initialData={value} />
+                  )}
+                />
+                {errors.naration?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.naration.message}
+                  </p>
+                )}
+              </div>
+              <div className="space-y-2.5 mt-5">
+                <Label htmlFor="attachments">{t("attachment")}</Label>
+                <div className="space-y-3">
+                  <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>
+                  <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>
+                  <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>
+                  <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>
+                  {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>}{" "}
+                  {/* Display remaining time */}
+                  <div className="mt-4 space-y-2">
+                    <Label className="">{t("news-links")}</Label>
+                    {links.map((link, index) => (
+                      <div key={index} className="flex items-center gap-2 mt-2">
+                        <Input
+                          type="url"
+                          className="border rounded p-2 w-full"
+                          placeholder={`Masukkan link berita ${index + 1}`}
+                          value={link}
+                          onChange={(e) =>
+                            handleLinkChange(index, e.target.value)
+                          }
+                        />
+                        {links.length > 1 && (
+                          <button
+                            type="button"
+                            className="bg-red-500 text-white px-3 py-1 rounded"
+                            onClick={() => handleRemoveRow(index)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                    <Button
+                      type="button"
+                      className="mt-2 bg-blue-500 text-white px-4 py-2 rounded"
+                      onClick={handleAddRow}
+                      size="sm"
+                    >
+                      {t("add-links")}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                {t("submit")}
+              </Button>
+            </div>
+          </form>
+        ) : (
+          ""
+        )}
+      </div>
+    </Card>
+  );
+}
diff --git a/components/form/shared/ask-expert-form.tsx b/components/form/shared/ask-expert-form.tsx
new file mode 100644
index 00000000..1583813d
--- /dev/null
+++ b/components/form/shared/ask-expert-form.tsx
@@ -0,0 +1,952 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import JoditEditor from "jodit-react";
+import {
+  createTask,
+  createTaskTa,
+  getTask,
+  getUserLevelForAssignments,
+} from "@/service/task";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+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";
+import { error } from "@/config/swal";
+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";
+import { detailMedia } from "@/service/curated-content/curated-content";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  naration: z.string().min(2, {
+    message: "Narasi Penugasan harus lebih dari 2 karakter.",
+  }),
+  // url: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+export type taskDetail = {
+  id: number;
+  title: string;
+  fileTypeOutput: string;
+  assignedToTopLevel: string;
+  assignedToLevel: string;
+  assignmentType: {
+    id: number;
+    name: string;
+  };
+  assignmentMainType: {
+    id: number;
+    name: string;
+  };
+  attachmentUrl: string;
+  taskType: string;
+  broadcastType: string;
+  narration: string;
+  is_active: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormAskExpert() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const { id } = useParams() as { id: string };
+  console.log(id);
+
+  // State for various form fields
+  const [expertise, setExpertiseOutput] = useState({
+    semua: false,
+    komunikasi: false,
+    hukum: false,
+    bahasa: false,
+    ekonomi: false,
+    politik: false,
+    sosiologi: false,
+    ilmuadministrasipemerintah: false,
+    ti: false,
+  });
+  const [expert, setExpertOutput] = useState({
+    semua: false,
+  });
+
+  // const [assignmentType, setAssignmentType] = useState("mediahub");
+  // const [assignmentCategory, setAssignmentCategory] = useState("publication");
+  const [mainType, setMainType] = useState<string>("1");
+  const [taskType, setTaskType] = useState<string>("atensi-khusus");
+  const [broadcastType, setBroadcastType] = useState<string>("");
+  const [type, setType] = useState<string>("1");
+  const [selectedTarget, setSelectedTarget] = useState("3,4");
+  const [detail, setDetail] = useState<taskDetail>();
+  const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]);
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [timer, setTimer] = useState<number>(120);
+
+  const t = useTranslations("Form");
+  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 [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({
+    semua: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+    satker: false,
+  });
+  const [taskOutput, setTaskOutput] = useState({
+    all: false,
+    video: false,
+    audio: false,
+    image: false,
+    text: false,
+  });
+  const [links, setLinks] = useState<string[]>([""]);
+
+  const {
+    register,
+    control,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+    mode: "all",
+  });
+
+  // const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const selectedValue = Number(event.target.value);
+  //   setMainType(selectedValue);
+
+  //   setPlatformTypeVisible(selectedValue === 2);
+
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response?.data?.data.list);
+        console.log("polda", response?.data?.data?.list);
+        const initialExpandedState = response?.data?.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  // };
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
+  const handleUnitChange = (
+    key: keyof typeof unitSelection,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        mabes: value,
+        polda: value,
+        polres: value,
+        satker: value,
+      };
+      setUnitSelection(newState);
+    } else {
+      const updatedSelection = {
+        ...unitSelection,
+        [key]: value,
+      };
+
+      const allChecked = ["mabes", "polda", "polres", "satker"].every(
+        (k) => updatedSelection[k as keyof typeof unitSelection]
+      );
+
+      updatedSelection.semua = allChecked;
+
+      setUnitSelection(updatedSelection);
+    }
+  };
+
+  const handleExpertiseOutputChange = (
+    key: keyof typeof expertise,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        komunikasi: value,
+        hukum: value,
+        bahasa: value,
+        ekonomi: value,
+        politik: value,
+        sosiologi: value,
+        ilmuadministrasipemerintah: value,
+        ti: value,
+      };
+      setExpertiseOutput(newState);
+    } else {
+      const updated = {
+        ...expertise,
+        [key]: value,
+      };
+
+      const allChecked = [
+        "komunikasi",
+        "hukum",
+        "bahasa",
+        "ekonomi",
+        "politik",
+        "sosiologi",
+        "ilmuadministrasipemerintah",
+        "ti",
+      ].every((k) => updated[k as keyof typeof expertise]);
+
+      updated.semua = allChecked;
+      setExpertiseOutput(updated);
+    }
+  };
+
+  const handleExpertOutputChange = (
+    key: keyof typeof expert,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+      };
+      setExpertOutput(newState);
+    } else {
+      const updated = {
+        ...expert,
+        [key]: value,
+      };
+
+      const allChecked = ["video", "audio", "image", "text"].every(
+        (k) => updated[k as keyof typeof expert]
+      );
+
+      updated.semua = allChecked;
+      setExpertOutput(updated);
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+      }
+    }
+    initState();
+  }, [id, refresh]);
+
+  const handleTaskOutputChange = (
+    key: keyof typeof taskOutput,
+    value: boolean
+  ) => {
+    if (key === "all") {
+      const newState = {
+        all: value,
+        video: value,
+        audio: value,
+        image: value,
+        text: value,
+      };
+      setTaskOutput(newState);
+    } else {
+      const updated = {
+        ...taskOutput,
+        [key]: value,
+      };
+
+      const allChecked = ["video", "audio", "image", "text"].every(
+        (k) => updated[k as keyof typeof taskOutput]
+      );
+
+      updated.all = allChecked;
+      setTaskOutput(updated);
+    }
+  };
+
+  const save = async (data: TaskSchema) => {
+    const fileTypeMapping = {
+      all: "1",
+      video: "2",
+      audio: "4",
+      image: "3",
+      text: "5",
+    };
+
+    const areasMapping = {
+      semua: "0",
+      komunikasi: "1",
+      hukum: "2",
+      bahasa: "3",
+      ekonomi: "4",
+      politik: "5",
+      sosiologi: "6",
+      ilmuadministrasipemerintah: "7",
+      ti: "8",
+    };
+
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+      satker: "4",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+
+    const selectedOutputs = Object.keys(taskOutput)
+      .filter((key) => taskOutput[key as keyof typeof taskOutput])
+      .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
+      .join(",");
+
+    const selectedAreaExpert = Object.keys(expertise)
+      .filter((key) => expertise[key as keyof typeof expertise])
+      .map((key) => areasMapping[key as keyof typeof areasMapping])
+      .join(",");
+
+    const requestData: {
+      id?: number;
+      title: string;
+      assignedToLevel: any;
+      assignedToUsers: any;
+      assignmentTypeId: string;
+      fileTypeOutput: string;
+      areasExpertise: string;
+      narration: string;
+      platformType: string | null;
+      assignmentMainTypeId: any;
+      assignmentType: string;
+      assignedToRole: string;
+      broadcastType: string;
+      expertCompetencies: string;
+      attachmentUrl: string[];
+    } = {
+      ...data,
+      // assignmentType,
+      // assignmentCategory,
+      assignedToLevel: handlePoldaPolresChange(),
+      assignedToUsers: assignmentPurposeString,
+      assignedToRole: selectedTarget,
+      assignmentType: taskType,
+      broadcastType: broadcastType,
+      assignmentMainTypeId: mainType,
+      areasExpertise: selectedAreaExpert,
+      assignmentTypeId: type,
+      fileTypeOutput: selectedOutputs,
+      narration: data.naration,
+      platformType: "",
+      expertCompetencies: "1,2,3",
+      title: data.title,
+      attachmentUrl: links,
+    };
+
+    const response = await createTaskTa(requestData);
+
+    console.log("Form Data Submitted:", requestData);
+    console.log("response", response);
+
+    const id = response?.data?.data.id;
+    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
+      );
+    });
+  };
+
+  const onSubmit = (data: TaskSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
+  const onRecordingStart = () => {
+    setIsRecording(true);
+
+    const countdown = setInterval(() => {
+      setTimer((prevTimer) => {
+        if (prevTimer <= 1) {
+          clearInterval(countdown);
+          return 0;
+        }
+        return prevTimer - 1;
+      });
+    }, 1000);
+
+    setTimeout(() => {
+      if (isRecording) {
+        handleStopRecording();
+      }
+    }, 120000);
+  };
+
+  const handleStopRecording = () => {
+    setIsRecording(false);
+    setTimer(120);
+  };
+
+  const addAudioElement = (blob: Blob) => {
+    const url = URL.createObjectURL(blob);
+    const audio = document.createElement("audio");
+    audio.src = url;
+    audio.controls = true;
+    document.body.appendChild(audio);
+
+    // Convert Blob to File and add preview
+    const fileWithPreview: FileWithPreview = Object.assign(
+      new File([blob], "voiceNote.webm", { type: "audio/webm" }),
+      { preview: url }
+    );
+
+    // Add to state
+    setAudioFile(fileWithPreview);
+    setAudioFiles((prev) => [...prev, fileWithPreview]);
+  };
+
+  const handleDeleteAudio = (index: number) => {
+    setAudioFiles((prev) => prev.filter((_, idx) => idx !== index));
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    fileTypeId: string,
+    duration: string
+  ) {
+    console.log(idx, id, file, fileTypeId, duration);
+
+    const resCsrf = await getCsrfToken();
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken,
+    };
+
+    const upload = new Upload(file, {
+      endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        assignmentId: id,
+        filename: file.name,
+        contentType: file.type,
+        fileTypeId: fileTypeId,
+        duration,
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        // progressInfo[idx].percentage = uploadPersen;
+        // counterUpdateProgress++;
+        // console.log(counterUpdateProgress);
+        // setProgressList(progressInfo);
+        // setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        // uploadPersen = 100;
+        // progressInfo[idx].percentage = 100;
+        // counterUpdateProgress++;
+        // setCounterProgress(counterUpdateProgress);
+        successTodo();
+        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",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  const handleLinkChange = (index: number, value: string) => {
+    const updatedLinks = [...links];
+    updatedLinks[index] = value;
+    setLinks(updatedLinks);
+  };
+
+  const handleAddRow = () => {
+    setLinks([...links, ""]);
+  };
+
+  // Remove a specific link row
+  const handleRemoveRow = (index: number) => {
+    const updatedLinks = links.filter((_: any, i: any) => i !== index);
+    setLinks(updatedLinks);
+  };
+
+  return (
+    <Card>
+      <div className="px-6 py-6">
+        <p className="text-lg font-semibold mb-3">{t("form-task")}</p>
+        {detail !== undefined ? (
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2">
+                <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="mt-5">
+                <Label>Ditujukan Kepada :</Label>
+              </div>
+              <div className=" space-y-2">
+                <Label>{t("areas-expertise")}</Label>
+                <div className="flex flex-wrap gap-4">
+                  {Object.keys(expertise).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={expertise[key as keyof typeof expertise]}
+                        onCheckedChange={(value) =>
+                          handleExpertiseOutputChange(
+                            key as keyof typeof expertise,
+                            value as boolean
+                          )
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="mt-5 space-y-2">
+                <Label>{t("choose-expert")}</Label>
+                <div className="flex flex-wrap gap-4">
+                  {Object.keys(expert).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={expert[key as keyof typeof expert]}
+                        onCheckedChange={(value) =>
+                          handleExpertOutputChange(
+                            key as keyof typeof expert,
+                            value as boolean
+                          )
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </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("output-task")}</Label>
+                <div className="flex flex-wrap gap-4">
+                  {Object.keys(taskOutput).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={taskOutput[key as keyof typeof taskOutput]}
+                        onCheckedChange={(value) =>
+                          handleTaskOutputChange(
+                            key as keyof typeof taskOutput,
+                            value as boolean
+                          )
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="mt-5 space-y-2">
+                <Label>{t("description")}</Label>
+                <Controller
+                  control={control}
+                  name="naration"
+                  render={({ field: { onChange, value } }) => (
+                    <CustomEditor onChange={onChange} initialData={value} />
+                  )}
+                />
+                {errors.naration?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.naration.message}
+                  </p>
+                )}
+              </div>
+              <div className="space-y-2.5 mt-5">
+                <Label htmlFor="attachments">{t("attachment")}</Label>
+                <div className="space-y-3">
+                  <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>
+                  <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>
+                  <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>
+                  <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>
+                  {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>}{" "}
+                  {/* Display remaining time */}
+                  <div className="mt-4 space-y-2">
+                    <Label className="">{t("news-links")}</Label>
+                    {links.map((link, index) => (
+                      <div key={index} className="flex items-center gap-2 mt-2">
+                        <Input
+                          type="url"
+                          className="border rounded p-2 w-full"
+                          placeholder={`Masukkan link berita ${index + 1}`}
+                          value={link}
+                          onChange={(e) =>
+                            handleLinkChange(index, e.target.value)
+                          }
+                        />
+                        {links.length > 1 && (
+                          <button
+                            type="button"
+                            className="bg-red-500 text-white px-3 py-1 rounded"
+                            onClick={() => handleRemoveRow(index)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                    <Button
+                      type="button"
+                      className="mt-2 bg-blue-500 text-white px-4 py-2 rounded"
+                      onClick={handleAddRow}
+                      size="sm"
+                    >
+                      {t("add-links")}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                {t("submit")}
+              </Button>
+            </div>
+          </form>
+        ) : (
+          ""
+        )}
+      </div>
+    </Card>
+  );
+}
diff --git a/components/form/shared/do-it-yourself-form.tsx b/components/form/shared/do-it-yourself-form.tsx
new file mode 100644
index 00000000..cdf21929
--- /dev/null
+++ b/components/form/shared/do-it-yourself-form.tsx
@@ -0,0 +1,1013 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { useParams, useRouter } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import JoditEditor from "jodit-react";
+import {
+  createTask,
+  createTaskTa,
+  getTask,
+  getUserLevelForAssignments,
+} from "@/service/task";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+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";
+import { error } from "@/config/swal";
+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";
+import { detailMedia } from "@/service/curated-content/curated-content";
+
+const taskSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  naration: z.string().min(2, {
+    message: "Narasi Penugasan harus lebih dari 2 karakter.",
+  }),
+  // url: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+export type taskDetail = {
+  id: number;
+  title: string;
+  fileTypeOutput: string;
+  assignedToTopLevel: string;
+  assignedToLevel: string;
+  assignmentType: {
+    id: number;
+    name: string;
+  };
+  assignmentMainType: {
+    id: number;
+    name: string;
+  };
+  attachmentUrl: string;
+  taskType: string;
+  broadcastType: string;
+  narration: string;
+  is_active: string;
+};
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
+
+export default function FormDoItYourself() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const editor = useRef(null);
+  type TaskSchema = z.infer<typeof taskSchema>;
+  const { id } = useParams() as { id: string };
+  console.log(id);
+
+  // State for various form fields
+  const [expertise, setExpertiseOutput] = useState({
+    semua: false,
+    komunikasi: false,
+    hukum: false,
+    bahasa: false,
+    ekonomi: false,
+    politik: false,
+    sosiologi: false,
+    ilmuadministrasipemerintah: false,
+    ti: false,
+  });
+  const [expert, setExpertOutput] = useState({
+    semua: false,
+  });
+
+  // const [assignmentType, setAssignmentType] = useState("mediahub");
+  // const [assignmentCategory, setAssignmentCategory] = useState("publication");
+  const [mainType, setMainType] = useState<string>("1");
+  const [taskType, setTaskType] = useState<string>("atensi-khusus");
+  const [broadcastType, setBroadcastType] = useState<string>("");
+  const [type, setType] = useState<string>("1");
+  const [selectedTarget, setSelectedTarget] = useState("3,4");
+  const [detail, setDetail] = useState<taskDetail>();
+  const [refresh] = useState(false);
+  const [listDest, setListDest] = useState([]);
+  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [expandedPolda, setExpandedPolda] = useState([{}]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [timer, setTimer] = useState<number>(120);
+
+  const t = useTranslations("Form");
+  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 [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({
+    semua: false,
+    mabes: false,
+    polda: false,
+    polres: false,
+    satker: false,
+  });
+
+  const [taskOutput, setTaskOutput] = useState({
+    all: false,
+    video: false,
+    audio: false,
+    image: false,
+    text: false,
+  });
+
+  const [links, setLinks] = useState<string[]>([""]);
+
+  const {
+    register,
+    control,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TaskSchema>({
+    resolver: zodResolver(taskSchema),
+    mode: "all",
+  });
+
+  // const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const selectedValue = Number(event.target.value);
+  //   setMainType(selectedValue);
+
+  //   setPlatformTypeVisible(selectedValue === 2);
+
+  useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response?.data?.data.list);
+        console.log("polda", response?.data?.data?.list);
+        const initialExpandedState = response?.data?.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  // };
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
+  const handleUnitChange = (
+    key: keyof typeof unitSelection,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        mabes: value,
+        polda: value,
+        polres: value,
+        satker: value,
+      };
+      setUnitSelection(newState);
+    } else {
+      const updatedSelection = {
+        ...unitSelection,
+        [key]: value,
+      };
+
+      const allChecked = ["mabes", "polda", "polres", "satker"].every(
+        (k) => updatedSelection[k as keyof typeof unitSelection]
+      );
+
+      updatedSelection.semua = allChecked;
+
+      setUnitSelection(updatedSelection);
+    }
+  };
+
+  const handleExpertiseOutputChange = (
+    key: keyof typeof expertise,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        komunikasi: value,
+        hukum: value,
+        bahasa: value,
+        ekonomi: value,
+        politik: value,
+        sosiologi: value,
+        ilmuadministrasipemerintah: value,
+        ti: value,
+      };
+      setExpertiseOutput(newState);
+    } else {
+      const updated = {
+        ...expertise,
+        [key]: value,
+      };
+
+      const allChecked = ["video", "audio", "image", "text"].every(
+        (k) => updated[k as keyof typeof expertise]
+      );
+
+      updated.semua = allChecked;
+      setExpertiseOutput(updated);
+    }
+  };
+
+  const handleExpertOutputChange = (
+    key: keyof typeof expert,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+      };
+      setExpertOutput(newState);
+    } else {
+      const updated = {
+        ...expert,
+        [key]: value,
+      };
+
+      const allChecked = ["video", "audio", "image", "text"].every(
+        (k) => updated[k as keyof typeof expert]
+      );
+
+      updated.semua = allChecked;
+      setExpertOutput(updated);
+    }
+  };
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailMedia(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+      }
+    }
+    initState();
+  }, [id, refresh]);
+
+  const handleTaskOutputChange = (
+    key: keyof typeof taskOutput,
+    value: boolean
+  ) => {
+    if (key === "all") {
+      const newState = {
+        all: value,
+        video: value,
+        audio: value,
+        image: value,
+        text: value,
+      };
+      setTaskOutput(newState);
+    } else {
+      const updated = {
+        ...taskOutput,
+        [key]: value,
+      };
+
+      const allChecked = ["video", "audio", "image", "text"].every(
+        (k) => updated[k as keyof typeof taskOutput]
+      );
+
+      updated.all = allChecked;
+      setTaskOutput(updated);
+    }
+  };
+
+  const save = async (data: TaskSchema) => {
+    const fileTypeMapping = {
+      all: "1",
+      video: "2",
+      audio: "4",
+      image: "3",
+      text: "5",
+    };
+
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      polres: "3",
+      satker: "4",
+    };
+    const assignmentPurposeString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+
+    const selectedOutputs = Object.keys(taskOutput)
+      .filter((key) => taskOutput[key as keyof typeof taskOutput])
+      .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
+      .join(",");
+
+    const requestData: {
+      id?: number;
+      title: string;
+      assignedToLevel: any;
+      assignedToUsers: any;
+      assignmentTypeId: string;
+      fileTypeOutput: string;
+      narration: string;
+      platformType: string | null;
+      assignmentMainTypeId: any;
+      assignmentType: string;
+      assignedToRole: string;
+      broadcastType: string;
+      expertCompetencies: string;
+      attachmentUrl: string[];
+    } = {
+      ...data,
+      // assignmentType,
+      // assignmentCategory,
+      assignedToLevel: handlePoldaPolresChange(),
+      assignedToUsers: assignmentPurposeString,
+      assignedToRole: selectedTarget,
+      assignmentType: taskType,
+      broadcastType: broadcastType,
+      assignmentMainTypeId: mainType,
+      assignmentTypeId: type,
+      fileTypeOutput: selectedOutputs,
+      narration: data.naration,
+      platformType: "",
+      expertCompetencies: "1,2,3",
+      title: data.title,
+      attachmentUrl: links,
+    };
+
+    const response = await createTaskTa(requestData);
+
+    console.log("Form Data Submitted:", requestData);
+    console.log("response", response);
+
+    const id = response?.data?.data.id;
+    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
+      );
+    });
+  };
+
+  const onSubmit = (data: TaskSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
+  const onRecordingStart = () => {
+    setIsRecording(true);
+
+    const countdown = setInterval(() => {
+      setTimer((prevTimer) => {
+        if (prevTimer <= 1) {
+          clearInterval(countdown);
+          return 0;
+        }
+        return prevTimer - 1;
+      });
+    }, 1000);
+
+    setTimeout(() => {
+      if (isRecording) {
+        handleStopRecording();
+      }
+    }, 120000);
+  };
+
+  const handleStopRecording = () => {
+    setIsRecording(false);
+    setTimer(120); // Reset the timer to 2 minutes for the next recording
+  };
+
+  const addAudioElement = (blob: Blob) => {
+    const url = URL.createObjectURL(blob);
+    const audio = document.createElement("audio");
+    audio.src = url;
+    audio.controls = true;
+    document.body.appendChild(audio);
+
+    // Convert Blob to File and add preview
+    const fileWithPreview: FileWithPreview = Object.assign(
+      new File([blob], "voiceNote.webm", { type: "audio/webm" }),
+      { preview: url }
+    );
+
+    // Add to state
+    setAudioFile(fileWithPreview);
+    setAudioFiles((prev) => [...prev, fileWithPreview]);
+  };
+
+  const handleDeleteAudio = (index: number) => {
+    setAudioFiles((prev) => prev.filter((_, idx) => idx !== index));
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    fileTypeId: string,
+    duration: string
+  ) {
+    console.log(idx, id, file, fileTypeId, duration);
+
+    const resCsrf = await getCsrfToken();
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken,
+    };
+
+    const upload = new Upload(file, {
+      endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        assignmentId: id,
+        filename: file.name,
+        contentType: file.type,
+        fileTypeId: fileTypeId,
+        duration,
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        // progressInfo[idx].percentage = uploadPersen;
+        // counterUpdateProgress++;
+        // console.log(counterUpdateProgress);
+        // setProgressList(progressInfo);
+        // setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        // uploadPersen = 100;
+        // progressInfo[idx].percentage = 100;
+        // counterUpdateProgress++;
+        // setCounterProgress(counterUpdateProgress);
+        successTodo();
+        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",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  const handleLinkChange = (index: number, value: string) => {
+    const updatedLinks = [...links];
+    updatedLinks[index] = value;
+    setLinks(updatedLinks);
+  };
+
+  const handleAddRow = () => {
+    setLinks([...links, ""]);
+  };
+
+  // Remove a specific link row
+  const handleRemoveRow = (index: number) => {
+    const updatedLinks = links.filter((_: any, i: any) => i !== index);
+    setLinks(updatedLinks);
+  };
+
+  return (
+    <Card>
+      <div className="px-6 py-6">
+        <p className="text-lg font-semibold mb-3">{t("form-task")}</p>
+        {detail !== undefined ? (
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="gap-5 mb-5">
+              {/* Input Title */}
+              <div className="space-y-2">
+                <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="mt-5 space-y-2">
+                <Label>{t("output-task")}</Label>
+                <div className="flex flex-wrap gap-4">
+                  {Object.keys(taskOutput).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={taskOutput[key as keyof typeof taskOutput]}
+                        onCheckedChange={(value) =>
+                          handleTaskOutputChange(
+                            key as keyof typeof taskOutput,
+                            value as boolean
+                          )
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="mt-5 space-y-2">
+                <Label>{t("assignment-selection")}</Label>
+                <div className="flex flex-wrap gap-3 ">
+                  {Object.keys(unitSelection).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={
+                          unitSelection[key as keyof typeof unitSelection]
+                        }
+                        onCheckedChange={(value) =>
+                          handleUnitChange(
+                            key as keyof typeof unitSelection,
+                            value as boolean
+                          )
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                  <div className=" lg:pl-3">
+                    <Dialog>
+                      <DialogTrigger asChild>
+                        <Button variant="soft" size="sm" color="primary">
+                          [{t("custom")}]
+                        </Button>
+                      </DialogTrigger>
+                      <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                        <DialogHeader>
+                          <DialogTitle>
+                            Daftar Wilayah Polda dan Polres
+                          </DialogTitle>
+                        </DialogHeader>
+                        <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                          {listDest.map((polda: any) => (
+                            <div key={polda.id} className="border p-2">
+                              <Label className="flex items-center">
+                                <Checkbox
+                                  checked={checkedLevels.has(polda.id)}
+                                  onCheckedChange={() =>
+                                    handleCheckboxChange(polda.id)
+                                  }
+                                  className="mr-3"
+                                />
+                                {polda.name}
+                                <button
+                                  onClick={() => toggleExpand(polda.id)}
+                                  className="ml-2 focus:outline-none"
+                                >
+                                  {expandedPolda[polda.id] ? (
+                                    <ChevronUp size={16} />
+                                  ) : (
+                                    <ChevronDown size={16} />
+                                  )}
+                                </button>
+                              </Label>
+                              {expandedPolda[polda.id] && (
+                                <div className="ml-6 mt-2">
+                                  <Label className="block">
+                                    <Checkbox
+                                      checked={polda?.subDestination?.every(
+                                        (polres: any) =>
+                                          checkedLevels.has(polres.id)
+                                      )}
+                                      onCheckedChange={(isChecked) => {
+                                        const updatedLevels = new Set(
+                                          checkedLevels
+                                        );
+                                        polda?.subDestination?.forEach(
+                                          (polres: any) => {
+                                            if (isChecked) {
+                                              updatedLevels.add(polres.id);
+                                            } else {
+                                              updatedLevels.delete(polres.id);
+                                            }
+                                          }
+                                        );
+                                        setCheckedLevels(updatedLevels);
+                                      }}
+                                      className="mr-2"
+                                    />
+                                    Pilih Semua Polres
+                                  </Label>
+                                  {polda?.subDestination?.map((polres: any) => (
+                                    <Label
+                                      key={polres.id}
+                                      className="block mt-1"
+                                    >
+                                      <Checkbox
+                                        checked={checkedLevels.has(polres.id)}
+                                        onCheckedChange={() =>
+                                          handleCheckboxChange(polres.id)
+                                        }
+                                        className="mr-2"
+                                      />
+                                      {polres.name}
+                                    </Label>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      </DialogContent>
+                    </Dialog>
+                  </div>
+                </div>
+              </div>
+              <div className="mt-5 space-y-2">
+                <Label>{t("type-of-task")}</Label>
+                <RadioGroup
+                  value={type} // State yang dipetakan ke value RadioGroup
+                  onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
+                  className="flex flex-wrap gap-3"
+                >
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="1" id="publication" />
+                    <Label htmlFor="publication">Publikasi</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="2" id="amplification" />
+                    <Label htmlFor="amplification">Amplifikasi</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="3" id="contra" />
+                    <Label htmlFor="contra">Kontra</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+              <div className="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("description")}</Label>
+                <Controller
+                  control={control}
+                  name="naration"
+                  render={({ field: { onChange, value } }) => (
+                    <CustomEditor onChange={onChange} initialData={value} />
+                  )}
+                />
+                {errors.naration?.message && (
+                  <p className="text-red-400 text-sm">
+                    {errors.naration.message}
+                  </p>
+                )}
+              </div>
+              <div className="space-y-2.5 mt-5">
+                <Label htmlFor="attachments">{t("attachment")}</Label>
+                <div className="space-y-3">
+                  <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>
+                  <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>
+                  <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>
+                  <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>
+                  {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>}{" "}
+                  {/* Display remaining time */}
+                  <div className="mt-4 space-y-2">
+                    <Label className="">{t("news-links")}</Label>
+                    {links.map((link, index) => (
+                      <div key={index} className="flex items-center gap-2 mt-2">
+                        <Input
+                          type="url"
+                          className="border rounded p-2 w-full"
+                          placeholder={`Masukkan link berita ${index + 1}`}
+                          value={link}
+                          onChange={(e) =>
+                            handleLinkChange(index, e.target.value)
+                          }
+                        />
+                        {links.length > 1 && (
+                          <button
+                            type="button"
+                            className="bg-red-500 text-white px-3 py-1 rounded"
+                            onClick={() => handleRemoveRow(index)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                    <Button
+                      type="button"
+                      className="mt-2 bg-blue-500 text-white px-4 py-2 rounded"
+                      onClick={handleAddRow}
+                      size="sm"
+                    >
+                      {t("add-links")}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="mt-4">
+              <Button type="submit" color="primary">
+                {t("submit")}
+              </Button>
+            </div>
+          </form>
+        ) : (
+          ""
+        )}
+      </div>
+    </Card>
+  );
+}
diff --git a/components/form/task-ta/task-ta-detail-form.tsx b/components/form/task-ta/task-ta-detail-form.tsx
index 4a633432..dc69a11e 100644
--- a/components/form/task-ta/task-ta-detail-form.tsx
+++ b/components/form/task-ta/task-ta-detail-form.tsx
@@ -990,129 +990,7 @@ export default function FormTaskTaDetail() {
                   <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">
-                <div className="mt-6 space-y-2">
-                  <Label>{t("assignment-selection")}</Label>
-                  <Select
-                    onValueChange={setSelectedTarget}
-                    value={detail.assignedToRole}
-                  >
-                    <SelectTrigger size="md">
-                      <SelectValue placeholder="Pilih" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="3,4">Semua Pengguna</SelectItem>
-                      <SelectItem value="4">Kontributor</SelectItem>
-                      <SelectItem value="3">Approver</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="flex flex-wrap gap-3 mt-6 lg:pt-5 lg:ml-3">
-                  {Object.keys(unitSelection).map((key) => (
-                    <div className="flex items-center gap-2" key={key}>
-                      <Checkbox
-                        id={key}
-                        disabled
-                        checked={
-                          unitSelection[key as keyof typeof unitSelection]
-                        }
-                        onCheckedChange={(value) =>
-                          setUnitSelection({ ...unitSelection, [key]: value })
-                        }
-                      />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
-                    </div>
-                  ))}
-                </div>
-                <div className="mt-6 lg:pt-5 lg:pl-3">
-                  <Dialog>
-                    <DialogTrigger asChild>
-                      <Button variant="soft" size="sm" color="primary">
-                        [{t("custom")}]
-                      </Button>
-                    </DialogTrigger>
-                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
-                      <DialogHeader>
-                        <DialogTitle>
-                          Daftar Wilayah Polda dan Polres
-                        </DialogTitle>
-                      </DialogHeader>
-                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
-                        {listDest.map((polda: any) => (
-                          <div key={polda.id} className="border p-2">
-                            <Label className="flex items-center">
-                              <Checkbox
-                                disabled
-                                checked={checkedLevels.has(polda.id)}
-                                onCheckedChange={() =>
-                                  handleCheckboxChange(polda.id)
-                                }
-                                className="mr-3"
-                              />
-                              {polda.name}
-                              <button
-                                onClick={() => toggleExpand(polda.id)}
-                                className="ml-2 focus:outline-none"
-                              >
-                                {expandedPolda[polda.id] ? (
-                                  <ChevronUp size={16} />
-                                ) : (
-                                  <ChevronDown size={16} />
-                                )}
-                              </button>
-                            </Label>
-                            {expandedPolda[polda.id] && (
-                              <div className="ml-6 mt-2">
-                                <Label className="block">
-                                  <Checkbox
-                                    disabled
-                                    checked={polda?.subDestination?.every(
-                                      (polres: any) =>
-                                        checkedLevels.has(polres.id)
-                                    )}
-                                    onCheckedChange={(isChecked) => {
-                                      const updatedLevels = new Set(
-                                        checkedLevels
-                                      );
-                                      polda?.subDestination?.forEach(
-                                        (polres: any) => {
-                                          if (isChecked) {
-                                            updatedLevels.add(polres.id);
-                                          } else {
-                                            updatedLevels.delete(polres.id);
-                                          }
-                                        }
-                                      );
-                                      setCheckedLevels(updatedLevels);
-                                    }}
-                                    className="mr-2"
-                                  />
-                                  Pilih Semua Polres
-                                </Label>
-                                {polda?.subDestination?.map((polres: any) => (
-                                  <Label key={polres.id} className="block mt-1">
-                                    <Checkbox
-                                      disabled
-                                      checked={checkedLevels.has(polres.id)}
-                                      onCheckedChange={() =>
-                                        handleCheckboxChange(polres.id)
-                                      }
-                                      className="mr-2"
-                                    />
-                                    {polres.name}
-                                  </Label>
-                                ))}
-                              </div>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    </DialogContent>
-                  </Dialog>
-                </div>
-              </div>
+
               {/* <div className="mt-6 space-y-2">
                 <Label>{t("type-task")}</Label>
                 <RadioGroup
@@ -1128,19 +1006,6 @@ export default function FormTaskTaDetail() {
                   <Label htmlFor="medsos-mediahub">Medsos Mediahub</Label>
                 </RadioGroup>
               </div> */}
-              <div className="mt-6 space-y-2">
-                <Label>{t("assigment-type")} </Label>
-                <RadioGroup
-                  value={detail?.assignmentType}
-                  onValueChange={(value) => setTaskType(String(value))}
-                  className="flex flex-wrap gap-3"
-                >
-                  <RadioGroupItem value="atensi-khusus" id="khusus" />
-                  <Label htmlFor="atensi-khusus">Atensi Khusus</Label>
-                  <RadioGroupItem value="tugas-harian" id="harian" />
-                  <Label htmlFor="tugas-harian">Tugas Harian</Label>
-                </RadioGroup>
-              </div>
               <div className="mt-5 space-y-2">
                 <Label>{t("areas-expertise")}</Label>
                 <div className="flex flex-wrap gap-4">
@@ -1450,25 +1315,6 @@ export default function FormTaskTaDetail() {
                   )}
                   {isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
                   {/* Display remaining time */}
-                  <div className="mt-4">
-                    <Label>Link Url</Label>
-                    {urlInputs.map((url: any, index: any) => (
-                      <div
-                        key={url.id}
-                        className="flex items-center gap-2 mt-2"
-                      >
-                        <input
-                          type="url"
-                          className="border rounded p-2 w-full"
-                          value={url}
-                          // onChange={(e) =>
-                          //   handleLinkChange(index, e.target.value)
-                          // }
-                          placeholder={`Masukkan link berita ${index + 1}`}
-                        />
-                      </div>
-                    ))}
-                  </div>
                 </div>
               </div>
             </div>
diff --git a/components/form/task-ta/task-ta-edit-form.tsx b/components/form/task-ta/task-ta-edit-form.tsx
index f2e4d55b..2d06e489 100644
--- a/components/form/task-ta/task-ta-edit-form.tsx
+++ b/components/form/task-ta/task-ta-edit-form.tsx
@@ -805,141 +805,6 @@ export default function FormTaskTaEdit() {
                   <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">
-                <div className="mt-5  space-y-2">
-                  <Label>Tujuan Pemilihan Tugas</Label>
-                  <Select
-                    onValueChange={setSelectedTarget}
-                    value={detail.assignedToRole}
-                  >
-                    <SelectTrigger size="md">
-                      <SelectValue placeholder="Pilih" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="3,4">Semua Pengguna</SelectItem>
-                      <SelectItem value="4">Kontributor</SelectItem>
-                      <SelectItem value="3">Approver</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="flex flex-wrap gap-3 mt-6 lg:pt-7 lg:ml-3">
-                  {Object.keys(unitSelection).map((key) => (
-                    <div className="flex items-center gap-2" key={key}>
-                      <Checkbox
-                        id={key}
-                        checked={
-                          unitSelection[key as keyof typeof unitSelection]
-                        }
-                        onCheckedChange={(value) =>
-                          handleUnitChange(
-                            key as keyof typeof unitSelection,
-                            value as boolean
-                          )
-                        }
-                      />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
-                    </div>
-                  ))}
-                </div>
-                <div className="mt-6 lg:pt-6 lg:pl-3">
-                  <Dialog>
-                    <DialogTrigger asChild>
-                      <Button variant="soft" size="sm" color="primary">
-                        [Kustom]
-                      </Button>
-                    </DialogTrigger>
-                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
-                      <DialogHeader>
-                        <DialogTitle>
-                          Daftar Wilayah Polda dan Polres
-                        </DialogTitle>
-                      </DialogHeader>
-                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
-                        {listDest.map((polda: any) => (
-                          <div key={polda.id} className="border p-2">
-                            <Label className="flex items-center">
-                              <Checkbox
-                                checked={checkedLevels.has(polda.id)}
-                                onCheckedChange={() =>
-                                  handleCheckboxChange(polda.id)
-                                }
-                                className="mr-3"
-                              />
-                              {polda.name}
-                              <button
-                                onClick={() => toggleExpand(polda.id)}
-                                className="ml-2 focus:outline-none"
-                              >
-                                {expandedPolda[polda.id] ? (
-                                  <ChevronUp size={16} />
-                                ) : (
-                                  <ChevronDown size={16} />
-                                )}
-                              </button>
-                            </Label>
-                            {expandedPolda[polda.id] && (
-                              <div className="ml-6 mt-2">
-                                <Label className="block">
-                                  <Checkbox
-                                    checked={polda?.subDestination?.every(
-                                      (polres: any) =>
-                                        checkedLevels.has(polres.id)
-                                    )}
-                                    onCheckedChange={(isChecked) => {
-                                      const updatedLevels = new Set(
-                                        checkedLevels
-                                      );
-                                      polda?.subDestination?.forEach(
-                                        (polres: any) => {
-                                          if (isChecked) {
-                                            updatedLevels.add(polres.id);
-                                          } else {
-                                            updatedLevels.delete(polres.id);
-                                          }
-                                        }
-                                      );
-                                      setCheckedLevels(updatedLevels);
-                                    }}
-                                    className="mr-2"
-                                  />
-                                  Pilih Semua Polres
-                                </Label>
-                                {polda?.subDestination?.map((polres: any) => (
-                                  <Label key={polres.id} className="block mt-1">
-                                    <Checkbox
-                                      checked={checkedLevels.has(polres.id)}
-                                      onCheckedChange={() =>
-                                        handleCheckboxChange(polres.id)
-                                      }
-                                      className="mr-2"
-                                    />
-                                    {polres.name}
-                                  </Label>
-                                ))}
-                              </div>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    </DialogContent>
-                  </Dialog>
-                </div>
-              </div>
-              <div className="mt-6 space-y-2">
-                <Label>{t("assigment-type")} </Label>
-                <RadioGroup
-                  defaultValue={detail?.assignmentType}
-                  onValueChange={(value) => setTaskType(String(value))}
-                  className="flex flex-wrap gap-3"
-                >
-                  <RadioGroupItem value="atensi-khusus" id="khusus" />
-                  <Label htmlFor="atensi-khusus">Atensi Khusus</Label>
-                  <RadioGroupItem value="tugas-harian" id="harian" />
-                  <Label htmlFor="tugas-harian">Tugas Harian</Label>
-                </RadioGroup>
-              </div>
               <div className="mt-5 space-y-2">
                 <Label>{t("areas-expertise")}</Label>
                 <div className="flex flex-wrap gap-4">
diff --git a/components/form/task-ta/task-ta-new.tsx b/components/form/task-ta/task-ta-upload-form.tsx
similarity index 100%
rename from components/form/task-ta/task-ta-new.tsx
rename to components/form/task-ta/task-ta-upload-form.tsx