diff --git a/app/[locale]/(protected)/admin/add-experts/create/page.tsx b/app/[locale]/(protected)/admin/add-experts/create/page.tsx
index dfa67b06..ba1382e0 100644
--- a/app/[locale]/(protected)/admin/add-experts/create/page.tsx
+++ b/app/[locale]/(protected)/admin/add-experts/create/page.tsx
@@ -26,12 +26,13 @@ import {
 import { useEffect, useState } from "react";
 import {
   AdministrationLevelList,
+  checkRolePlacementsAvailability,
   getListCompetencies,
   getListExperiences,
   saveUserInternal,
   saveUserRolePlacements,
 } from "@/service/management-user/management-user";
-import { loading } from "@/config/swal";
+import { error, loading } from "@/config/swal";
 import { Eye, EyeOff } from "lucide-react";
 
 const FormSchema = z.object({
@@ -134,6 +135,26 @@ export default function AddExpertForm() {
     };
 
     loading();
+    
+    // check availability first
+    var placementArr: any[] = [];
+    placementRows.forEach((row: any) => {
+      placementArr.push({
+        roleId: Number(row.roleId),
+        userLevelId: Number(row.userLevelId),
+      });
+    });
+
+    const dataReqAvail = {
+      placements: placementArr,
+    };
+    const resAvail = await checkRolePlacementsAvailability(dataReqAvail);
+    if (resAvail?.error) {
+      close();
+      error(resAvail.message);
+      return false;
+    }
+
     const res = await saveUserInternal(dataReq);
     const resData = res?.data?.data;
     const userProfileId = resData?.id;
diff --git a/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx b/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx
index 2e4a60f2..a75ada82 100644
--- a/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx
+++ b/app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx
@@ -49,11 +49,11 @@ const columns: ColumnDef<any>[] = [
     header: "Jumlah Amplifikasi",
     cell: ({ row }) => <span>{row.getValue("link")}</span>,
   },
-  // {
-  //   accessorKey: "status",
-  //   header: "Status",
-  //   cell: ({ row }) => <span>{row.getValue("status")}</span>,
-  // },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("status")}</span>,
+  },
   {
     accessorKey: "date",
     header: "Tanggal Penarikan",
@@ -77,12 +77,12 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <Link
-              href={`/admin/media-tracking/detail/${row.original.id}`}
-            >
+            <Link href={`/admin/media-tracking/detail/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
-                Detail
+                View
+                {row.original.mediaUpload.fileType.secondaryName &&
+                  row.original.mediaUpload.fileType.secondaryName.toLowerCase()}
               </DropdownMenuItem>
             </Link>
           </DropdownMenuContent>
diff --git a/app/[locale]/(protected)/admin/settings/banner/component/banner-column.tsx b/app/[locale]/(protected)/admin/settings/banner/component/banner-column.tsx
index 899f2124..4cb46316 100644
--- a/app/[locale]/(protected)/admin/settings/banner/component/banner-column.tsx
+++ b/app/[locale]/(protected)/admin/settings/banner/component/banner-column.tsx
@@ -58,16 +58,6 @@ const columns: ColumnDef<any>[] = [
       <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
     ),
   },
-  {
-    accessorKey: "isStaticBanner",
-    header: "Static Banner",
-    cell: ({ row }) => (
-      <StaticToogle
-        id={row.original.id}
-        initChecked={row.original.isStaticBanner}
-      />
-    ),
-  },
   {
     accessorKey: "statusName",
     header: "Status Banner",
@@ -75,7 +65,6 @@ const columns: ColumnDef<any>[] = [
       <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />
     ),
   },
-
   {
     id: "actions",
     accessorKey: "action",
diff --git a/app/[locale]/(protected)/admin/settings/banner/component/table.tsx b/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
index a98ab776..18d20f4c 100644
--- a/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
+++ b/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
@@ -74,7 +74,7 @@ import CustomPagination from "@/components/table/custom-pagination";
 const ContentListBanner = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const [showData, setShowData] = React.useState("10");
+  const [showData, setShowData] = React.useState("9");
   const [categories, setCategories] = React.useState<any>();
   const [data, setData] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
@@ -412,7 +412,7 @@ const ContentListBanner = () => {
                 />
               </div>
               <img
-                src={item.thumbnailLink || "/placeholder.jpg"}
+                src={item.smallThumbnailLink || "/placeholder.jpg"}
                 alt={item.title}
                 className="w-full h-48 object-cover"
               />
diff --git a/app/[locale]/(protected)/admin/settings/banner/page.tsx b/app/[locale]/(protected)/admin/settings/banner/page.tsx
index 8385b071..510e102c 100644
--- a/app/[locale]/(protected)/admin/settings/banner/page.tsx
+++ b/app/[locale]/(protected)/admin/settings/banner/page.tsx
@@ -28,7 +28,7 @@ export default function AdminBanner() {
                     : "bg-white text-black "
                 }`}
             >
-              Kontent
+              Konten
             </Button>
             <Button
               rounded="md"
diff --git a/app/[locale]/(protected)/admin/settings/category/component/column.tsx b/app/[locale]/(protected)/admin/settings/category/component/column.tsx
index 7f41bda2..71813ee8 100644
--- a/app/[locale]/(protected)/admin/settings/category/component/column.tsx
+++ b/app/[locale]/(protected)/admin/settings/category/component/column.tsx
@@ -67,6 +67,16 @@ const columns: ColumnDef<any>[] = [
       </span>
     ),
   },
+  {
+    id: "created",
+    accessorKey: "created",
+    header: "Dibuat Oleh",
+    cell: ({ row }) => (
+      <div className="flex flex-col items-center">
+        <span className="text-sm text-gray-500">{row.original.createdByName}</span><span className="text-xs font-bold">({row.original.createdByUserLevelName})</span>
+      </div>
+    ),
+  },
   {
     id: "actions",
     accessorKey: "action",
diff --git a/app/[locale]/(protected)/admin/settings/popup/component/popup-column.tsx b/app/[locale]/(protected)/admin/settings/popup/component/popup-column.tsx
index 899f2124..1da6cdc1 100644
--- a/app/[locale]/(protected)/admin/settings/popup/component/popup-column.tsx
+++ b/app/[locale]/(protected)/admin/settings/popup/component/popup-column.tsx
@@ -58,24 +58,13 @@ const columns: ColumnDef<any>[] = [
       <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
     ),
   },
-  {
-    accessorKey: "isStaticBanner",
-    header: "Static Banner",
-    cell: ({ row }) => (
-      <StaticToogle
-        id={row.original.id}
-        initChecked={row.original.isStaticBanner}
-      />
-    ),
-  },
   {
     accessorKey: "statusName",
-    header: "Status Banner",
+    header: "Status Pop Up",
     cell: ({ row }) => (
-      <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />
+      <StatusToogle id={row.original.id} initChecked={row.original.isInterstitial} />
     ),
   },
-
   {
     id: "actions",
     accessorKey: "action",
diff --git a/app/[locale]/(protected)/admin/settings/popup/component/status-toogle.tsx b/app/[locale]/(protected)/admin/settings/popup/component/status-toogle.tsx
index 22f11b79..77eabea6 100644
--- a/app/[locale]/(protected)/admin/settings/popup/component/status-toogle.tsx
+++ b/app/[locale]/(protected)/admin/settings/popup/component/status-toogle.tsx
@@ -1,7 +1,7 @@
 import { Switch } from "@/components/ui/switch";
 import { useToast } from "@/components/ui/use-toast";
 import { useRouter } from "@/i18n/routing";
-import { setBanner } from "@/service/settings/settings";
+import { setBanner, setPopUp } from "@/service/settings/settings";
 
 export default function StatusToogle(props: {
   id: number;
@@ -12,7 +12,7 @@ export default function StatusToogle(props: {
   const router = useRouter();
 
   const disableBanner = async () => {
-    const response = await setBanner(id, false);
+    const response = await setPopUp(id, false);
 
     if (response?.error) {
       toast({
@@ -25,7 +25,7 @@ export default function StatusToogle(props: {
     toast({
       title: "Success ",
     });
-    router.push("/admin/settings/banner?dataChange=true");
+    router.push("/admin/settings/popup?dataChange=true");
   };
   return (
     <Switch
diff --git a/app/[locale]/(protected)/admin/settings/popup/component/table.tsx b/app/[locale]/(protected)/admin/settings/popup/component/table.tsx
index b8697f7c..acb856be 100644
--- a/app/[locale]/(protected)/admin/settings/popup/component/table.tsx
+++ b/app/[locale]/(protected)/admin/settings/popup/component/table.tsx
@@ -74,7 +74,7 @@ import CustomPagination from "@/components/table/custom-pagination";
 const ContentListPopUp = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const [showData, setShowData] = React.useState("10");
+  const [showData, setShowData] = React.useState("9");
   const [categories, setCategories] = React.useState<any>();
   const [data, setData] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
@@ -433,7 +433,7 @@ const ContentListPopUp = () => {
                 />
               </div>
               <img
-                src={item.thumbnailLink || "/placeholder.jpg"}
+                src={item.smallThumbnailLink || "/placeholder.jpg"}
                 alt={item.title}
                 className="w-full h-48 object-cover"
               />
diff --git a/app/[locale]/(protected)/admin/settings/popup/page.tsx b/app/[locale]/(protected)/admin/settings/popup/page.tsx
index 3a699be6..14454286 100644
--- a/app/[locale]/(protected)/admin/settings/popup/page.tsx
+++ b/app/[locale]/(protected)/admin/settings/popup/page.tsx
@@ -28,7 +28,7 @@ export default function AdminPopup() {
                     : "bg-white text-black "
                 }`}
             >
-              Kontent
+              Konten
             </Button>
             <Button
               rounded="md"
diff --git a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
index 21443c40..d880aefb 100644
--- a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
+++ b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
@@ -9,12 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Calendar } from "@/components/ui/calendar";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Book,
-  CheckCheck,
-  Plus,
-  Timer,
-} from "lucide-react";
+import { Book, CheckCheck, Plus, Timer } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { EventContentArg } from "@fullcalendar/core";
 import EventModal from "./event-modal";
@@ -124,7 +119,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   const [calendarEvents, setCalendarEvents] = useState<CalendarEvent[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const t = useTranslations("CalendarApp");
-  
+
   // Modal states
   const [sheetOpen, setSheetOpen] = useState<boolean>(false);
   const [date, setDate] = useState<Date>(new Date());
@@ -171,7 +166,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
       const monthData = res?.data?.data;
       if (monthData) {
         const allEvents: CalendarEvent[] = [];
-      // Map API data to the calendarEvents structure
+        // Map API data to the calendarEvents structure
         const events = monthData?.map((event: any) => ({
           id: event.id.toString(),
           title: event.title,
@@ -207,7 +202,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
         "",
         ""
       );
-      
+
       if (res?.error) {
         error(res?.message || "Failed to fetch yearly events");
         return;
@@ -230,17 +225,20 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   const filteredEvents = calendarEvents.filter((event) => {
     if (!selectedCategory.length) return false;
     console.log("Event category : ", selectedCategory);
-    
+
     const eventCategories = event.extendedProps.calendar
       ?.split(",")
       .map((val: string) => val.trim());
 
     const allCategoryId = ["1", "2", "3", "4", "5"];
     // Cek apakah SEMUA validTypeIds ada di typeIdsInData
-    const hasAllCategories = allCategoryId.every(categoryId => selectedCategory.includes(categoryId));
+    const hasAllCategories = allCategoryId.every((categoryId) =>
+      selectedCategory.includes(categoryId)
+    );
 
-    return eventCategories?.some((cat: string) =>
-      selectedCategory.includes(cat) || (hasAllCategories && cat == "0")
+    return eventCategories?.some(
+      (cat: string) =>
+        selectedCategory.includes(cat) || (hasAllCategories && cat == "0")
     );
   });
 
@@ -266,7 +264,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   };
 
   const handleCategorySelection = (category: string) => {
-    setSelectedCategory(prev => {
+    setSelectedCategory((prev) => {
       if (prev.includes(category)) {
         return prev.filter((c) => c !== category);
       } else {
@@ -313,7 +311,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   const getEventColor = (type: EventType): string => {
     const typeSplit = type.split(",");
     const firstType = typeSplit[0] as EventType;
-    
+
     const colors: Record<EventType, string> = {
       "0": "bg-black",
       "1": "bg-yellow-500",
@@ -322,7 +320,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
       "4": "bg-orange-500",
       "5": "bg-green-400",
     };
-    
+
     return colors[firstType] || "bg-gray-400";
   };
 
@@ -346,15 +344,22 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
 
   const renderEventContent = (eventInfo: any) => {
     const { title } = eventInfo.event;
-    const { createdByName, isPublish, calendar } = eventInfo.event.extendedProps;
+    const { createdByName, isPublish, calendar } =
+      eventInfo.event.extendedProps;
     const bgColor = getEventColor(calendar);
     const colorList = getEventColorList(calendar);
 
     return (
-      <div className={`w-full p-2 mb-2 rounded-md text-white text-sm flex justify-between items-stretch ${bgColor}`}>
+      <div
+        className={`w-full p-2 mb-2 rounded-md text-white text-sm flex justify-between items-stretch ${bgColor}`}
+      >
         <div className="flex-1">
           <div className="flex flex-row items-center">
-            {isPublish === true ? <CheckCheck size={15} /> : <Timer size={15} />}
+            {isPublish === true ? (
+              <CheckCheck size={15} />
+            ) : (
+              <Timer size={15} />
+            )}
             <p className="ml-1">{title}</p>
           </div>
           <p className="ml-1 text-xs text-start mt-2">
@@ -386,7 +391,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
     bgColor,
     colorList,
   }) => (
-    <div 
+    <div
       className={`w-full p-2 mb-2 rounded-md text-white text-sm flex justify-between items-stretch cursor-pointer hover:opacity-80 ${bgColor}`}
       onClick={() => handleClickListItem(item)}
     >
@@ -461,8 +466,12 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                               text={event.title}
                               createdBy={event.createdByName}
                               isPublish={event.isPublish}
-                              bgColor={getEventColor(event.agendaType as EventType)}
-                              colorList={getEventColorList(event.agendaType as EventType)}
+                              bgColor={getEventColor(
+                                event.agendaType as EventType
+                              )}
+                              colorList={getEventColorList(
+                                event.agendaType as EventType
+                              )}
                             />
                           ))}
                         </div>
@@ -537,7 +546,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                   {t("addEvent")}
                 </Button>
               )}
-              
+
               {roleId === 3 && userLevelId === 216 && (
                 <Dialog open={open} onOpenChange={setOpen}>
                   <DialogTrigger asChild>
@@ -593,7 +602,9 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                     className={category.className}
                     id={category.label}
                     checked={selectedCategory.includes(category.value)}
-                    onCheckedChange={() => handleCategorySelection(category.value)}
+                    onCheckedChange={() =>
+                      handleCategorySelection(category.value)
+                    }
                   />
                   <Label htmlFor={category.label}>{category.label}</Label>
                 </li>
@@ -605,7 +616,12 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
         <Card className="col-span-12 lg:col-span-8 2xl:col-span-9 pt-5">
           <CardContent className="dashcode-app-calendar">
             <FullCalendar
-              plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
+              plugins={[
+                dayGridPlugin,
+                timeGridPlugin,
+                interactionPlugin,
+                listPlugin,
+              ]}
               headerToolbar={{
                 left: "prev,next today",
                 center: "title",
@@ -636,7 +652,9 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                 handleDateChange(info.view.currentStart, info.view.currentEnd);
                 handleViewChange(info.view.type);
               }}
-              viewClassNames={activeView === "listYear" ? "hide-calendar-grid" : ""}
+              viewClassNames={
+                activeView === "listYear" ? "hide-calendar-grid" : ""
+              }
             />
 
             {activeView === "listYear" && (
@@ -657,7 +675,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
           </CardContent>
         </Card>
       </div>
-      
+
       <EventModal
         open={sheetOpen}
         onClose={handleCloseModal}
@@ -669,4 +687,4 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   );
 };
 
-export default CalendarView;
\ No newline at end of file
+export default CalendarView;
diff --git a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
index 89b2fb3b..83c0bdbe 100644
--- a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
+++ b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
@@ -148,10 +148,12 @@ const EventModal = ({
     satker: false,
     international: false,
   });
+
   const [agendaType, setAgendaType] = React.useState(""); // State untuk agendaType
-  const [selectedPolda, setSelectedPolda] = React.useState([]); // Untuk data Polda
-  const [selectedSatker, setSelectedSatker] = React.useState([]);
-  const [selectedPolres, setSelectedPolres] = React.useState([]);
+  const [selectedPolda, setSelectedPolda] = useState<string[]>([]);
+  const [selectedPolres, setSelectedPolres] = useState<string[]>([]);
+  const [selectedSatker, setSelectedSatker] = useState<string[]>([]);
+  const isDetailMode = true;
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
   const [isPlaying, setIsPlaying] = useState(false);
   const [isPublishing, setIsPublishing] = useState(false);
@@ -174,10 +176,7 @@ const EventModal = ({
       const detail = res?.data?.data;
       setDetailData(detail);
 
-      const description = res?.data?.data?.description;
-      console.log("description", res?.data?.data?.description);
-
-      // Set nilai awal description ke form control
+      const description = detail?.description;
       if (description) {
         setValue("description", description);
       }
@@ -196,17 +195,56 @@ const EventModal = ({
         attachments?.filter((file: any) => file.fileTypeId == 4)
       );
 
-      const agendaType = detail?.agendaType;
-      setWilayahPublish({
-        semua: agendaType === "all",
-        nasional: agendaType === "mabes",
-        polda: agendaType === "polda",
-        polres: agendaType === "polres",
-        satker: agendaType === "satker",
-        international: agendaType === "international",
-      });
-    }
+      const rawAgendaTypes = detail?.agendaType?.split(",") || []; // ["0","1","2","3","4","5"]
+      const assignedToLevel = detail?.assignedToLevel?.split(",") || [];
 
+      const wilayahState = {
+        semua: false,
+        nasional: false,
+        polda: false,
+        polres: false,
+        satker: false,
+        international: false,
+      };
+
+      rawAgendaTypes.forEach((type: any) => {
+        switch (type) {
+          case "0":
+            wilayahState.semua = true;
+            break;
+          case "1":
+            wilayahState.nasional = true;
+            break;
+          case "2":
+            wilayahState.polda = true;
+            break;
+          case "3":
+            wilayahState.polres = true;
+            break;
+          case "4":
+            wilayahState.satker = true;
+            break;
+          case "5":
+            wilayahState.international = true;
+            break;
+          default:
+            break;
+        }
+      });
+
+      setWilayahPublish(wilayahState);
+
+      // Atur unit berdasarkan agendaType
+      if (rawAgendaTypes.includes("2")) {
+        setSelectedPolda(assignedToLevel);
+      }
+      if (rawAgendaTypes.includes("3")) {
+        setSelectedPolres(assignedToLevel);
+      }
+      if (rawAgendaTypes.includes("4")) {
+        setSelectedSatker(assignedToLevel);
+      }
+    }
     fetchDetailData();
   }, [event, setValue]);
 
@@ -233,33 +271,39 @@ const EventModal = ({
 
   const toggleWilayah = (key: string) => {
     setWilayahPublish((prev: any) => {
-      const newState = { ...prev, [key]: !prev[key] };
+      let newState = { ...prev };
 
-      // Handle "semua" logic to check all options
-      if (key === "semua" && newState.semua) {
-        setAgendaType("all");
-        return {
-          semua: true,
-          nasional: true,
-          polda: true,
-          polres: true,
-          satker: true,
-          international: true,
+      // Jika key === semua dan sebelumnya belum aktif, aktifkan semua
+      if (key === "semua") {
+        const newChecked = !prev.semua;
+        newState = {
+          semua: newChecked,
+          nasional: newChecked,
+          polda: newChecked,
+          polres: newChecked,
+          satker: newChecked,
+          international: newChecked,
         };
+
+        if (newChecked) {
+          setAgendaType("0,1,2,3,4,5");
+        } else {
+          setAgendaType("");
+        }
+
+        return newState;
       }
 
-      // Uncheck "semua" if any other option is selected
-      if (key !== "semua") {
-        newState.semua = false;
-      }
+      // Jika key bukan "semua"
+      newState[key] = !prev[key];
+      newState.semua = false; // Uncheck "semua" jika yang dipilih adalah individu
 
-      // Set agendaType based on the selected checkbox
-      if (newState.nasional) setAgendaType("mabes");
-      else if (newState.polda) setAgendaType("polda");
-      else if (newState.polres) setAgendaType("polres");
-      else if (newState.satker) setAgendaType("satker");
-      else if (newState.international) setAgendaType("international");
-      else setAgendaType(""); // Reset if no checkbox is selected
+      // Hitung ulang agendaType berdasarkan pilihan
+      const selectedKeys = Object.entries(newState)
+        .filter(([k, v]) => v && k !== "semua")
+        .map(([k]) => wilayahValueMap[k]);
+
+      setAgendaType(selectedKeys.join(","));
 
       return newState;
     });
@@ -269,12 +313,25 @@ const EventModal = ({
     const agendaTypeList: string[] = [];
     const assignedToLevelList: string[] = [];
 
-    // Mapping dari checkbox wilayah ke agendaType
-    Object.keys(wilayahPublish).forEach((key) => {
-      if (wilayahPublish[key as keyof typeof wilayahPublish]) {
-        agendaTypeList.push(wilayahValueMap[key]);
-      }
-    });
+    // // Mapping dari checkbox wilayah ke agendaType
+    // Object.keys(wilayahPublish).forEach((key) => {
+    //   if (wilayahPublish[key as keyof typeof wilayahPublish]) {
+    //     agendaTypeList.push(wilayahValueMap[key]);
+    //   }
+    // });
+
+    if (wilayahPublish.semua) {
+      agendaTypeList.push("0", "1", "2", "3", "4", "5");
+    } else {
+      Object.keys(wilayahPublish).forEach((key) => {
+        if (
+          wilayahPublish[key as keyof typeof wilayahPublish] &&
+          key !== "semua"
+        ) {
+          agendaTypeList.push(wilayahValueMap[key]);
+        }
+      });
+    }
 
     // Unit-unit berdasarkan wilayah yang aktif
     if (wilayahPublish.polda && selectedPolda.length > 0) {
@@ -558,6 +615,7 @@ const EventModal = ({
       confirmButtonText: "OK",
     }).then(() => {
       router.push(redirect);
+      window.location.reload();
     });
   };
 
@@ -784,7 +842,8 @@ const EventModal = ({
                       {wilayahPublish.polda && (
                         <UnitMapping
                           unit="Polda"
-                          isDetail={false}
+                          isDetail={isDetailMode} // jika Anda punya kondisi detail
+                          initData={selectedPolda}
                           sendDataToParent={(data: any) =>
                             setSelectedPolda(data)
                           }
@@ -802,8 +861,9 @@ const EventModal = ({
                       </label>
                       {wilayahPublish.polres && (
                         <UnitMapping
-                          isDetail={false}
                           unit="Polres"
+                          isDetail={isDetailMode}
+                          initData={selectedPolres}
                           sendDataToParent={(data: any) =>
                             setSelectedPolres(data)
                           }
@@ -821,8 +881,9 @@ const EventModal = ({
                       </label>
                       {wilayahPublish.satker && (
                         <UnitMapping
-                          isDetail={false}
                           unit="Satker"
+                          isDetail={isDetailMode}
+                          initData={selectedSatker}
                           sendDataToParent={(data: any) =>
                             setSelectedSatker(data)
                           }
diff --git a/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx b/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
index 2bb586f8..0c079ab1 100644
--- a/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
@@ -97,14 +97,23 @@ const useTableColumns = () => {
       cell: ({ row }) => {
         const isPublish = row.original.isPublish;
         const isPublishOnPolda = row.original.isPublishOnPolda;
+        const creatorGroupParentLevelId = row.original.creatorGroupParentLevelId;
 
         let displayText = "-";
         if (isPublish && !isPublishOnPolda) {
           displayText = "Mabes";
         } else if (isPublish && isPublishOnPolda) {
-          displayText = "Mabes & Polda";
+          if (Number(creatorGroupParentLevelId) == 761) {
+            displayText = "Mabes & Satker";
+          } else {
+            displayText = "Mabes & Polda";
+          }
         } else if (!isPublish && isPublishOnPolda) {
-          displayText = "Polda";
+          if (Number(creatorGroupParentLevelId) == 761) {
+            displayText = "Satker";
+          } else {
+            displayText = "Polda";
+          }
         }
 
         return (
diff --git a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
index 32c1b589..b84dfe72 100644
--- a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
@@ -100,14 +100,23 @@ const useTableColumns = () => {
       cell: ({ row }) => {
         const isPublish = row.original.isPublish;
         const isPublishOnPolda = row.original.isPublishOnPolda;
+        const creatorGroupParentLevelId = row.original.creatorGroupParentLevelId;
 
         let displayText = "-";
         if (isPublish && !isPublishOnPolda) {
           displayText = "Mabes";
         } else if (isPublish && isPublishOnPolda) {
-          displayText = "Mabes & Polda";
+          if (Number(creatorGroupParentLevelId) == 761) {
+            displayText = "Mabes & Satker";
+          } else {
+            displayText = "Mabes & Polda";
+          }
         } else if (!isPublish && isPublishOnPolda) {
-          displayText = "Polda";
+          if (Number(creatorGroupParentLevelId) == 761) {
+            displayText = "Satker";
+          } else {
+            displayText = "Polda";
+          }
         }
 
         return (
diff --git a/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx b/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
index b1168e53..bcdfc337 100644
--- a/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
@@ -97,14 +97,23 @@ const useTableColumns = () => {
       cell: ({ row }) => {
         const isPublish = row.original.isPublish;
         const isPublishOnPolda = row.original.isPublishOnPolda;
+        const creatorGroupParentLevelId = row.original.creatorGroupParentLevelId;
 
         let displayText = "-";
         if (isPublish && !isPublishOnPolda) {
           displayText = "Mabes";
         } else if (isPublish && isPublishOnPolda) {
-          displayText = "Mabes & Polda";
+          if (Number(creatorGroupParentLevelId) == 761) {
+            displayText = "Mabes & Satker";
+          } else {
+            displayText = "Mabes & Polda";
+          }
         } else if (!isPublish && isPublishOnPolda) {
-          displayText = "Polda";
+          if (Number(creatorGroupParentLevelId) == 761) {
+            displayText = "Satker";
+          } else {
+            displayText = "Polda";
+          }
         }
 
         return (
diff --git a/app/[locale]/(protected)/contributor/content/video/components/columns.tsx b/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
index a856bebc..989fb93d 100644
--- a/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
@@ -97,14 +97,23 @@ const useTableColumns = () => {
       cell: ({ row }) => {
         const isPublish = row.original.isPublish;
         const isPublishOnPolda = row.original.isPublishOnPolda;
+        const creatorGroupParentLevelId = row.original.creatorGroupParentLevelId;
 
         let displayText = "-";
         if (isPublish && !isPublishOnPolda) {
           displayText = "Mabes";
         } else if (isPublish && isPublishOnPolda) {
-          displayText = "Mabes & Polda";
+          if (Number(creatorGroupParentLevelId) == 761) {
+            displayText = "Mabes & Satker";
+          } else {
+            displayText = "Mabes & Polda";
+          }
         } else if (!isPublish && isPublishOnPolda) {
-          displayText = "Polda";
+          if (Number(creatorGroupParentLevelId) == 761) {
+            displayText = "Satker";
+          } else {
+            displayText = "Polda";
+          }
         }
 
         return (
diff --git a/app/[locale]/(protected)/contributor/report/components/columns.tsx b/app/[locale]/(protected)/contributor/report/components/columns.tsx
index e244576c..f12626f3 100644
--- a/app/[locale]/(protected)/contributor/report/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/report/components/columns.tsx
@@ -23,7 +23,7 @@ import { Link, useRouter } from "@/components/navigation";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { deleteBlog } from "@/service/blog/blog";
-import { error, loading } from "@/lib/swal";
+import { error, loading, close } from "@/lib/swal";
 import { useTranslations } from "next-intl";
 import axios from "axios";
 
@@ -126,6 +126,7 @@ const useTableColumns = ({
 
         const handleDownload = async (id: string) => {
           try {
+            loading();
             const response = await axios.get(
               `https://netidhub.com/api/media/report/download?id=${id}`,
               {
@@ -140,6 +141,7 @@ const useTableColumns = ({
             document.body.appendChild(link);
             link.click();
             link.remove();
+            close();
           } catch (error) {
             console.error("Download failed", error);
             MySwal.fire({
diff --git a/app/[locale]/(protected)/dashboard/executive-data/page.tsx b/app/[locale]/(protected)/dashboard/executive-data/page.tsx
index bee89e65..209eb27c 100644
--- a/app/[locale]/(protected)/dashboard/executive-data/page.tsx
+++ b/app/[locale]/(protected)/dashboard/executive-data/page.tsx
@@ -37,6 +37,7 @@ export default function ExecutiveDataDashboard() {
   const state = Cookies.get("state");
   const provState = Cookies.get("state-prov");
   const t = useTranslations("AnalyticsDashboard");
+  const [refreshTicket, setRefreshTicket] = useState(true);
 
   const [ticket1, setTicket1] = useState("");
   const [ticket2, setTicket2] = useState("");
@@ -44,6 +45,7 @@ export default function ExecutiveDataDashboard() {
   const [ticket4, setTicket4] = useState("");
   const [ticket5, setTicket5] = useState("");
   const [ticket6, setTicket6] = useState("");
+  const [ticket7, setTicket7] = useState("");
   const [isInternational, setIsInternational] = useState([false, false, false]);
 
   const baseUrl = "https://analytic.sitani.info/";
@@ -54,13 +56,40 @@ export default function ExecutiveDataDashboard() {
   const view1 =
     levelName == "MABES POLRI"
       ? isInternational[0]
-        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue-executive?"
-        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue-executive?"
+        ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=ALL"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=ALL"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${state}&`
-      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${state}&`;
+      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`;
 
   const view2 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-interaction-per-satker?polda-selected=ALL"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-satker?polda-selected=ALL"
+      : safeLevelName.includes("POLDA")
+      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-satker?polda-selected=SATKER POLRI&`
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-satker?polda-selected=SATKER POLRI&`;
+
+  const view3 =
+    levelName == "MABES POLRI"
+      ? isInternational[2]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-category-per-polda-new?polda-selected=ALL"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=ALL"
+      : safeLevelName.includes("POLDA")
+      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=${state}&`
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=${state}&`;
+
+  const view4 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=ALL"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=ALL"
+      : safeLevelName.includes("POLDA")
+      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=SATKER POLRI&`
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=SATKER POLRI&`;
+
+    const view5 =
     levelName == "MABES POLRI"
       ? isInternational[1]
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?"
@@ -69,7 +98,7 @@ export default function ExecutiveDataDashboard() {
       ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`
       : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`;
 
-  const view3 =
+  const view6 =
     levelName == "MABES POLRI"
       ? isInternational[2]
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
@@ -78,59 +107,14 @@ export default function ExecutiveDataDashboard() {
       ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`
       : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`;
 
-  const view4 =
-    levelName == "MABES POLRI"
-      ? isInternational[1]
-        ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?"
-        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?"
-      : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`;
-
-  const view5 =
-    levelName == "MABES POLRI"
-      ? isInternational[1]
-        ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?"
-        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?"
-      : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`;
-
-  const view6 =
-    levelName == "MABES POLRI"
-      ? isInternational[1]
-        ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?"
-        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?"
-      : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&`;
-
   const view7 =
     levelName == "MABES POLRI"
       ? isInternational[2]
-        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-penugasan?"
-        : "views/2023_09_db-penugasan_rev100/db-penugasan?"
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-penugasan-vertical-bar?"
+        : "views/2023_09_db-penugasan_rev100/db-penugasan-vertical-bar?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_09_db-penugasan_rev100/db-penugasan?polda-selected=${state}&`
-      : `views/2023_09_db-penugasan_rev100/db-penugasan?polda-selected=${state}&`;
-
-  const view8 =
-    levelName == "MABES POLRI"
-      ? isInternational[2]
-        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori-top10?"
-        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-top10?"
-      : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda-new?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda-new?polda-selected=${state}&`;
-
-  const view9 =
-    levelName == "MABES POLRI"
-      ? isInternational[3]
-        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori?"
-        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori?"
-      : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-polda?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-polda?polda-selected=${state}&`;
+      ? `views/2023_09_db-penugasan_rev100/db-penugasan-vertical-bar?polda-selected=${state}&`
+      : `views/2023_09_db-penugasan_rev100/db-penugasan-vertical-bar?polda-selected=${state}&`;
 
   const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
 
@@ -153,10 +137,13 @@ export default function ExecutiveDataDashboard() {
 
       const response6 = await generateTicket();
       setTicket6(response6?.data?.data);
+      
+      const response7 = await generateTicket();
+      setTicket7(response7?.data?.data);
     }
 
     initState();
-  }, [isInternational]);
+  }, [isInternational, refreshTicket]);
 
   // Hooks
   useEffect(() => {
@@ -178,7 +165,7 @@ export default function ExecutiveDataDashboard() {
       <SiteBreadcrumb />
       <div>
         <div className="my-3">
-          <Tabs defaultValue="content-publish" className="w-full">
+          <Tabs defaultValue="content-publish" className="w-full" onValueChange={() => setRefreshTicket(!refreshTicket)}>
             <TabsList className="flex-wrap bg-black">
               <TabsTrigger
                 value="content-publish"
@@ -217,19 +204,17 @@ export default function ExecutiveDataDashboard() {
                 {/* Polda */}
                 {(levelNumber === "1" || levelNumber === "2") && (
                   <Card
-                    className={`rounded-sm p-3 ${
-                      levelNumber === "2" ? "w-full" : "w-full"
-                    }`}
+                    className={`rounded-sm p-3 w-full`}
                   >
-                    <div className="flex flex-row justify-between">
+                    {/* <div className="flex flex-row justify-between">
                       <p className="text-base font-semibold">
                         Upload konten hari ini Polda
                       </p>
-                    </div>
+                    </div> */}
                     <div className="my-5">
                       {ticket1 == "w-full" ? (
                         <iframe
-                          src={`${baseUrl + view4 + param}`}
+                          src={`${baseUrl + view1 + param}`}
                           width="100%"
                           height="750"
                           className="w-full"
@@ -237,7 +222,7 @@ export default function ExecutiveDataDashboard() {
                         />
                       ) : (
                         <iframe
-                          src={`${url + ticket1}/${view4}${param}`}
+                          src={`${url + ticket1}/${view1}${param}`}
                           width="100%"
                           height="750"
                           frameBorder="0"
@@ -248,60 +233,26 @@ export default function ExecutiveDataDashboard() {
                 )}
 
                 {/* Satker */}
-                {(levelNumber === "1" || levelNumber === "3") && (
+                {(levelNumber === "1") && (
                   <Card
-                    className={`rounded-sm p-3 ${
-                      levelNumber === "3" ? "w-full" : "w-full"
-                    }`}
+                    className={`rounded-sm p-3 w-full`}
                   >
-                    <div className="flex flex-row justify-between">
+                    {/* <div className="flex flex-row justify-between">
                       <p className="text-base font-semibold">
                         Upload konten hari ini Satker
                       </p>
-                    </div>
+                    </div> */}
                     <div className="my-5">
                       {ticket2 == "" ? (
                         <iframe
-                          src={`${baseUrl + view6 + param}`}
+                          src={`${baseUrl + view2 + param}`}
                           width="100%"
                           height="750"
                           frameBorder="0"
                         />
                       ) : (
                         <iframe
-                          src={`${url + ticket2}/${view6}${param}`}
-                          width="100%"
-                          height="750"
-                          frameBorder="0"
-                        />
-                      )}
-                    </div>
-                  </Card>
-                )}
-
-                {/* Polres */}
-                {(levelNumber === "1" || levelNumber === "2") && (
-                  <Card
-                    className={`rounded-sm p-3 ${
-                      levelNumber === "2" ? "w-full" : "w-full"
-                    }`}
-                  >
-                    <div className="flex flex-row justify-between">
-                      <p className="text-base font-semibold">
-                        Upload konten hari ini Polres
-                      </p>
-                    </div>
-                    <div className="my-5">
-                      {ticket3 == "" ? (
-                        <iframe
-                          src={`${baseUrl + view5 + param}`}
-                          width="100%"
-                          height="750"
-                          frameBorder="0"
-                        />
-                      ) : (
-                        <iframe
-                          src={`${url + ticket3}/${view5}${param}`}
+                          src={`${url + ticket2}/${view2}${param}`}
                           width="100%"
                           height="750"
                           frameBorder="0"
@@ -313,82 +264,63 @@ export default function ExecutiveDataDashboard() {
               </div>
             </TabsContent>
             <TabsContent value="content-category">
-              <Card className="px-3 py-3">
-                <p className="text-lg">
-                  <b>
-                    {isInternational[2]
-                      ? "INTERACTION OF THE MOST POPULAR CATEGORIES AND TITLES"
-                      : "INTERAKSI KATEGORI DAN JUDUL TERPOPULER"}
-                  </b>
-                </p>
-                {levelName === "MABES POLRI" ? (
-                  <div className="flex flex-col gap-1">
-                    <p>{t("choose_category")}</p>
-                    <div className="flex flex-row gap-1 border-2 w-fit">
-                      <Button
-                        onClick={() => handleInternational(2, false)}
-                        className={` hover:text-white rounded-none
-                ${
-                  isInternational[2]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
-                      >
-                        Indonesia
-                      </Button>
-                      <Button
-                        onClick={() => handleInternational(2, true)}
-                        className={`hover:text-white rounded-none ${
-                          isInternational[1]
-                            ? "bg-black text-white "
-                            : "bg-white text-black "
-                        }
-              `}
-                      >
-                        {t("international")}
-                      </Button>
+              {(levelNumber === "1" || levelNumber === "2") && (
+                <Card className="px-3 py-3">
+                    <div className="my-5">
+                      {ticket3 == "" ? (
+                        <iframe
+                          src={`${baseUrl + view3 + param}`}
+                          width="100%"
+                          height="750"
+                          frameBorder="0"
+                        />
+                      ) : (
+                        <iframe
+                          src={`${`${url + ticket3}/${view3}${param}`}`}
+                          width="100%"
+                          height="750"
+                          frameBorder="0"
+                        />
+                      )}
                     </div>
-                  </div>
-                ) : (
-                  ""
-                )}
-                <div className="my-5">
-                  {ticket3 == "" ? (
-                    <iframe
-                      src={`${baseUrl + view8 + param}`}
-                      width="100%"
-                      height="750"
-                      frameBorder="0"
-                    />
-                  ) : (
-                    <iframe
-                      src={`${`${url + ticket3}/${view8}${param}`}`}
-                      width="100%"
-                      height="750"
-                      frameBorder="0"
-                    />
-                  )}
-                </div>
-              </Card>
+                </Card>
+              )}
+
+              {levelNumber === "1" && (
+                <Card className="px-3 py-3">
+                    <div className="my-5">
+                      {ticket4 == "" ? (
+                        <iframe
+                          src={`${baseUrl + view4 + param}`}
+                          width="100%"
+                          height="750"
+                          frameBorder="0"
+                        />
+                      ) : (
+                        <iframe
+                          src={`${`${url + ticket4}/${view4}${param}`}`}
+                          width="100%"
+                          height="750"
+                          frameBorder="0"
+                        />
+                      )}
+                    </div>
+                </Card>
+              )}
             </TabsContent>
             <TabsContent value="popular-content">
               <Card className="rounded-sm p-3 h-[750px]">
-                <div className="flex flex-row justify-between">
-                  <p className="text-base font-semibold">
-                    Konten Paling Populer
-                  </p>
-                </div>
                 <div className="my-5">
-                  {ticket4 == "" ? (
+                  {ticket5 == "" ? (
                     <iframe
-                      src={`${baseUrl + view2 + param}`}
+                      src={`${baseUrl + view5 + param}`}
                       width="100%"
                       height="650"
                       frameBorder="0"
                     />
                   ) : (
                     <iframe
-                      src={`${`${url + ticket4}/${view2}${param}`}`}
+                      src={`${`${url + ticket5}/${view5}${param}`}`}
                       width="100%"
                       height="650"
                       frameBorder="0"
@@ -400,22 +332,17 @@ export default function ExecutiveDataDashboard() {
 
             <TabsContent value="heatmap">
               <Card className="rounded-sm p-3 h-[750px]">
-                <div className="flex flex-row justify-between mx-3">
-                  <p className="text-base font-semibold">
-                    Heatmap Konten dan Kategori dengan Interaksi
-                  </p>
-                </div>
                 <div className="my-5">
-                  {ticket5 == "" ? (
+                  {ticket6 == "" ? (
                     <iframe
-                      src={`${baseUrl + view3 + param}`}
+                      src={`${baseUrl + view6 + param}`}
                       width="100%"
                       height="600"
                       frameBorder="0"
                     />
                   ) : (
                     <iframe
-                      src={`${`${url + ticket5}/${view3}${param}`}`}
+                      src={`${`${url + ticket6}/${view6}${param}`}`}
                       width="100%"
                       height="600"
                       frameBorder="0"
@@ -425,60 +352,25 @@ export default function ExecutiveDataDashboard() {
               </Card>
             </TabsContent>
             <TabsContent value="task">
-              <div className="grid grid-cols-12 gap-5">
-                <div className="lg:col-span-12 col-span-12">
-                  <Card className="px-3 py-3">
-                    {levelName === "MABES POLRI" ? (
-                      <div className="flex flex-col gap-1">
-                        <p>{t("choose_category")}</p>
-                        <div className="flex flex-row gap-1 border-2 w-fit">
-                          <Button
-                            onClick={() => handleInternational(2, false)}
-                            className={` hover:text-white rounded-none
-                ${
-                  isInternational[2]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
-                          >
-                            Indonesia
-                          </Button>
-                          <Button
-                            onClick={() => handleInternational(2, true)}
-                            className={`hover:text-white rounded-none ${
-                              isInternational[1]
-                                ? "bg-black text-white "
-                                : "bg-white text-black "
-                            }
-              `}
-                          >
-                            {t("international")}
-                          </Button>
-                        </div>
-                      </div>
-                    ) : (
-                      ""
-                    )}
-                    <div className="my-5">
-                      {ticket3 == "" ? (
-                        <iframe
-                          src={`${baseUrl + view7 + param}`}
-                          width="100%"
-                          height="750"
-                          frameBorder="0"
-                        />
-                      ) : (
-                        <iframe
-                          src={`${`${url + ticket3}/${view7}${param}`}`}
-                          width="100%"
-                          height="750"
-                          frameBorder="0"
-                        />
-                      )}
-                    </div>
-                  </Card>
+              <Card className="rounded-sm p-3 h-[750px]">
+                <div className="my-5">
+                  {ticket7 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view7 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket7}/${view7}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
                 </div>
-              </div>
+              </Card>
             </TabsContent>
           </Tabs>
         </div>
diff --git a/components/form/communication/questions-reply-form.tsx b/components/form/communication/questions-reply-form.tsx
index b684de96..e8c2a54d 100644
--- a/components/form/communication/questions-reply-form.tsx
+++ b/components/form/communication/questions-reply-form.tsx
@@ -51,7 +51,7 @@ import { ChevronDownIcon } from "lucide-react";
 import { getOperatorUser } from "@/service/management-user/management-user";
 
 const taskSchema = z.object({
-  message: z.string().optional(),
+  title: z.string().optional(),
   description: z.string().optional(),
 });
 
@@ -275,7 +275,7 @@ export default function FormQuestionsReply() {
         title: data.title,
         description: data.description,
         priorityId: selectedPriority,
-        statusId: selectedStatus,
+        statusId: 1,
         typeId: detailTickets?.typeId,
         parentCommentId: detailTickets?.feedId,
         operatorTeam: selectedOperator.join(","),
@@ -507,7 +507,7 @@ export default function FormQuestionsReply() {
                 <Label>Judul</Label>
                 <Controller
                   control={control}
-                  name="message"
+                  name="title"
                   render={({ field }) => (
                     <Input
                       size="md"
diff --git a/components/form/content/audio-form.tsx b/components/form/content/audio-form.tsx
index 8da158ab..0d9edd39 100644
--- a/components/form/content/audio-form.tsx
+++ b/components/form/content/audio-form.tsx
@@ -40,6 +40,7 @@ import { uploadThumbnailBlog } from "@/service/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
 import {
   generateDataArticle,
+  generateDataRewrite,
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
@@ -55,6 +56,7 @@ import dynamic from "next/dynamic";
 import { getCsrfToken } from "@/service/auth";
 import { Link } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -82,6 +84,10 @@ export default function FormAudio() {
   const router = useRouter();
   const editor = useRef(null);
   type AudioSchema = z.infer<typeof audioSchema>;
+  const params = useParams();
+  const locale = params?.locale;
+
+  const [selectedFileType, setSelectedFileType] = useState("original");
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
@@ -97,6 +103,11 @@ export default function FormAudio() {
   const [preview, setPreview] = useState<string | null>(null);
   const [selectedLanguage, setSelectedLanguage] = useState("");
 
+  const [selectedWritingStyle, setSelectedWritingStyle] =
+    useState("professional");
+  const [editorContent, setEditorContent] = useState(""); // Untuk original editor
+  const [rewriteEditorContent, setRewriteEditorContent] = useState("");
+
   const [selectedSEO, setSelectedSEO] = useState<string>("");
   const [title, setTitle] = useState<string>("");
   const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
@@ -111,7 +122,6 @@ export default function FormAudio() {
     null
   );
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
-  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
   const [detailData, setDetailData] = useState<any>(null);
   const [articleImages, setArticleImages] = useState<string[]>([]);
@@ -133,6 +143,8 @@ export default function FormAudio() {
   const [isStartUpload, setIsStartUpload] = useState(false);
   const [counterProgress, setCounterProgress] = useState(0);
 
+  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
 
@@ -155,15 +167,11 @@ export default function FormAudio() {
 
   const audioSchema = z.object({
     title: z.string().min(1, { message: "Judul diperlukan" }),
-    description: z
-      .string()
-      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
-      .or(
-        z.literal(articleBody || "").refine((val) => val.length > 0, {
-          message: "Deskripsi diperlukan.",
-        })
-      ),
+    description: z.string().optional(),
+    descriptionOri: z.string().optional(), // Original editor
+    rewriteDescription: z.string().optional(), // Rewrite editor
     creatorName: z.string().min(1, { message: "Creator diperlukan" }),
+
     // tags: z.string().min(1, { message: "Judul diperlukan" }),
   });
 
@@ -175,6 +183,11 @@ export default function FormAudio() {
     formState: { errors },
   } = useForm<AudioSchema>({
     resolver: zodResolver(audioSchema),
+    defaultValues: {
+      description: "",
+      descriptionOri: "",
+      rewriteDescription: "",
+    },
   });
 
   const doGenerateMainKeyword = async () => {
@@ -437,12 +450,24 @@ export default function FormAudio() {
     }
   };
 
+  useEffect(() => {
+    if (articleBody) {
+      // Set ke dua field jika rewrite juga aktif
+      setValue("description", articleBody);
+      setValue("rewriteDescription", articleBody);
+    }
+  }, [articleBody, setValue]);
+
   const save = async (data: AudioSchema) => {
     loading();
     const finalTags = tags.join(", ");
     const finalTitle = isSwitchOn ? title : data.title;
-    const finalDescription = articleBody || data.description;
-    if (!finalDescription.trim()) {
+    const finalDescription = isSwitchOn
+      ? data.description
+      : selectedFileType === "rewrite"
+      ? data.rewriteDescription
+      : data.descriptionOri;
+    if (!finalDescription?.trim()) {
       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
       return;
     }
@@ -719,6 +744,45 @@ export default function FormAudio() {
     }
   }, [title, getValues, setValue]);
 
+  const handleRewriteClick = async () => {
+    setIsContentRewriteClicked(true);
+
+    const request = {
+      style: selectedWritingStyle,
+      lang: "id",
+      contextType: "text",
+      urlContext: null,
+      context: editorContent, // Ambil isi editor original
+      createdBy: roleId,
+      sentiment: "Humorous",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
+    };
+
+    const res = await generateDataRewrite(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+    setShowRewriteEditor(true);
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col lg:flex-row gap-10">
@@ -861,7 +925,7 @@ export default function FormAudio() {
                         placeholder="Enter Main Keyword"
                       />
                       {/* )}
-                  /> */}
+                                /> */}
                     </div>
                   </div>
                   <div className="mt-5">
@@ -911,7 +975,7 @@ export default function FormAudio() {
                     </div>
                   </div>
                   <div className="mt-5">
-                    <Label>{t("special-instructions")} (Optional)</Label>
+                    <Label>{t("special-instructions")}(Optional)</Label>
                     <div className="mt-3">
                       <Controller
                         control={control}
@@ -940,7 +1004,7 @@ export default function FormAudio() {
                     </div>
 
                     {isGeneratedArticle && (
-                      <div className="mt-3 pb-0 flex flex-row ">
+                      <div className="mt-3 pb-0 flex flex-row">
                         {articleIds.map((id: string, index: number) => (
                           <p
                             key={index}
@@ -960,50 +1024,155 @@ export default function FormAudio() {
                     <div className="pt-3">
                       <div className="flex flex-row justify-between items-center">
                         {selectedArticleId && (
-                          <Link
-                            href={`/contributor/content/audio/update-seo/${selectedArticleId}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
+                          <Button
+                            className="mb-2"
+                            size="sm"
+                            variant={"outline"}
+                            color="primary"
+                            onClick={() => {
+                              const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
+                              window.open(url, "_blank", "noopener,noreferrer");
+                            }}
                           >
-                            <Button
-                              className="mb-2"
-                              size="sm"
-                              variant={"outline"}
-                              color="primary"
-                            >
-                              {t("update")}
-                            </Button>
-                          </Link>
+                            {t("update")}
+                          </Button>
                         )}
                       </div>
                     </div>
                   </div>
+                  <div className="py-3 space-y-2">
+                    <Label>{t("description")}</Label>
+                    <Controller
+                      control={control}
+                      name="description"
+                      render={({ field: { onChange, value } }) =>
+                        isLoadingData ? (
+                          <div className="flex justify-center items-center h-40">
+                            <p className="text-gray-500">
+                              Loading Proses Data...
+                            </p>
+                          </div>
+                        ) : (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={articleBody || value}
+                          />
+                        )
+                      }
+                    />
+                    {errors.description?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.description.message}
+                      </p>
+                    )}
+                  </div>
                 </div>
               )}
-              <div className="space-y-2">
-                <Label>{t("description")}</Label>
-                <Controller
-                  control={control}
-                  name="description"
-                  render={({ field: { onChange, value } }) =>
-                    isLoadingData ? (
-                      <div className="flex justify-center items-center h-40">
-                        <p className="text-gray-500">Loading Proses Data...</p>
-                      </div>
-                    ) : (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody || value}
+              {!isSwitchOn && (
+                <>
+                  <RadioGroup
+                    onValueChange={(value) => setSelectedFileType(value)}
+                    value={selectedFileType}
+                    className=" grid-cols-1"
+                  >
+                    <div className="">
+                      <RadioGroupItem value="original" id="original-file" />
+                      <Label htmlFor="original-file">
+                        Select Original Description
+                      </Label>
+                    </div>
+                    <div className="py-3 space-y-2">
+                      <Label>{t("description")}</Label>
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={value}
+                          />
+                        )}
                       />
-                    )
-                  }
-                />
-                {errors.description?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.description.message}
-                  </p>
-                )}
-              </div>
+                      {errors.description?.message && (
+                        <p className="text-red-400 text-sm">
+                          {errors.description.message}
+                        </p>
+                      )}
+                    </div>
+
+                    <p className="text-sm font-semibold">Content Rewrite</p>
+                    <div className="my-2">
+                      <Button
+                        size="sm"
+                        type="button"
+                        onClick={handleRewriteClick}
+                        className="bg-blue-500 text-white py-2 px-4 rounded"
+                      >
+                        Content Rewrite
+                      </Button>
+                    </div>
+
+                    {showRewriteEditor && (
+                      <div>
+                        {isGeneratedArticle && (
+                          <div className="mt-3 pb-0 flex flex-row ">
+                            {articleIds.map((id: string, index: number) => (
+                              <Button
+                                type="button"
+                                key={index}
+                                className={`mr-3 px-3 py-2 rounded-md ${
+                                  selectedArticleId === id
+                                    ? "bg-green-500 text-white"
+                                    : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
+                                }`}
+                                onClick={() => handleArticleIdClick(id)}
+                              >
+                                {"Narasi " + (index + 1)}
+                              </Button>
+                            ))}
+                          </div>
+                        )}
+                        <div className="flex items-center space-x-2 mt-3">
+                          <RadioGroupItem value="rewrite" id="rewrite-file" />
+                          <Label htmlFor="rewrite-file">
+                            Select Description Rewrite
+                          </Label>
+                        </div>
+                        <div className="py-3 space-y-2">
+                          <Label>{t("file-rewrite")}</Label>
+                          <Controller
+                            control={control}
+                            name="rewriteDescription"
+                            render={({ field: { onChange, value } }) =>
+                              isLoadingData ? (
+                                <div className="flex justify-center items-center h-40">
+                                  <p className="text-gray-500">
+                                    Loading Proses Data...
+                                  </p>
+                                </div>
+                              ) : (
+                                <CustomEditor
+                                  onChange={(value: any) => {
+                                    onChange(value);
+                                    setRewriteEditorContent(value);
+                                  }}
+                                  initialData={articleBody || value}
+                                />
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </RadioGroup>
+                </>
+              )}
               <div className="py-3 space-y-2">
                 <Label>{t("select-file")}</Label>
                 {/* <Input
diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx
index 58933e16..9b1e17d3 100644
--- a/components/form/content/image-form.tsx
+++ b/components/form/content/image-form.tsx
@@ -40,6 +40,7 @@ import { uploadThumbnailBlog } from "@/service/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
 import {
   generateDataArticle,
+  generateDataRewrite,
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
@@ -94,6 +95,7 @@ export default function FormImage() {
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
+  const [selectedFileType, setSelectedFileType] = useState("original");
 
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<any>();
@@ -116,7 +118,10 @@ export default function FormImage() {
     null
   );
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
-  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
+  const [selectedWritingStyle, setSelectedWritingStyle] =
+    useState("professional");
+  const [editorContent, setEditorContent] = useState(""); // Untuk original editor
+  const [rewriteEditorContent, setRewriteEditorContent] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
   const [detailData, setDetailData] = useState<any>(null);
   const [articleImages, setArticleImages] = useState<string[]>([]);
@@ -125,6 +130,8 @@ export default function FormImage() {
 
   const [content, setContent] = useState("");
 
+  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
+
   const [selectedTarget, setSelectedTarget] = useState("");
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
@@ -140,6 +147,7 @@ export default function FormImage() {
   let uploadPersen = 0;
   const [isStartUpload, setIsStartUpload] = useState(false);
   const [counterProgress, setCounterProgress] = useState(0);
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
 
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   const [filesTemp, setFilesTemp] = useState<File[]>([]);
@@ -164,16 +172,10 @@ export default function FormImage() {
 
   const imageSchema = z.object({
     title: z.string().min(1, { message: "Judul diperlukan" }),
-    description: z
-      .string()
-      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
-      .or(
-        z.literal(articleBody || "").refine((val) => val.length > 0, {
-          message: "Deskripsi diperlukan.",
-        })
-      ),
+    description: z.string().optional(),
+    descriptionOri: z.string().optional(),
+    rewriteDescription: z.string().optional(),
     creatorName: z.string().min(1, { message: "Creator diperlukan" }),
-    // tags: z.string().min(1, { message: "Judul diperlukan" }),
   });
 
   const {
@@ -184,6 +186,11 @@ export default function FormImage() {
     formState: { errors },
   } = useForm<ImageSchema>({
     resolver: zodResolver(imageSchema),
+    defaultValues: {
+      description: "",
+      descriptionOri: "",
+      rewriteDescription: "",
+    },
   });
 
   const doGenerateMainKeyword = async () => {
@@ -446,13 +453,25 @@ export default function FormImage() {
     }
   };
 
+  useEffect(() => {
+    if (articleBody) {
+      setValue("description", articleBody);
+      setValue("rewriteDescription", articleBody);
+    }
+  }, [articleBody, setValue]);
+
   const save = async (data: ImageSchema) => {
     loading();
     const finalTags = tags.join(", ");
     const finalTitle = isSwitchOn ? title : data.title;
-    const finalDescription = articleBody || data.description;
+    // const finalDescription = articleBody || data.description;
+    const finalDescription = isSwitchOn
+      ? data.description
+      : selectedFileType === "rewrite"
+      ? data.rewriteDescription
+      : data.descriptionOri;
 
-    if (!finalDescription.trim()) {
+    if (!finalDescription?.trim()) {
       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
       return;
     }
@@ -716,6 +735,45 @@ export default function FormImage() {
     }
   }, [title, getValues, setValue]);
 
+  const handleRewriteClick = async () => {
+    setIsContentRewriteClicked(true);
+
+    const request = {
+      style: selectedWritingStyle,
+      lang: "id",
+      contextType: "text",
+      urlContext: null,
+      context: editorContent, // Ambil isi editor original
+      createdBy: roleId,
+      sentiment: "Humorous",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
+    };
+
+    const res = await generateDataRewrite(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+    setShowRewriteEditor(true);
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col lg:flex-row gap-10">
@@ -930,6 +988,7 @@ export default function FormImage() {
                         color="primary"
                         onClick={handleGenerateArtikel}
                         size="sm"
+                        type="button"
                       >
                         Generate Article
                       </Button>
@@ -972,32 +1031,139 @@ export default function FormImage() {
                       </div>
                     </div>
                   </div>
+                  <div className="py-3 space-y-2">
+                    <Label>{t("description")}</Label>
+                    <Controller
+                      control={control}
+                      name="description"
+                      render={({ field: { onChange, value } }) =>
+                        isLoadingData ? (
+                          <div className="flex justify-center items-center h-40">
+                            <p className="text-gray-500">
+                              Loading Proses Data...
+                            </p>
+                          </div>
+                        ) : (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={articleBody || value}
+                          />
+                        )
+                      }
+                    />
+                    {errors.description?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.description.message}
+                      </p>
+                    )}
+                  </div>
                 </div>
               )}
-              <div className="py-3 space-y-2">
-                <Label>{t("description")}</Label>
-                <Controller
-                  control={control}
-                  name="description"
-                  render={({ field: { onChange, value } }) =>
-                    isLoadingData ? (
-                      <div className="flex justify-center items-center h-40">
-                        <p className="text-gray-500">Loading Proses Data...</p>
-                      </div>
-                    ) : (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody || value}
+              {!isSwitchOn && (
+                <>
+                  <RadioGroup
+                    onValueChange={(value) => setSelectedFileType(value)}
+                    value={selectedFileType}
+                    className=" grid-cols-1"
+                  >
+                    <div className="">
+                      <RadioGroupItem value="original" id="original-file" />
+                      <Label htmlFor="original-file">
+                        Select Original Description
+                      </Label>
+                    </div>
+                    <div className="py-3 space-y-2">
+                      <Label>{t("description")}</Label>
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={value}
+                          />
+                        )}
                       />
-                    )
-                  }
-                />
-                {errors.description?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.description.message}
-                  </p>
-                )}
-              </div>
+                      {errors.description?.message && (
+                        <p className="text-red-400 text-sm">
+                          {errors.description.message}
+                        </p>
+                      )}
+                    </div>
+
+                    <p className="text-sm font-semibold">Content Rewrite</p>
+                    <div className="my-2">
+                      <Button
+                        size="sm"
+                        type="button"
+                        onClick={handleRewriteClick}
+                        className="bg-blue-500 text-white py-2 px-4 rounded"
+                      >
+                        Content Rewrite
+                      </Button>
+                    </div>
+
+                    {showRewriteEditor && (
+                      <div>
+                        {isGeneratedArticle && (
+                          <div className="mt-3 pb-0 flex flex-row ">
+                            {articleIds.map((id: string, index: number) => (
+                              <Button
+                                type="button"
+                                key={index}
+                                className={`mr-3 px-3 py-2 rounded-md ${
+                                  selectedArticleId === id
+                                    ? "bg-green-500 text-white"
+                                    : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
+                                }`}
+                                onClick={() => handleArticleIdClick(id)}
+                              >
+                                {"Narasi " + (index + 1)}
+                              </Button>
+                            ))}
+                          </div>
+                        )}
+                        <div className="flex items-center space-x-2 mt-3">
+                          <RadioGroupItem value="rewrite" id="rewrite-file" />
+                          <Label htmlFor="rewrite-file">
+                            Select Description Rewrite
+                          </Label>
+                        </div>
+                        <div className="py-3 space-y-2">
+                          <Label>{t("file-rewrite")}</Label>
+                          <Controller
+                            control={control}
+                            name="rewriteDescription"
+                            render={({ field: { onChange, value } }) =>
+                              isLoadingData ? (
+                                <div className="flex justify-center items-center h-40">
+                                  <p className="text-gray-500">
+                                    Loading Proses Data...
+                                  </p>
+                                </div>
+                              ) : (
+                                <CustomEditor
+                                  onChange={(value: any) => {
+                                    onChange(value);
+                                    setRewriteEditorContent(value);
+                                  }}
+                                  initialData={articleBody || value}
+                                />
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </RadioGroup>
+                </>
+              )}
               <div className="py-3 space-y-2">
                 <Label>{t("select-file")}</Label>
                 {/* <Input
diff --git a/components/form/content/spit-convert-form.tsx b/components/form/content/spit-convert-form.tsx
index 06465569..51643adf 100644
--- a/components/form/content/spit-convert-form.tsx
+++ b/components/form/content/spit-convert-form.tsx
@@ -1,15 +1,22 @@
 "use client";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { useParams, useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import dynamic from "next/dynamic";
+import Cookies from "js-cookie";
+
+// UI Components
 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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Separator } from "@/components/ui/separator";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -19,50 +26,60 @@ import {
 } from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
-import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
-import {
-  convertSPIT,
-  createMedia,
-  deleteSPIT,
-  detailSPIT,
-  getTagsBySubCategoryId,
-  listCategory,
-  listEnableCategory,
-} from "@/service/content/content";
-import { detailMedia } from "@/service/curated-content/curated-content";
-import { Badge } from "@/components/ui/badge";
-import { MailIcon } from "lucide-react";
+
+// Icons
+import { 
+  AlertCircle, 
+  FileText, 
+  Image, 
+  Loader2, 
+  Save, 
+  Trash2, 
+  Edit3,
+  Globe,
+  Users,
+  Tag,
+  Eye,
+  Settings,
+  CheckCircle,
+  XCircle
+} from "lucide-react";
+
+// Swiper
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/thumbs";
-import "swiper/css";
-import "swiper/css/navigation";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
-import { request } from "http";
+
+// Services
+import {
+  convertSPIT,
+  deleteSPIT,
+  detailSPIT,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+} from "@/service/content/content";
 import {
-  generateDataArticle,
   generateDataRewrite,
   getDetailArticle,
 } from "@/service/content/ai";
-import { getCookiesDecrypt } from "@/lib/utils";
-import dynamic from "next/dynamic";
-import { error } from "@/lib/swal";
-import { useTranslations } from "next-intl";
-import { contextType } from "cleave.js/react";
-import { Form } from "@/components/ui/form";
 
-type Category = {
+// Utils
+import { getCookiesDecrypt } from "@/lib/utils";
+import { error } from "@/lib/swal";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+// Types
+interface Category {
   id: number;
   name: string;
-};
+}
 
-type Detail = {
+interface Detail {
   id: string;
   contentTitle: string;
   contentDescription: string;
@@ -75,17 +92,20 @@ type Detail = {
   creatorName: string;
   contentThumbnail: string;
   contentTag: string;
-};
+  categoryId?: number;
+  contentList?: FileType[];
+}
 
-type Option = {
+interface Option {
   id: string;
   label: string;
-};
+}
 
-interface FileData {
+interface FileType {
   contentId: number;
-  placement?: string[];
-  [key: string]: any;
+  contentFile: string;
+  thumbnailFileUrl: string;
+  fileName: string;
 }
 
 interface PlacementData {
@@ -93,1058 +113,993 @@ interface PlacementData {
   placements: string;
 }
 
-type FileType = {
-  contentId: number;
-  contentFile: string;
-  thumbnailFileUrl: string;
-  fileName: string;
-};
+// Schema
+const formSchema = z.object({
+  contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
+  contentDescription: z.string().optional(),
+  contentRewriteDescription: z.string().optional(),
+  contentCreator: z.string().min(1, { message: "Creator diperlukan" }),
+});
 
+type FormData = z.infer<typeof formSchema>;
+
+// Constants
+const PUBLISH_OPTIONS: Option[] = [
+  { id: "all", label: "SEMUA" },
+  { id: "5", label: "UMUM" },
+  { id: "6", label: "JOURNALIS" },
+  { id: "7", label: "POLRI" },
+  { id: "8", label: "KSP" },
+];
+
+const WRITING_STYLES = [
+  { value: "friendly", label: "Friendly" },
+  { value: "professional", label: "Profesional" },
+  { value: "informational", label: "Informational" },
+  { value: "neutral", label: "Neutral" },
+  { value: "witty", label: "Witty" },
+];
+
+const PLACEMENT_OPTIONS = [
+  { value: "all", label: "Semua" },
+  { value: "mabes", label: "Nasional" },
+  { value: "polda", label: "Wilayah" },
+  { value: "international", label: "Internasional" },
+];
+
+// Dynamic imports
 const CustomEditor = dynamic(
-  () => {
-    return import("@/components/editor/custom-editor");
-  },
-  { ssr: false }
+  () => import("@/components/editor/custom-editor"),
+  { 
+    ssr: false,
+    loading: () => (
+      <div className="flex items-center justify-center h-32 border rounded-md bg-muted/50">
+        <Loader2 className="h-6 w-6 animate-spin" />
+        <span className="ml-2">Loading editor...</span>
+      </div>
+    )
+  }
 );
 
 export default function FormConvertSPIT() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
-
-  const { id } = useParams() as { id: string };
-  console.log(id);
-  const editor = useRef(null);
-  // type ImageSchema = z.infer<typeof imageSchema>;
-
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-  const taskId = Cookies.get("taskId");
-  const scheduleId = Cookies.get("scheduleId");
-  const scheduleType = Cookies.get("scheduleType");
-
-  const [categories, setCategories] = useState<Category[]>([]);
-  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(
-    null
-  );
-  const [detail, setDetail] = useState<any>();
-  const [refresh, setRefresh] = useState(false);
-  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
-  const [detailThumb, setDetailThumb] = useState<any>([]);
-  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
-  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
-  const [title, setTitle] = useState<string>("");
-  const [articleIds, setArticleIds] = useState<string[]>([]);
-  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
-  const [articleBody, setArticleBody] = useState<string>("");
-  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
-  );
-  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
   const t = useTranslations("Form");
-  const [detailData, setDetailData] = useState<any>(null);
-  const [selectedFileType, setSelectedFileType] = useState("original");
-  const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
-  const userLevelId = getCookiesDecrypt("ulie");
-  const userLevelNumber = getCookiesDecrypt("ulne");
-  const roleId = getCookiesDecrypt("urie");
-  const [isMabesApprover, setIsMabesApprover] = useState(false);
-  const [selectedTarget, setSelectedTarget] = useState("");
-  const [unitSelection, setUnitSelection] = useState({
-    allUnit: false,
-    mabes: false,
-    polda: false,
-    polres: false,
-  });
-  const [publishedFor, setPublishedFor] = useState<string[]>([]);
-  const [filePlacements, setFilePlacements] = useState<string[][]>([]);
-  const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
-  const [files, setFiles] = useState<FileType[]>([]);
-  const [tags, setTags] = useState<any[]>([]);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [selectedWritingStyle, setSelectedWritingStyle] =
-    useState("Professional");
+  const { id } = useParams() as { id: string };
 
-  const imageSchema = z.object({
-    contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
-    contentDescription: z
-      .string()
-      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
-    contentCreator: z.string().min(1, { message: "Creator diperlukan" }),
-    contentRewriteDescription: z.string().optional(),
-  });
-  // .refine(
-  //   (data) => {
-  //     if (isContentRewriteClicked) {
-  //       return detail?.contentRewriteDescription?.trim().length > 0;
-  //     }
-  //     return true;
-  //   },
-  //   {
-  //     path: ["contentRewriteDescription"],
-  //     message: "File hasil rewrite wajib diisi",
-  //   }
-  // );
-
-  const options: Option[] = [
-    { id: "all", label: "SEMUA" },
-    { id: "5", label: "UMUM" },
-    { id: "6", label: "JOURNALIS" },
-    { id: "7", label: "POLRI" },
-    { id: "8", label: "KSP" },
-  ];
-
-  let fileTypeId = "1";
-
-  // const {
-  //   control,
-  //   handleSubmit,
-  //   setValue,
-  //   formState: { errors },
-  // } = useForm<ImageSchema>({
-  //   resolver: zodResolver(imageSchema),
-  //   defaultValues: {
-  //     contentTitle: detail?.contentTitle || "",
-  //     contentDescription: detail?.contentDescription || "",
-  //     contentCreator: detail?.contentCreator || "",
-  //     contentRewriteDescription: detail?.contentRewriteDescription || "",
-  //     // dll
-  //   },
-  // });
-
-  const form = useForm<z.infer<typeof imageSchema>>({
-    resolver: zodResolver(imageSchema),
+  // Form state
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors, isSubmitting },
+    watch,
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
     defaultValues: {
-      contentTitle: detail?.contentTitle || "",
-      contentDescription: detail?.contentDescription || "",
-      contentCreator: detail?.contentCreator || "",
-
-      // dll
+      contentTitle: "",
+      contentDescription: "",
+      contentCreator: "",
+      contentRewriteDescription: "",
     },
   });
 
-  const handleRemoveTag = (index: any) => {
-    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
-  };
+  // Component state
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [detail, setDetail] = useState<Detail | null>(null);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
+  const [selectedFileType, setSelectedFileType] = useState<"original" | "rewrite">("original");
+  const [selectedWritingStyle, setSelectedWritingStyle] = useState("professional");
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
+  const [isGeneratingRewrite, setIsGeneratingRewrite] = useState(false);
+  const [isLoadingRewrite, setIsLoadingRewrite] = useState(false);
+  
+  // Media state
+  const [detailThumb, setDetailThumb] = useState<string[]>([]);
+  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [filePlacements, setFilePlacements] = useState<string[][]>([]);
+  
+  // Content rewrite state
+  const [articleIds, setArticleIds] = useState<string[]>([]);
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(null);
+  const [articleBody, setArticleBody] = useState<string>("");
+  
+  // Form data state
+  const [tags, setTags] = useState<string[]>([]);
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const [inputRef] = useState(useRef<HTMLInputElement>(null));
 
-  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files) {
-      const files = Array.from(event.target.files);
-      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
-      console.log("DATAFILE::", selectedFiles);
-    }
-  };
-
-  const handleRemoveImage = (index: number) => {
-    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
-  };
-
-  const handleDirectSave = () => {
-    const values = form.getValues();
-    onSubmit(values);
-  };
+  // User permissions
+  const userLevelId = getCookiesDecrypt("ulie");
+  const roleId = getCookiesDecrypt("urie");
+  const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
 
+  // Initialize component
   useEffect(() => {
-    async function initState() {
-      getCategories();
-    }
-
-    initState();
+    initializeComponent();
   }, []);
 
   useEffect(() => {
-    if (
-      userLevelId != undefined &&
-      roleId != undefined &&
-      userLevelId == "216" &&
-      roleId == "3"
-    ) {
+    checkUserPermissions();
+  }, [userLevelId, roleId]);
+
+  const initializeComponent = async () => {
+    try {
+      setIsLoading(true);
+      await Promise.all([
+        loadCategories(),
+        id ? loadDetail() : Promise.resolve(),
+      ]);
+    } catch (error) {
+      console.error("Failed to initialize component:", error);
+      MySwal.fire({
+        title: "Error",
+        text: "Failed to load data. Please try again.",
+        icon: "error",
+        confirmButtonColor: "#3085d6",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const checkUserPermissions = () => {
+    if (userLevelId === "216" && roleId === "3") {
       setIsUserMabesApprover(true);
     }
-  }, [userLevelId, roleId]);
+  };
 
-  useEffect(() => {
-    if (
-      userLevelId != undefined &&
-      roleId != undefined &&
-      userLevelId == "216" &&
-      roleId == "3"
-    ) {
-      setIsMabesApprover(true);
-    }
-  }, [userLevelId, roleId]);
-
-  const getCategories = async () => {
+  const loadCategories = async () => {
     try {
-      const category = await listCategory(fileTypeId);
-      const resCategory: Category[] = category?.data?.data?.content;
-
-      setCategories(resCategory);
-      console.log("data category", resCategory);
+      const response = await listEnableCategory("1");
+      const categories = response?.data?.data?.content || [];
+      setCategories(categories);
 
+      // Auto-select "Pers Rilis" category if schedule type is 3
+      const scheduleId = Cookies.get("scheduleId");
+      const scheduleType = Cookies.get("scheduleType");
+      
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
+        const persRilisCategory = categories.find((cat: Category) =>
+          cat.name.toLowerCase().includes("pers rilis")
         );
-
-        if (findCategory) {
-          setSelectedCategoryId(findCategory.id);
-          const response = await getTagsBySubCategoryId(findCategory.id);
-          setTags(response?.data?.data);
+        if (persRilisCategory) {
+          setSelectedCategoryId(persRilisCategory.id);
+          await loadTags(persRilisCategory.id);
         }
       }
     } catch (error) {
-      console.error("Failed to fetch categories:", error);
+      console.error("Failed to load categories:", error);
     }
   };
 
-  const setupPlacement = (
-    index: number,
-    placement: string,
-    checked: boolean
-  ) => {
-    let temp = [...filePlacements];
-    if (checked) {
-      if (placement === "all") {
-        temp[index] = ["all", "mabes", "polda", "international"];
-      } else {
-        const now = temp[index];
-        now.push(placement);
-        if (now.length === 3 && !now.includes("all")) {
-          now.push("all");
-        }
-        temp[index] = now;
-      }
-    } else {
-      if (placement === "all") {
-        temp[index] = [];
-      } else {
-        const now = temp[index].filter((a) => a !== placement);
-        console.log("now", now);
-        temp[index] = now;
-        if (now.length === 3 && now.includes("all")) {
-          const newData = now.filter((b) => b !== "all");
-          temp[index] = newData;
-        }
-      }
-    }
-    setFilePlacements(temp);
-  };
-
-  const setupPlacementCheck = (length: number) => {
-    const temp = [];
-    for (let i = 0; i < length; i++) {
-      temp.push([]);
-    }
-    setFilePlacements(temp);
-  };
-
-  useEffect(() => {
-    async function initState() {
-      if (id) {
-        const response = await detailSPIT(id);
-        const details = response?.data?.data;
-
-        setDetail(details);
-        setFiles(details?.contentList);
-        setupPlacementCheck(details?.contentList?.length);
-        form.setValue("contentTitle", details?.contentTitle || "");
-        form.setValue("contentDescription", details?.contentDescription || "");
-        form.setValue("contentCreator", details?.contentCreator || "");
-        form.setValue(
-          "contentRewriteDescription",
-          details?.contentRewriteDescription || ""
-        );
-
-        const filesData = details.contentList || [];
-        const fileUrls = filesData.map((file: { contentFile: string }) =>
-          file.contentFile ? file.contentFile : "default-image.jpg"
-        );
-        setDetailThumb(fileUrls);
-
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
-
-        if (matchingCategory) {
-          setSelectedTarget(matchingCategory.name);
-        }
-
-        if (details?.contentTag) {
-          const initialTags = details.contentTag
-            .split(",")
-            .map((tag: string) => tag.trim());
-          setTags(initialTags);
-        }
-
-        // setSelectedTarget(details.categoryId); // Untuk dropdown
-      }
-    }
-    initState();
-  }, [refresh]);
-
-  const [tempFile, setTempFile] = useState(
-    detailThumb.map((data: any) => ({
-      contentId: data.id,
-      placement: [],
-    }))
-  );
-
-  const handleCheckboxChangeFile = (contentId: number, value: string) => {
-    setTempFile((prevTempFile: any) => {
-      return prevTempFile.map((file: any) => {
-        if (file.contentId === contentId) {
-          const isChecked = file.placement?.includes(value);
-          return {
-            ...file,
-            placement: isChecked
-              ? file.placement.filter((v: any) => v !== value)
-              : [...(file.placement || []), value],
-          };
-        }
-        return file;
-      });
-    });
-  };
-
-  const handleCheckboxChange = (id: string): void => {
-    if (id === "all") {
-      if (publishedFor.includes("all")) {
-        setPublishedFor([]);
-      } else {
-        setPublishedFor(
-          options
-            .filter((opt: any) => opt.id !== "all")
-            .map((opt: any) => opt.id)
-        );
-      }
-    } else {
-      const updatedPublishedFor = publishedFor.includes(id)
-        ? publishedFor.filter((item) => item !== id)
-        : [...publishedFor, id];
-
-      if (publishedFor.includes("all") && id !== "all") {
-        setPublishedFor(updatedPublishedFor.filter((item) => item !== "all"));
-      } else {
-        setPublishedFor(updatedPublishedFor);
+  const loadTags = async (categoryId: number) => {
+    try {
+      const response = await getTagsBySubCategoryId(categoryId);
+      if (response?.data?.data?.length > 0) {
+        const tagsMerge = [...tags, response?.data?.data]
+        setTags(tagsMerge);
       }
+    } catch (error) {
+      console.error("Failed to load tags:", error);
     }
   };
 
-  const getPlacement = () => {
-    console.log("getPlaa", filePlacements);
-    const temp = [];
-    for (let i = 0; i < filePlacements?.length; i++) {
-      if (filePlacements[i].length !== 0) {
-        const now = filePlacements[i].filter((a) => a !== "all");
-        const data = {
-          mediaFileId: files[i].contentId,
-          placement: now.join(","),
-        };
-        temp.push(data);
+  const loadDetail = async () => {
+    try {
+      const response = await detailSPIT(id);
+      const details = response?.data?.data;
+      
+      if (!details) {
+        throw new Error("Detail not found");
       }
-    }
-    return temp;
-  };
 
-  // const setupPlacement = (
-  //   index: number,
-  //   category: string,
-  //   isChecked: boolean
-  // ) => {
-  //   setFilePlacements((prev) =>
-  //     prev.map((placement, i) =>
-  //       i === index
-  //         ? isChecked
-  //           ? [...new Set([...placement, category])] // Tambahkan kategori jika belum ada
-  //           : placement.filter((item) => item !== category) // Hapus kategori jika ada
-  //         : placement
-  //     )
-  //   );
-  // };
+      setDetail(details);
+      setFiles(details.contentList || []);
+      setDetailThumb(
+        (details.contentList || []).map((file: FileType) => 
+          file.contentFile || "default-image.jpg"
+        )
+      );
+      
+      // Initialize file placements
+      const fileCount = details.contentList?.length || 0;
+      setFilePlacements(Array(fileCount).fill([]));
 
-  const handleSelectAll = (category: string, isChecked: boolean) => {
-    setFilePlacements((prev: string[][]) =>
-      prev.map((placement: string[]) =>
-        isChecked
-          ? Array.from(new Set([...placement, category]))
-          : placement.filter((item: string) => item !== category)
-      )
-    );
-  };
+      // Set form values
+      setValue("contentTitle", details.contentTitle || "");
+      setValue("contentDescription", details.contentDescription || "");
+      setValue("contentCreator", details.contentCreator || "");
+      setValue("contentRewriteDescription", details.contentRewriteDescription || "");
 
-  const save = async (data: {
-    contentTitle: string;
-    contentDescription: string;
-    contentRewriteDescription?: string;
-    contentCreator: string;
-  }): Promise<void> => {
-    const temp = [];
-    for (const element of detail.contentList) {
-      temp.push([]);
-    }
-    const description =
-      selectedFileType === "original"
-        ? data.contentDescription
-        : data.contentRewriteDescription;
-    const finalTags = tags.join(", ");
-
-    const requestData = {
-      spitId: id,
-      title: data.contentTitle,
-      description,
-      htmlDescription: description,
-      tags: finalTags,
-      categoryId: selectedCategoryId,
-      publishedFor: publishedFor.join(","),
-      creator: data.contentCreator,
-      files: isUserMabesApprover ? getPlacement() : [],
-    };
-
-    const response = await convertSPIT(requestData);
-    console.log("Form Data Submitted:", response);
-    setFilePlacements(temp);
-    setFiles(detail.files);
-    MySwal.fire({
-      title: "Sukses",
-      text: "Data berhasil disimpan.",
-      icon: "success",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "OK",
-    }).then(() => {
-      router.push("/en/contributor/content/spit");
-    });
-  };
-
-  const onSubmit = async (data: z.infer<typeof imageSchema>) => {
-    MySwal.fire({
-      title: "Simpan Data",
-      text: "Apakah Anda yakin ingin menyimpan data ini?",
-      icon: "warning",
-      showCancelButton: true,
-      cancelButtonColor: "#d33",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "Simpan",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        save(data);
+      // Set category
+      if (details.categoryId) {
+        setSelectedCategoryId(details.categoryId);
+        await loadTags(details.categoryId);
       }
-    });
+
+      // Set tags
+      if (details.contentTag) {
+        const initialTags = details.contentTag.split(",").map((tag: string) => tag.trim());
+        setTags(initialTags);
+      }
+    } catch (error) {
+      console.error("Failed to load detail:", error);
+      throw error;
+    }
   };
 
-  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
-
-  // const handleRewriteClick = () => {
-  //   setShowRewriteEditor(true);
-  // };
+  // Event handlers
+  const handleCategoryChange = async (categoryId: string) => {
+    const id = Number(categoryId);
+    setSelectedCategoryId(id);
+    await loadTags(id);
+  };
 
   const handleRewriteClick = async () => {
-    setIsContentRewriteClicked(true);
-    const request = {
-      style: selectedWritingStyle,
-      lang: "id",
-      contextType: "text",
-      urlContext: null,
-      context: detail?.contentDescription,
-      createdBy: roleId,
-      sentiment: "Humorous",
-      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
-    };
-
-    const res = await generateDataRewrite(request);
-    close();
-
-    if (res?.error) {
-      console.error(res.message);
-      return false;
+    if (!detail?.contentDescription) {
+      MySwal.fire({
+        title: "Warning",
+        text: "Please add content description first",
+        icon: "warning",
+        confirmButtonColor: "#3085d6",
+      });
+      return;
     }
 
-    const newArticleId = res?.data?.data?.id;
-    setIsGeneratedArticle(true);
-
-    setArticleIds((prevIds: string[]) => {
-      if (prevIds.length < 3) {
-        return [...prevIds, newArticleId];
-      } else {
-        const updatedIds = [...prevIds];
-        updatedIds[2] = newArticleId;
-        return updatedIds;
-      }
-    });
-
-    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
-    setShowRewriteEditor(true);
-  };
-
-  const handleArticleIdClick = async (id: string) => {
-    setIsLoadingData(true);
-    let retryCount = 0;
-    const maxRetries = 20;
-
     try {
-      const waitForStatusUpdate = async () => {
-        while (retryCount < maxRetries) {
-          const res = await getDetailArticle(id);
-          const articleData = res?.data?.data;
-
-          if (articleData?.status === 2) {
-            return articleData;
-          }
-
-          retryCount++;
-          await new Promise((resolve) => setTimeout(resolve, 5000));
-        }
-
-        throw new Error("Timeout: Artikel belum selesai diproses.");
+      setIsGeneratingRewrite(true);
+      const request = {
+        style: selectedWritingStyle,
+        lang: "id",
+        contextType: "text",
+        urlContext: null,
+        context: detail.contentDescription,
+        createdBy: roleId,
+        sentiment: "Humorous",
+        clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
       };
-      const articleData = await waitForStatusUpdate();
-      const cleanArticleBody = articleData?.articleBody?.replace(
-        /<img[^>]*>/g,
-        ""
-      );
-      const articleImagesData = articleData?.imagesUrl?.split(",");
-      setArticleBody(cleanArticleBody || "");
-      setDetailData(articleData);
-      setSelectedArticleId(id);
 
-      // setArticleImages(articleImagesData || []);
+      const response = await generateDataRewrite(request);
+      
+      if (response?.error) {
+        throw new Error(response.message);
+      }
+
+      const newArticleId = response?.data?.data?.id;
+      setArticleIds(prev => {
+        const updated = [...prev];
+        if (updated.length < 3) {
+          updated.push(newArticleId);
+        } else {
+          updated[2] = newArticleId;
+        }
+        return updated;
+      });
+
+      setShowRewriteEditor(true);
+      MySwal.fire({
+        title: "Success",
+        text: "Content rewrite generated successfully",
+        icon: "success",
+        confirmButtonColor: "#3085d6",
+      });
     } catch (error) {
-      console.error("Error fetching article details:", error);
+      console.error("Failed to generate rewrite:", error);
+      MySwal.fire({
+        title: "Error",
+        text: "Failed to generate content rewrite",
+        icon: "error",
+        confirmButtonColor: "#3085d6",
+      });
     } finally {
-      setIsLoadingData(false);
+      setIsGeneratingRewrite(false);
     }
   };
 
-  function deleteSpitContent() {
-    MySwal.fire({
-      title: "Apakah anda ingin menghapus konten?",
-      showCancelButton: true,
-      confirmButtonColor: "#dc3545",
-      confirmButtonText: "Iya",
-      cancelButtonText: "Tidak",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        doDeleteSPIT();
-      }
-    });
-  }
+  const handleArticleSelect = async (articleId: string) => {
+    try {
+      setIsLoadingRewrite(true);
+      setSelectedArticleId(articleId);
+      
+      let retryCount = 0;
+      const maxRetries = 20;
+      
+      while (retryCount < maxRetries) {
+        const response = await getDetailArticle(articleId);
+        const articleData = response?.data?.data;
 
-  async function doDeleteSPIT() {
-    const response = await deleteSPIT(id);
-    if (response?.error) {
-      error(response.message);
-      return false;
-    }
-
-    successBack();
-  }
-
-  function successBack() {
-    MySwal?.fire({
-      title: "Sukses",
-      icon: "success",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "OK",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        if (window.history.state && window.history.state.idx > 0) {
-          console.log("backkkkk");
-          console.log(window.history.state);
-          router.back();
-        } else {
-          router.push("/in/contributor/content/spit");
+        if (articleData?.status === 2) {
+          const cleanArticleBody = articleData.articleBody?.replace(/<img[^>]*>/g, "");
+          setArticleBody(cleanArticleBody || "");
+          setValue("contentRewriteDescription", cleanArticleBody || "");
+          break;
         }
+
+        retryCount++;
+        await new Promise(resolve => setTimeout(resolve, 5000));
       }
-    });
-  }
+
+      if (retryCount >= maxRetries) {
+        throw new Error("Timeout: Article processing took too long");
+      }
+    } catch (error) {
+      console.error("Failed to load article:", error);
+      MySwal.fire({
+        title: "Error",
+        text: "Failed to load article content",
+        icon: "error",
+        confirmButtonColor: "#3085d6",
+      });
+    } finally {
+      setIsLoadingRewrite(false);
+    }
+  };
 
   const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && inputRef.current?.value.trim()) {
       e.preventDefault();
       const newTag = inputRef.current.value.trim();
-
+      
       if (!tags.includes(newTag)) {
-        setTags((prevTags) => [...prevTags, newTag]);
+        setTags(prev => [...prev, newTag]);
       }
-
+      
       inputRef.current.value = "";
     }
   };
 
+  const handleRemoveTag = (index: number) => {
+    setTags(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handlePublishTargetChange = (optionId: string) => {
+    if (optionId === "all") {
+      setPublishedFor(prev => 
+        prev.length === PUBLISH_OPTIONS.filter(opt => opt.id !== "all").length 
+          ? [] 
+          : PUBLISH_OPTIONS.filter(opt => opt.id !== "all").map(opt => opt.id)
+      );
+    } else {
+      setPublishedFor(prev => 
+        prev.includes(optionId) 
+          ? prev.filter(id => id !== optionId && id !== "all")
+          : [...prev.filter(id => id !== "all"), optionId]
+      );
+    }
+  };
+
+  const handleFilePlacementChange = (fileIndex: number, placement: string, checked: boolean) => {
+    setFilePlacements(prev => {
+      const updated = [...prev];
+      const currentPlacements = updated[fileIndex] || [];
+      
+      if (checked) {
+        if (placement === "all") {
+          updated[fileIndex] = ["all", "mabes", "polda", "international"];
+        } else {
+          const newPlacements = [...currentPlacements, placement];
+          if (newPlacements.length === 3 && !newPlacements.includes("all")) {
+            newPlacements.push("all");
+          }
+          updated[fileIndex] = newPlacements;
+        }
+      } else {
+        if (placement === "all") {
+          updated[fileIndex] = [];
+        } else {
+          const newPlacements = currentPlacements.filter(p => p !== placement);
+          if (newPlacements.length === 3 && newPlacements.includes("all")) {
+            updated[fileIndex] = newPlacements.filter(p => p !== "all");
+          } else {
+            updated[fileIndex] = newPlacements;
+          }
+        }
+      }
+      
+      return updated;
+    });
+  };
+
+  const handleSelectAllPlacements = (placement: string, checked: boolean) => {
+    setFilePlacements(prev => 
+      prev.map(filePlacements => 
+        checked 
+          ? Array.from(new Set([...filePlacements, placement]))
+          : filePlacements.filter(p => p !== placement)
+      )
+    );
+  };
+
+  const getPlacementData = () => {
+    const placementData = [];
+    console.log("filePlacements : ", filePlacements);
+    for (let i = 0; i < filePlacements.length; i++) {
+      if (filePlacements[i].length > 0) {
+        const placements = filePlacements[i]; 
+        placementData.push({
+          mediaFileId: files[i].contentId,
+          placements: placements.join(","),
+        });
+      }
+    }
+    return placementData;
+  };
+
+  // Form submission
+  const onSubmit = async (data: FormData) => {
+    try {
+      setIsSaving(true);
+      
+      const description = selectedFileType === "original" 
+        ? data.contentDescription 
+        : data.contentRewriteDescription;
+      
+      const requestData = {
+        spitId: id,
+        title: data.contentTitle,
+        description,
+        htmlDescription: description,
+        tags: tags.join(", "),
+        categoryId: selectedCategoryId,
+        publishedFor: publishedFor.join(","),
+        creator: data.contentCreator,
+        files: isUserMabesApprover ? getPlacementData() : [],
+      };
+
+      await convertSPIT(requestData);
+      
+      MySwal.fire({
+        title: "Success",
+        text: "Data saved successfully",
+        icon: "success",
+        confirmButtonColor: "#3085d6",
+      }).then(() => {
+        router.push("/in/contributor/content/spit");
+      });
+    } catch (error) {
+      console.error("Failed to save:", error);
+      MySwal.fire({
+        title: "Error",
+        text: "Failed to save data",
+        icon: "error",
+        confirmButtonColor: "#3085d6",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    const result = await MySwal.fire({
+      title: "Delete Content",
+      text: "Are you sure you want to delete this content?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#dc3545",
+      cancelButtonColor: "#6c757d",
+      confirmButtonText: "Delete",
+      cancelButtonText: "Cancel",
+    });
+
+    if (result.isConfirmed) {
+      try {
+        setIsDeleting(true);
+        await deleteSPIT(id);
+        
+        MySwal.fire({
+          title: "Success",
+          text: "Content deleted successfully",
+          icon: "success",
+          confirmButtonColor: "#3085d6",
+        }).then(() => {
+          router.back();
+        });
+      } catch (error) {
+        console.error("Failed to delete:", error);
+        MySwal.fire({
+          title: "Error",
+          text: "Failed to delete content",
+          icon: "error",
+          confirmButtonColor: "#3085d6",
+        });
+      } finally {
+        setIsDeleting(false);
+      }
+    }
+  };
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="text-center">
+          <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
+          <p className="text-muted-foreground">Loading form data...</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          {detail !== undefined ? (
-            <div className="flex flex-col lg:flex-row gap-10">
-              <Card className="w-full lg:w-8/12">
-                <div className="px-6 py-6">
-                  <p className="text-lg font-semibold mb-3">{t("form-spit")}</p>
-                  <div className="gap-5 mb-5">
-                    {/* Input Title */}
-                    <div className="space-y-2 py-3">
-                      <Label>{t("title")}</Label>
-                      <Controller
-                        control={form.control}
-                        name="contentTitle"
-                        render={({ field }) => (
-                          <Input
-                            size="md"
-                            type="text"
-                            value={field.value}
-                            onChange={field.onChange}
-                            placeholder="Enter contentTitle"
-                          />
-                        )}
+    <div className="mx-auto py-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">SPIT Convert Form</h1>
+          <p className="text-muted-foreground">
+            Convert and manage your SPIT content
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => router.back()}
+          >
+            <XCircle className="h-4 w-4 mr-2" />
+            Cancel
+          </Button>
+          <Button
+            variant="default"
+            color="destructive"
+            size="sm"
+            onClick={handleDelete}
+            disabled={isDeleting}
+          >
+            {isDeleting ? (
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            ) : (
+              <Trash2 className="h-4 w-4 mr-2" />
+            )}
+            Delete
+          </Button>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main Content */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Basic Information */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <FileText className="h-5 w-5" />
+                  Basic Information
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {/* Title */}
+                <div className="space-y-2">
+                  <Label htmlFor="title">Title *</Label>
+                  <Controller
+                    control={control}
+                    name="contentTitle"
+                    render={({ field }) => (
+                      <Input
+                        id="title"
+                        placeholder="Enter content title"
+                        {...field}
                       />
-                    </div>
-                    <div className="flex items-center">
-                      <div className="py-3 w-full space-y-2">
-                        <Label>{t("category")}</Label>
-                        <Select
-                          defaultValue={detail?.content?.name}
-                          onValueChange={(id) => {
-                            console.log("Selected Category ID:", id);
-                            setSelectedCategoryId(Number(id)); // Simpan ID kategori
-                          }}
+                    )}
+                  />
+                  {errors.contentTitle && (
+                    <Alert variant="soft">
+                      <AlertCircle className="h-4 w-4" />
+                      <AlertDescription>
+                        {errors.contentTitle.message}
+                      </AlertDescription>
+                    </Alert>
+                  )}
+                </div>
+
+                {/* Category */}
+                <div className="space-y-2">
+                  <Label htmlFor="category">Category</Label>
+                  <Select
+                    value={selectedCategoryId?.toString()}
+                    onValueChange={handleCategoryChange}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select category" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {categories.map((category) => (
+                        <SelectItem
+                          key={category.id}
+                          value={category.id.toString()}
                         >
-                          <SelectTrigger size="md">
-                            <SelectValue placeholder="Pilih" />
+                          {category.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Content Editor */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Edit3 className="h-5 w-5" />
+                  Content Editor
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <RadioGroup
+                  value={selectedFileType}
+                  onValueChange={(value: "original" | "rewrite") => setSelectedFileType(value)}
+                  className="grid grid-cols-2 gap-4"
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="original" id="original" />
+                    <Label htmlFor="original">Original Content</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="rewrite" id="rewrite" />
+                    <Label htmlFor="rewrite">Rewritten Content</Label>
+                  </div>
+                </RadioGroup>
+
+                {/* Original Content */}
+                {selectedFileType === "original" && (
+                  <div className="space-y-2">
+                    <Label>Content Description</Label>
+                    <Controller
+                      control={control}
+                      name="contentDescription"
+                      render={({ field }) => (
+                        <CustomEditor
+                          onChange={field.onChange}
+                          initialData={detail?.contentDescription}
+                        />
+                      )}
+                    />
+                  </div>
+                )}
+
+                {/* Content Rewrite */}
+                {selectedFileType === "rewrite" && (
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <div className="space-y-2">
+                        <Label>Writing Style</Label>
+                        <Select
+                          value={selectedWritingStyle}
+                          onValueChange={setSelectedWritingStyle}
+                        >
+                          <SelectTrigger className="w-48">
+                            <SelectValue />
                           </SelectTrigger>
                           <SelectContent>
-                            {categories.map((category) => (
-                              <SelectItem
-                                key={category.id}
-                                value={category.id.toString()} // ID kategori dikirim sebagai value
-                              >
-                                {category?.name}
+                            {WRITING_STYLES.map((style) => (
+                              <SelectItem key={style.value} value={style.value}>
+                                {style.label}
                               </SelectItem>
                             ))}
                           </SelectContent>
                         </Select>
                       </div>
-                    </div>
-                    <div className="">
-                      <RadioGroup
-                        onValueChange={(value) => setSelectedFileType(value)}
-                        value={selectedFileType}
-                        className=" grid-cols-1"
+                      <Button
+                        type="button"
+                        onClick={handleRewriteClick}
+                        disabled={isGeneratingRewrite || !detail?.contentDescription}
+                        className="bg-blue-600 hover:bg-blue-700"
                       >
-                        <div className="">
-                          <RadioGroupItem value="original" id="original-file" />
-                          <Label htmlFor="original-file">
-                            Select Original File
-                          </Label>
-                        </div>
-                        <div className="py-3 space-y-2">
-                          <Label>{t("description")}</Label>
-                          <Controller
-                            control={form.control}
-                            name="contentDescription"
-                            render={({ field: { onChange, value } }) => (
-                              // <JoditEditor
-                              //   ref={editor}
-                              //   value={detail?.contentDescription}
-                              //   onChange={onChange}
-                              //   className="dark:text-black"
-                              // />
-                              <CustomEditor
-                                onChange={onChange}
-                                initialData={detail?.contentDescription}
-                              />
-                            )}
-                          />
-                        </div>
-                        <p className="text-sm font-semibold">Content Rewrite</p>
-                        <div className="space-y-2 pb-3 w-4/12">
-                          <Label>{t("writing-style")}</Label>
-                          <Select
-                            value={selectedWritingStyle}
-                            onValueChange={setSelectedWritingStyle}
-                          >
-                            <SelectTrigger size="md">
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="friendly">Friendly</SelectItem>
-                              <SelectItem value="professional">
-                                Profesional
-                              </SelectItem>
-                              <SelectItem value="informational">
-                                Informational
-                              </SelectItem>
-                              <SelectItem value="neutral">Neutral</SelectItem>
-                              <SelectItem value="witty">Witty</SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </div>
-                        <div className="my-2">
-                          <Button
-                            size="sm"
-                            type="button"
-                            onClick={handleRewriteClick}
-                            className="bg-blue-500 text-white py-2 px-4 rounded"
-                          >
-                            Content Rewrite
-                          </Button>
-                        </div>
-                        {showRewriteEditor && (
-                          <div>
-                            {isGeneratedArticle && (
-                              <div className="mt-3 pb-0 flex flex-row ">
-                                {articleIds.map((id: string, index: number) => (
-                                  <Button
-                                    type="button"
-                                    key={index}
-                                    className={`mr-3 px-3 py-2 rounded-md ${
-                                      selectedArticleId === id
-                                        ? "bg-green-500 text-white"
-                                        : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
-                                    }`}
-                                    onClick={() => handleArticleIdClick(id)}
-                                  >
-                                    {"Narasi " + (index + 1)}
-                                  </Button>
-                                ))}
-                              </div>
-                            )}
-                            <div className="flex items-center space-x-2 mt-3">
-                              <RadioGroupItem
-                                value="rewrite"
-                                id="rewrite-file"
-                              />
-                              <Label htmlFor="rewrite-file">
-                                Select File Rewrite
-                              </Label>
-                            </div>
-                            <div className="py-3 space-y-2">
-                              <Label>{t("file-rewrite")}</Label>
-                              <Controller
-                                control={form.control}
-                                name="contentRewriteDescription"
-                                render={({ field: { onChange, value } }) =>
-                                  isLoadingData ? (
-                                    <div className="flex justify-center items-center h-40">
-                                      <p className="text-gray-500">
-                                        Loading Proses Data...
-                                      </p>
-                                    </div>
-                                  ) : (
-                                    <CustomEditor
-                                      onChange={onChange}
-                                      initialData={
-                                        articleBody ||
-                                        detail?.contentRewriteDescription ||
-                                        value
-                                      }
-                                    />
-                                  )
-                                }
-                              />
-                            </div>
+                        {isGeneratingRewrite ? (
+                          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <Edit3 className="h-4 w-4 mr-2" />
+                        )}
+                        Generate Rewrite
+                      </Button>
+                    </div>
+
+                    {showRewriteEditor && (
+                      <div className="space-y-4">
+                        {articleIds.length > 0 && (
+                          <div className="flex gap-2">
+                            {articleIds.map((articleId, index) => (
+                              <Button
+                                key={articleId}
+                                type="button"
+                                variant={selectedArticleId === articleId ? "default" : "outline"}
+                                size="sm"
+                                onClick={() => handleArticleSelect(articleId)}
+                                disabled={isLoadingRewrite}
+                              >
+                                {isLoadingRewrite && selectedArticleId === articleId && (
+                                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                                )}
+                                Narrative {index + 1}
+                              </Button>
+                            ))}
                           </div>
                         )}
-                      </RadioGroup>
-                    </div>
-                    <div className="space-y-2">
-                      <Label className="text-xl">{t("file-media")}</Label>
-                      <div className="w-full  ">
-                        <Swiper
-                          thumbs={{ swiper: thumbsSwiper }}
-                          modules={[FreeMode, Navigation, Thumbs]}
-                          navigation={false}
-                          className="w-full"
-                        >
-                          {detailThumb?.map((data: any) => (
-                            <SwiperSlide key={data.id}>
-                              <img
-                                className="object-fill h-full w-full rounded-md"
-                                src={data}
-                                alt={` ${data.id}`}
+
+                        <div className="space-y-2">
+                          <Label>Rewritten Content</Label>
+                          <Controller
+                            control={control}
+                            name="contentRewriteDescription"
+                            render={({ field }) => (
+                              <CustomEditor
+                                onChange={field.onChange}
+                                initialData={articleBody || field.value}
                               />
-                            </SwiperSlide>
-                          ))}
-                        </Swiper>
-                        <div className=" mt-2 ">
-                          <Swiper
-                            onSwiper={setThumbsSwiper}
-                            slidesPerView={8}
-                            spaceBetween={8}
-                            pagination={{
-                              clickable: true,
-                            }}
-                            modules={[Pagination, Thumbs]}
-                            // className="mySwiper2"
-                          >
-                            {detailThumb?.map((data: any) => (
-                              <SwiperSlide key={data.id}>
-                                <img
-                                  className="object-cover h-[60px] w-[80px] rounded-md"
-                                  src={data}
-                                  alt={` ${data.id}`}
-                                />
-                              </SwiperSlide>
-                            ))}
-                          </Swiper>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="mt-3">
-                      <Label className="text-xl">{t("file-placement")}</Label>
-                    </div>
-                    {files?.length > 1 && (
-                      <div className="flex flex-wrap gap-2 mt-2 justify-end mr-24 pr-2">
-                        <div className="flex items-center space-x-2">
-                          <Checkbox
-                            id="all-content"
-                            onCheckedChange={(e) =>
-                              handleSelectAll("all", Boolean(e))
-                            }
+                            )}
                           />
-                          <label
-                            htmlFor="all-content"
-                            className="text-xs font-medium"
-                          >
-                            {t("all")}
-                          </label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <Checkbox
-                            id="all-nasional"
-                            onCheckedChange={(e) =>
-                              handleSelectAll("mabes", Boolean(e))
-                            }
-                          />
-                          <label
-                            htmlFor="all-nasional"
-                            className="text-xs font-medium"
-                          >
-                            {t("all")} Nasional
-                          </label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <Checkbox
-                            id="all-wilayah"
-                            onCheckedChange={(e) =>
-                              handleSelectAll("polda", Boolean(e))
-                            }
-                          />
-                          <label
-                            htmlFor="all-wilayah"
-                            className="text-xs font-medium"
-                          >
-                            {t("all")} Wilayah
-                          </label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <Checkbox
-                            id="all-international"
-                            onCheckedChange={(e) =>
-                              handleSelectAll("international", Boolean(e))
-                            }
-                          />
-                          <label
-                            htmlFor="all-international"
-                            className="text-xs font-medium"
-                          >
-                            {t("all")} Internasional
-                          </label>
                         </div>
                       </div>
                     )}
-                    {files?.map((file, index) => (
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Media Files */}
+            {detailThumb.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Image className="h-5 w-5" />
+                    Media Files
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-4">
+                    <Swiper
+                      thumbs={{ swiper: thumbsSwiper }}
+                      modules={[FreeMode, Navigation, Thumbs]}
+                      navigation={true}
+                      className="w-full h-96"
+                    >
+                      {detailThumb.map((image, index) => (
+                        <SwiperSlide key={index}>
+                          <img
+                            src={image}
+                            alt={`Media ${index + 1}`}
+                            className="w-full h-full object-cover rounded-lg"
+                          />
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
+                    
+                    <Swiper
+                      onSwiper={setThumbsSwiper}
+                      slidesPerView={8}
+                      spaceBetween={8}
+                      modules={[Pagination, Thumbs]}
+                      className="w-full"
+                    >
+                      {detailThumb.map((image, index) => (
+                        <SwiperSlide key={index}>
+                          <img
+                            src={image}
+                            alt={`Thumbnail ${index + 1}`}
+                            className="w-full h-16 object-cover rounded cursor-pointer"
+                          />
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* File Placement */}
+            {files.length > 0 && isUserMabesApprover && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Globe className="h-5 w-5" />
+                    File Placement
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {files.length > 1 && (
+                    <div className="flex flex-wrap gap-4 p-4 bg-muted/50 rounded-lg">
+                      {PLACEMENT_OPTIONS.map((option) => (
+                        <div key={option.value} className="flex items-center space-x-2">
+                          <Checkbox
+                            id={`select-all-${option.value}`}
+                            onCheckedChange={(checked) =>
+                              handleSelectAllPlacements(option.value, Boolean(checked))
+                            }
+                          />
+                          <Label htmlFor={`select-all-${option.value}`} className="text-sm">
+                            All {option.label}
+                          </Label>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  <div className="space-y-4">
+                    {files.map((file, index) => (
                       <div
                         key={file.contentId}
-                        className="flex flex-row gap-2 items-center my-3"
+                        className="flex gap-4 p-4 border rounded-lg"
                       >
                         <img
                           src={file.contentFile}
-                          className="w-[180px] rounded-md"
+                          alt={file.fileName}
+                          className="w-32 h-24 object-cover rounded"
                         />
-                        <div className="flex flex-col gap-2 w-full pl-4">
-                          <div className="flex justify-between text-sm">
-                            {file.fileName}
-                          </div>
-                          <div className="flex flex-wrap gap-2">
-                            <div className="flex items-center space-x-2">
-                              <Checkbox
-                                id="terms"
-                                value="all"
-                                checked={filePlacements[index]?.includes("all")}
-                                onCheckedChange={(e) =>
-                                  setupPlacement(index, "all", Boolean(e))
-                                }
-                              />
-                              <label
-                                htmlFor="terms"
-                                className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                              >
-                                {t("all")}
-                              </label>
-                            </div>
-                            <div className="flex items-center space-x-2">
-                              <Checkbox
-                                id="terms"
-                                checked={filePlacements[index]?.includes(
-                                  "mabes"
-                                )}
-                                onCheckedChange={(e) =>
-                                  setupPlacement(index, "mabes", Boolean(e))
-                                }
-                              />
-                              <label
-                                htmlFor="terms"
-                                className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                              >
-                                Nasional
-                              </label>
-                            </div>
-                            <div className="flex items-center space-x-2">
-                              <Checkbox
-                                id="terms"
-                                checked={filePlacements[index]?.includes(
-                                  "polda"
-                                )}
-                                onCheckedChange={(e) =>
-                                  setupPlacement(index, "polda", Boolean(e))
-                                }
-                              />
-                              <label
-                                htmlFor="terms"
-                                className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                              >
-                                Wilayah
-                              </label>
-                            </div>
-
-                            <div className="flex items-center space-x-2">
-                              <Checkbox
-                                id="terms"
-                                checked={filePlacements[index]?.includes(
-                                  "international"
-                                )}
-                                onCheckedChange={(e) =>
-                                  setupPlacement(
-                                    index,
-                                    "international",
-                                    Boolean(e)
-                                  )
-                                }
-                              />
-                              <label
-                                htmlFor="terms"
-                                className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                              >
-                                Internasional
-                              </label>
-                            </div>
+                        <div className="flex-1 space-y-3">
+                          <p className="font-medium text-sm">{file.fileName}</p>
+                          <div className="flex flex-wrap gap-3">
+                            {PLACEMENT_OPTIONS.map((option) => (
+                              <div key={option.value} className="flex items-center space-x-2">
+                                <Checkbox
+                                  id={`${file.contentId}-${option.value}`}
+                                  checked={filePlacements[index]?.includes(option.value)}
+                                  onCheckedChange={(checked) =>
+                                    handleFilePlacementChange(index, option.value, Boolean(checked))
+                                  }
+                                />
+                                <Label
+                                  htmlFor={`${file.contentId}-${option.value}`}
+                                  className="text-sm"
+                                >
+                                  {option.label}
+                                </Label>
+                              </div>
+                            ))}
                           </div>
                         </div>
                       </div>
                     ))}
                   </div>
-                </div>
+                </CardContent>
               </Card>
-              <div className="w-full lg:w-4/12">
-                <Card className=" h-[800px]">
-                  <div className="px-3 py-3">
-                    <div className="space-y-2">
-                      <Label>{t("creator")}</Label>
-                      <Controller
-                        control={form.control}
-                        name="contentCreator"
-                        render={({ field }) => (
-                          <Input
-                            size="md"
-                            type="text"
-                            defaultValue={detail?.contentCreator}
-                            onChange={field.onChange}
-                            placeholder="Enter Title"
-                          />
-                        )}
-                      />
-                    </div>
-                  </div>
-                  <div className="mt-3 px-3">
-                    <Label>{t("preview")}</Label>
-                    <Card className="mt-2">
-                      <img
-                        src={detail.contentThumbnail}
-                        alt="Thumbnail Gambar Utama"
-                        className="w-full h-auto rounded"
-                      />
-                    </Card>
-                  </div>
-                  <div className="px-3 py-3">
-                    <div className="space-y-2">
-                      <Label>{t("tags")}</Label>
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Creator Information */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Users className="h-5 w-5" />
+                  Creator Information
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="creator">Creator *</Label>
+                  <Controller
+                    control={control}
+                    name="contentCreator"
+                    render={({ field }) => (
                       <Input
-                        type="text"
-                        id="tags"
-                        placeholder="Add a tag and press Enter"
-                        onKeyDown={handleAddTag}
-                        ref={inputRef}
+                        id="creator"
+                        placeholder="Enter creator name"
+                        {...field}
                       />
-                      <div className="flex flex-wrap gap-2">
-                        {tags.map((tag, index) => (
-                          <Badge
-                            key={index}
-                            className="border rounded-md px-2 py-2"
-                          >
-                            {tag}
-                          </Badge>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="px-3 py-3">
-                    <div className="flex flex-col gap-3 space-y-2">
-                      <Label>{t("publish-target")}</Label>
-                      {options.map((option) => (
-                        <div
-                          key={option.id}
-                          className="flex gap-2 items-center"
-                        >
-                          <Checkbox
-                            id={option.id}
-                            checked={
-                              option.id === "all"
-                                ? publishedFor.length ===
-                                  options.filter((opt: any) => opt.id !== "all")
-                                    .length
-                                : publishedFor.includes(option.id)
-                            }
-                            onCheckedChange={() =>
-                              handleCheckboxChange(option.id)
-                            }
-                          />
-                          <Label htmlFor={option.id}>{option.label}</Label>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </Card>
-                <div className="flex flex-row justify-end gap-3">
-                  <div className="mt-4">
-                    <Button type="submit" color="primary">
-                      {t("submit")}
-                    </Button>
-                  </div>
-                  <div className="mt-4">
-                    <Button
-                      type="button"
-                      className="bg-red-500 hover:bg-red-700"
-                      onClick={() => deleteSpitContent()}
-                    >
-                      {t("cancel")}
-                    </Button>
-                  </div>
+                    )}
+                  />
+                  {errors.contentCreator && (
+                    <Alert variant="soft">
+                      <AlertCircle className="h-4 w-4" />
+                      <AlertDescription>
+                        {errors.contentCreator.message}
+                      </AlertDescription>
+                    </Alert>
+                  )}
                 </div>
-              </div>
-            </div>
-          ) : (
-            ""
-          )}
-        </form>
-      </Form>
-    </>
+              </CardContent>
+            </Card>
+
+            {/* Preview */}
+            {detail?.contentThumbnail && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Eye className="h-5 w-5" />
+                    Preview
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <img
+                    src={detail.contentThumbnail}
+                    alt="Content thumbnail"
+                    className="w-full h-auto rounded-lg"
+                  />
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Tags */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Tag className="h-5 w-5" />
+                  Tags
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="tag-input">Add Tags</Label>
+                  <Input
+                    id="tag-input"
+                    placeholder="Type a tag and press Enter"
+                    onKeyDown={handleAddTag}
+                    ref={inputRef}
+                  />
+                </div>
+                {tags.length > 0 && (
+                  <div className="flex flex-wrap gap-2">
+                    {tags.map((tag, index) => (
+                      <Badge
+                        key={index}
+                        className="cursor-pointer hover:bg-destructive hover:text-destructive-foreground"
+                        onClick={() => handleRemoveTag(index)}
+                      >
+                        {tag}
+                        <XCircle className="h-3 w-3 ml-1" />
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Publish Targets */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Settings className="h-5 w-5" />
+                  Publish Targets
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {PUBLISH_OPTIONS.map((option) => (
+                  <div key={option.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={option.id}
+                      checked={
+                        option.id === "all"
+                          ? publishedFor.length === PUBLISH_OPTIONS.filter(opt => opt.id !== "all").length
+                          : publishedFor.includes(option.id)
+                      }
+                      onCheckedChange={() => handlePublishTargetChange(option.id)}
+                    />
+                    <Label htmlFor={option.id} className="text-sm">
+                      {option.label}
+                    </Label>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+
+            {/* Submit Button */}
+            <Card>
+              <CardContent className="pt-6">
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={isSubmitting || isSaving}
+                >
+                  {isSubmitting || isSaving ? (
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  ) : (
+                    <Save className="h-4 w-4 mr-2" />
+                  )}
+                  {isSubmitting || isSaving ? "Saving..." : "Save Changes"}
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </form>
+    </div>
   );
 }
diff --git a/components/form/content/teks-form.tsx b/components/form/content/teks-form.tsx
index c9a9ce4e..7353d0bf 100644
--- a/components/form/content/teks-form.tsx
+++ b/components/form/content/teks-form.tsx
@@ -16,7 +16,7 @@ import * as z from "zod";
 import { Upload } from "tus-js-client";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { redirect, useRouter } from "next/navigation";
+import { redirect, useParams, useRouter } from "next/navigation";
 import {
   Select,
   SelectContent,
@@ -40,6 +40,7 @@ import { uploadThumbnailBlog } from "@/service/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
 import {
   generateDataArticle,
+  generateDataRewrite,
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
@@ -83,11 +84,15 @@ export default function FormTeks() {
   const editor = useRef(null);
   type TeksSchema = z.infer<typeof teksSchema>;
 
+  const params = useParams();
+  const locale = params?.locale;
+
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
+  const [selectedFileType, setSelectedFileType] = useState("original");
 
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<any>();
@@ -102,6 +107,10 @@ export default function FormTeks() {
   const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
+  const [selectedWritingStyle, setSelectedWritingStyle] =
+    useState("professional");
+  const [editorContent, setEditorContent] = useState(""); // Untuk original editor
+  const [rewriteEditorContent, setRewriteEditorContent] = useState("");
 
   const [articleIds, setArticleIds] = useState<string[]>([]);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
@@ -109,8 +118,9 @@ export default function FormTeks() {
   const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
     null
   );
+  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
-  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
   const [detailData, setDetailData] = useState<any>(null);
   const [articleImages, setArticleImages] = useState<string[]>([]);
@@ -157,14 +167,9 @@ export default function FormTeks() {
 
   const teksSchema = z.object({
     title: z.string().min(1, { message: "Judul diperlukan" }),
-    description: z
-      .string()
-      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
-      .or(
-        z.literal(articleBody || "").refine((val) => val.length > 0, {
-          message: "Deskripsi diperlukan.",
-        })
-      ),
+    description: z.string().optional(),
+    descriptionOri: z.string().optional(), // Original editor
+    rewriteDescription: z.string().optional(),
     creatorName: z.string().min(1, { message: "Creator diperlukan" }),
     // tags: z.string().min(1, { message: "Judul diperlukan" }),
   });
@@ -177,6 +182,11 @@ export default function FormTeks() {
     formState: { errors },
   } = useForm<TeksSchema>({
     resolver: zodResolver(teksSchema),
+    defaultValues: {
+      description: "",
+      descriptionOri: "",
+      rewriteDescription: "",
+    },
   });
 
   const doGenerateMainKeyword = async () => {
@@ -439,12 +449,26 @@ export default function FormTeks() {
     }
   };
 
+  useEffect(() => {
+    if (articleBody) {
+      // Set ke dua field jika rewrite juga aktif
+      setValue("description", articleBody);
+      setValue("rewriteDescription", articleBody);
+    }
+  }, [articleBody, setValue]);
+
   const save = async (data: TeksSchema) => {
     loading();
     const finalTags = tags.join(", ");
     const finalTitle = isSwitchOn ? title : data.title;
-    const finalDescription = articleBody || data.description;
-    if (!finalDescription.trim()) {
+
+    const finalDescription = isSwitchOn
+      ? data.description
+      : selectedFileType === "rewrite"
+      ? data.rewriteDescription
+      : data.descriptionOri;
+
+    if (!finalDescription?.trim()) {
       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
       return;
     }
@@ -709,6 +733,45 @@ export default function FormTeks() {
     }
   }, [title, getValues, setValue]);
 
+  const handleRewriteClick = async () => {
+    setIsContentRewriteClicked(true);
+
+    const request = {
+      style: selectedWritingStyle,
+      lang: "id",
+      contextType: "text",
+      urlContext: null,
+      context: editorContent, // Ambil isi editor original
+      createdBy: roleId,
+      sentiment: "Humorous",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
+    };
+
+    const res = await generateDataRewrite(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+    setShowRewriteEditor(true);
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col lg:flex-row gap-10">
@@ -851,7 +914,7 @@ export default function FormTeks() {
                         placeholder="Enter Main Keyword"
                       />
                       {/* )}
-                  /> */}
+                               /> */}
                     </div>
                   </div>
                   <div className="mt-5">
@@ -901,7 +964,7 @@ export default function FormTeks() {
                     </div>
                   </div>
                   <div className="mt-5">
-                    <Label>{t("special-instructions")} (Optional)</Label>
+                    <Label>{t("special-instructions")}(Optional)</Label>
                     <div className="mt-3">
                       <Controller
                         control={control}
@@ -923,13 +986,14 @@ export default function FormTeks() {
                         color="primary"
                         onClick={handleGenerateArtikel}
                         size="sm"
+                        type="button"
                       >
                         Generate Article
                       </Button>
                     </div>
 
                     {isGeneratedArticle && (
-                      <div className="mt-3 pb-0 flex flex-row ">
+                      <div className="mt-3 pb-0 flex flex-row">
                         {articleIds.map((id: string, index: number) => (
                           <p
                             key={index}
@@ -949,50 +1013,155 @@ export default function FormTeks() {
                     <div className="pt-3">
                       <div className="flex flex-row justify-between items-center">
                         {selectedArticleId && (
-                          <Link
-                            href={`/contributor/content/teks/update-seo/${selectedArticleId}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
+                          <Button
+                            className="mb-2"
+                            size="sm"
+                            variant={"outline"}
+                            color="primary"
+                            onClick={() => {
+                              const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
+                              window.open(url, "_blank", "noopener,noreferrer");
+                            }}
                           >
-                            <Button
-                              className="mb-2"
-                              size="sm"
-                              variant={"outline"}
-                              color="primary"
-                            >
-                              {t("update")}
-                            </Button>
-                          </Link>
+                            {t("update")}
+                          </Button>
                         )}
                       </div>
                     </div>
                   </div>
+                  <div className="py-3 space-y-2">
+                    <Label>{t("description")}</Label>
+                    <Controller
+                      control={control}
+                      name="description"
+                      render={({ field: { onChange, value } }) =>
+                        isLoadingData ? (
+                          <div className="flex justify-center items-center h-40">
+                            <p className="text-gray-500">
+                              Loading Proses Data...
+                            </p>
+                          </div>
+                        ) : (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={articleBody || value}
+                          />
+                        )
+                      }
+                    />
+                    {errors.description?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.description.message}
+                      </p>
+                    )}
+                  </div>
                 </div>
               )}
-              <div className="space-y-2">
-                <Label>{t("description")}</Label>
-                <Controller
-                  control={control}
-                  name="description"
-                  render={({ field: { onChange, value } }) =>
-                    isLoadingData ? (
-                      <div className="flex justify-center items-center h-40">
-                        <p className="text-gray-500">Loading Proses Data...</p>
-                      </div>
-                    ) : (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody || value}
+              {!isSwitchOn && (
+                <>
+                  <RadioGroup
+                    onValueChange={(value) => setSelectedFileType(value)}
+                    value={selectedFileType}
+                    className=" grid-cols-1"
+                  >
+                    <div className="">
+                      <RadioGroupItem value="original" id="original-file" />
+                      <Label htmlFor="original-file">
+                        Select Original Description
+                      </Label>
+                    </div>
+                    <div className="py-3 space-y-2">
+                      <Label>{t("description")}</Label>
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={value}
+                          />
+                        )}
                       />
-                    )
-                  }
-                />
-                {errors.description?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.description.message}
-                  </p>
-                )}
-              </div>
+                      {errors.description?.message && (
+                        <p className="text-red-400 text-sm">
+                          {errors.description.message}
+                        </p>
+                      )}
+                    </div>
+
+                    <p className="text-sm font-semibold">Content Rewrite</p>
+                    <div className="my-2">
+                      <Button
+                        size="sm"
+                        type="button"
+                        onClick={handleRewriteClick}
+                        className="bg-blue-500 text-white py-2 px-4 rounded"
+                      >
+                        Content Rewrite
+                      </Button>
+                    </div>
+
+                    {showRewriteEditor && (
+                      <div>
+                        {isGeneratedArticle && (
+                          <div className="mt-3 pb-0 flex flex-row ">
+                            {articleIds.map((id: string, index: number) => (
+                              <Button
+                                type="button"
+                                key={index}
+                                className={`mr-3 px-3 py-2 rounded-md ${
+                                  selectedArticleId === id
+                                    ? "bg-green-500 text-white"
+                                    : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
+                                }`}
+                                onClick={() => handleArticleIdClick(id)}
+                              >
+                                {"Narasi " + (index + 1)}
+                              </Button>
+                            ))}
+                          </div>
+                        )}
+                        <div className="flex items-center space-x-2 mt-3">
+                          <RadioGroupItem value="rewrite" id="rewrite-file" />
+                          <Label htmlFor="rewrite-file">
+                            Select Description Rewrite
+                          </Label>
+                        </div>
+                        <div className="py-3 space-y-2">
+                          <Label>{t("file-rewrite")}</Label>
+                          <Controller
+                            control={control}
+                            name="rewriteDescription"
+                            render={({ field: { onChange, value } }) =>
+                              isLoadingData ? (
+                                <div className="flex justify-center items-center h-40">
+                                  <p className="text-gray-500">
+                                    Loading Proses Data...
+                                  </p>
+                                </div>
+                              ) : (
+                                <CustomEditor
+                                  onChange={(value: any) => {
+                                    onChange(value);
+                                    setRewriteEditorContent(value);
+                                  }}
+                                  initialData={articleBody || value}
+                                />
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </RadioGroup>
+                </>
+              )}
               <div className="py-3 space-y-2">
                 <Label>{t("select-file")}</Label>
                 {/* <Input
diff --git a/components/form/content/video-form.tsx b/components/form/content/video-form.tsx
index 27c5bba0..034b378c 100644
--- a/components/form/content/video-form.tsx
+++ b/components/form/content/video-form.tsx
@@ -16,7 +16,7 @@ import * as z from "zod";
 import { Upload } from "tus-js-client";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { redirect, useRouter } from "next/navigation";
+import { redirect, useParams, useRouter } from "next/navigation";
 import {
   Select,
   SelectContent,
@@ -40,6 +40,7 @@ import { uploadThumbnailBlog } from "@/service/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
 import {
   generateDataArticle,
+  generateDataRewrite,
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
@@ -82,12 +83,15 @@ export default function FormVideo() {
   const router = useRouter();
   const editor = useRef(null);
   type VideoSchema = z.infer<typeof videoSchema>;
+  const params = useParams();
+  const locale = params?.locale;
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
   const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
+  const [selectedFileType, setSelectedFileType] = useState("original");
 
   const t = useTranslations("Form");
   const [categories, setCategories] = useState<Category[]>([]);
@@ -97,6 +101,11 @@ export default function FormVideo() {
   const [preview, setPreview] = useState<string | null>(null);
   const [selectedLanguage, setSelectedLanguage] = useState("");
 
+  const [selectedWritingStyle, setSelectedWritingStyle] =
+    useState("professional");
+  const [editorContent, setEditorContent] = useState(""); // Untuk original editor
+  const [rewriteEditorContent, setRewriteEditorContent] = useState("");
+
   const [selectedSEO, setSelectedSEO] = useState<string>("");
   const [title, setTitle] = useState<string>("");
   const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
@@ -111,13 +120,17 @@ export default function FormVideo() {
     null
   );
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
-  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
+  // const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
   const [detailData, setDetailData] = useState<any>(null);
   const [articleImages, setArticleImages] = useState<string[]>([]);
   const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
+
+  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
+
   const [selectedTarget, setSelectedTarget] = useState("");
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
@@ -155,14 +168,9 @@ export default function FormVideo() {
 
   const videoSchema = z.object({
     title: z.string().min(1, { message: "Judul diperlukan" }),
-    description: z
-      .string()
-      .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
-      .or(
-        z.literal(articleBody || "").refine((val) => val.length > 0, {
-          message: "Deskripsi diperlukan.",
-        })
-      ),
+    description: z.string().optional(),
+    descriptionOri: z.string().optional(), // Original editor
+    rewriteDescription: z.string().optional(),
     creatorName: z.string().min(1, { message: "Creator diperlukan" }),
     // tags: z.string().min(1, { message: "Judul diperlukan" }),
   });
@@ -175,6 +183,11 @@ export default function FormVideo() {
     formState: { errors },
   } = useForm<VideoSchema>({
     resolver: zodResolver(videoSchema),
+    defaultValues: {
+      description: "",
+      descriptionOri: "",
+      rewriteDescription: "",
+    },
   });
 
   const doGenerateMainKeyword = async () => {
@@ -437,15 +450,30 @@ export default function FormVideo() {
     }
   };
 
+  useEffect(() => {
+    if (articleBody) {
+      // Set ke dua field jika rewrite juga aktif
+      setValue("description", articleBody);
+      setValue("rewriteDescription", articleBody);
+    }
+  }, [articleBody, setValue]);
+
   const save = async (data: VideoSchema) => {
     loading();
     const finalTags = tags.join(", ");
     const finalTitle = isSwitchOn ? title : data.title;
-    const finalDescription = articleBody || data.description;
-    if (!finalDescription.trim()) {
+    // const finalDescription = articleBody || data.description;
+    const finalDescription = isSwitchOn
+      ? data.description
+      : selectedFileType === "rewrite"
+      ? data.rewriteDescription
+      : data.descriptionOri;
+
+    if (!finalDescription?.trim()) {
       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
       return;
     }
+
     let requestData: {
       title: string;
       description: string;
@@ -726,6 +754,45 @@ export default function FormVideo() {
     }
   }, [title, getValues, setValue]);
 
+  const handleRewriteClick = async () => {
+    setIsContentRewriteClicked(true);
+
+    const request = {
+      style: selectedWritingStyle,
+      lang: "id",
+      contextType: "text",
+      urlContext: null,
+      context: editorContent, // Ambil isi editor original
+      createdBy: roleId,
+      sentiment: "Humorous",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
+    };
+
+    const res = await generateDataRewrite(request);
+    close();
+
+    if (res?.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 3) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[2] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+    setShowRewriteEditor(true);
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col lg:flex-row gap-10">
@@ -867,7 +934,7 @@ export default function FormVideo() {
                         placeholder="Enter Main Keyword"
                       />
                       {/* )}
-                  /> */}
+                               /> */}
                     </div>
                   </div>
                   <div className="mt-5">
@@ -917,7 +984,7 @@ export default function FormVideo() {
                     </div>
                   </div>
                   <div className="mt-5">
-                    <Label>{t("special-instructions")} (Optional)</Label>
+                    <Label>{t("special-instructions")}(Optional)</Label>
                     <div className="mt-3">
                       <Controller
                         control={control}
@@ -939,13 +1006,14 @@ export default function FormVideo() {
                         color="primary"
                         onClick={handleGenerateArtikel}
                         size="sm"
+                        type="button"
                       >
                         Generate Article
                       </Button>
                     </div>
 
                     {isGeneratedArticle && (
-                      <div className="mt-3 pb-0 flex flex-row ">
+                      <div className="mt-3 pb-0 flex flex-row">
                         {articleIds.map((id: string, index: number) => (
                           <p
                             key={index}
@@ -965,50 +1033,155 @@ export default function FormVideo() {
                     <div className="pt-3">
                       <div className="flex flex-row justify-between items-center">
                         {selectedArticleId && (
-                          <Link
-                            href={`/contributor/content/video/update-seo/${selectedArticleId}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
+                          <Button
+                            className="mb-2"
+                            size="sm"
+                            variant={"outline"}
+                            color="primary"
+                            onClick={() => {
+                              const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
+                              window.open(url, "_blank", "noopener,noreferrer");
+                            }}
                           >
-                            <Button
-                              className="mb-2"
-                              size="sm"
-                              variant={"outline"}
-                              color="primary"
-                            >
-                              {t("update")}
-                            </Button>
-                          </Link>
+                            {t("update")}
+                          </Button>
                         )}
                       </div>
                     </div>
                   </div>
+                  <div className="py-3 space-y-2">
+                    <Label>{t("description")}</Label>
+                    <Controller
+                      control={control}
+                      name="description"
+                      render={({ field: { onChange, value } }) =>
+                        isLoadingData ? (
+                          <div className="flex justify-center items-center h-40">
+                            <p className="text-gray-500">
+                              Loading Proses Data...
+                            </p>
+                          </div>
+                        ) : (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={articleBody || value}
+                          />
+                        )
+                      }
+                    />
+                    {errors.description?.message && (
+                      <p className="text-red-400 text-sm">
+                        {errors.description.message}
+                      </p>
+                    )}
+                  </div>
                 </div>
               )}
-              <div className="space-y-2">
-                <Label>{t("description")}</Label>
-                <Controller
-                  control={control}
-                  name="description"
-                  render={({ field: { onChange, value } }) =>
-                    isLoadingData ? (
-                      <div className="flex justify-center items-center h-40">
-                        <p className="text-gray-500">Loading Proses Data...</p>
-                      </div>
-                    ) : (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody || value}
+              {!isSwitchOn && (
+                <>
+                  <RadioGroup
+                    onValueChange={(value) => setSelectedFileType(value)}
+                    value={selectedFileType}
+                    className=" grid-cols-1"
+                  >
+                    <div className="">
+                      <RadioGroupItem value="original" id="original-file" />
+                      <Label htmlFor="original-file">
+                        Select Original Description
+                      </Label>
+                    </div>
+                    <div className="py-3 space-y-2">
+                      <Label>{t("description")}</Label>
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={(value: any) => {
+                              onChange(value);
+                              setEditorContent(value);
+                            }}
+                            initialData={value}
+                          />
+                        )}
                       />
-                    )
-                  }
-                />
-                {errors.description?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.description.message}
-                  </p>
-                )}
-              </div>
+                      {errors.description?.message && (
+                        <p className="text-red-400 text-sm">
+                          {errors.description.message}
+                        </p>
+                      )}
+                    </div>
+
+                    <p className="text-sm font-semibold">Content Rewrite</p>
+                    <div className="my-2">
+                      <Button
+                        size="sm"
+                        type="button"
+                        onClick={handleRewriteClick}
+                        className="bg-blue-500 text-white py-2 px-4 rounded"
+                      >
+                        Content Rewrite
+                      </Button>
+                    </div>
+
+                    {showRewriteEditor && (
+                      <div>
+                        {isGeneratedArticle && (
+                          <div className="mt-3 pb-0 flex flex-row ">
+                            {articleIds.map((id: string, index: number) => (
+                              <Button
+                                type="button"
+                                key={index}
+                                className={`mr-3 px-3 py-2 rounded-md ${
+                                  selectedArticleId === id
+                                    ? "bg-green-500 text-white"
+                                    : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
+                                }`}
+                                onClick={() => handleArticleIdClick(id)}
+                              >
+                                {"Narasi " + (index + 1)}
+                              </Button>
+                            ))}
+                          </div>
+                        )}
+                        <div className="flex items-center space-x-2 mt-3">
+                          <RadioGroupItem value="rewrite" id="rewrite-file" />
+                          <Label htmlFor="rewrite-file">
+                            Select Description Rewrite
+                          </Label>
+                        </div>
+                        <div className="py-3 space-y-2">
+                          <Label>{t("file-rewrite")}</Label>
+                          <Controller
+                            control={control}
+                            name="rewriteDescription"
+                            render={({ field: { onChange, value } }) =>
+                              isLoadingData ? (
+                                <div className="flex justify-center items-center h-40">
+                                  <p className="text-gray-500">
+                                    Loading Proses Data...
+                                  </p>
+                                </div>
+                              ) : (
+                                <CustomEditor
+                                  onChange={(value: any) => {
+                                    onChange(value);
+                                    setRewriteEditorContent(value);
+                                  }}
+                                  initialData={articleBody || value}
+                                />
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </RadioGroup>
+                </>
+              )}
               <div className="py-3 space-y-2">
                 <Label>{t("select-file")}</Label>
                 {/* <Input
diff --git a/components/form/shared/ask-expert-form.tsx b/components/form/shared/ask-expert-form.tsx
index f5685e02..16b553a5 100644
--- a/components/form/shared/ask-expert-form.tsx
+++ b/components/form/shared/ask-expert-form.tsx
@@ -202,6 +202,23 @@ export default function FormAskExpert() {
         const details = response?.data?.data;
 
         setDetail(details);
+
+        if (details?.assignedToLevel) {
+          const levels: Set<number> = new Set(
+            details.assignedToLevel.split(",").map((x: any) => Number(x))
+          );
+          setCheckedLevels(levels);
+        }
+
+        if (details?.assignedToUsers) {
+          const userIds = details.assignedToUsers.split(",").map(Number);
+          setCheckedLevels(new Set(userIds));
+        }
+
+        if (details?.expertCompetencies) {
+          const compIds = details.expertCompetencies.split(",").map(Number);
+          setSelectedCompetencies(new Set(compIds));
+        }
       }
     }
     initState();
@@ -515,7 +532,7 @@ export default function FormAskExpert() {
   return (
     <Card>
       <div className="px-6 py-6">
-        <p className="text-lg font-semibold mb-3">{t("form-task")}</p>
+        <p className="text-lg font-semibold mb-3">{t("form-task-ta")}</p>
         {detail !== undefined ? (
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="gap-5 mb-5">
@@ -617,7 +634,14 @@ export default function FormAskExpert() {
                                 }
                                 className="mr-3"
                               />
-                              {expert.fullname}
+                              <div className="flex flex-col gap-2">
+                                <div className="font-bold">
+                                  {expert.fullname}
+                                </div>
+                                <div className="italic">
+                                  ({expert.username})
+                                </div>
+                              </div>
                             </Label>
                           </div>
                         ))}
@@ -625,6 +649,46 @@ export default function FormAskExpert() {
                     </DialogContent>
                   </Dialog>
                 </div>
+                {checkedLevels.size > 0 && (
+                  <div className="mt-3">
+                    <Label className="text-sm text-gray-600 mb-2 block">
+                      Tenaga Ahli Terpilih ({checkedLevels.size})
+                    </Label>
+                    <div className="flex flex-wrap gap-2">
+                      {Array.from(checkedLevels).map((expertId) => {
+                        const expert = listExpert?.find(
+                          (exp: any) => exp.id === expertId
+                        );
+                        return expert ? (
+                          <div
+                            key={expert.id}
+                            className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full border border-blue-200"
+                          >
+                            <span>{expert.fullname}</span>
+                            <button
+                              type="button"
+                              onClick={() => handleCheckboxChange(expert.id)}
+                              className="ml-1 text-blue-600 hover:text-blue-800 hover:bg-blue-200 rounded-full p-0.5 transition-colors"
+                              title="Remove expert"
+                            >
+                              <svg
+                                className="w-3 h-3"
+                                fill="currentColor"
+                                viewBox="0 0 20 20"
+                              >
+                                <path
+                                  fillRule="evenodd"
+                                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                  clipRule="evenodd"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        ) : null;
+                      })}
+                    </div>
+                  </div>
+                )}
               </div>
 
               <div className="mt-5 space-y-2">
diff --git a/components/form/shared/do-it-yourself-form.tsx b/components/form/shared/do-it-yourself-form.tsx
index 12473463..49f9d88c 100644
--- a/components/form/shared/do-it-yourself-form.tsx
+++ b/components/form/shared/do-it-yourself-form.tsx
@@ -636,7 +636,7 @@ export default function FormDoItYourself() {
   return (
     <Card>
       <div className="px-6 py-6">
-        <p className="text-lg font-semibold mb-3">{t("form-task")}</p>
+        <p className="text-lg font-semibold mb-3">{t("form-task-ta-do")}</p>
         {detail !== undefined ? (
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="gap-5 mb-5">
diff --git a/components/form/task-ta/task-ta-detail-form.tsx b/components/form/task-ta/task-ta-detail-form.tsx
index e667b7b8..62f3b493 100644
--- a/components/form/task-ta/task-ta-detail-form.tsx
+++ b/components/form/task-ta/task-ta-detail-form.tsx
@@ -10,42 +10,23 @@ 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 {
-  acceptAssignment,
+  acceptAssignmentTa,
   createAssignmentResponse,
-  createTask,
   deleteAssignmentResponse,
   deleteTask,
-  finishTask,
+  finishTaskTa,
   getAcceptance,
   getAcceptanceAssignmentStatus,
   getAssignmentResponseList,
   getMediaUpload,
   getMediaUploadTa,
-  getTask,
   getTaskTa,
   getUserLevelForAssignments,
+  getUserLevelForExpert,
 } from "@/service/task";
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-  ChevronDown,
-  ChevronUp,
   Dock,
   DotSquare,
   ImageIcon,
@@ -61,14 +42,20 @@ import { close, error, loading } from "@/lib/swal";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { successCallback } from "@/config/swal";
-import FileUploader from "../shared/file-uploader";
-import { AudioRecorder } from "react-audio-voice-recorder";
 import Image from "next/image";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import WavesurferPlayer from "@wavesurfer/react";
 import WaveSurfer from "wavesurfer.js";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { useTranslations } from "next-intl";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { getListCompetencies } from "@/service/management-user/management-user";
 
 const taskSchema = z.object({
   uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
@@ -252,7 +239,11 @@ export default function FormTaskTaDetail() {
   const [acceptAcceptance, setAcceptAcceptance] = useState<AcceptanceData[]>(
     []
   );
-
+  const [listExpert, setListExpert] = useState<any[]>([]);
+  const [userCompetencies, setUserCompetencies] = useState<any[]>([]);
+  const [selectedCompetencies, setSelectedCompetencies] = useState<Set<number>>(
+    new Set()
+  );
   const [totalPage, setTotalPage] = React.useState(1);
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
@@ -327,37 +318,37 @@ export default function FormTaskTaDetail() {
   //   setPlatformTypeVisible(selectedValue === 2);
   // };
 
-  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 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]
-      );
+  //     const allChecked = ["video", "audio", "image", "text"].every(
+  //       (k) => updated[k as keyof typeof expertise]
+  //     );
 
-      updated.semua = allChecked;
-      setExpertiseOutput(updated);
-    }
-  };
+  //     updated.semua = allChecked;
+  //     setExpertiseOutput(updated);
+  //   }
+  // };
 
   const handleExpertOutputChange = (
     key: keyof typeof expert,
@@ -383,6 +374,68 @@ export default function FormTaskTaDetail() {
     }
   };
 
+  useEffect(() => {
+    getDataAdditional();
+  }, []);
+
+  async function getDataAdditional() {
+    const resCompetencies = await getListCompetencies();
+    console.log("competency", resCompetencies);
+    setUserCompetencies(resCompetencies?.data?.data);
+  }
+
+  useEffect(() => {
+    async function fetchListExpert() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForExpert(id);
+        setListExpert(response?.data?.data);
+        console.log("tenaga ahli", response?.data?.data);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchListExpert();
+  }, []);
+
+  useEffect(() => {
+    const fetchExpertsForCompetencies = async () => {
+      const allExperts: any[] = [];
+
+      for (const compId of Array.from(selectedCompetencies)) {
+        const response = await getUserLevelForExpert(compId);
+        const experts = response?.data?.data || [];
+        allExperts.push(...experts);
+      }
+
+      const uniqueExperts = Array.from(
+        new Map(allExperts.map((e) => [e.id, e])).values()
+      );
+
+      setListExpert(uniqueExperts);
+    };
+
+    if (selectedCompetencies.size > 0) {
+      fetchExpertsForCompetencies();
+    } else {
+      setListExpert([]);
+    }
+  }, [selectedCompetencies]);
+
+  const handleCompetencyChange = async (competencyId: number) => {
+    setSelectedCompetencies((prev) => {
+      const updated = new Set(prev);
+      if (updated.has(competencyId)) {
+        updated.delete(competencyId);
+      } else {
+        updated.add(competencyId);
+      }
+      return updated;
+    });
+  };
+
   useEffect(() => {
     async function fetchPoldaPolres() {
       setIsLoading(true);
@@ -458,6 +511,16 @@ export default function FormTaskTaDetail() {
           setCheckedLevels(levels);
         }
 
+        if (details?.assignedToUsers) {
+          const userIds = details.assignedToUsers.split(",").map(Number);
+          setCheckedLevels(new Set(userIds));
+        }
+
+        if (details?.expertCompetencies) {
+          const compIds = details.expertCompetencies.split(",").map(Number);
+          setSelectedCompetencies(new Set(compIds));
+        }
+
         const attachment = details?.files;
         setImageUploadedFiles(
           attachment?.filter((file: any) => file.fileTypeId == 1)
@@ -542,7 +605,7 @@ export default function FormTaskTaDetail() {
       confirmButtonText: "OK",
     }).then((result) => {
       if (result.isConfirmed) {
-        router.push("/en/contributor/task");
+        router.push("/en/contributor/task-ta");
       }
     });
   };
@@ -682,7 +745,7 @@ export default function FormTaskTaDetail() {
   const handleAcceptAcceptance = async () => {
     loading();
     console.log("Id user :", userId);
-    const response = await acceptAssignment(id);
+    const response = await acceptAssignmentTa(id);
 
     if (response?.error) {
       error(response?.message);
@@ -773,7 +836,7 @@ export default function FormTaskTaDetail() {
   );
 
   async function finishAssignment() {
-    const response = finishTask(id);
+    const response = finishTaskTa(id);
 
     // if (response.error) {
     //   error(response.message);
@@ -1011,48 +1074,98 @@ export default function FormTaskTaDetail() {
               <div className="mt-5 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}>
+                  {userCompetencies?.map((item: any) => (
+                    <div className="flex items-center gap-2" key={item.id}>
                       <Checkbox
-                        id={key}
-                        checked={expertise[key as keyof typeof expertise]}
-                        onCheckedChange={(value) =>
-                          handleExpertiseOutputChange(
-                            key as keyof typeof expertise,
-                            value as boolean
-                          )
-                        }
+                        id={`comp-${item.id}`}
+                        checked={selectedCompetencies.has(item.id)}
+                        onCheckedChange={() => handleCompetencyChange(item.id)}
                         disabled
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={`comp-${item.id}`}>{item.name}</Label>
                     </div>
                   ))}
                 </div>
               </div>
-
               <div className="mt-5 space-y-2">
-                <Label>{t("choose-expert")}</Label>
+                {/* <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>
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="soft" size="sm" color="primary">
+                        [{"Pilih Tenaga Ahli"}]
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                      <DialogHeader>
+                        <DialogTitle>Daftar Tenaga Ahli</DialogTitle>
+                      </DialogHeader>
+                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                        {listExpert?.map((expert: any) => (
+                          <div key={expert.id} className="border p-2">
+                            <Label className="flex items-center">
+                              <Checkbox
+                                checked={checkedLevels.has(expert.id)}
+                                onCheckedChange={() =>
+                                  handleCheckboxChange(expert.id)
+                                }
+                                className="mr-3"
+                              />
+                              <div className="flex flex-col gap-2">
+                                <div className="font-bold">
+                                  {expert.fullname}
+                                </div>
+                                <div className="italic">
+                                  ({expert.username})
+                                </div>
+                              </div>
+                            </Label>
+                          </div>
+                        ))}
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                </div> */}
+                {checkedLevels.size > 0 && (
+                  <div className="mt-3">
+                    <Label className="text-sm text-gray-600 mb-2 block">
+                      Tenaga Ahli Terpilih ({checkedLevels.size})
+                    </Label>
+                    <div className="flex flex-wrap gap-2">
+                      {Array.from(checkedLevels).map((expertId) => {
+                        const expert = listExpert?.find(
+                          (exp: any) => exp.id === expertId
+                        );
+                        return expert ? (
+                          <div
+                            key={expert.id}
+                            className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full border border-blue-200"
+                          >
+                            <span>{expert.fullname}</span>
+                            <button
+                              type="button"
+                              onClick={() => handleCheckboxChange(expert.id)}
+                              className="ml-1 text-blue-600 hover:text-blue-800 hover:bg-blue-200 rounded-full p-0.5 transition-colors"
+                              title="Remove expert"
+                            >
+                              <svg
+                                className="w-3 h-3"
+                                fill="currentColor"
+                                viewBox="0 0 20 20"
+                              >
+                                <path
+                                  fillRule="evenodd"
+                                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                  clipRule="evenodd"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        ) : null;
+                      })}
                     </div>
-                  ))}
-                </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 2d06e489..3b6211de 100644
--- a/components/form/task-ta/task-ta-edit-form.tsx
+++ b/components/form/task-ta/task-ta-edit-form.tsx
@@ -26,6 +26,7 @@ import {
   getTask,
   getTaskTa,
   getUserLevelForAssignments,
+  getUserLevelForExpert,
 } from "@/service/task";
 import {
   Dialog,
@@ -40,6 +41,7 @@ import {
   Dock,
   ImageIcon,
   Music,
+  Trash2,
   VideoIcon,
 } from "lucide-react";
 import FileUploader from "../shared/file-uploader";
@@ -52,6 +54,7 @@ import { Upload } from "tus-js-client";
 import { error, loading } from "@/lib/swal";
 import dynamic from "next/dynamic";
 import { useTranslations } from "next-intl";
+import { getListCompetencies } from "@/service/management-user/management-user";
 
 const taskSchema = z.object({
   // uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
@@ -148,11 +151,18 @@ export default function FormTaskTaEdit() {
   const [broadcastType, setBroadcastType] = useState<string>(""); // untuk Tipe Penugasan
   const [type, setType] = useState<string>("1");
   const [selectedTarget, setSelectedTarget] = useState("3,4");
+
+  const [listExpert, setListExpert] = useState<any[]>([]);
+  const [userCompetencies, setUserCompetencies] = useState<any[]>([]);
+  const [selectedCompetencies, setSelectedCompetencies] = useState<Set<number>>(
+    new Set()
+  );
+
   const [detail, setDetail] = useState<taskDetail>();
   const [urlInputs, setUrlInputs] = useState<Url[]>([]);
   const [refresh] = useState(false);
   const [listDest, setListDest] = useState([]); // Data Polda dan Polres
-  const [checkedLevels, setCheckedLevels] = useState(new Set());
+  const [checkedLevels, setCheckedLevels] = useState<Set<number>>(new Set());
   const [expandedPolda, setExpandedPolda] = useState([{}]);
   const [isLoading, setIsLoading] = useState(false);
   const [audioFile, setAudioFile] = useState<File | null>(null);
@@ -247,6 +257,68 @@ export default function FormTaskTaEdit() {
     }
   };
 
+  useEffect(() => {
+    getDataAdditional();
+  }, []);
+
+  async function getDataAdditional() {
+    const resCompetencies = await getListCompetencies();
+    console.log("competency", resCompetencies);
+    setUserCompetencies(resCompetencies?.data?.data);
+  }
+
+  useEffect(() => {
+    async function fetchListExpert() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForExpert(id);
+        setListExpert(response?.data?.data);
+        console.log("tenaga ahli", response?.data?.data);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchListExpert();
+  }, []);
+
+  useEffect(() => {
+    const fetchExpertsForCompetencies = async () => {
+      const allExperts: any[] = [];
+
+      for (const compId of Array.from(selectedCompetencies)) {
+        const response = await getUserLevelForExpert(compId);
+        const experts = response?.data?.data || [];
+        allExperts.push(...experts);
+      }
+
+      const uniqueExperts = Array.from(
+        new Map(allExperts.map((e) => [e.id, e])).values()
+      );
+
+      setListExpert(uniqueExperts);
+    };
+
+    if (selectedCompetencies.size > 0) {
+      fetchExpertsForCompetencies();
+    } else {
+      setListExpert([]);
+    }
+  }, [selectedCompetencies]);
+
+  const handleCompetencyChange = async (competencyId: number) => {
+    setSelectedCompetencies((prev) => {
+      const updated = new Set(prev);
+      if (updated.has(competencyId)) {
+        updated.delete(competencyId);
+      } else {
+        updated.add(competencyId);
+      }
+      return updated;
+    });
+  };
+
   useEffect(() => {
     async function fetchPoldaPolres() {
       setIsLoading(true);
@@ -285,12 +357,22 @@ export default function FormTaskTaEdit() {
         }
 
         if (details?.assignedToLevel) {
-          const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
+          const levels: Set<number> = new Set(
+            details.assignedToLevel.split(",").map((x: any) => Number(x))
           );
           setCheckedLevels(levels);
         }
 
+        if (details?.assignedToUsers) {
+          const userIds = details.assignedToUsers.split(",").map(Number);
+          setCheckedLevels(new Set(userIds));
+        }
+
+        if (details?.expertCompetencies) {
+          const compIds = details.expertCompetencies.split(",").map(Number);
+          setSelectedCompetencies(new Set(compIds));
+        }
+
         const attachment = details?.files;
         setImageUploadedFiles(
           attachment?.filter((file: any) => file.fileTypeId == 1)
@@ -376,7 +458,7 @@ export default function FormTaskTaEdit() {
       confirmButtonText: "OK",
     }).then((result) => {
       if (result.isConfirmed) {
-        router.push("/en/contributor/task");
+        router.push("/en/contributor/task-ta");
       }
     });
   };
@@ -393,9 +475,9 @@ export default function FormTaskTaEdit() {
     });
   };
 
-  const handlePoldaPolresChange = () => {
-    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
-  };
+  // const handlePoldaPolresChange = () => {
+  //   return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  // };
 
   const handleUnitChange = (
     key: keyof typeof unitSelection,
@@ -454,6 +536,10 @@ export default function FormTaskTaEdit() {
     }
   };
 
+  const handleExpertChange = () => {
+    return Array.from(checkedLevels).join(",");
+  };
+
   const save = async (data: TaskSchema) => {
     const fileTypeMapping = {
       all: "1",
@@ -483,16 +569,11 @@ export default function FormTaskTaEdit() {
     const requestData: {
       id?: any;
       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[];
     } = {
@@ -500,17 +581,12 @@ export default function FormTaskTaEdit() {
       // assignmentType,
       // assignmentCategory,
       id: detail?.id || null,
-      assignedToLevel: handlePoldaPolresChange(),
-      assignedToUsers: assignmentPurposeString,
+      assignedToUsers: handleExpertChange(),
       assignedToRole: selectedTarget,
       assignmentType: taskType,
-      broadcastType: broadcastType,
-      assignmentMainTypeId: mainType,
       assignmentTypeId: type,
-      fileTypeOutput: selectedOutputs,
       narration: data.naration,
-      platformType: "",
-      expertCompetencies: "1,2,3",
+      expertCompetencies: Array.from(selectedCompetencies).join(","),
       title: data.title,
       attachmentUrl: links,
     };
@@ -808,47 +884,97 @@ export default function FormTaskTaEdit() {
               <div className="mt-5 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}>
+                  {userCompetencies?.map((item: any) => (
+                    <div className="flex items-center gap-2" key={item.id}>
                       <Checkbox
-                        id={key}
-                        checked={expertise[key as keyof typeof expertise]}
-                        onCheckedChange={(value) =>
-                          handleExpertiseOutputChange(
-                            key as keyof typeof expertise,
-                            value as boolean
-                          )
-                        }
+                        id={`comp-${item.id}`}
+                        checked={selectedCompetencies.has(item.id)}
+                        onCheckedChange={() => handleCompetencyChange(item.id)}
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={`comp-${item.id}`}>{item.name}</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>
-                  ))}
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="soft" size="sm" color="primary">
+                        [{"Pilih Tenaga Ahli"}]
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                      <DialogHeader>
+                        <DialogTitle>Daftar Tenaga Ahli</DialogTitle>
+                      </DialogHeader>
+                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                        {listExpert?.map((expert: any) => (
+                          <div key={expert.id} className="border p-2">
+                            <Label className="flex items-center">
+                              <Checkbox
+                                checked={checkedLevels.has(expert.id)}
+                                onCheckedChange={() =>
+                                  handleCheckboxChange(expert.id)
+                                }
+                                className="mr-3"
+                              />
+                              <div className="flex flex-col gap-2">
+                                <div className="font-bold">
+                                  {expert.fullname}
+                                </div>
+                                <div className="italic">
+                                  ({expert.username})
+                                </div>
+                              </div>
+                            </Label>
+                          </div>
+                        ))}
+                      </div>
+                    </DialogContent>
+                  </Dialog>
                 </div>
+                {checkedLevels.size > 0 && (
+                  <div className="mt-3">
+                    <Label className="text-sm text-gray-600 mb-2 block">
+                      Tenaga Ahli Terpilih ({checkedLevels.size})
+                    </Label>
+                    <div className="flex flex-wrap gap-2">
+                      {Array.from(checkedLevels).map((expertId) => {
+                        const expert = listExpert?.find(
+                          (exp: any) => exp.id === expertId
+                        );
+                        return expert ? (
+                          <div
+                            key={expert.id}
+                            className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full border border-blue-200"
+                          >
+                            <span>{expert.fullname}</span>
+                            <button
+                              type="button"
+                              onClick={() => handleCheckboxChange(expert.id)}
+                              className="ml-1 text-blue-600 hover:text-blue-800 hover:bg-blue-200 rounded-full p-0.5 transition-colors"
+                              title="Remove expert"
+                            >
+                              <svg
+                                className="w-3 h-3"
+                                fill="currentColor"
+                                viewBox="0 0 20 20"
+                              >
+                                <path
+                                  fillRule="evenodd"
+                                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                  clipRule="evenodd"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        ) : null;
+                      })}
+                    </div>
+                  </div>
+                )}
               </div>
 
               <div className="mt-5 space-y-2">
@@ -1079,13 +1205,42 @@ export default function FormTaskTaEdit() {
                         />
                       </div>
                     ))}
-                    <button
-                      type="button"
-                      className="mt-4 bg-green-500 text-white px-4 py-2 rounded"
-                      onClick={handleAddLink}
-                    >
-                      {t("add-links")}
-                    </button>
+                    <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>
diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx
index 690cda74..2212cff2 100644
--- a/components/landing-page/content-category.tsx
+++ b/components/landing-page/content-category.tsx
@@ -81,7 +81,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
                     alt="category"
                     width={2560}
                     height={1440}
-                    src={category?.smallThumbnailLink}
+                    src={category?.thumbnailLink}
                     className="w-full lg:h-[300px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
                   />
 
diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx
index e6713943..a19e8d5a 100644
--- a/components/landing-page/division.tsx
+++ b/components/landing-page/division.tsx
@@ -10,7 +10,7 @@ import Image from "next/image";
 const regions = [
   { name: "ITWASUM POLRI", slug: "itwasum", logo: "/logo/satker/ITWASUM.png" },
   {
-    name: "BAINTELKAM POLRI",
+    name: "BAINTELKAM POLRI ",
     slug: "baintelkam",
     logo: "/logo/satker/BAINTELKAM.png",
   },
diff --git a/components/visualization/dashboard-viz.tsx b/components/visualization/dashboard-viz.tsx
index 5b0f2397..9ddd487b 100644
--- a/components/visualization/dashboard-viz.tsx
+++ b/components/visualization/dashboard-viz.tsx
@@ -71,22 +71,22 @@ export default function DashboardVisualization() {
     setIsInternational(updatedIsInternational);
   };
 
-  useEffect(() => {
-    async function fetchUrl() {
-      console.log("Fetch tableau");
-      const urlView = `${url + ticket1}/${view1}${param}`;
-      console.log("Fetch tableau ", urlView);
-      const urlRender = await fetch(urlView)
-        .then((response) => {
-          console.log("Tableau res : ", response);
-        })
-        .catch((error) => {
-          console.log("Tableau error: ", error);
-        });
-    }
+  // useEffect(() => {
+  //   async function fetchUrl() {
+  //     console.log("Fetch tableau");
+  //     const urlView = `${url + ticket1}/${view1}${param}`;
+  //     console.log("Fetch tableau ", urlView);
+  //     const urlRender = await fetch(urlView)
+  //       .then((response) => {
+  //         console.log("Tableau res : ", response);
+  //       })
+  //       .catch((error) => {
+  //         console.log("Tableau error: ", error);
+  //       });
+  //   }
 
-    fetchUrl();
-  }, [ticket1]);
+  //   fetchUrl();
+  // }, [ticket1]);
 
   return (
     <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
diff --git a/lib/menus.ts b/lib/menus.ts
index ea0d8ac8..f495686b 100644
--- a/lib/menus.ts
+++ b/lib/menus.ts
@@ -3627,20 +3627,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
-        {
-          groupLabel: "",
-          id: "contest",
-          menus: [
-            {
-              id: "contest",
-              href: "/shared/contest",
-              label: t("contest"),
-              active: pathname.includes("/contest"),
-              icon: "ic:outline-emoji-events",
-              submenus: [],
-            },
-          ],
-        },
+        // {
+        //   groupLabel: "",
+        //   id: "contest",
+        //   menus: [
+        //     {
+        //       id: "contest",
+        //       href: "/shared/contest",
+        //       label: t("contest"),
+        //       active: pathname.includes("/contest"),
+        //       icon: "ic:outline-emoji-events",
+        //       submenus: [],
+        //     },
+        //   ],
+        // },
         {
           groupLabel: "",
           id: "communication",
@@ -3896,16 +3896,16 @@ export function getMenuList(pathname: string, t: any): Group[] {
               icon: "material-symbols:map-search-outline",
               submenus: [
                 {
-                  href: "/admin/media-tracking/media-online",
-                  label: "Media Online",
-                  active: pathname === "/media-tracking/media-online",
+                  href: "/admin/media-tracking/tracking-berita",
+                  label: "Tracking Beritra",
+                  active: pathname === "/admin/media-tracking/tracking-berita",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
                 {
-                  href: "/admin/media-tracking/tb-news",
-                  label: "Tracking Berita Hari Ini",
-                  active: pathname === "/media-tracking/news",
+                  href: "/admin/media-tracking/results",
+                  label: "Hasil",
+                  active: pathname === "/admin/media-tracking/results",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
@@ -4079,20 +4079,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
-        // {
-        //   groupLabel: "",
-        //   id: "performance-satker",
-        //   menus: [
-        //     {
-        //       id: "performance-polres",
-        //       href: "/admin/performance-satker",
-        //       label: t("performance-satker"),
-        //       active: pathname.includes("/admin/performance-satker"),
-        //       icon: "ant-design:signal-filled",
-        //       submenus: [],
-        //     },
-        //   ],
-        // },
+        {
+          groupLabel: "",
+          id: "performance-satker",
+          menus: [
+            {
+              id: "performance-polres",
+              href: "/admin/performance-satker",
+              label: t("performance-satker"),
+              active: pathname.includes("/admin/performance-satker"),
+              icon: "ant-design:signal-filled",
+              submenus: [],
+            },
+          ],
+        },
         {
           groupLabel: "",
           id: "media-tracking",
@@ -4105,16 +4105,16 @@ export function getMenuList(pathname: string, t: any): Group[] {
               icon: "material-symbols:map-search-outline",
               submenus: [
                 {
-                  href: "/admin/media-tracking/media-online",
-                  label: "Media Online",
-                  active: pathname === "/media-tracking/media-online",
+                  href: "/admin/media-tracking/tracking-berita",
+                  label: "Tracking Beritra",
+                  active: pathname === "/admin/media-tracking/tracking-berita",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
                 {
-                  href: "/admin/media-tracking/tb-news",
-                  label: "Tracking Berita Hari Ini",
-                  active: pathname === "/media-tracking/news",
+                  href: "/admin/media-tracking/results",
+                  label: "Hasil",
+                  active: pathname === "/admin/media-tracking/results",
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
diff --git a/messages/en.json b/messages/en.json
index 88c4ba53..72448dfe 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -784,6 +784,8 @@
     "assignment-type": "Assignment Type",
     "description-task": "Description Task",
     "form-task": "Form Task",
+    "form-task-ta": "Form Ask the Expert",
+    "form-task-ta-do": "Form Do it yourself",
     "assignment-selection": "Assignment Recipient",
     "custom": "Costum",
     "assigment-type": "Assigment Type",
diff --git a/messages/in.json b/messages/in.json
index 4aba77fa..659c85ce 100644
--- a/messages/in.json
+++ b/messages/in.json
@@ -571,47 +571,33 @@
     "divisionNews": "Berita Satker",
     "areaCoverage": "Liputan Wilayah & Satker",
     "calendar": "KALENDER ACARA",
-        "january": "Januari",
-            "february": "February",
-                "march": "March",
-                    "may": "May",
-                        "june": "Juni",
-        "july": "Juli",
-        "august": "Agustus",
-            "october": "Oktober",
-            "december": "Desember",
-        "eventList": "Daftar Acara",
-        "noEvent": "Tidak ada acara yang tersedia",
-        "eventDetails": "Detail Acara",
-        "date": "Tanggal:",
-            "selectEvent": "Pilih acara untuk melihat detail",
-        "regionalPolice": "Polda Jajaran",
-            "policeDivision": "Satuan Kerja Polri",
-        "close": "Tutup",
-            "survey1": "SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI",
-        "survey2": "Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas layanan MediaHub Polri. Mohon luangkan waktu beberapa menit untuk mengisi survei ini.",
-            "survey3": "SURVEY SEKARANG",   
-             "survey4": "SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI",
-                 "survey5": "Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas layanan MediaHub Polri.",
-                     "survey6": "1. Seberapa sering Anda mengakses MediaHub Polri?",
-                         "survey7": "2. Bagaimana pengalaman Anda dalam mengakses website ini?",
-        "survey8": "3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub Polri?",
-            "survey9": "4. Apakah Anda merasa website ini membantu dalam mendapatkan informasi terkait Polri?",
-                "survey10": "5. Apa saran atau masukan Anda?"
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+    "january": "Januari",
+    "february": "February",
+    "march": "March",
+    "may": "May",
+    "june": "Juni",
+    "july": "Juli",
+    "august": "Agustus",
+    "october": "Oktober",
+    "december": "Desember",
+    "eventList": "Daftar Acara",
+    "noEvent": "Tidak ada acara yang tersedia",
+    "eventDetails": "Detail Acara",
+    "date": "Tanggal:",
+    "selectEvent": "Pilih acara untuk melihat detail",
+    "regionalPolice": "Polda Jajaran",
+    "policeDivision": "Satuan Kerja Polri",
+    "close": "Tutup",
+    "survey1": "SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI",
+    "survey2": "Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas layanan MediaHub Polri. Mohon luangkan waktu beberapa menit untuk mengisi survei ini.",
+    "survey3": "SURVEY SEKARANG",
+    "survey4": "SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI",
+    "survey5": "Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas layanan MediaHub Polri.",
+    "survey6": "1. Seberapa sering Anda mengakses MediaHub Polri?",
+    "survey7": "2. Bagaimana pengalaman Anda dalam mengakses website ini?",
+    "survey8": "3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub Polri?",
+    "survey9": "4. Apakah Anda merasa website ini membantu dalam mendapatkan informasi terkait Polri?",
+    "survey10": "5. Apa saran atau masukan Anda?"
   },
   "FilterPage": {
     "image": "Foto",
@@ -798,6 +784,8 @@
     "assignment-type": "Jenis Penugasan",
     "description-task": "Narasi Penugasan",
     "form-task": "Form Penugasan",
+    "form-task-ta": "Form Tanya Tenaga Ahli",
+    "form-task-ta-do": "Form Tenaga Ahli Kurasi",
     "assignment-selection": "Penerima Tugas",
     "custom": "Kostum",
     "assigment-type": "Jenis Tugas",
diff --git a/service/content/content.ts b/service/content/content.ts
index d200a906..320ddeb6 100644
--- a/service/content/content.ts
+++ b/service/content/content.ts
@@ -152,7 +152,7 @@ export async function getTagsBySubCategoryId(subCategory: any) {
 }
 
 export async function listEnableCategory(type: any) {
-  const url = `media/categories/list/enable?enablePage=0&sort=desc&sortBy=id&type=${type}`;
+  const url = `media/categories/list?enablePage=0&sort=desc&sortBy=id&type=${type}`;
   return httpGetInterceptor(url);
 }
 
diff --git a/service/management-user/management-user.ts b/service/management-user/management-user.ts
index b2098c4e..339bf4c2 100644
--- a/service/management-user/management-user.ts
+++ b/service/management-user/management-user.ts
@@ -46,6 +46,11 @@ export async function saveUserInternal(data: any) {
   return httpPostInterceptor(url, data);
 }
 
+export async function checkRolePlacementsAvailability(data: any) {
+  const url = "users/role-placements/availability";
+  return httpPostInterceptor(url, data);
+}
+
 export async function saveUserRolePlacements(data: any) {
   const url = "users/role-placements";
   return httpPostInterceptor(url, data);
diff --git a/service/task.ts b/service/task.ts
index 8c853a34..ef86fff2 100644
--- a/service/task.ts
+++ b/service/task.ts
@@ -108,6 +108,11 @@ export async function acceptAssignment(id: any) {
   return httpPostInterceptor(url, id);
 }
 
+export async function acceptAssignmentTa(id: any) {
+  const url = `assignment-expert/acceptance?id=${id}`;
+  return httpPostInterceptor(url, id);
+}
+
 export async function postFinishAcceptance(id: any) {
   const url = `assignment/finish-acceptance?id=${id}`;
   return httpPostInterceptor(url, id);
@@ -128,6 +133,11 @@ export async function finishTask(id: any) {
   return httpPostInterceptor(url);
 }
 
+export async function finishTaskTa(id: any) {
+  const url = `assignment-expert/finish?id=${id}`;
+  return httpPostInterceptor(url);
+}
+
 export async function listTaskTa(
   page: any,
   title: string = "",
diff --git a/utils/globals.tsx b/utils/globals.tsx
index 445354d9..4ec73d08 100644
--- a/utils/globals.tsx
+++ b/utils/globals.tsx
@@ -181,7 +181,7 @@ const LoadScript = () => {
     const script = document.createElement("script");
     script.src = "https://cdn.userway.org/widget.js";
     script.setAttribute("data-account", "X36s1DpjqB");
-    script.setAttribute("data-position", "3"); 
+    script.setAttribute("data-position", "5"); 
     script.async = true;
     document.head.appendChild(script);