Merge branch 'dev-sabda-v2' of http://38.47.180.165:3000/mediahub/mediahub-fe

.drone.yml

@@ -0,0 +1,45 @@
+kind: pipeline
+type: ssh
+name: mediahub-fe-build-deploy
+
+server:
+  host:
+    from_secret: ssh_host
+  user:
+    from_secret: ssh_user
+  ssh_key:
+    from_secret: ssh_key
+
+steps:
+  - name: prepare repo
+    when:
+      branch:
+        - dev-sabda-v2
+        - main
+        - prod
+    commands:
+      - rm -rf /opt/build/mediahub-fe
+      - mkdir -p /opt/build
+      - cd /opt/build
+      - git clone http://38.47.180.165:3000/mediahub/mediahub-fe.git
+
+  - name: build image
+    when:
+      branch:
+        - dev-sabda-v2
+        - prod
+    commands:
+      - docker login 38.47.180.165:3000 -u administrator -p HarborDockerImageRep0
+      - cd /opt/build/mediahub-fe
+      - docker build -t 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH .
+      - docker push 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH
+
+  - name: deploy
+    when:
+      branch:
+        - prod
+    commands:
+      - docker pull 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH
+      - docker stop new-mediahub-fe || true
+      - docker rm new-mediahub-fe || true
+      - docker run -dt -p 4200:3000 --restart always --name new-mediahub-fe 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH

.env

@@ -1,3 +1,3 @@
-NEXT_PUBLIC_API=https://netidhub.com/api
-NEXT_PUBLIC=https://netidhub.com
+NEXT_PUBLIC_API=https://new.netidhub.com/api
+NEXT_PUBLIC=https://new.netidhub.com
 NEXT_PUBLIC_TINYMCE_API_KEY=bhteuja26yz5p0aubxry9b95hs33amgn65kjv5km0fd5iuev

.gitlab-ci.yml

@@ -1,23 +1,23 @@
 stages:
   - build
   - deploy
-
+ 
 build-dev:
   stage: build
   when: on_success
   only:
     - main
     - dev-landing-v2
-  image: 
+  image:
     name: docker:25.0.3-cli
   services:
     - name: docker:25.0.3-dind
-      command: ["--insecure-registry=103.82.242.92:8900"]
+      command: ["--insecure-registry=38.47.185.86:8900"]
   script:
     - docker logout
-    - docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 103.82.242.92:8900
-    - docker build -t 103.82.242.92:8900/mediahub/new-mediahub-fe:dev .
-    - docker push 103.82.242.92:8900/mediahub/new-mediahub-fe:dev
+    - docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 38.47.185.86:8900
+    - docker build -t 38.47.185.86:8900/mediahub/new-mediahub-fe:dev .
+    - docker push 38.47.185.86:8900/mediahub/new-mediahub-fe:dev
 
 auto-deploy:
   stage: deploy
@@ -26,7 +26,5 @@ auto-deploy:
     - main
     - dev-landing-v2
   image: curlimages/curl:latest
-  services:
-    - docker:dind
   script:
-    - curl --user admin:$JENKINS_PWD http://38.47.180.165:8080/job/auto-deploy-new-mediahub-fe/build?token=autodeploynewmediahub
+    - curl --user admin:$JENKINS_PWD http://38.47.185.86:8080/job/auto-deploy-new-mediahub-fe/build?token=autodeploynewmediahub

app/[locale]/(protected)/admin/add-experts/component/column.tsx

@@ -18,7 +18,7 @@ import { useRouter } from "next/navigation";
 import { deleteUser } from "@/service/management-user/management-user";
 import { stringify } from "querystring";
 
-const columns: ColumnDef<any>[] = [
+const getColumns = ({ onRefresh }: { onRefresh: () => void }): ColumnDef<any>[] => [
   {
     accessorKey: "no",
     header: "No",
@@ -30,11 +30,13 @@ const columns: ColumnDef<any>[] = [
     header: "Nama",
     cell: ({ row }) => <span>{row.getValue("fullname")}</span>,
   },
+
   {
     accessorKey: "address",
     header: "Wilayah",
-    cell: ({ row }) => <span>MABES</span>,
+    cell: () => <span>MABES</span>,
   },
+
   {
     accessorKey: "userRolePlacements",
     header: "Posisi",
@@ -52,6 +54,7 @@ const columns: ColumnDef<any>[] = [
       return <span>{posisi}</span>;
     },
   },
+
   {
     accessorKey: "role.name",
     header: "Bidang Keahlian",
@@ -81,72 +84,77 @@ const columns: ColumnDef<any>[] = [
 
   {
     id: "actions",
-    accessorKey: "action",
     header: "Actions",
-    enableHiding: false,
     cell: ({ row }) => {
       const { toast } = useToast();
       const MySwal = withReactContent(Swal);
-      const router = useRouter();
+
       const doDelete = async (id: number) => {
+        Swal.fire({
+          title: "Menghapus user...",
+          text: "Mohon tunggu",
+          allowOutsideClick: false,
+          didOpen: () => Swal.showLoading(),
+        });
+
         const response = await deleteUser(id);
+
+        Swal.close();
+
         if (response?.error) {
           toast({
             title: stringify(response?.message),
             variant: "destructive",
           });
+          return;
         }
-        toast({
-          title: "Success delete",
-        });
 
-        router.push("?dataChange=true");
+        toast({ title: "Berhasil menghapus user" });
+
+        // ⬅️ INI YANG PENTING → REFRESH TABLE TANPA RELOAD
+        onRefresh();
       };
 
       const handleDelete = (id: number) => {
         MySwal.fire({
-          title: "Apakah anda ingin menghapus data user?",
+          title: "Hapus user ini?",
           showCancelButton: true,
           confirmButtonColor: "#dc3545",
           confirmButtonText: "Iya",
           cancelButtonText: "Tidak",
-        }).then((result) => {
-          if (result.isConfirmed) {
-            doDelete(id);
-          }
+        }).then((res) => {
+          if (res.isConfirmed) doDelete(id);
         });
       };
+
       return (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button
-              size="icon"
-              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
-            >
-              <MoreVertical className="h-4 w-4 text-default-800" />
+            <Button size="icon" variant="ghost">
+              <MoreVertical className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="p-0" align="end">
-            <Link href={`/admin/add-experts/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" />
-                View
+          <DropdownMenuContent align="end">
+            
+            <Link href={`/admin/add-experts/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                <Eye className="w-4 h-4 me-1.5" /> View
               </DropdownMenuItem>
             </Link>
 
-            <Link href={`/admin/add-experts/update/${row?.original?.id}`}>
-              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-                <SquarePen className="w-4 h-4 me-1.5" />
-                Edit
+            <Link href={`/admin/add-experts/update/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                <SquarePen className="w-4 h-4 me-1.5" /> Edit
               </DropdownMenuItem>
             </Link>
+
             <DropdownMenuItem
               onClick={() => handleDelete(row.original.userKeycloakId)}
-              className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
+              className="text-red-600 cursor-pointer hover:bg-red-300"
             >
-              <Trash2 className="w-4 h-4 me-1.5" />
-              Delete
+              <Trash2 className="w-4 h-4 me-1.5" /> Delete
             </DropdownMenuItem>
+
           </DropdownMenuContent>
         </DropdownMenu>
       );
@@ -154,4 +162,4 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-export default columns;
+export default getColumns;

app/[locale]/(protected)/admin/add-experts/component/table.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import {
-  ColumnDef,
   ColumnFiltersState,
   PaginationState,
   SortingState,
@@ -15,7 +14,6 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { Button } from "@/components/ui/button";
-
 import {
   Table,
   TableBody,
@@ -25,7 +23,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { UserIcon } from "lucide-react";
-import { cn } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -35,43 +32,14 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/service/blog/blog";
-import { ticketingPagination } from "@/service/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
 import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
-import columns from "./column";
-import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { listDataMedia } from "@/service/broadcast/broadcast";
+// import columns from "./column";
+import getColumns from "./column";
 import { listEnableCategory } from "@/service/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
 import { Link } from "@/i18n/routing";
 import { listDataExperts } from "@/service/experts/experts";
 
-const dummyData = [
-  {
-    id: 1,
-    name: "Prof. Dr. Ravi",
-    region: "Nasional",
-    skills: "Komunikasi",
-    experience: "Akademisi",
-  },
-  {
-    id: 2,
-    name: "Prof. Dr. Novan",
-    region: "DKI Jakarta",
-    skills: "Hukum",
-    experience: "Akademisi + Praktisi",
-  },
-];
-
 const AddExpertTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -97,7 +65,8 @@ const AddExpertTable = () => {
   const [limit, setLimit] = React.useState(10);
   const table = useReactTable({
     data: dataTable,
-    columns,
+    // columns,
+    columns: getColumns({ onRefresh: fetchData }),
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
@@ -283,7 +252,11 @@ const AddExpertTable = () => {
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
+              <TableCell
+                // colSpan={columns.length}
+                colSpan={table.getAllLeafColumns().length}
+                className="h-24 text-center"
+              >
                 No results.
               </TableCell>
             </TableRow>

app/[locale]/(protected)/admin/add-experts/create/page.tsx

@@ -35,32 +35,61 @@ import {
 import { error, loading } from "@/config/swal";
 import { Eye, EyeOff } from "lucide-react";
 
+// const FormSchema = z.object({
+//   name: z.string({
+//     required_error: "Required",
+//   }),
+//   username: z.string({
+//     required_error: "Required",
+//   }),
+//   password: z.string({
+//     required_error: "Required",
+//   }),
+//   phoneNumber: z.string({
+//     required_error: "Required",
+//   }),
+//   email: z.string({
+//     required_error: "Required",
+//   }),
+//   skills: z.string({
+//     required_error: "Required",
+//   }),
+//   experiences: z.string({
+//     required_error: "Required",
+//   }),
+//   company: z.string({
+//     required_error: "Required",
+//   }),
+// });
+
 const FormSchema = z.object({
-  name: z.string({
-    required_error: "Required",
-  }),
-  username: z.string({
-    required_error: "Required",
-  }),
-  password: z.string({
-    required_error: "Required",
-  }),
-  phoneNumber: z.string({
-    required_error: "Required",
-  }),
-  email: z.string({
-    required_error: "Required",
-  }),
-  skills: z.string({
-    required_error: "Required",
-  }),
-  experiences: z.string({
-    required_error: "Required",
-  }),
-  company: z.string({
-    required_error: "Required",
-  }),
+  name: z.string({ required_error: "Required" }),
+  username: z
+    .string({ required_error: "Required" })
+    .refine((val) => !/\s/.test(val), {
+      message: "Username tidak boleh mengandung spasi",
+    }),
+    // .transform((val) => val.toLowerCase()),
+
+  password: z
+    .string({ required_error: "Required" })
+    .min(8, "Minimal 8 karakter")
+    .regex(/[A-Z]/, "Harus mengandung huruf besar (A-Z)")
+    .regex(/[0-9]/, "Harus mengandung angka (0-9)")
+    .regex(/[^A-Za-z0-9]/, "Harus mengandung karakter spesial (!@#$%^&*)"),
+
+  // confirmPassword: z.string({ required_error: "Required" }),
+
+  phoneNumber: z.string({ required_error: "Required" }),
+  email: z.string({ required_error: "Required" }),
+  skills: z.string({ required_error: "Required" }),
+  experiences: z.string({ required_error: "Required" }),
+  company: z.string({ required_error: "Required" }),
 });
+// .refine((data) => data.password === data.confirmPassword, {
+//   path: ["confirmPassword"],
+//   message: "Konfirmasi password tidak sama",
+// });
 
 export type Placements = {
   index: number;
@@ -74,6 +103,7 @@ export default function AddExpertForm() {
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
   });
+  const [passwordStrength, setPasswordStrength] = useState("");
   const [incrementId, setIncrementId] = useState(1);
   const [placementRows, setPlacementRows] = useState<Placements[]>([
     { index: 0, roleId: "", userLevelId: 0 },
@@ -135,7 +165,7 @@ export default function AddExpertForm() {
     };
 
     loading();
-    
+
     // check availability first
     var placementArr: any[] = [];
     placementRows.forEach((row: any) => {
@@ -261,6 +291,19 @@ export default function AddExpertForm() {
     }
   };
 
+  const computeStrength = (password: string) => {
+    let score = 0;
+    if (password.length >= 8) score++;
+    if (/[A-Z]/.test(password)) score++;
+    if (/[0-9]/.test(password)) score++;
+    if (/[^A-Za-z0-9]/.test(password)) score++;
+
+    if (score <= 1) return "weak";
+    if (score === 2 || score === 3) return "medium";
+    if (score === 4) return "strong";
+    return "";
+  };
+
   return (
     <div>
       <SiteBreadcrumb />
@@ -288,6 +331,39 @@ export default function AddExpertForm() {
             )}
           />
           <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username (huruf kecil, tanpa spasi)</FormLabel>
+
+                <Input
+                  type="text"
+                  value={field.value}
+                  placeholder="masukkan username"
+                  onChange={(e) => {
+                    let value = e.target.value;
+
+                    // Hapus spasi otomatis
+                    value = value.replace(/\s+/g, "");
+
+                    // Jadikan lowercase otomatis
+                    value = value.toLowerCase();
+
+                    field.onChange(value);
+                  }}
+                />
+
+                {/* Info tambahan */}
+                <p className="text-xs text-gray-500 mt-1">
+                  Username otomatis menjadi huruf kecil tanpa spasi.
+                </p>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* <FormField
             control={form.control}
             name="username"
             render={({ field }) => (
@@ -303,7 +379,7 @@ export default function AddExpertForm() {
                 <FormMessage />
               </FormItem>
             )}
-          />
+          /> */}
           <FormField
             control={form.control}
             name="phoneNumber"
@@ -349,6 +425,69 @@ export default function AddExpertForm() {
             )}
           />
           <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <div className="relative">
+                  <Input
+                    type={showPassword ? "text" : "password"}
+                    value={field.value}
+                    placeholder="Masukkan Password"
+                    onChange={(e) => {
+                      field.onChange(e.target.value);
+                      setPasswordStrength(computeStrength(e.target.value));
+                    }}
+                  />
+
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500"
+                  >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
+                <FormLabel className="text-gray-400 text-[12px]">
+                  Password harus memiliki minimal 8 karakter, special karakter,
+                  angka dan huruf kapital
+                </FormLabel>
+
+                {/* Strength meter */}
+                {field.value && (
+                  <div className="mt-2">
+                    <div
+                      className={`h-2 rounded transition-all ${
+                        passwordStrength === "weak"
+                          ? "bg-red-500 w-1/4"
+                          : passwordStrength === "medium"
+                          ? "bg-yellow-500 w-2/4"
+                          : "bg-green-500 w-full"
+                      }`}
+                    />
+
+                    <p
+                      className={`text-xs mt-1 ${
+                        passwordStrength === "weak"
+                          ? "text-red-500"
+                          : passwordStrength === "medium"
+                          ? "text-yellow-600"
+                          : "text-green-600"
+                      }`}
+                    >
+                      {passwordStrength === "weak" && "Weak Password"}
+                      {passwordStrength === "medium" && "Medium Password"}
+                      {passwordStrength === "strong" && "Strong Password"}
+                    </p>
+                  </div>
+                )}
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* <FormField
             control={form.control}
             name="password"
             render={({ field }) => (
@@ -373,7 +512,7 @@ export default function AddExpertForm() {
                 <FormMessage />
               </FormItem>
             )}
-          />
+          /> */}
           <FormField
             control={form.control}
             name="skills"

app/[locale]/(protected)/admin/add-experts/update/[id]/page.tsx

@@ -37,32 +37,43 @@ import { Eye, EyeOff } from "lucide-react";
 import { useParams } from "next/navigation";
 
 const FormSchema = z.object({
-  name: z.string({
-    required_error: "Required",
-  }),
-  username: z.string({
-    required_error: "Required",
-  }),
-  password: z.string({
-    required_error: "Required",
-  }),
-  phoneNumber: z.string({
-    required_error: "Required",
-  }),
-  email: z.string({
-    required_error: "Required",
-  }),
-  skills: z.string({
-    required_error: "Required",
-  }),
-  experiences: z.string({
-    required_error: "Required",
-  }),
-  company: z.string({
-    required_error: "Required",
-  }),
+  name: z.string().optional(),
+  username: z.string().optional(),
+  password: z.string().optional(),
+  phoneNumber: z.string().optional(),
+  email: z.string().optional(),
+  skills: z.string().optional(),
+  experiences: z.string().optional(),
+  company: z.string().optional(),
 });
 
+// const FormSchema = z.object({
+//   name: z.string({
+//     required_error: "Required",
+//   }),
+//   username: z.string({
+//     required_error: "Required",
+//   }),
+//   password: z.string({
+//     required_error: "Required",
+//   }),
+//   phoneNumber: z.string({
+//     required_error: "Required",
+//   }),
+//   email: z.string({
+//     required_error: "Required",
+//   }),
+//   skills: z.string({
+//     required_error: "Required",
+//   }),
+//   experiences: z.string({
+//     required_error: "Required",
+//   }),
+//   company: z.string({
+//     required_error: "Required",
+//   }),
+// });
+
 export type Placements = {
   index: number;
   roleId?: string;
@@ -96,6 +107,10 @@ interface Detail {
       createdAt: string;
     };
   };
+  userRolePlacements?: {
+    roleId: number;
+    userLevelId: number;
+  }[];
 }
 
 export default function UpdateExpertForm() {
@@ -149,6 +164,39 @@ export default function UpdateExpertForm() {
     initState();
   }, [id]);
 
+  useEffect(() => {
+    if (!detail) return;
+
+    // Isi semua form field
+    form.reset({
+      name: detail.fullname || "",
+      username: detail.username || "",
+      phoneNumber: detail.phoneNumber || "",
+      email: detail.email || "",
+      password: "",
+      skills: detail?.userProfilesAdditional?.userCompetency?.id
+        ? String(detail.userProfilesAdditional.userCompetency.id)
+        : "",
+      experiences: detail?.userProfilesAdditional?.userExperienceId
+        ? String(detail.userProfilesAdditional.userExperienceId)
+        : "",
+      company: detail?.userProfilesAdditional?.companyName || "",
+    });
+
+    // 🔥 Masukkan posisi existing
+    if (detail.userRolePlacements && detail.userRolePlacements.length > 0) {
+      const mapped = detail.userRolePlacements.map(
+        (item: any, idx: number) => ({
+          index: idx,
+          roleId: String(item.roleId),
+          userLevelId: Number(item.userLevelId),
+        })
+      );
+
+      setPlacementRows(mapped);
+    }
+  }, [detail]);
+
   if (!detail) return <div>Loading...</div>;
 
   const togglePasswordType = () => {
@@ -189,18 +237,35 @@ export default function UpdateExpertForm() {
 
     const dataReq = {
       id: detail?.id,
-      firstName: data.name,
-      username: data.username,
-      email: data.email,
-      password: data.password,
+      firstName: data.name || detail.fullname,
+      username: data.username || detail.username,
+      email: data.email || detail.email,
+      password: data.password || undefined,
       address: "",
       roleId: "EXP-ID",
-      phoneNumber: data.phoneNumber,
-      userCompetencyId: data.skills,
-      userExperienceId: data.experiences,
-      companyName: data.company,
+      phoneNumber: data.phoneNumber || detail.phoneNumber,
+      userCompetencyId:
+        data.skills || detail.userProfilesAdditional?.userCompetency?.id,
+      userExperienceId:
+        data.experiences || detail.userProfilesAdditional?.userExperienceId,
+      companyName: data.company || detail.userProfilesAdditional?.companyName,
+      isAdmin: true,
     };
 
+    // const dataReq = {
+    //   id: detail?.id,
+    //   firstName: data.name,
+    //   username: data.username,
+    //   email: data.email,
+    //   password: data.password,
+    //   address: "",
+    //   roleId: "EXP-ID",
+    //   phoneNumber: data.phoneNumber,
+    //   userCompetencyId: data.skills,
+    //   userExperienceId: data.experiences,
+    //   companyName: data.company,
+    // };
+
     loading();
     const res = await saveUserInternal(dataReq);
     const resData = res?.data?.data;
@@ -322,10 +387,15 @@ export default function UpdateExpertForm() {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Nama Lengkap</FormLabel>
-                  <Input
+                  {/* <Input
                     defaultValue={detail?.fullname}
                     placeholder="Masukkan Nama Lengkap"
                     onChange={field.onChange}
+                  /> */}
+                  <Input
+                    {...field}
+                    defaultValue={detail?.fullname}
+                    placeholder="Masukkan Nama Lengkap"
                   />
 
                   <FormMessage />
@@ -333,18 +403,24 @@ export default function UpdateExpertForm() {
               )}
             />
             <FormField
+              disabled
               control={form.control}
               name="username"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Username</FormLabel>
-                  <Input
+                  {/* <Input
                     type="text"
                     defaultValue={detail?.username}
                     placeholder="Masukkan"
                     onChange={field.onChange}
+                  /> */}
+                  <Input
+                    {...field}
+                    type="text"
+                    defaultValue={detail?.username}
+                    placeholder="Masukkan"
                   />
-
                   <FormMessage />
                 </FormItem>
               )}
@@ -355,11 +431,17 @@ export default function UpdateExpertForm() {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>No. HP</FormLabel>
-                  <Input
+                  {/* <Input
                     type="number"
                     defaultValue={detail?.phoneNumber}
                     placeholder="Masukkan No.Hp"
                     onChange={field.onChange}
+                  /> */}
+                  <Input
+                    {...field}
+                    type="number"
+                    defaultValue={detail?.phoneNumber}
+                    placeholder="Masukkan"
                   />
                   <FormMessage />
                 </FormItem>
@@ -371,17 +453,46 @@ export default function UpdateExpertForm() {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Email</FormLabel>
-                  <Input
+                  {/* <Input
                     type="email"
                     defaultValue={detail?.email}
                     placeholder="Masukkan email"
                     onChange={field.onChange}
+                  /> */}
+                  <Input
+                    {...field}
+                    type="email"
+                    defaultValue={detail?.email}
+                    placeholder="Masukkan email"
                   />
                   <FormMessage />
                 </FormItem>
               )}
             />
-            <FormField
+            {/* <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password (Opsional)</FormLabel>
+                  <div className="relative">
+                    <Input
+                      {...field}
+                      type={showPassword ? "text" : "password"}
+                      placeholder="Kosongkan jika tidak ingin mengubah password"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2"
+                    >
+                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                    </button>
+                  </div>
+                </FormItem>
+              )}
+            /> */}
+            {/* <FormField
               control={form.control}
               name="password"
               render={({ field }) => (
@@ -406,7 +517,7 @@ export default function UpdateExpertForm() {
                   <FormMessage />
                 </FormItem>
               )}
-            />
+            /> */}
             <FormField
               control={form.control}
               name="skills"
@@ -481,12 +592,21 @@ export default function UpdateExpertForm() {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Nama Institusi/Perusahaan</FormLabel>
-                  <Input
+                  {/* <Input
                     type="text"
                     value={detail?.userProfilesAdditional?.companyName || ""}
                     placeholder="Nama Institusi/Perusahaan"
                     onChange={field.onChange}
+                  /> */}
+                  <Input
+                    {...field}
+                    type="text"
+                    defaultValue={
+                      detail?.userProfilesAdditional?.companyName || ""
+                    }
+                    placeholder="Nama Institusi/Perusahaan"
                   />
+
                   <FormMessage />
                 </FormItem>
               )}
@@ -497,6 +617,7 @@ export default function UpdateExpertForm() {
               {placementRows?.map((row: any) => (
                 <div key={row.index} className="flex items-center gap-2 my-2">
                   <Select
+                    value={row.roleId}
                     onValueChange={(e) =>
                       handleSelectionChange(row.index, "roleId", e)
                     }
@@ -533,6 +654,7 @@ export default function UpdateExpertForm() {
                   </SelectContent>
                 </Select> */}
                   <Select
+                    value={row.userLevelId}
                     onValueChange={(e) =>
                       handleSelectionChange(row.index, "userLevelId", e)
                     }
@@ -562,7 +684,7 @@ export default function UpdateExpertForm() {
                 type="button"
                 size="md"
                 onClick={handleAddRow}
-                disabled={placementRows.length >= 2} // optional: disable button if already 1 row added
+                disabled={placementRows.length >= 2}
               >
                 Tambah
               </Button>

app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx

@@ -59,8 +59,12 @@ import {
   deleteMediaBlastCampaignAccount,
   saveMediaBlastCampaignAccountBulk,
 } from "@/service/broadcast/broadcast";
-import { AdministrationUserList, getUserListAll } from "@/service/management-user/management-user";
+import {
+  AdministrationUserList,
+  getUserListAll,
+} from "@/service/management-user/management-user";
 import { close, loading, error, success, successCallback } from "@/config/swal";
+import { Link } from "@/i18n/routing";
 
 // Mock data for available accounts - replace with actual API call
 const availableAccounts = [
@@ -98,7 +102,8 @@ const AccountListTable = () => {
   const [accountCategory, setAccountCategory] = React.useState<string>("");
   const [selectedAccount, setSelectedAccount] = React.useState<any[]>([]);
   const [selectedCategory, setSelectedCategory] = React.useState<string>("");
-  const [availableAccountsList, setAvailableAccountsList] = React.useState<any[]>(availableAccounts);
+  const [availableAccountsList, setAvailableAccountsList] =
+    React.useState<any[]>(availableAccounts);
   const [usersList, setUsersList] = React.useState<any[]>([]);
 
   const table = useReactTable({
@@ -171,7 +176,7 @@ const AccountListTable = () => {
   async function saveCampaignAccount() {
     try {
       loading();
-      
+
       if (accountCategory === "all-account") {
         // Handle all accounts - send only campaignId and category "all"
         const request = {
@@ -202,7 +207,7 @@ const AccountListTable = () => {
           default:
             roleId = "5";
         }
-        
+
         const request = {
           mediaBlastCampaignId: campaignId,
           mediaBlastAccountCategory: `role-${roleId}`,
@@ -216,7 +221,7 @@ const AccountListTable = () => {
         // Handle custom selection - send campaignId and selected user IDs
         const request = {
           mediaBlastCampaignId: campaignId,
-          mediaBlastAccountIds: selectedAccount.map(acc => acc.id),
+          mediaBlastAccountIds: selectedAccount.map((acc) => acc.id),
         };
         const response = await saveMediaBlastCampaignAccountBulk(request);
         if (response?.error) {
@@ -224,7 +229,7 @@ const AccountListTable = () => {
           return;
         }
       }
-        
+
       close();
       successCallback("Akun berhasil ditambahkan ke campaign!");
       resetDialogState();
@@ -247,7 +252,7 @@ const AccountListTable = () => {
     try {
       loading();
       const response = await getUserListAll();
-      
+
       if (response?.data?.data?.content) {
         setUsersList(response.data.data.content);
       }
@@ -265,15 +270,15 @@ const AccountListTable = () => {
     setFiltered(temp);
   };
 
-
-
   const removeSelectedAccount = (accountId: string) => {
-    setSelectedAccount(selectedAccount.filter(acc => acc.id !== accountId));
+    setSelectedAccount(selectedAccount.filter((acc) => acc.id !== accountId));
   };
 
   const getFilteredAccounts = () => {
     if (accountCategory === "kategori" && selectedCategory) {
-      return availableAccountsList.filter(acc => acc.category === selectedCategory);
+      return availableAccountsList.filter(
+        (acc) => acc.category === selectedCategory
+      );
     }
     return availableAccountsList;
   };
@@ -291,7 +296,10 @@ const AccountListTable = () => {
                 Pilih Akun
               </Button>
             </DialogTrigger>
-            <DialogContent size="md" className="max-w-xl max-h-[80vh] overflow-y-auto">
+            <DialogContent
+              size="md"
+              className="max-w-xl max-h-[80vh] overflow-y-auto"
+            >
               <DialogHeader>
                 <DialogTitle>Pilih Akun Untuk Campaign Ini</DialogTitle>
               </DialogHeader>
@@ -350,15 +358,17 @@ const AccountListTable = () => {
                       options={usersList.map((user: any) => ({
                         value: user.id,
                         label: `${user.fullname} (${user.role?.name})`,
-                        user: user
+                        user: user,
                       }))}
                       value={selectedAccount.map((acc: any) => ({
                         value: acc.id,
                         label: `${acc.fullname} (${acc.role?.name})`,
-                        user: acc
+                        user: acc,
                       }))}
                       onChange={(selectedOptions: any) => {
-                        const selectedUsers = selectedOptions ? selectedOptions.map((option: any) => option.user) : [];
+                        const selectedUsers = selectedOptions
+                          ? selectedOptions.map((option: any) => option.user)
+                          : [];
                         setSelectedAccount(selectedUsers);
                       }}
                       placeholder="Cari dan pilih user..."
@@ -369,14 +379,17 @@ const AccountListTable = () => {
                       className="react-select"
                       classNamePrefix="select"
                     />
-                    
+
                     {/* Selected Accounts Display */}
                     {selectedAccount.length > 0 && (
                       <div className="space-y-2">
                         <Label>User Terpilih ({selectedAccount.length}):</Label>
                         <div className="flex flex-wrap gap-2">
                           {selectedAccount.map((acc) => (
-                            <Badge key={acc.id} className="flex items-center gap-1">
+                            <Badge
+                              key={acc.id}
+                              className="flex items-center gap-1"
+                            >
                               {acc.fullname}
                               <X
                                 className="h-3 w-3 cursor-pointer"
@@ -403,7 +416,8 @@ const AccountListTable = () => {
                 {accountCategory === "kategori" && selectedCategory && (
                   <div className="p-3 bg-green-50 rounded-md">
                     <p className="text-sm text-green-700">
-                      Semua akun dengan role "{selectedCategory.toUpperCase()}" akan ditambahkan.
+                      Semua akun dengan role "{selectedCategory.toUpperCase()}"
+                      akan ditambahkan.
                     </p>
                   </div>
                 )}
@@ -412,7 +426,8 @@ const AccountListTable = () => {
                 {accountCategory === "custom" && (
                   <div className="p-3 bg-purple-50 rounded-md">
                     <p className="text-sm text-purple-700">
-                      {selectedAccount.length} user terpilih akan ditambahkan ke campaign ini.
+                      {selectedAccount.length} user terpilih akan ditambahkan ke
+                      campaign ini.
                     </p>
                   </div>
                 )}
@@ -423,7 +438,8 @@ const AccountListTable = () => {
                   onClick={saveCampaignAccount}
                   disabled={
                     !accountCategory ||
-                    (accountCategory === "custom" && selectedAccount.length < 1) ||
+                    (accountCategory === "custom" &&
+                      selectedAccount.length < 1) ||
                     (accountCategory === "kategori" && !selectedCategory)
                   }
                 >
@@ -441,7 +457,47 @@ const AccountListTable = () => {
       </div>
 
       {/* === Filter Akun === */}
-      <div className="flex justify-end">
+      <div className="flex flex-row justify-end">
+        {/* <div className="flex flex-row gap-4">
+          <Link href="/admin/broadcast/campaign-list/account-list/create">
+            <Button variant="default" className="bg-[#3f37c9] gap-2">
+              <span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="22"
+                  height="22"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M17 13h-4v4h-2v-4H7v-2h4V7h2v4h4m2-8H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"
+                  />
+                </svg>
+              </span>
+              Tambahkan Akun
+            </Button>
+          </Link>
+          <Button variant="default" className="bg-[#3f37c9] gap-2">
+            <span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <g fill="none">
+                  <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+                  <path
+                    fill="currentColor"
+                    d="M12 2v6.5a1.5 1.5 0 0 0 1.5 1.5H20v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1h3.414l-1.121 1.121a1 1 0 1 0 1.414 1.415l2.829-2.829a1 1 0 0 0 0-1.414l-2.829-2.828a1 1 0 1 0-1.414 1.414L7.414 17H4V4a2 2 0 0 1 2-2zM4 17v2H3a1 1 0 1 1 0-2zM14 2.043a2 2 0 0 1 1 .543L19.414 7a2 2 0 0 1 .543 1H14z"
+                  />
+                </g>
+              </svg>
+            </span>
+            Import Akun
+          </Button>
+        </div> */}
+
         <Popover>
           <PopoverTrigger asChild>
             <Button size="md" variant="outline">

app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx

@@ -6,7 +6,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -14,55 +13,80 @@ import {
 } from "@/components/ui/form";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import { Calendar } from "@/components/ui/calendar";
-import { getOnlyDate } from "@/utils/globals";
 import {
+  getMediaBlastCampaignPage,
   saveMediaBlastAccount,
-  saveMediaBlastCampaign,
 } from "@/service/broadcast/broadcast";
 import { error } from "@/config/swal";
 import { useRouter } from "@/i18n/routing";
 import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useEffect, useState } from "react";
+
+// ----------------------------
+// ZOD SCHEMA (dinamis)
+// ----------------------------
 
 const FormSchema = z.object({
-  name: z.string({
-    required_error: "Required",
-  }),
+  name: z.string({ required_error: "Required" }),
+
   accountType: z
     .array(z.string())
-    .refine((value) => value.some((item) => item), {
-      message: "Required",
-    }),
-  accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], {
-    required_error: "Required",
-  }),
-  email: z.string({
-    required_error: "Required",
-  }),
-  whatsapp: z.string({
-    required_error: "Required",
-  }),
-});
+    .min(1, "Pilih minimal satu tipe akun"),
+
+  email: z.string().optional(),
+  whatsapp: z.string().optional(),
+
+  campaignId: z.string({ required_error: "Required" }),
+}).refine(
+  (data) => {
+    if (data.accountType.includes("email") && !data.email) return false;
+    return true;
+  },
+  { message: "Email wajib diisi", path: ["email"] }
+).refine(
+  (data) => {
+    if (data.accountType.includes("wa") && !data.whatsapp) return false;
+    return true;
+  },
+  { message: "Whatsapp wajib diisi", path: ["whatsapp"] }
+);
+
+
+// ----------------------------
+// COMPONENT
+// ----------------------------
 
 export default function CreateAccountForBroadcast() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
+
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
-    defaultValues: { accountType: [] },
+    defaultValues: {
+      accountType: [],
+      email: "",
+      whatsapp: "",
+    },
   });
 
+  const selectedTypes = form.watch("accountType");
+  const [campaigns, setCampaigns] = useState<any[]>([]);
+
+  useEffect(() => {
+    fetchCampaignList();
+  }, []);
+
+  async function fetchCampaignList() {
+    try {
+      const res = await getMediaBlastCampaignPage(0);
+      setCampaigns(res?.data?.data?.content ?? []);
+    } catch (e) {
+      console.log("Error fetch campaign:", e);
+    }
+  }
+
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
     MySwal.fire({
       title: "Simpan Data",
@@ -85,10 +109,8 @@ export default function CreateAccountForBroadcast() {
       icon: "success",
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        router.push("/admin/broadcast/campaign-list/account-list");
-      }
+    }).then(() => {
+      router.push("/admin/broadcast/campaign-list/account-list");
     });
   }
 
@@ -96,20 +118,21 @@ export default function CreateAccountForBroadcast() {
     const reqData = {
       accountName: data.name,
       accountType: data.accountType.join(","),
-      accountCategory: data.accountCategory,
-      emailAddress: data.email,
-      whatsappNumber: data.whatsapp,
+      emailAddress: data.email ?? "",
+      whatsappNumber: data.whatsapp ?? "",
+      campaignId: data.campaignId,
     };
-    console.log("data", data);
+
+    console.log("REQ:", reqData);
 
     const response = await saveMediaBlastAccount(reqData);
     if (response?.error) {
       error(response.message);
-      return false;
+      return;
     }
-
     successSubmit();
   };
+
   return (
     <div>
       <SiteBreadcrumb />
@@ -118,7 +141,9 @@ export default function CreateAccountForBroadcast() {
           onSubmit={form.handleSubmit(onSubmit)}
           className="space-y-3 bg-white rounded-sm p-4"
         >
-          <p className="fonnt-semibold">Account</p>
+          <p className="font-semibold">Account</p>
+
+          {/* NAMA */}
           <FormField
             control={form.control}
             name="name"
@@ -130,172 +155,125 @@ export default function CreateAccountForBroadcast() {
                   placeholder="Masukkan nama"
                   onChange={field.onChange}
                 />
-
                 <FormMessage />
               </FormItem>
             )}
           />
+
+          {/* CHECKBOX TIPE AKUN */}
           <FormField
             control={form.control}
             name="accountType"
-            render={() => (
+            render={({ field }) => (
               <FormItem>
                 <FormLabel>Tipe Akun</FormLabel>
-                <div className="flex flex-row gap-2">
-                  {" "}
-                  <FormField
-                    key="wa"
-                    control={form.control}
-                    name="accountType"
-                    render={({ field }) => {
-                      return (
-                        <FormItem
-                          key="wa"
-                          className="flex flex-row items-start space-x-3 space-y-0"
-                        >
-                          <FormControl>
-                            <Checkbox
-                              checked={field.value?.includes("wa")}
-                              onCheckedChange={(checked) => {
-                                return checked
-                                  ? field.onChange([...field.value, "wa"])
-                                  : field.onChange(
-                                      field.value?.filter(
-                                        (value) => value !== "wa"
-                                      )
-                                    );
-                              }}
-                            />
-                          </FormControl>
-                          <FormLabel className="font-normal">
-                            Whatsapp
-                          </FormLabel>
-                        </FormItem>
-                      );
-                    }}
-                  />
-                  <FormField
-                    key="email"
-                    control={form.control}
-                    name="accountType"
-                    render={({ field }) => {
-                      return (
-                        <FormItem
-                          key="email"
-                          className="flex flex-row items-start space-x-3 space-y-0"
-                        >
-                          <FormControl>
-                            <Checkbox
-                              checked={field.value?.includes("email")}
-                              onCheckedChange={(checked) => {
-                                return checked
-                                  ? field.onChange([...field.value, "email"])
-                                  : field.onChange(
-                                      field.value?.filter(
-                                        (value) => value !== "email"
-                                      )
-                                    );
-                              }}
-                            />
-                          </FormControl>
-                          <FormLabel className="font-normal">Email</FormLabel>
-                        </FormItem>
-                      );
-                    }}
-                  />
-                </div>
+                <div className="flex flex-row gap-4">
+                  {/* WA */}
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      checked={field.value.includes("wa")}
+                      onCheckedChange={(checked) =>
+                        checked
+                          ? field.onChange([...field.value, "wa"])
+                          : field.onChange(field.value.filter((v) => v !== "wa"))
+                      }
+                    />
+                    <label>Whatsapp</label>
+                  </div>
 
+                  {/* EMAIL */}
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      checked={field.value.includes("email")}
+                      onCheckedChange={(checked) =>
+                        checked
+                          ? field.onChange([...field.value, "email"])
+                          : field.onChange(
+                              field.value.filter((v) => v !== "email")
+                            )
+                      }
+                    />
+                    <label>Email</label>
+                  </div>
+                </div>
                 <FormMessage />
               </FormItem>
             )}
           />
+
+          {/* FORM WHATSAPP */}
+          {selectedTypes.includes("wa") && (
+            <FormField
+              control={form.control}
+              name="whatsapp"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Whatsapp</FormLabel>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan nomor Whatsapp"
+                    {...field}
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {/* FORM EMAIL */}
+          {selectedTypes.includes("email") && (
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <Input
+                    type="email"
+                    placeholder="Masukkan email"
+                    {...field}
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {/* CAMPAIGN */}
           <FormField
             control={form.control}
-            name="accountCategory"
+            name="campaignId"
             render={({ field }) => (
-              <FormItem className="space-y-3">
-                <FormLabel>Kategori</FormLabel>
+              <FormItem>
+                <FormLabel>Campaign</FormLabel>
                 <FormControl>
-                  <RadioGroup
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                    className="flex flex-row gap-2"
+                  <select
+                    className="w-full border rounded-md p-2 text-sm"
+                    value={field.value}
+                    onChange={field.onChange}
                   >
-                    <FormItem className="flex items-center space-x-3 space-y-0">
-                      <FormControl>
-                        <RadioGroupItem value="polri" />
-                      </FormControl>
-                      <FormLabel className="font-normal">POLRI</FormLabel>
-                    </FormItem>
-                    <FormItem className="flex items-center space-x-3 space-y-0">
-                      <FormControl>
-                        <RadioGroupItem value="jurnalis" />
-                      </FormControl>
-                      <FormLabel className="font-normal">JURNALIS</FormLabel>
-                    </FormItem>
-                    <FormItem className="flex items-center space-x-3 space-y-0">
-                      <FormControl>
-                        <RadioGroupItem value="umum" />
-                      </FormControl>
-                      <FormLabel className="font-normal">UMUM</FormLabel>
-                    </FormItem>
-                    <FormItem className="flex items-center space-x-3 space-y-0">
-                      <FormControl>
-                        <RadioGroupItem value="ksp" />
-                      </FormControl>
-                      <FormLabel className="font-normal">KSP</FormLabel>
-                    </FormItem>
-                  </RadioGroup>
+                    <option value="" className="text-slate-400">
+                      Pilih campaign
+                    </option>
+
+                    {campaigns.map((c: any) => (
+                      <option key={c.id} value={c.id}>
+                        {c.title || `Campaign ${c.id}`}
+                      </option>
+                    ))}
+                  </select>
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Nama</FormLabel>
-                <Input
-                  type="email"
-                  value={field.value}
-                  placeholder="Masukkan email"
-                  onChange={field.onChange}
-                />
 
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="whatsapp"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Nama</FormLabel>
-                <Input
-                  type="number"
-                  value={field.value}
-                  placeholder="Masukkan whatsapp"
-                  onChange={field.onChange}
-                />
-
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+          {/* BUTTON */}
           <div className="flex flex-row gap-2 mt-4 pt-4">
-            <Button
-              size="md"
-              type="button"
-              variant="outline"
-              color="destructive"
-              className="text-xs"
-            >
+            <Button type="button" variant="outline" color="destructive">
               Cancel
             </Button>
-            <Button size="md" type="submit" color="primary" className="text-xs">
+            <Button type="submit" color="primary">
               Submit
             </Button>
           </div>
@@ -304,3 +282,380 @@ export default function CreateAccountForBroadcast() {
     </div>
   );
 }
+
+
+// "use client";
+// import SiteBreadcrumb from "@/components/site-breadcrumb";
+// import { z } from "zod";
+// import { useForm } from "react-hook-form";
+// import { zodResolver } from "@hookform/resolvers/zod";
+// import {
+//   Form,
+//   FormControl,
+//   FormField,
+//   FormItem,
+//   FormLabel,
+//   FormMessage,
+// } from "@/components/ui/form";
+// import withReactContent from "sweetalert2-react-content";
+// import Swal from "sweetalert2";
+// import { Input } from "@/components/ui/input";
+// import { Button } from "@/components/ui/button";
+// import {
+//   getMediaBlastCampaignPage,
+//   saveMediaBlastAccount,
+// } from "@/service/broadcast/broadcast";
+// import { error } from "@/config/swal";
+// import { useRouter } from "@/i18n/routing";
+// import { Checkbox } from "@/components/ui/checkbox";
+// import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+// import { useEffect, useState } from "react";
+
+// // const FormSchema = z.object({
+// //   name: z.string({
+// //     required_error: "Required",
+// //   }),
+// //   accountType: z
+// //     .array(z.string())
+// //     .refine((value) => value.some((item) => item), {
+// //       message: "Required",
+// //     }),
+// //   accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], {
+// //     required_error: "Required",
+// //   }),
+// //   email: z.string({
+// //     required_error: "Required",
+// //   }),
+// //   whatsapp: z.string({
+// //     required_error: "Required",
+// //   }),
+// //   campaignId: z.string({ required_error: "Required" }),
+// // });
+// const FormSchema = z
+//   .object({
+//     name: z.string().min(1, "Required"),
+
+//     accountType: z.array(z.string()).refine((value) => value.length > 0, {
+//       message: "Pilih minimal satu tipe akun",
+//     }),
+
+//     accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], {
+//       required_error: "Required",
+//     }),
+
+//     email: z.string().optional(),
+//     whatsapp: z.string().optional(),
+
+//     campaignId: z.string().min(1, "Required"),
+//   })
+//   .refine(
+//     (data) => {
+//       if (data.accountType.includes("email")) {
+//         return !!data.email && data.email.trim() !== "";
+//       }
+//       return true;
+//     },
+//     { path: ["email"], message: "Email wajib diisi" }
+//   )
+//   .refine(
+//     (data) => {
+//       if (data.accountType.includes("wa")) {
+//         return !!data.whatsapp && data.whatsapp.trim() !== "";
+//       }
+//       return true;
+//     },
+//     { path: ["whatsapp"], message: "Whatsapp wajib diisi" }
+//   );
+
+// export default function CreateAccountForBroadcast() {
+//   const MySwal = withReactContent(Swal);
+//   const router = useRouter();
+//   const form = useForm<z.infer<typeof FormSchema>>({
+//     resolver: zodResolver(FormSchema),
+//     defaultValues: { accountType: [] },
+//   });
+//   const selectedTypes = form.watch("accountType");
+//   const [campaigns, setCampaigns] = useState<any[]>([]);
+
+//   useEffect(() => {
+//     fetchCampaignList();
+//   }, []);
+
+//   async function fetchCampaignList() {
+//     try {
+//       const res = await getMediaBlastCampaignPage(0);
+//       setCampaigns(res?.data?.data?.content ?? []);
+//     } catch (e) {
+//       console.log("Error fetch campaign:", e);
+//     }
+//   }
+
+//   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+//     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);
+//       }
+//     });
+//   };
+
+//   function successSubmit() {
+//     MySwal.fire({
+//       title: "Sukses",
+//       icon: "success",
+//       confirmButtonColor: "#3085d6",
+//       confirmButtonText: "OK",
+//     }).then((result) => {
+//       if (result.isConfirmed) {
+//         router.push("/admin/broadcast/campaign-list/account-list");
+//       }
+//     });
+//   }
+
+//   const save = async (data: z.infer<typeof FormSchema>) => {
+//     const reqData = {
+//       accountName: data.name,
+//       accountType: data.accountType.join(","),
+//       accountCategory: data.accountCategory,
+//       emailAddress: data.email ?? "",
+//       whatsappNumber: data.whatsapp ?? "",
+//       campaignId: data.campaignId,
+//     };
+//     console.log("data", data);
+
+//     const response = await saveMediaBlastAccount(reqData);
+//     if (response?.error) {
+//       error(response.message);
+//       return false;
+//     }
+
+//     successSubmit();
+//   };
+//   return (
+//     <div>
+//       <SiteBreadcrumb />
+//       <Form {...form}>
+//         <form
+//           onSubmit={form.handleSubmit(onSubmit)}
+//           className="space-y-3 bg-white rounded-sm p-4"
+//         >
+//           <p className="fonnt-semibold">Account</p>
+//           <FormField
+//             control={form.control}
+//             name="name"
+//             render={({ field }) => (
+//               <FormItem>
+//                 <FormLabel>Nama</FormLabel>
+//                 <Input
+//                   value={field.value}
+//                   placeholder="Masukkan nama"
+//                   onChange={field.onChange}
+//                 />
+
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           />
+//           <FormField
+//             control={form.control}
+//             name="accountType"
+//             render={() => (
+//               <FormItem>
+//                 <FormLabel>Tipe Akun</FormLabel>
+//                 <div className="flex flex-row gap-2">
+//                   {" "}
+//                   <FormField
+//                     key="wa"
+//                     control={form.control}
+//                     name="accountType"
+//                     render={({ field }) => {
+//                       return (
+//                         <FormItem
+//                           key="wa"
+//                           className="flex flex-row items-start space-x-3 space-y-0"
+//                         >
+//                           <FormControl>
+//                             <Checkbox
+//                               checked={field.value?.includes("wa")}
+//                               onCheckedChange={(checked) => {
+//                                 return checked
+//                                   ? field.onChange([...field.value, "wa"])
+//                                   : field.onChange(
+//                                       field.value?.filter(
+//                                         (value) => value !== "wa"
+//                                       )
+//                                     );
+//                               }}
+//                             />
+//                           </FormControl>
+//                           <FormLabel className="font-normal">
+//                             Whatsapp
+//                           </FormLabel>
+//                         </FormItem>
+//                       );
+//                     }}
+//                   />
+//                   <FormField
+//                     key="email"
+//                     control={form.control}
+//                     name="accountType"
+//                     render={({ field }) => {
+//                       return (
+//                         <FormItem
+//                           key="email"
+//                           className="flex flex-row items-start space-x-3 space-y-0"
+//                         >
+//                           <FormControl>
+//                             <Checkbox
+//                               checked={field.value?.includes("email")}
+//                               onCheckedChange={(checked) => {
+//                                 return checked
+//                                   ? field.onChange([...field.value, "email"])
+//                                   : field.onChange(
+//                                       field.value?.filter(
+//                                         (value) => value !== "email"
+//                                       )
+//                                     );
+//                               }}
+//                             />
+//                           </FormControl>
+//                           <FormLabel className="font-normal">Email</FormLabel>
+//                         </FormItem>
+//                       );
+//                     }}
+//                   />
+//                 </div>
+
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           />
+//           {/* <FormField
+//             control={form.control}
+//             name="accountCategory"
+//             render={({ field }) => (
+//               <FormItem className="space-y-3">
+//                 <FormLabel>Kategori</FormLabel>
+//                 <FormControl>
+//                   <RadioGroup
+//                     onValueChange={field.onChange}
+//                     defaultValue={field.value}
+//                     className="flex flex-row gap-2"
+//                   >
+//                     <FormItem className="flex items-center space-x-3 space-y-0">
+//                       <FormControl>
+//                         <RadioGroupItem value="polri" />
+//                       </FormControl>
+//                       <FormLabel className="font-normal">POLRI</FormLabel>
+//                     </FormItem>
+//                     <FormItem className="flex items-center space-x-3 space-y-0">
+//                       <FormControl>
+//                         <RadioGroupItem value="jurnalis" />
+//                       </FormControl>
+//                       <FormLabel className="font-normal">JURNALIS</FormLabel>
+//                     </FormItem>
+//                     <FormItem className="flex items-center space-x-3 space-y-0">
+//                       <FormControl>
+//                         <RadioGroupItem value="umum" />
+//                       </FormControl>
+//                       <FormLabel className="font-normal">UMUM</FormLabel>
+//                     </FormItem>
+//                     <FormItem className="flex items-center space-x-3 space-y-0">
+//                       <FormControl>
+//                         <RadioGroupItem value="ksp" />
+//                       </FormControl>
+//                       <FormLabel className="font-normal">KSP</FormLabel>
+//                     </FormItem>
+//                   </RadioGroup>
+//                 </FormControl>
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           /> */}
+//           <FormField
+//             control={form.control}
+//             name="email"
+//             render={({ field }) => (
+//               <FormItem>
+//                 <FormLabel>Email</FormLabel>
+//                 <Input
+//                   type="email"
+//                   value={field.value}
+//                   placeholder="Masukkan email"
+//                   onChange={field.onChange}
+//                 />
+
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           />
+//           <FormField
+//             control={form.control}
+//             name="whatsapp"
+//             render={({ field }) => (
+//               <FormItem>
+//                 <FormLabel>Nama</FormLabel>
+//                 <Input
+//                   type="number"
+//                   value={field.value}
+//                   placeholder="Masukkan whatsapp"
+//                   onChange={field.onChange}
+//                 />
+
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           />
+//           <FormField
+//             control={form.control}
+//             name="campaignId"
+//             render={({ field }) => (
+//               <FormItem>
+//                 <FormLabel>Campaign</FormLabel>
+//                 <FormControl>
+//                   <select
+//                     className="w-full border rounded-md p-2"
+//                     value={field.value}
+//                     onChange={field.onChange}
+//                   >
+//                     <option value="" className="text-slate-400">
+//                       Pilih campaign
+//                     </option>
+
+//                     {campaigns.map((c: any) => (
+//                       <option key={c.id} value={c.id}>
+//                         {c.title || `Campaign ${c.id}`}
+//                       </option>
+//                     ))}
+//                   </select>
+//                 </FormControl>
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           />
+//           <div className="flex flex-row gap-2 mt-4 pt-4">
+//             <Button
+//               size="md"
+//               type="button"
+//               variant="outline"
+//               color="destructive"
+//               className="text-xs"
+//             >
+//               Cancel
+//             </Button>
+//             <Button size="md" type="submit" color="primary" className="text-xs">
+//               Submit
+//             </Button>
+//           </div>
+//         </form>
+//       </Form>
+//     </div>
+//   );
+// }

app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx

@@ -152,12 +152,12 @@ const CampaignListTable = () => {
       <div className="flex justify-between mb-10 items-center">
         <p className="text-xl font-medium text-default-900">Daftar Campaign</p>
         <div className="flex flex-row gap-2">
-          <Link href="/admin/broadcast/campaign-list/account-list">
+          {/* <Link href="/admin/broadcast/campaign-list/account-list">
             <Button color="primary" size="md" className="text-sm">
               <UserIcon />
               Daftar Akun
             </Button>
-          </Link>
+          </Link> */}
           <Link href="/admin/broadcast/campaign-list/create">
             <Button color="primary" size="md" className="text-sm">
               <NewCampaignIcon size={23} />

app/[locale]/(protected)/admin/broadcast/create/[id]/page.tsx

@@ -5,7 +5,7 @@ export default function CreateEmailBlast() {
   return (
     <div>
       <SiteBreadcrumb />
-      <ContentBlast type="email" />
+      <ContentBlast />
     </div>
   );
 }

app/[locale]/(protected)/admin/broadcast/create/component/column.tsx

@@ -90,16 +90,16 @@ const columns: ColumnDef<any>[] = [
                 Detail
               </DropdownMenuItem>
             </Link>
-            <Link href={`/admin/broadcast/email/${row.original.id}`}>
+            <Link href={`/admin/broadcast/create/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
-                Email Blast
+                Email & Whatsapp Blast
               </DropdownMenuItem>
             </Link>
-            <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
+            {/* <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
                 Whatsapp Blast
               </DropdownMenuItem>
-            </Link>
+            </Link> */}
           </DropdownMenuContent>
         </DropdownMenu>
       );

app/[locale]/(protected)/admin/broadcast/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
-import BroadcastTable from "./email/component/table";
+import BroadcastTable from "./create/component/table";
 import { PlusIcon } from "lucide-react";
 
 import EscalationTable from "../../shared/communication/escalation/components/escalation-table";
@@ -8,7 +8,7 @@ import InternalTable from "../../shared/communication/internal/components/intern
 import { useState } from "react";
 import { Link } from "@/i18n/routing";
 import { Button } from "@/components/ui/button";
-import BroadcastEmailTable from "./email/component/table";
+import BroadcastEmailTable from "./create/component/table";
 import BroadcastWhatsAppTable from "./whatsapp/component/table";
 
 export default function AdminBroadcast() {

app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx

@@ -5,7 +5,7 @@ export default function CreateWABlast() {
   return (
     <div>
       <SiteBreadcrumb />
-      <ContentBlast type="wa" />
+      {/* <ContentBlast /> */}
     </div>
   );
 }

app/[locale]/(protected)/admin/media-tracking/detail/component/column.tsx

@@ -31,6 +31,8 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import { validateMediaLink } from "@/service/media-tracking/media-tracking";
+import toast from "react-hot-toast";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -52,12 +54,132 @@ const columns: ColumnDef<any>[] = [
       <span className="normal-case">{row.getValue("title")}</span>
     ),
   },
+  // {
+  //   accessorKey: "link",
+  //   header: "Link Berita",
+  //   cell: ({ row }) => (
+  //     <span className="normal-case">{row.getValue("link")}</span>
+  //   ),
+  // },
   {
     accessorKey: "link",
     header: "Link Berita",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("link")}</span>
-    ),
+    cell: ({ row }) => {
+      const link = row.getValue<string>("link");
+
+      if (!link) {
+        return <span className="text-muted-foreground">-</span>;
+      }
+
+      return (
+        <Link
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-600 underline hover:text-blue-800 break-all"
+        >
+          {link}
+        </Link>
+      );
+    },
+  },
+  {
+    id: "validation",
+    header: "Validasi",
+    cell: ({ row, table }) => {
+      const original = row.original;
+
+      // const isValid = original.isValid;
+      const isRelevant = original.isRelevant;
+      const link = original.link;
+
+      const updateRow = (data: Partial<any>) => {
+        table.options.meta?.updateData(row.index, data);
+      };
+
+      const handleValid = async () => {
+        try {
+          await validateMediaLink(original.id, true);
+          updateRow({
+            isRelevant: true,
+          });
+          table.options.meta?.refetchData?.();
+        } catch (err: any) {
+          toast.error(err.message);
+        }
+      };
+
+      const handleInvalid = async () => {
+        try {
+          await validateMediaLink(original.id, false);
+
+          updateRow({
+            isRelevant: false,
+          });
+          table.options.meta?.refetchData?.();
+        } catch (err: any) {
+          toast.error(err.message);
+        }
+      };
+
+      if (!link) {
+        return <span className="text-muted-foreground">-</span>;
+      }
+
+      if (isRelevant === true) {
+        return (
+          <Button
+            size="sm"
+            className="bg-green-600 hover:bg-green-700"
+            disabled
+          >
+            Relevan
+          </Button>
+        );
+      }
+
+      return (
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={handleValid}
+            className="flex items-center"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M18.7 7.2c-.4-.4-1-.4-1.4 0l-7.5 7.5l-3.1-3.1c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l3.8 3.8c.2.2.4.3.7.3s.5-.1.7-.3l8.2-8.2c.4-.4.4-1 0-1.4"
+              />
+            </svg>
+            Relevan
+          </Button>
+          <Button size="sm" variant="outline" onClick={handleInvalid} className="flex text-center items-center justify-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+                d="M6.758 17.243L12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243"
+              />
+            </svg>
+            Tidak Relevan
+          </Button>
+        </div>
+      );
+    },
   },
 ];
 

app/[locale]/(protected)/admin/media-tracking/detail/component/table.tsx

@@ -116,6 +116,18 @@ const NewsDetailTable = () => {
     onColumnVisibilityChange: setColumnVisibility,
     onRowSelectionChange: setRowSelection,
     onPaginationChange: setPagination,
+    meta: {
+      updateData: (rowIndex: number, value: Partial<any>) => {
+        setDataTable((old) =>
+          old.map((row, index) =>
+            index === rowIndex ? { ...row, ...value } : row
+          )
+        );
+      },
+      refetchData: () => {
+        fetchData();
+      },
+    },
     state: {
       sorting,
       columnFilters,
@@ -154,7 +166,7 @@ const NewsDetailTable = () => {
       pageIndex: 0,
       pageSize: Number(showData),
     });
-  }, [page, showData]);
+  }, [page, showData, id]);
 
   async function fetchData() {
     try {

app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx

@@ -1,7 +1,15 @@
 import * as React from "react";
 import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { exportMediaTrackingToExcel } from "@/utils/export-media-tracking";
+import { loading, close } from "@/config/swal";
+import { error } from "@/lib/swal";
+import {
+  DownloadIcon,
+  Eye,
+  MoreVertical,
+  SquarePen,
+  Trash2,
+} from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
   DropdownMenu,
@@ -45,19 +53,101 @@ const columns: ColumnDef<any>[] = [
     cell: ({ row }) => <span>{row.getValue("title")}</span>,
   },
   {
-    accessorKey: "link",
-    header: "Jumlah Amplifikasi",
-    cell: ({ row }) => <span>{row.getValue("link")}</span>,
+    accessorKey: "resultTotal",
+    header: () => <div className="text-center w-full">Total Artikel</div>,
+    cell: ({ row }) => {
+      const value = row.getValue("resultTotal") as number | string | null;
+
+      const finalValue =
+        value === null || value === undefined || value === ""
+          ? 0
+          : Number(value);
+
+      return <div className="text-center w-full">{finalValue}</div>;
+    },
   },
   {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => <span>{row.getValue("status")}</span>,
+    accessorKey: "amplification",
+    header: () => <div className="text-center w-full">Jumlah Amplifikasi</div>,
+    cell: ({ row }) => {
+      const raw = row.getValue("amplification") as string | null;
+
+      let total = 0;
+      let invalidTotal = 0;
+
+      if (raw && typeof raw === "string") {
+        const parts = raw.split("/").map((v) => v.trim());
+        total = Number(parts[0]) || 0;
+        invalidTotal = Number(parts[1]) || 0;
+      }
+
+      return (
+        <div className="text-center w-full font-medium">
+          {total}
+          <span className="text-muted-foreground">/{invalidTotal}</span>
+        </div>
+      );
+    },
   },
+
+  // {
+  //   accessorKey: "status",
+  //   header: "Status",
+  //   cell: ({ row }) => <span>{row.getValue("status")}</span>,
+  // },
+  // {
+  //   accessorKey: "isProcessing",
+  //   header: () => <div className="text-center">Status</div>,
+  //   cell: ({ row }) => {
+  //     const raw = row.getValue("isProcessing");
+  //     var status = "Sedang Diproses"
+  //     if (Boolean(raw) == true) {
+  //       status = "Selesai Diproses";
+  //     }
+  //     return <div className="text-center">{status}</div>;
+  //   },
+  // },
   {
-    accessorKey: "date",
-    header: "Tanggal Penarikan",
-    cell: ({ row }) => <span>{row.getValue("date")}</span>,
+    accessorKey: "isProcessing",
+    header: () => <div className="text-center">Status</div>,
+    cell: ({ row }) => {
+      const raw = Boolean(row.getValue("isProcessing"));
+      const statusText = raw ? "Sedang Diproses" : "Sudah Selesai";
+      const colorClass = raw
+        ? "bg-yellow-100 text-yellow-700 border border-yellow-300"
+        : "bg-green-100 text-green-700 border border-green-300";
+
+      return (
+        <div className="text-center">
+          <span
+            className={`px-2 py-1 rounded text-xs font-medium inline-block ${colorClass}`}
+          >
+            {statusText}
+          </span>
+        </div>
+      );
+    },
+  },
+
+  {
+    accessorKey: "createdAt",
+    header: () => <div className="text-center">Tanggal Penarikan</div>,
+    cell: ({ row }) => {
+      const raw = row.getValue("createdAt");
+      if (!raw || typeof raw !== "string")
+        return <div className="text-center">-</div>;
+
+      const date = new Date(raw);
+      if (isNaN(date.getTime())) return <div className="text-center">-</div>;
+
+      const formatted = date.toLocaleDateString("id-ID", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+      });
+
+      return <div className="text-center">{formatted}</div>;
+    },
   },
   {
     id: "actions",
@@ -78,13 +168,31 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <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">
+              <DropdownMenuItem className="p-2 border-b cursor-pointer text-default-700 group focus:bg-default focus:text-primary-foreground items-center rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
-                View
+                View&nbsp;
                 {row.original.mediaUpload.fileType.secondaryName &&
                   row.original.mediaUpload.fileType.secondaryName.toLowerCase()}
               </DropdownMenuItem>
             </Link>
+            <DropdownMenuItem
+              className="p-2 border-b cursor-pointer text-default-700 group rounded-none focus:bg-default focus:text-primary-foreground "
+              onClick={async () => {
+                try {
+                  loading();
+                  await exportMediaTrackingToExcel({
+                    mediaTrackingId: row.original.id,
+                  });
+                  close();
+                } catch (e: any) {
+                  close();
+                  error(e.message || "Gagal export data");
+                }
+              }}
+            >
+              <DownloadIcon className="w-4 h-4 me-1.5" />
+              <p>Download</p>
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       );

app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx

@@ -40,7 +40,7 @@ export default function TrackingBeritaCard() {
 
   const initFecth = async () => {
     loading();
-    const response = await listDataTracking(showData, page - 1);
+    const response = await listDataTracking(Number(showData), page - 1, search);
     const data = response?.data?.data;
     const newData = data?.content;
     setTotalPage(data?.totalPages || 1);
@@ -56,23 +56,85 @@ export default function TrackingBeritaCard() {
     setContent(response?.data?.data?.content || []);
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setSearch(value);
 
-    if (value.trim() === "") {
-      initFecth();
-    } else {
-      fecthAll(value);
-    }
+    const response = await listDataTracking(Number(showData), 0, value);
+    setContent(response?.data?.data?.content || []);
   };
 
+  // const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   const value = e.target.value;
+  //   setSearch(value);
+
+  //   if (value.trim() === "") {
+  //     initFecth();
+  //   } else {
+  //     fecthAll(value);
+  //   }
+  // };
+
   const handleSelect = (id: number) => {
     setSelectedItems((prev) =>
       prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
     );
   };
 
+  const doSave = async () => {
+    if (selectedItems.length === 0) {
+      MySwal.fire(
+        "Peringatan",
+        "Pilih minimal 1 berita untuk disimpan.",
+        "warning"
+      );
+      return;
+    }
+
+    try {
+      loading();
+
+      const promises = selectedItems.map(async (id) => {
+        const res = await mediaTrackingSave({
+          mediaUploadId: id,
+          duration: 24,
+          scrapingPeriod: 3,
+        });
+
+        // cek pesan API
+        if (!res?.data?.success) {
+          throw new Error(
+            res?.data?.message ||
+              "Limit media tracking per hari sudah tercapai. Maksimal 5 tracking per hari."
+          );
+        }
+
+        return res;
+      });
+
+      await Promise.all(promises);
+      close();
+
+      await MySwal.fire({
+        icon: "success",
+        title: "Berhasil!",
+        text: "Tracking berita berhasil ditambahkan.",
+        confirmButtonColor: "#2563eb",
+      });
+
+      setSelectedItems([]);
+      initFecth();
+    } catch (err: any) {
+      close();
+      MySwal.fire({
+        icon: "error",
+        title: "Gagal!",
+        text: err?.message || "Terjadi kesalahan saat menyimpan data.",
+        confirmButtonColor: "#dc2626",
+      });
+    }
+  };
+
   // const doSave = async () => {
   //   if (selectedItems.length === 0) {
   //     toast("Pilih minimal 1 berita untuk disimpan.");
@@ -99,48 +161,63 @@ export default function TrackingBeritaCard() {
   //   }
   // };
 
-  const doSave = async () => {
-    if (selectedItems.length === 0) {
-      MySwal.fire(
-        "Peringatan",
-        "Pilih minimal 1 berita untuk disimpan.",
-        "warning"
-      );
-      return;
-    }
+  // const doSave = async () => {
+  //   if (selectedItems.length === 0) {
+  //     MySwal.fire(
+  //       "Peringatan",
+  //       "Pilih minimal 1 berita untuk disimpan.",
+  //       "warning"
+  //     );
+  //     return;
+  //   }
 
-    try {
-      loading(); 
+  //   try {
+  //     loading();
 
-      const promises = selectedItems.map((id) =>
-        mediaTrackingSave({
-          mediaUploadId: id,
-          duration: 24,
-          scrapingPeriod: 3,
-        })
-      );
-      await Promise.all(promises);
+  //     const promises = selectedItems.map((id) =>
+  //       mediaTrackingSave({
+  //         mediaUploadId: id,
+  //         duration: 24,
+  //         scrapingPeriod: 3,
+  //       })
+  //     );
+  //     await Promise.all(promises);
 
-      close(); 
+  //     close();
 
-      await MySwal.fire({
-        icon: "success",
-        title: "Berhasil!",
-        text: "Tracking berita berhasil ditambahkan.",
-        confirmButtonColor: "#2563eb",
-      });
+  //     await MySwal.fire({
+  //       icon: "success",
+  //       title: "Berhasil!",
+  //       text: "Tracking berita berhasil ditambahkan.",
+  //       confirmButtonColor: "#2563eb",
+  //     });
 
-      setSelectedItems([]);
-      initFecth();
-    } catch (err: any) {
-      close(); 
-      MySwal.fire({
-        icon: "error",
-        title: "Gagal!",
-        text: err?.message || "Terjadi kesalahan saat menyimpan data.",
-        confirmButtonColor: "#dc2626", 
-      });
-    }
+  //     setSelectedItems([]);
+  //     initFecth();
+  //   } catch (err: any) {
+  //     close();
+  //     MySwal.fire({
+  //       icon: "error",
+  //       title: "Gagal!",
+  //       text: err?.message || "Terjadi kesalahan saat menyimpan data.",
+  //       confirmButtonColor: "#dc2626",
+  //     });
+  //   }
+  // };
+
+  const slugify = (text: string) => {
+    return text
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/(^-|-$)+/g, "");
+  };
+
+  const goToDetail = (item: any) => {
+    const type = item.type || "image";
+    const slug = slugify(item.title || "");
+    const url = `/in/${type}/detail/${item.id}-${slug}`;
+
+    window.location.href = url;
   };
 
   return (
@@ -188,7 +265,7 @@ export default function TrackingBeritaCard() {
             <div className="text-sm text-blue-600 font-medium">
               {selectedItems.length} Item Terpilih{" "}
               <span className="text-black">
-                / Tracking Berita tersisa {29 - selectedItems.length}
+                / Tracking Berita tersisa {5 - selectedItems.length}
               </span>
             </div>
             <Button className="bg-blue-600 text-white" onClick={doSave}>
@@ -198,6 +275,48 @@ export default function TrackingBeritaCard() {
         )}
 
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {content?.length > 0 &&
+            content.map((item: any) => (
+              <Card
+                key={item.id}
+                className="relative overflow-hidden shadow-sm border rounded-lg"
+              >
+                {/* KLIK GAMBAR = CHECKLIST */}
+                <div
+                  className="cursor-pointer"
+                  onClick={() => handleSelect(item.id)}
+                >
+                  <img
+                    src={item.thumbnailLink}
+                    alt={item.title}
+                    className="w-full h-[300px] object-cover"
+                  />
+
+                  {/* CHECKBOX */}
+                  <div className="absolute top-2 left-2">
+                    <div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center">
+                      {selectedItems.includes(item.id) && (
+                        <div className="w-3 h-3 bg-blue-600 rounded-sm" />
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* KLIK JUDUL = DETAIL */}
+                <p
+                  className="p-2 text-sm font-medium hover:underline cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    goToDetail(item);
+                  }}
+                >
+                  {item.title}
+                </p>
+              </Card>
+            ))}
+        </div>
+
+        {/* <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
           {content?.length > 1 &&
             content.map((item: any) => (
               <Card
@@ -222,7 +341,7 @@ export default function TrackingBeritaCard() {
                 </p>
               </Card>
             ))}
-        </div>
+        </div> */}
         <div className="mt-3">
           {content && content?.length > 0 ? (
             <CustomPagination

app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx

@@ -109,7 +109,9 @@ const EventModal = ({
   const pathname = usePathname();
   const [isLoading, setIsLoading] = useState(false);
   const [checkedLevels, setCheckedLevels] = useState<Set<number>>(new Set());
-  const [expandedPolda, setExpandedPolda] = useState<Record<number, boolean>>({});
+  const [expandedPolda, setExpandedPolda] = useState<Record<number, boolean>>(
+    {}
+  );
   const [audioFile, setAudioFile] = useState<File | null>(null);
   const [isRecording, setIsRecording] = useState(false);
   const [timer, setTimer] = useState<number>(120);
@@ -153,9 +155,11 @@ const EventModal = ({
   });
 
   // State untuk melacak apakah perubahan berasal dari checkbox Jenis Agenda
-  const [isUpdatingFromJenisAgenda, setIsUpdatingFromJenisAgenda] = useState(false);
+  const [isUpdatingFromJenisAgenda, setIsUpdatingFromJenisAgenda] =
+    useState(false);
   // State untuk melacak jenis perubahan spesifik
-  const [jenisAgendaChangeType, setJenisAgendaChangeType] = useState<string>("");
+  const [jenisAgendaChangeType, setJenisAgendaChangeType] =
+    useState<string>("");
 
   const levelNumber = Number(getCookiesDecrypt("ulne")) || 0;
   const userLevelId = getCookiesDecrypt("ulie");
@@ -261,7 +265,11 @@ const EventModal = ({
 
   // useEffect untuk sinkronisasi checkbox modal dengan Jenis Agenda
   useEffect(() => {
-    if (listDest.length > 0 && isUpdatingFromJenisAgenda && jenisAgendaChangeType) {
+    if (
+      listDest.length > 0 &&
+      isUpdatingFromJenisAgenda &&
+      jenisAgendaChangeType
+    ) {
       syncModalWithJenisAgenda();
     }
   }, [isUpdatingFromJenisAgenda, jenisAgendaChangeType]);
@@ -273,44 +281,55 @@ const EventModal = ({
     }
   }, [checkedLevels, isUpdatingFromJenisAgenda]);
 
-    // Fungsi untuk update wilayahPublish berdasarkan checkbox modal
+  // Fungsi untuk update wilayahPublish berdasarkan checkbox modal
   const updateWilayahPublishFromModal = () => {
     // Hanya update jika tidak sedang dalam proses update dari Jenis Agenda
     if (!isUpdatingFromJenisAgenda && listDest.length > 0) {
       // Hitung item yang dipilih berdasarkan checkedLevels
-      const checkedPoldaCount = listDest.filter((item: any) => 
-        item.levelNumber === 2 && 
-        item.name !== "SATKER POLRI" && 
-        checkedLevels.has(Number(item.id))
+      const checkedPoldaCount = listDest.filter(
+        (item: any) =>
+          item.levelNumber === 2 &&
+          item.name !== "SATKER POLRI" &&
+          checkedLevels.has(Number(item.id))
       ).length;
-      
+
       const checkedPolresCount = listDest.reduce((total: number, item: any) => {
         if (item.subDestination) {
-          return total + item.subDestination.filter((sub: any) => checkedLevels.has(Number(sub.id))).length;
+          return (
+            total +
+            item.subDestination.filter((sub: any) =>
+              checkedLevels.has(Number(sub.id))
+            ).length
+          );
         }
         return total;
       }, 0);
-      
-      const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI");
-      const checkedSatkerCount = satkerItem ? (
-        (checkedLevels.has(Number(satkerItem.id)) ? 1 : 0) + 
-        (satkerItem.subDestination?.filter((sub: any) => checkedLevels.has(Number(sub.id))).length || 0)
-      ) : 0;
-      
+
+      const satkerItem: any = listDest.find(
+        (item: any) => item.name === "SATKER POLRI"
+      );
+      const checkedSatkerCount = satkerItem
+        ? (checkedLevels.has(Number(satkerItem.id)) ? 1 : 0) +
+          (satkerItem.subDestination?.filter((sub: any) =>
+            checkedLevels.has(Number(sub.id))
+          ).length || 0)
+        : 0;
+
       // Checkbox aktif jika ADA item yang dipilih dalam kategori tersebut
       const hasSelectedPolda = checkedPoldaCount > 0;
       const hasSelectedPolres = checkedPolresCount > 0;
       const hasSelectedSatker = checkedSatkerCount > 0;
-      
+
       // Update arrays untuk backend
       const newSelectedPolda = listDest
-        .filter((item: any) => 
-          item.levelNumber === 2 && 
-          item.name !== "SATKER POLRI" && 
-          checkedLevels.has(Number(item.id))
+        .filter(
+          (item: any) =>
+            item.levelNumber === 2 &&
+            item.name !== "SATKER POLRI" &&
+            checkedLevels.has(Number(item.id))
         )
         .map((item: any) => String(item.id));
-        
+
       const newSelectedPolres: string[] = [];
       listDest.forEach((item: any) => {
         if (item.subDestination) {
@@ -321,7 +340,7 @@ const EventModal = ({
           });
         }
       });
-      
+
       const newSelectedSatker: string[] = [];
       if (satkerItem) {
         if (checkedLevels.has(Number(satkerItem.id))) {
@@ -335,51 +354,56 @@ const EventModal = ({
           });
         }
       }
-      
+
       // Update state arrays
       setSelectedPolda(newSelectedPolda);
       setSelectedPolres(newSelectedPolres);
       setSelectedSatker(newSelectedSatker);
-      
+
       // Update wilayahPublish berdasarkan yang dipilih di modal
-      setWilayahPublish(prev => {
+      setWilayahPublish((prev) => {
         const newState = { ...prev };
-        
+
         // Update individual checkboxes
         newState.polda = hasSelectedPolda;
         newState.polres = hasSelectedPolres;
         newState.satker = hasSelectedSatker;
-        
+
         // Update checkbox "semua" berdasarkan level user
         if (levelNumber === 1) {
           // Level 1: semua checkbox harus aktif (nasional, polda, polres, satker, international)
-          newState.semua = newState.nasional && hasSelectedPolda && hasSelectedPolres && hasSelectedSatker && newState.international;
+          newState.semua =
+            newState.nasional &&
+            hasSelectedPolda &&
+            hasSelectedPolres &&
+            hasSelectedSatker &&
+            newState.international;
         } else if (levelNumber === 2) {
           // Level 2: hanya polres yang perlu aktif
           newState.semua = hasSelectedPolres;
         } else {
           newState.semua = false;
         }
-        
+
         return newState;
       });
-      
+
       // Update agendaType berdasarkan checkbox yang aktif
       const selectedKeys = [];
       if (hasSelectedPolda) selectedKeys.push(wilayahValueMap.polda);
       if (hasSelectedPolres) selectedKeys.push(wilayahValueMap.polres);
       if (hasSelectedSatker) selectedKeys.push(wilayahValueMap.satker);
-      
+
       setAgendaType(selectedKeys.join(","));
     }
   };
 
-    // Fungsi untuk sinkronisasi checkbox modal dengan Jenis Agenda
+  // Fungsi untuk sinkronisasi checkbox modal dengan Jenis Agenda
   const syncModalWithJenisAgenda = () => {
     // Hanya jalankan sinkronisasi jika perubahan berasal dari checkbox Jenis Agenda
     if (isUpdatingFromJenisAgenda) {
       const newCheckedLevels = new Set(checkedLevels);
-      
+
       // Handle checklist actions - menambahkan semua item ke modal
       if (jenisAgendaChangeType === "polda_checked") {
         // Checklist semua polda
@@ -391,7 +415,11 @@ const EventModal = ({
       } else if (jenisAgendaChangeType === "polres_checked") {
         // Checklist semua polres, tapi hanya yang poldanya sudah di-checklist
         listDest.forEach((item: any) => {
-          if (item.levelNumber === 2 && item.name !== "SATKER POLRI" && newCheckedLevels.has(Number(item.id))) {
+          if (
+            item.levelNumber === 2 &&
+            item.name !== "SATKER POLRI" &&
+            newCheckedLevels.has(Number(item.id))
+          ) {
             if (item.subDestination) {
               item.subDestination.forEach((polres: any) => {
                 newCheckedLevels.add(Number(polres.id));
@@ -401,7 +429,9 @@ const EventModal = ({
         });
       } else if (jenisAgendaChangeType === "satker_checked") {
         // Checklist satker
-        const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI");
+        const satkerItem: any = listDest.find(
+          (item: any) => item.name === "SATKER POLRI"
+        );
         if (satkerItem) {
           newCheckedLevels.add(Number(satkerItem.id));
           if (satkerItem.subDestination) {
@@ -434,10 +464,12 @@ const EventModal = ({
             }
           }
         });
-        setWilayahPublish(prev => ({ ...prev, polres: false }));
+        setWilayahPublish((prev) => ({ ...prev, polres: false }));
       } else if (jenisAgendaChangeType === "satker_unchecked") {
         // Clear satker dari checkedLevels
-        const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI");
+        const satkerItem: any = listDest.find(
+          (item: any) => item.name === "SATKER POLRI"
+        );
         if (satkerItem) {
           newCheckedLevels.delete(Number(satkerItem.id));
           if (satkerItem.subDestination) {
@@ -447,9 +479,9 @@ const EventModal = ({
           }
         }
       }
-      
+
       setCheckedLevels(newCheckedLevels);
-      
+
       // Reset flag setelah sinkronisasi selesai
       setIsUpdatingFromJenisAgenda(false);
       setJenisAgendaChangeType("");
@@ -484,12 +516,14 @@ const EventModal = ({
     setCheckedLevels((prev) => {
       const updatedLevels = new Set(prev);
       const isCurrentlyChecked = updatedLevels.has(levelId);
-      
+
       if (isCurrentlyChecked) {
         updatedLevels.delete(levelId);
-        
+
         // Jika ini adalah POLDA yang di-unchecklist, unchecklist juga semua polres di bawahnya
-        const poldaItem = listDest.find((item: any) => Number(item.id) === levelId) as any;
+        const poldaItem = listDest.find(
+          (item: any) => Number(item.id) === levelId
+        ) as any;
         if (poldaItem && poldaItem.subDestination) {
           poldaItem.subDestination.forEach((polres: any) => {
             updatedLevels.delete(Number(polres.id));
@@ -514,7 +548,12 @@ const EventModal = ({
   const toggleWilayah = (key: string) => {
     // Set flag bahwa perubahan berasal dari checkbox Jenis Agenda
     setIsUpdatingFromJenisAgenda(true);
-    setJenisAgendaChangeType(key + (wilayahPublish[key as keyof typeof wilayahPublish] ? "_unchecked" : "_checked"));
+    setJenisAgendaChangeType(
+      key +
+        (wilayahPublish[key as keyof typeof wilayahPublish]
+          ? "_unchecked"
+          : "_checked")
+    );
 
     setWilayahPublish((prev: any) => {
       let newState = { ...prev };
@@ -551,18 +590,21 @@ const EventModal = ({
         return newState;
       }
 
-            // Validasi khusus untuk POLRES
+      // Validasi khusus untuk POLRES
       if (key === "polres" && !prev[key]) {
         // Cek apakah ada POLDA yang sudah dipilih di modal
-        const hasSelectedPolda = listDest.some((item: any) => 
-          item.levelNumber === 2 && 
-          item.name !== "SATKER POLRI" && 
-          checkedLevels.has(Number(item.id))
+        const hasSelectedPolda = listDest.some(
+          (item: any) =>
+            item.levelNumber === 2 &&
+            item.name !== "SATKER POLRI" &&
+            checkedLevels.has(Number(item.id))
         );
-        
+
         if (!hasSelectedPolda) {
           // Jika tidak ada POLDA yang dipilih, tampilkan peringatan dan batalkan
-          alert("Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES.");
+          alert(
+            "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
+          );
           // Reset flag karena perubahan dibatalkan
           setIsUpdatingFromJenisAgenda(false);
           setJenisAgendaChangeType("");
@@ -598,7 +640,9 @@ const EventModal = ({
           });
         } else if (key === "satker") {
           // Clear satker
-          const satkerItem: any = listDest.find((item: any) => item.name === "SATKER POLRI");
+          const satkerItem: any = listDest.find(
+            (item: any) => item.name === "SATKER POLRI"
+          );
           if (satkerItem) {
             newCheckedLevels.delete(Number(satkerItem.id));
             if (satkerItem.subDestination) {
@@ -613,9 +657,14 @@ const EventModal = ({
 
       // Update checkbox "semua" berdasarkan status semua checkbox lainnya
       // Untuk level 1: semua, nasional, polda, polres, satker, international harus aktif
-      // Untuk level 2: semua, polres harus aktif  
+      // Untuk level 2: semua, polres harus aktif
       if (levelNumber === 1) {
-        newState.semua = newState.nasional && newState.polda && newState.polres && newState.satker && newState.international;
+        newState.semua =
+          newState.nasional &&
+          newState.polda &&
+          newState.polres &&
+          newState.satker &&
+          newState.international;
       } else if (levelNumber === 2) {
         newState.semua = newState.polres;
       } else {
@@ -770,7 +819,7 @@ const EventModal = ({
 
   const onDeleteEventAction = async () => {
     try {
-    } catch (error) { }
+    } catch (error) {}
   };
 
   const handleOpenDeleteModal = (eventId: string) => {
@@ -845,7 +894,6 @@ const EventModal = ({
 
     const resCsrf = await getCsrfToken();
     const csrfToken = resCsrf?.data?.token;
-    console.log("CSRF TOKEN : ", csrfToken);
     const headers = {
       "X-XSRF-TOKEN": csrfToken,
     };
@@ -950,7 +998,7 @@ const EventModal = ({
     );
   };
 
-  const handleRemoveFile = (id: number) => { };
+  const handleRemoveFile = (id: number) => {};
 
   async function doDelete(id: any) {
     loading();
@@ -1106,40 +1154,42 @@ const EventModal = ({
                 <div className="space-y-1.5">
                   <Label htmlFor="wilayahPublish">Jenis Agenda</Label>
                   <div className="flex flex-wrap items-center gap-2">
-                 
-                      <div>
-                        <Checkbox
-                          id="semua"
-                          checked={wilayahPublish.semua}
-                          onCheckedChange={() => toggleWilayah("semua")}
-                        />
-                        <label htmlFor="semua" className="ml-2 text-sm">
-                          Semua
-                        </label>
-                      </div>
-          
-                    {levelNumber === 1 && (
-                      <>
-                      <div>
-                        <Checkbox
-                          id="nasional"
-                          checked={wilayahPublish.nasional}
-                          onCheckedChange={() => toggleWilayah("nasional")}
-                        />
-                        <label htmlFor="nasional" className="ml-2 text-sm mr-2">
-                          Nasional
-                        </label>
-                      </div>
                     <div>
                       <Checkbox
-                        id="polda"
-                        checked={wilayahPublish.polda}
-                        onCheckedChange={() => toggleWilayah("polda")}
+                        id="semua"
+                        checked={wilayahPublish.semua}
+                        onCheckedChange={() => toggleWilayah("semua")}
                       />
-                      <label htmlFor="polda" className="mx-2 text-sm mr-2">
-                        Polda
+                      <label htmlFor="semua" className="ml-2 text-sm">
+                        Semua
                       </label>
                     </div>
+
+                    {levelNumber === 1 && (
+                      <>
+                        <div>
+                          <Checkbox
+                            id="nasional"
+                            checked={wilayahPublish.nasional}
+                            onCheckedChange={() => toggleWilayah("nasional")}
+                          />
+                          <label
+                            htmlFor="nasional"
+                            className="ml-2 text-sm mr-2"
+                          >
+                            Nasional
+                          </label>
+                        </div>
+                        <div>
+                          <Checkbox
+                            id="polda"
+                            checked={wilayahPublish.polda}
+                            onCheckedChange={() => toggleWilayah("polda")}
+                          />
+                          <label htmlFor="polda" className="mx-2 text-sm mr-2">
+                            Polda
+                          </label>
+                        </div>
                       </>
                     )}
 
@@ -1151,39 +1201,41 @@ const EventModal = ({
                           onCheckedChange={() => toggleWilayah("polres")}
                         />
                         <label htmlFor="polres" className="ml-2 text-sm mr-2">
-                          Polres 
+                          Polres
                         </label>
                       </div>
                     )}
 
                     {levelNumber === 1 && (
                       <>
-                      <div>
-                        <Checkbox
-                          id="satker"
-                          checked={wilayahPublish.satker}
-                          onCheckedChange={() => toggleWilayah("satker")}
-                        />
-                        <label htmlFor="satker" className="mx-2 text-sm mr-2">
-                          Satker
-                        </label>
-                      </div>
-                      <div>
-                        <Checkbox
-                          id="international"
-                          checked={wilayahPublish.international}
-                          onCheckedChange={() => toggleWilayah("international")}
-                        />
-                        <label
-                          htmlFor="international"
-                          className="ml-2 text-sm mr-2"
-                        >
-                          Internasional
-                        </label>
-                      </div>
+                        <div>
+                          <Checkbox
+                            id="satker"
+                            checked={wilayahPublish.satker}
+                            onCheckedChange={() => toggleWilayah("satker")}
+                          />
+                          <label htmlFor="satker" className="mx-2 text-sm mr-2">
+                            Satker
+                          </label>
+                        </div>
+                        <div>
+                          <Checkbox
+                            id="international"
+                            checked={wilayahPublish.international}
+                            onCheckedChange={() =>
+                              toggleWilayah("international")
+                            }
+                          />
+                          <label
+                            htmlFor="international"
+                            className="ml-2 text-sm mr-2"
+                          >
+                            Internasional
+                          </label>
+                        </div>
                       </>
                     )}
-                    
+
                     <div className="pl-1">
                       <Dialog>
                         <DialogTrigger asChild>
@@ -1202,7 +1254,9 @@ const EventModal = ({
                               <div key={polda.id} className="border p-2">
                                 <Label className="flex items-center">
                                   <Checkbox
-                                    checked={checkedLevels.has(Number(polda.id))}
+                                    checked={checkedLevels.has(
+                                      Number(polda.id)
+                                    )}
                                     onCheckedChange={() =>
                                       handleCheckboxChange(Number(polda.id))
                                     }
@@ -1240,9 +1294,13 @@ const EventModal = ({
                                           polda?.subDestination?.forEach(
                                             (polres: any) => {
                                               if (isChecked) {
-                                                updatedLevels.add(Number(polres.id));
+                                                updatedLevels.add(
+                                                  Number(polres.id)
+                                                );
                                               } else {
-                                                updatedLevels.delete(Number(polres.id));
+                                                updatedLevels.delete(
+                                                  Number(polres.id)
+                                                );
                                               }
                                             }
                                           );
@@ -1252,18 +1310,27 @@ const EventModal = ({
                                       />
                                       Pilih Semua
                                     </Label>
-                                    {polda?.subDestination?.map((polres: any) => (
-                                      <Label key={polres.id} className="block mt-1">
-                                        <Checkbox
-                                          checked={checkedLevels.has(Number(polres.id))}
-                                          onCheckedChange={() =>
-                                            handleCheckboxChange(Number(polres.id))
-                                          }
-                                          className="mr-2"
-                                        />
-                                        {polres.name}
-                                      </Label>
-                                    ))}
+                                    {polda?.subDestination?.map(
+                                      (polres: any) => (
+                                        <Label
+                                          key={polres.id}
+                                          className="block mt-1"
+                                        >
+                                          <Checkbox
+                                            checked={checkedLevels.has(
+                                              Number(polres.id)
+                                            )}
+                                            onCheckedChange={() =>
+                                              handleCheckboxChange(
+                                                Number(polres.id)
+                                              )
+                                            }
+                                            className="mr-2"
+                                          />
+                                          {polres.name}
+                                        </Label>
+                                      )
+                                    )}
                                   </div>
                                 )}
                               </div>
@@ -1304,8 +1371,7 @@ const EventModal = ({
                       <Label>Video</Label>
                       <FileUploader
                         accept={{
-                          "mp4/*": [],
-                          "mov/*": [],
+                          "video/*": [],
                         }}
                         maxSize={100}
                         label="Upload file dengan format .mp4 atau .mov."
@@ -1317,7 +1383,7 @@ const EventModal = ({
                             className="object-fill h-full w-full rounded-md"
                             src={file.url}
                             controls
-                            title={`Video ${file.id}`} // Mengganti alt dengan title
+                            title={`Video ${file.id}`}
                           />
                           <div
                             key={index}
@@ -1396,10 +1462,9 @@ const EventModal = ({
                     </div>
                     <div>
                       <Label>Teks</Label>
-
                       <FileUploader
                         accept={{
-                          "pdf/*": [],
+                          "application/pdf": [],
                         }}
                         maxSize={100}
                         label="Upload file dengan format .pdf."
@@ -1455,8 +1520,7 @@ const EventModal = ({
                       />
                       <FileUploader
                         accept={{
-                          "mp3/*": [],
-                          "wav/*": [],
+                          "audio/*": [],
                         }}
                         maxSize={100}
                         label="Upload file dengan format .mp3 atau .wav."
@@ -1482,7 +1546,8 @@ const EventModal = ({
                             type="button"
                             onClick={onPlayPause}
                             disabled={isPlaying}
-                            className={`flex items-center gap-2 ${isPlaying
+                            className={`flex items-center gap-2 ${
+                              isPlaying
                                 ? "bg-gray-300 cursor-not-allowed"
                                 : "bg-primary text-white"
                             } p-2 rounded`}

app/[locale]/(protected)/contributor/report/components/columns.tsx

@@ -153,7 +153,7 @@ const useTableColumns = ({
         //   try {
         //     loading();
         //     const response = await axios.get(
-        //       `https://netidhub.com/api/media/report/download?id=${id}`,
+        //       `https://new.netidhub.com/api/media/report/download?id=${id}`,
         //       {
         //         responseType: "blob",
         //       }

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

@@ -22,7 +22,9 @@ import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import { useTranslations } from "next-intl";
 
-const useTableColumns = () => {
+const useTableColumns = (
+  activeTab: "ta" | "daily" | "special" | "mabes-koor",
+) => {
   const t = useTranslations("Table");
   const columns: ColumnDef<any>[] = [
     {
@@ -113,6 +115,31 @@ const useTableColumns = () => {
         const MySwal = withReactContent(Swal);
         const roleId = Number(getCookiesDecrypt("urie")) || 0;
 
+        // ❗ jika tab = "special"
+        if (activeTab === "special") {
+          return (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  size="icon"
+                  className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+                >
+                  <MoreVertical className="h-4 w-4 text-default-800" />
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className="p-0" align="end">
+                <Link href={`/contributor/task/detail/${row.original.id}`}>
+                  <DropdownMenuItem className="p-2 text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                    <Eye className="w-4 h-4 me-1.5" />
+                    View
+                  </DropdownMenuItem>
+                </Link>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        }
+
         async function deleteProcess(id: any) {
           loading();
           const resDelete = await deleteTaskTa(id);
@@ -165,7 +192,11 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              {(roleId == 11 || roleId == 12 || roleId == 19) && (
+              {/* {(roleId == 11 || roleId == 12 || roleId == 19) && ( */}
+              {(roleId == 11 ||
+                roleId == 12 ||
+                roleId == 19 ||
+                roleId == 3) && (
                 <Link href={`/contributor/task-ta/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" />
@@ -173,15 +204,16 @@ const useTableColumns = () => {
                   </DropdownMenuItem>
                 </Link>
               )}
-              {roleId == 11 && (
-                <Link href={`/contributor/task-ta/update/${row.original.id}`}>
-                  <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-                    <SquarePen className="w-4 h-4 me-1.5" />
-                    Edit
-                  </DropdownMenuItem>
-                </Link>
-              )}
-              {(roleId == 11 || roleId == 12 || roleId == 19) && (
+              {roleId == 11 ||
+                (roleId == 3 && (
+                  <Link href={`/contributor/task-ta/update/${row.original.id}`}>
+                    <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                      <SquarePen className="w-4 h-4 me-1.5" />
+                      Edit
+                    </DropdownMenuItem>
+                  </Link>
+                ))}
+              {(roleId == 12 || roleId == 19) && (
                 <Link
                   href={`/contributor/task-ta/upload-task/${row.original.id}`}
                 >
@@ -191,15 +223,16 @@ const useTableColumns = () => {
                   </DropdownMenuItem>
                 </Link>
               )}
-              {roleId == 11 && (
-                <DropdownMenuItem
-                  onClick={() => TaskDelete(row.original.id)}
-                  className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
-                >
-                  <Trash2 className="w-4 h-4 me-1.5" />
-                  Delete
-                </DropdownMenuItem>
-              )}
+              {roleId == 11 ||
+                (roleId == 3 && (
+                  <DropdownMenuItem
+                    onClick={() => TaskDelete(row.original.id)}
+                    className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
+                  >
+                    <Trash2 className="w-4 h-4 me-1.5" />
+                    Delete
+                  </DropdownMenuItem>
+                ))}
             </DropdownMenuContent>
           </DropdownMenu>
         );

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

@@ -35,10 +35,19 @@ const TaskTaPage = () => {
             <CardTitle>
               <div className="flex flex-col sm:flex-row lg:flex-row lg:items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  {t("tabel", { defaultValue: "Tabel" })} {t("task-ta", { defaultValue: "Task Ta" })}
+                  {t("tabel", { defaultValue: "Tabel" })}{" "}
+                  {t("task-ta", { defaultValue: "Task Ta" })}
                 </div>
                 <div className="flex-none">
-                  {roleId !== 12 && (
+                  {/* {roleId !== 12 && (
+                    <Link href={"/contributor/task-ta/create"}>
+                      <Button color="primary" className="text-white">
+                        <UploadIcon size={18} className="mr-2" />
+                        {t("create-task", { defaultValue: "Create Task" })}
+                      </Button>
+                    </Link>
+                  )} */}
+                  {roleId !== 12 && roleId !== 19 && (
                     <Link href={"/contributor/task-ta/create"}>
                       <Button color="primary" className="text-white">
                         <UploadIcon size={18} className="mr-2" />

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

@@ -5,7 +5,11 @@ import { Button } from "@/components/ui/button";
 import { UploadIcon } from "lucide-react";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 import { Link } from "@/components/navigation";
-import { checkAuthorization, checkLoginSession } from "@/lib/utils";
+import {
+  checkAuthorization,
+  checkLoginSession,
+  getCookiesDecrypt,
+} from "@/lib/utils";
 import React, { useEffect } from "react";
 import { useTranslations } from "next-intl";
 
@@ -13,12 +17,13 @@ const TaskPage = () => {
   const t = useTranslations("AnalyticsDashboard");
   useEffect(() => {
     function initState() {
-      checkAuthorization("admin"); 
+      checkAuthorization("admin");
       checkLoginSession();
     }
 
     initState();
   }, []);
+  const levelNumber = getCookiesDecrypt("ulne");
 
   return (
     <div>
@@ -29,16 +34,28 @@ const TaskPage = () => {
             <CardTitle>
               <div className="flex flex-col sm:flex-row lg:flex-row lg:items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  {t("tabel", { defaultValue: "Tabel" })} {t("task", { defaultValue: "Task" })}
+                  {t("tabel", { defaultValue: "Tabel" })}{" "}
+                  {t("task", { defaultValue: "Task" })}
                 </div>
-                <div className="flex-none">
+                {Number(levelNumber) !== 3 && (
+                  <div className="flex-none">
+                    <Link href="/contributor/task/create">
+                      <Button color="primary" className="text-white">
+                        <UploadIcon size={18} className="mr-2" />
+                        {t("create-task", { defaultValue: "Create Task" })}
+                      </Button>
+                    </Link>
+                  </div>
+                )}
+
+                {/* <div className="flex-none">
                   <Link href={"/contributor/task/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon size={18} className="mr-2" />
                       {t("create-task", { defaultValue: "Create Task" })}
                     </Button>
                   </Link>
-                </div>
+                </div> */}
               </div>
             </CardTitle>
           </CardHeader>

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

@@ -24,6 +24,7 @@ import ReportTable from "../contributor/report/components/report-table";
 const DashboardPage = () => {
   const t = useTranslations("AnalyticsDashboard");
   const roleId = getCookiesDecrypt("urie");
+  const levelNumber = Number(getCookiesDecrypt("ulne"));
 
   return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
     <div>
@@ -54,18 +55,23 @@ const DashboardPage = () => {
               >
                 {t("schedule", { defaultValue: "Schedule" })}
               </TabsTrigger>
-              <TabsTrigger
-                value="indeks"
-                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-              >
-                {t("indeks", { defaultValue: "Indeks" })}
-              </TabsTrigger>
-              <TabsTrigger
-                value="report"
-                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-              >
-                {t("report", { defaultValue: "Report" })}
-              </TabsTrigger>
+              {levelNumber !== 3 && (
+                <>
+                  <TabsTrigger
+                    value="indeks"
+                    className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
+                  >
+                    {t("indeks", { defaultValue: "Indeks" })}
+                  </TabsTrigger>
+
+                  <TabsTrigger
+                    value="report"
+                    className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
+                  >
+                    {t("report", { defaultValue: "Report" })}
+                  </TabsTrigger>
+                </>
+              )}
             </TabsList>
           </Card>
           <TabsContent value="routine-task">
@@ -75,18 +81,24 @@ const DashboardPage = () => {
                   <CardContent className="p-4">
                     <div className="grid md:grid-cols-3   gap-4">
                       <StatisticsBlock
-                        title={t("Hasil_unggah_disetujui_hari_ini", { defaultValue: "Hasil Unggah Disetujui Hari Ini" })}
+                        title={t("Hasil_unggah_disetujui_hari_ini", {
+                          defaultValue: "Hasil Unggah Disetujui Hari Ini",
+                        })}
                         total="3,564"
                         className="bg-info/10 border-none shadow-none"
                       />
                       <StatisticsBlock
-                        title={t("Hasil_unggah_direvisi_hari_ini", { defaultValue: "Hasil Unggah Direvisi Hari Ini" })}
+                        title={t("Hasil_unggah_direvisi_hari_ini", {
+                          defaultValue: "Hasil Unggah Direvisi Hari Ini",
+                        })}
                         total="564"
                         className="bg-warning/10 border-none shadow-none"
                         chartColor="#FB8F65"
                       />
                       <StatisticsBlock
-                        title={t("Hasil_unggah_ditolak_hari_ini", { defaultValue: "Hasil Unggah Ditolak Hari Ini" })}
+                        title={t("Hasil_unggah_ditolak_hari_ini", {
+                          defaultValue: "Hasil Unggah Ditolak Hari Ini",
+                        })}
                         total="+5.0%"
                         className="bg-primary/10 border-none shadow-none"
                         chartColor="#2563eb"
@@ -101,7 +113,9 @@ const DashboardPage = () => {
                 <Card>
                   <CardHeader className="flex flex-row items-center">
                     <CardTitle className="flex-1 text-lg">
-                      {t("Total-Content-Production", { defaultValue: "Total  Content  Production" })}
+                      {t("Total-Content-Production", {
+                        defaultValue: "Total  Content  Production",
+                      })}
                     </CardTitle>
                     <DashboardDropdown />
                   </CardHeader>
@@ -113,7 +127,9 @@ const DashboardPage = () => {
               <div className="lg:col-span-8 col-span-12">
                 <Card>
                   <CardHeader className="flex flex-row items-center">
-                    <CardTitle className="flex-1">{t("tabel", { defaultValue: "Tabel" })}</CardTitle>
+                    <CardTitle className="flex-1">
+                      {t("tabel", { defaultValue: "Tabel" })}
+                    </CardTitle>
                     {/* <DashboardDropdown /> */}
                   </CardHeader>
                   <CardContent className="p-0">
@@ -132,14 +148,26 @@ const DashboardPage = () => {
                       <div className="flex-1 text-xl font-medium text-default-900">
                         Tabel Penugasan
                       </div>
-                      <div>
+                      {Number(levelNumber) !== 3 && (
+                        <div className="flex-none">
+                          <Link href="/contributor/task/create">
+                            <Button color="primary" className="text-white">
+                              <UploadIcon size={18} className="mr-2" />
+                              {t("create-task", {
+                                defaultValue: "Create Task",
+                              })}
+                            </Button>
+                          </Link>
+                        </div>
+                      )}
+                      {/* <div>
                         <Link href={"/contributor/task/create"}>
                           <Button color="primary" className="text-white">
                             <UploadIcon />
                             Buat Penugasan
                           </Button>
                         </Link>
-                      </div>
+                      </div> */}
                     </div>
                   </Card>
                   <CardContent className="p-0 mt-3">

app/[locale]/(protected)/shared/communication/internal/components/columns.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,13 +8,42 @@ import {
   DropdownMenuItem,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
 import { Link } from "@/components/navigation";
+import { deleteTicketInternal } from "@/service/communication/communication";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
 import { useTranslations } from "next-intl";
 
-const useTableColumns = () => {
-  const t = useTranslations("Table"); // Panggil di dalam hook
+const MySwal = withReactContent(Swal);
+
+const useTableColumns = (onDeleteSuccess?: () => void) => {
+  const t = useTranslations("Table");
+
+  const handleDelete = async (id: any) => {
+    MySwal.fire({
+      title: "Delete Data?",
+      text: "Apakah Anda yakin ingin menghapus data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Ya, hapus",
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        try {
+          await deleteTicketInternal(id);
+
+          MySwal.fire("Sukses", "Data berhasil dihapus!", "success");
+
+          if (onDeleteSuccess) onDeleteSuccess();
+        } catch (error) {
+          console.log(error);
+          MySwal.fire("Gagal", "Terjadi kesalahan saat menghapus", "error");
+        }
+      }
+    });
+  };
 
   const columns: ColumnDef<any>[] = [
     {
@@ -67,46 +94,46 @@ const useTableColumns = () => {
     },
     {
       id: "actions",
-      accessorKey: "action",
-      header: t("action", { defaultValue: "Action" }),
-      enableHiding: false,
-      cell: ({ row }) => {
-        return (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                size="icon"
-                className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
-              >
-                <span className="sr-only">Open menu</span>
-                <MoreVertical className="h-4 w-4 text-default-800" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/shared/communication/internal/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" />
-                  View
-                </DropdownMenuItem>
-              </Link>
-              <Link
-                href={`/shared/communication/internal/update/${row.original.id}`}
-              >
-                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-                  <SquarePen className="w-4 h-4 me-1.5" />
-                  Edit
-                </DropdownMenuItem>
-              </Link>
-              <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
-                <Trash2 className="w-4 h-4 me-1.5" />
-                Delete
+      header: t("action"),
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="icon" className="bg-transparent hover:bg-transparent">
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="p-0">
+            {/* View */}
+            <Link
+              href={`/shared/communication/internal/detail/${row.original.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b cursor-pointer hover:bg-slate-100">
+                <Eye className="w-4 h-4 me-1.5" />
+                View
               </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        );
-      },
+            </Link>
+
+            {/* Edit */}
+            <Link
+              href={`/shared/communication/internal/update/${row.original.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b cursor-pointer hover:bg-slate-100">
+                <SquarePen className="w-4 h-4 me-1.5" />
+                Edit
+              </DropdownMenuItem>
+            </Link>
+
+            {/* Delete */}
+            <DropdownMenuItem
+              className="p-2 text-destructive bg-destructive/30 cursor-pointer"
+              onClick={() => handleDelete(row.original.id)}
+            >
+              <Trash2 className="w-4 h-4 me-1.5" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
     },
   ];
 

app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx

@@ -68,7 +68,6 @@ import useTableColumns from "./columns";
 const InternalTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -79,7 +78,6 @@ const InternalTable = () => {
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
-
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: Number(showData),
@@ -87,11 +85,7 @@ const InternalTable = () => {
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
   const [search, setSearch] = React.useState<string>("");
-  const userId = getCookiesDecrypt("uie");
-  const userLevelId = getCookiesDecrypt("ulie");
-
-  const roleId = getCookiesDecrypt("urie");
-  const columns = useTableColumns();
+  const columns = useTableColumns(() => fetchData());
   const table = useReactTable({
     data: dataTable,
     columns,

app/[locale]/(protected)/shared/contest/page.tsx

@@ -13,6 +13,8 @@ import { useTranslations } from "next-intl";
 const ContestPage = () => {
   const [userLevelId, setUserLevelId] = useState<any>(null);
   const t = useTranslations("Contest");
+  const levelNumber = Number(getCookiesDecrypt("ulne"));
+
   useEffect(() => {
     setUserLevelId(Number(getCookiesDecrypt("ulie")));
   }, []);
@@ -25,18 +27,36 @@ const ContestPage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  {t("table", { defaultValue: "Table" })} {t("contest", { defaultValue: "Contest" })}
+                  {t("table", { defaultValue: "Table" })}{" "}
+                  {t("contest", { defaultValue: "Contest" })}
                 </div>
-                {userLevelId !== 776 && userLevelId !== null && (
+                {userLevelId !== 776 &&
+                  userLevelId !== null &&
+                  levelNumber !== 3 && (
+                    <div className="flex-none">
+                      <Link href={"/shared/contest/create"}>
+                        <Button color="primary" className="text-white">
+                          <UploadIcon size={18} className="mr-2" />
+                          {t("create-contest", {
+                            defaultValue: "Create Contest",
+                          })}
+                        </Button>
+                      </Link>
+                    </div>
+                  )}
+
+                {/* {userLevelId !== 776 && userLevelId !== null && (
                   <div className="flex-none">
                     <Link href={"/shared/contest/create"}>
                       <Button color="primary" className="text-white">
                         <UploadIcon size={18} className="mr-2" />
-                        {t("create-contest", { defaultValue: "Create Contest" })}
+                        {t("create-contest", {
+                          defaultValue: "Create Contest",
+                        })}
                       </Button>
                     </Link>
                   </div>
-                )}
+                )} */}
               </div>
             </CardTitle>
           </CardHeader>

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx

@@ -85,7 +85,7 @@ const LatestNews = (props: { type: string }) => {
 
   // useEffect(() => {
   //   async function fetchCategories() {
-  //     const url = "https://netidhub.com/api/csrf";
+  //     const url = "https://new.netidhub.com/api/csrf";
 
   //     try {
   //       const response = await fetch(url);

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx

@@ -82,7 +82,7 @@ const NationalNews = () => {
 
   // useEffect(() => {
   //   async function fetchCategories() {
-  //     const url = "https://netidhub.com/api/csrf";
+  //     const url = "https://new.netidhub.com/api/csrf";
 
   //     try {
   //       const response = await fetch(url);

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx

@@ -23,7 +23,7 @@ const PopularNews = () => {
 
   useEffect(() => {
     async function fetchCategories() {
-      const url = "https://netidhub.com/api/csrf";
+      const url = "https://new.netidhub.com/api/csrf";
 
       try {
         const response = await fetch(url);

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx

@@ -75,7 +75,7 @@ const RegionalNews = () => {
 
   // useEffect(() => {
   //   async function fetchCategories() {
-  //     const url = "https://netidhub.com/api/csrf";
+  //     const url = "https://new.netidhub.com/api/csrf";
 
   //     try {
   //       const response = await fetch(url);

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

@@ -569,18 +569,19 @@ export default function FilterPage() {
                       </label>
                     </li>
                   ))}
-                  <div className="mt-4 flex gap-2 justify-center items-center">
+                  <div className="mt-4 flex justify-center items-center gap-2 flex-wrap">
+                    {/* Tombol Prev */}
                     <button
                       onClick={() =>
                         setCategoryPage((prev) => Math.max(prev - 1, 1))
                       }
                       disabled={categoryPage === 1}
-                      className="px-3 py-1 border rounded disabled:opacity-50"
+                      className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
                     >
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
+                        width="16"
+                        height="16"
                         viewBox="0 0 24 24"
                       >
                         <path
@@ -590,20 +591,41 @@ export default function FilterPage() {
                       </svg>
                     </button>
 
-                    {Array.from({ length: categoryTotalPages }, (_, i) => (
-                      <button
-                        key={i}
-                        onClick={() => setCategoryPage(i + 1)}
-                        className={`px-3 py-1 border rounded ${
-                          categoryPage === i + 1
-                            ? "bg-[#bb3523] text-white"
-                            : ""
-                        }`}
-                      >
-                        {i + 1}
-                      </button>
-                    ))}
+                    {(() => {
+                      const maxVisible = 4;
+                      let startPage = Math.max(
+                        1,
+                        Math.min(
+                          categoryPage - Math.floor(maxVisible / 2),
+                          categoryTotalPages - maxVisible + 1
+                        )
+                      );
+                      const endPage = Math.min(
+                        categoryTotalPages,
+                        startPage + maxVisible - 1
+                      );
 
+                      const visiblePages = [];
+                      for (let i = startPage; i <= endPage; i++) {
+                        visiblePages.push(i);
+                      }
+
+                      return visiblePages.map((pageNum) => (
+                        <button
+                          key={pageNum}
+                          onClick={() => setCategoryPage(pageNum)}
+                          className={`px-3 py-1 border rounded text-sm transition-colors ${
+                            categoryPage === pageNum
+                              ? "bg-[#bb3523] text-white"
+                              : "bg-white dark:bg-gray-800"
+                          }`}
+                        >
+                          {pageNum}
+                        </button>
+                      ));
+                    })()}
+
+                    {/* Tombol Next */}
                     <button
                       onClick={() =>
                         setCategoryPage((prev) =>
@@ -611,12 +633,12 @@ export default function FilterPage() {
                         )
                       }
                       disabled={categoryPage === categoryTotalPages}
-                      className="px-3 py-1 border rounded disabled:opacity-50"
+                      className="px-2 py-1 border rounded disabled:opacity-50 flex items-center justify-center"
                     >
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
+                        width="16"
+                        height="16"
                         viewBox="0 0 24 24"
                       >
                         <path

app/[locale]/(public)/content-management/download/page.tsx

@@ -290,25 +290,29 @@ const Galery = (props: any) => {
     // toast.success("Link Berhasil Di Copy");
   };
 
-  async function shareToEmail() {
-    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+  async function shareToEmail(uploadId: any) {
+    if (!userRoleId) {
       router.push("/auth/login");
-    } else {
-      const data = {
-        mediaUploadId: id?.split("-")?.[0],
-        email: emailShareList || [emailShareInput],
-        message: emailMessageInput,
-        url: window.location.href,
-      };
-      loading();
-      const res = await sendMediaUploadToEmail(data);
-      if (res?.error) {
-        error(res.message);
-        return false;
-      }
-      close();
-      successCallback("Konten Telah Dikirim");
+      return;
     }
+
+    const data = {
+      mediaUploadId: uploadId, // ← FIX: ID valid dari response
+      email: emailShareList || [emailShareInput],
+      message: emailMessageInput,
+      url: window.location.href,
+    };
+
+    loading();
+    const res = await sendMediaUploadToEmail(data);
+
+    if (res?.error) {
+      error(res.message);
+      return;
+    }
+
+    close();
+    successCallback("Konten Telah Dikirim");
   }
 
   const handleEmailList = (e: any) => {
@@ -349,12 +353,18 @@ const Galery = (props: any) => {
                 Saya */}
                 {pathname?.split("/")[1] == "in" ? (
                   <>
-                    <span className="text-black ">{t("gallery", { defaultValue: "Gallery" })}</span>&nbsp;
+                    <span className="text-black ">
+                      {t("gallery", { defaultValue: "Gallery" })}
+                    </span>
+                    &nbsp;
                     {t("my", { defaultValue: "My" })}
                   </>
                 ) : (
                   <>
-                    <span className="text-black">{t("my", { defaultValue: "My" })}</span>&nbsp;
+                    <span className="text-black">
+                      {t("my", { defaultValue: "My" })}
+                    </span>
+                    &nbsp;
                     {t("gallery", { defaultValue: "Gallery" })}
                   </>
                 )}
@@ -457,7 +467,9 @@ const Galery = (props: any) => {
                                             fontSize={25}
                                           />
                                           <p className="text-base font-semibold mb-2">
-                                            {t("save", { defaultValue: "Save" })}{" "}
+                                            {t("save", {
+                                              defaultValue: "Save",
+                                            })}{" "}
                                           </p>
                                         </div>
                                         <Link
@@ -481,18 +493,25 @@ const Galery = (props: any) => {
                                                   fontSize={20}
                                                 />
                                                 <p className="text-base font-semibold mb-1">
-                                                  {t("share", { defaultValue: "Share" })}{" "}
+                                                  {t("share", {
+                                                    defaultValue: "Share",
+                                                  })}{" "}
                                                 </p>
                                               </button>
                                             </PopoverTrigger>
                                             <PopoverContent>
                                               <div className="flex flex-col">
                                                 <h1 className="mb-2">
-                                                  {t("shareTo", { defaultValue: "Share To" })}{" "}
+                                                  {t("shareTo", {
+                                                    defaultValue: "Share To",
+                                                  })}{" "}
                                                 </h1>
                                                 <div className="flex flex-col mb-2">
                                                   <p className="text-base font-semibold mb-1">
-                                                    {t("destinationEmail", { defaultValue: "Destination Email" })}
+                                                    {t("destinationEmail", {
+                                                      defaultValue:
+                                                        "Destination Email",
+                                                    })}
                                                   </p>
                                                   <Input
                                                     value={emailShareInput}
@@ -503,14 +522,22 @@ const Galery = (props: any) => {
                                                     }
                                                     onKeyPress={handleEmailList}
                                                     type="email"
-                                                    placeholder={t("shareTo", { defaultValue: "Share To" })}
+                                                    placeholder={t("shareTo", {
+                                                      defaultValue: "Share To",
+                                                    })}
                                                   />
                                                 </div>
                                                 <Button
                                                   className="bg-blue-500 text-white p-2 w-fit rounded-lg"
-                                                  onClick={() => shareToEmail()}
+                                                  onClick={() =>
+                                                    shareToEmail(
+                                                      video.mediaUploadId
+                                                    )
+                                                  }
                                                 >
-                                                  {t("send", { defaultValue: "Send" })}
+                                                  {t("send", {
+                                                    defaultValue: "Send",
+                                                  })}
                                                 </Button>
                                               </div>
                                             </PopoverContent>
@@ -625,10 +652,16 @@ const Galery = (props: any) => {
                                 </PopoverTrigger>
                                 <PopoverContent>
                                   <div className="flex flex-col">
-                                    <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                                    <h1 className="mb-2">
+                                      {t("shareTo", {
+                                        defaultValue: "Share To",
+                                      })}
+                                    </h1>
                                     <div className="flex flex-col mb-2">
                                       <p className="text-base font-semibold mb-1">
-                                        {t("destinationEmail", { defaultValue: "Destination Email" })}
+                                        {t("destinationEmail", {
+                                          defaultValue: "Destination Email",
+                                        })}
                                       </p>
                                       <Input
                                         value={emailShareInput}
@@ -637,12 +670,16 @@ const Galery = (props: any) => {
                                         }
                                         onKeyPress={handleEmailList}
                                         type="email"
-                                        placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
+                                        placeholder={t("pressEnter", {
+                                          defaultValue: "Press Enter",
+                                        })}
                                       />
                                     </div>
                                     <Button
                                       className="bg-blue-500 text-white p-2 w-fit rounded-lg"
-                                      onClick={() => shareToEmail()}
+                                      onClick={() =>
+                                        shareToEmail(audio.mediaUploadId)
+                                      }
                                     >
                                       {t("send", { defaultValue: "Send" })}
                                     </Button>
@@ -732,7 +769,9 @@ const Galery = (props: any) => {
                                             fontSize={25}
                                           />
                                           <p className="text-base font-semibold mb-2">
-                                            {t("save", { defaultValue: "Save" })}{" "}
+                                            {t("save", {
+                                              defaultValue: "Save",
+                                            })}{" "}
                                           </p>
                                         </div>
                                         <Link
@@ -756,18 +795,25 @@ const Galery = (props: any) => {
                                                   fontSize={20}
                                                 />
                                                 <p className="text-base font-semibold mb-1">
-                                                  {t("share", { defaultValue: "Share" })}{" "}
+                                                  {t("share", {
+                                                    defaultValue: "Share",
+                                                  })}{" "}
                                                 </p>
                                               </button>
                                             </PopoverTrigger>
                                             <PopoverContent>
                                               <div className="flex flex-col">
                                                 <h1 className="mb-2">
-                                                  {t("shareTo", { defaultValue: "Share To" })}{" "}
+                                                  {t("shareTo", {
+                                                    defaultValue: "Share To",
+                                                  })}{" "}
                                                 </h1>
                                                 <div className="flex flex-col mb-2">
                                                   <p className="text-base font-semibold mb-1">
-                                                    {t("destinationEmail", { defaultValue: "Destination Email" })}
+                                                    {t("destinationEmail", {
+                                                      defaultValue:
+                                                        "Destination Email",
+                                                    })}
                                                   </p>
                                                   <Input
                                                     value={emailShareInput}
@@ -778,14 +824,22 @@ const Galery = (props: any) => {
                                                     }
                                                     onKeyPress={handleEmailList}
                                                     type="email"
-                                                    placeholder={t("shareTo", { defaultValue: "Share To" })}
+                                                    placeholder={t("shareTo", {
+                                                      defaultValue: "Share To",
+                                                    })}
                                                   />
                                                 </div>
                                                 <Button
                                                   className="bg-blue-500 text-white p-2 w-fit rounded-lg"
-                                                  onClick={() => shareToEmail()}
+                                                  onClick={() =>
+                                                    shareToEmail(
+                                                      image.mediaUploadId
+                                                    )
+                                                  }
                                                 >
-                                                  {t("send", { defaultValue: "Send" })}
+                                                  {t("send", {
+                                                    defaultValue: "Send",
+                                                  })}
                                                 </Button>
                                               </div>
                                             </PopoverContent>
@@ -884,10 +938,14 @@ const Galery = (props: any) => {
                               </PopoverTrigger>
                               <PopoverContent>
                                 <div className="flex flex-col">
-                                  <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                                  <h1 className="mb-2">
+                                    {t("shareTo", { defaultValue: "Share To" })}
+                                  </h1>
                                   <div className="flex flex-col mb-2">
                                     <p className="text-base font-semibold mb-1">
-                                      {t("destinationEmail", { defaultValue: "Destination Email" })}
+                                      {t("destinationEmail", {
+                                        defaultValue: "Destination Email",
+                                      })}
                                     </p>
                                     <Input
                                       value={emailShareInput}
@@ -896,12 +954,16 @@ const Galery = (props: any) => {
                                       }
                                       onKeyPress={handleEmailList}
                                       type="email"
-                                      placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
+                                      placeholder={t("pressEnter", {
+                                        defaultValue: "Press Enter",
+                                      })}
                                     />
                                   </div>
                                   <Button
                                     className="bg-blue-500 text-white p-2 w-fit rounded-lg"
-                                    onClick={() => shareToEmail()}
+                                    onClick={() =>
+                                      shareToEmail(document.mediaUploadId)
+                                    }
                                   >
                                     {t("send", { defaultValue: "Send" })}
                                   </Button>

app/[locale]/(public)/content-management/galery/page.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 import { close, error, loading, successCallback } from "@/config/swal";
-import { checkWishlistStatus, deleteWishlist, getInfoProfile, mediaWishlist, saveWishlist } from "@/service/landing/landing";
+import {
+  checkWishlistStatus,
+  deleteWishlist,
+  getInfoProfile,
+  mediaWishlist,
+  saveWishlist,
+} from "@/service/landing/landing";
 import React, { useEffect, useState } from "react";
 import { Link, useRouter } from "@/i18n/routing";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -13,8 +19,17 @@ import withReactContent from "sweetalert2-react-content";
 import { getCookiesDecrypt } from "@/lib/utils";
 import Swal from "sweetalert2";
 import { useToast } from "@/components/ui/use-toast";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -61,11 +76,23 @@ const Galery = (props: any) => {
   }, [page, category, title]);
 
   async function getDataVideo() {
-    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+    const filter =
+      categoryFilter?.length > 0
+        ? categoryFilter?.sort().join(",")
+        : category || "";
 
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
-    const response = await mediaWishlist("2", isInstitute ? instituteId : "", name, filter, "9", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "2",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "9",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentVideo(response?.data?.data?.content);
@@ -94,12 +121,24 @@ const Galery = (props: any) => {
   }, [page, category, title]);
 
   async function getDataDocument() {
-    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+    const filter =
+      categoryFilter?.length > 0
+        ? categoryFilter?.sort().join(",")
+        : category || "";
 
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
 
-    const response = await mediaWishlist("3", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "3",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "12",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentDocument(response?.data?.data?.content);
@@ -119,12 +158,24 @@ const Galery = (props: any) => {
   }, [change, refresh]);
 
   async function getDataAudio() {
-    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+    const filter =
+      categoryFilter?.length > 0
+        ? categoryFilter?.sort().join(",")
+        : category || "";
 
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
 
-    const response = await mediaWishlist("4", isInstitute ? instituteId : "", name, filter, "6", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "4",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "6",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentAudio(response?.data?.data?.content);
@@ -140,12 +191,24 @@ const Galery = (props: any) => {
   }, [page, category, title, refresh]);
 
   async function getDataImage() {
-    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+    const filter =
+      categoryFilter?.length > 0
+        ? categoryFilter?.sort().join(",")
+        : category || "";
 
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
 
-    const response = await mediaWishlist("1", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "1",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "12",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentImage(response?.data?.data?.content);
@@ -227,7 +290,9 @@ const Galery = (props: any) => {
   };
 
   const copyToClip = async (url: any) => {
-    await navigator.clipboard.writeText(`https://mediahub.polri.go.id/video/detail/${url}`);
+    await navigator.clipboard.writeText(
+      `https://mediahub.polri.go.id/video/detail/${url}`
+    );
     setCopySuccess("Copied");
     // toast.success("Link Berhasil Di Copy");
     toast({
@@ -235,25 +300,29 @@ const Galery = (props: any) => {
     });
   };
 
-  async function shareToEmail() {
-    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+  async function shareToEmail(uploadId: any) {
+    if (!userRoleId) {
       router.push("/auth/login");
-    } else {
-      const data = {
-        mediaUploadId: id?.split("-")?.[0],
-        email: emailShareList || [emailShareInput],
-        message: emailMessageInput,
-        url: window.location.href,
-      };
-      loading();
-      const res = await sendMediaUploadToEmail(data);
-      if (res?.error) {
-        error(res.message);
-        return false;
-      }
-      close();
-      successCallback("Konten Telah Dikirim");
+      return;
     }
+
+    const data = {
+      mediaUploadId: uploadId, // ← FIX: ID valid dari response
+      email: emailShareList || [emailShareInput],
+      message: emailMessageInput,
+      url: window.location.href,
+    };
+
+    loading();
+    const res = await sendMediaUploadToEmail(data);
+
+    if (res?.error) {
+      error(res.message);
+      return;
+    }
+
+    close();
+    successCallback("Konten Telah Dikirim");
   }
 
   const handleEmailList = (e: any) => {
@@ -290,7 +359,9 @@ const Galery = (props: any) => {
           <div className="flex flex-col mt-4">
             <div className="mx-auto w-full max-w-7xl justify-start flex flex-col gap-5 mb-4">
               <h1 className="text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-center  text-white">
-                <span className="text-black">{t("gallery", { defaultValue: "Gallery" })} </span>
+                <span className="text-black">
+                  {t("gallery", { defaultValue: "Gallery" })}{" "}
+                </span>
                 {profile?.institute?.name}
               </h1>
               <Tabs value={selectedTab} onValueChange={setSelectedTab}>
@@ -301,21 +372,27 @@ const Galery = (props: any) => {
                   >
                     {t("image", { defaultValue: "Image" })}
                   </TabsTrigger>
-                  <div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
+                  <div className="text-[#bb3523] text-lg hidden md:inline-block">
+                    |
+                  </div>
                   <TabsTrigger
                     value="video"
                     className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
                   >
                     {t("video", { defaultValue: "Video" })}
                   </TabsTrigger>
-                  <div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
+                  <div className="text-[#bb3523] text-lg hidden md:inline-block">
+                    |
+                  </div>
                   <TabsTrigger
                     value="text"
                     className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
                   >
                     {t("text", { defaultValue: "Text" })}
                   </TabsTrigger>
-                  <div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
+                  <div className="text-[#bb3523] text-lg hidden md:inline-block">
+                    |
+                  </div>
                   <TabsTrigger
                     value="audio"
                     className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
@@ -331,50 +408,140 @@ const Galery = (props: any) => {
                 contentVideo?.length > 0 ? (
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                     {contentVideo?.map((video: any) => (
-                      <Card key={video?.id} className="hover:scale-105 transition-transform duration-300">
+                      <Card
+                        key={video?.id}
+                        className="hover:scale-105 transition-transform duration-300"
+                      >
                         <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                           <div>
                             <div className="relative group overflow-hidden shadow-md hover:shadow-lg">
                               <div className="relative h-60 rounded-lg overflow-hidden">
-                                <ImageBlurry src={video?.mediaUpload?.thumbnailLink} alt={video?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
+                                <ImageBlurry
+                                  src={video?.mediaUpload?.thumbnailLink}
+                                  alt={video?.mediaUpload?.title}
+                                  style={{
+                                    objectFit: "cover",
+                                    width: "100%",
+                                    height: "100%",
+                                  }}
+                                />
                                 <div className="absolute bottom-0 left-0 right-0 bg-black text-white">
-                                  <Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
-                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">{video?.mediaUpload?.title}</p>
+                                  <Link
+                                    href={`/video/detail/${video?.mediaUpload?.slug}`}
+                                  >
+                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">
+                                      {video?.mediaUpload?.title}
+                                    </p>
                                   </Link>
                                   <p className="flex text-[10px] mr-1 mb-2 items-center justify-end self-end">
                                     <Popover>
-                                      <PopoverTrigger className="flex cursor-pointer" asChild>
+                                      <PopoverTrigger
+                                        className="flex cursor-pointer"
+                                        asChild
+                                      >
                                         <a className="flex justify-end items-center">
-                                          <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                                          <Icon
+                                            className="text-white ml-1"
+                                            fontSize={25}
+                                            icon="tabler:dots"
+                                          />
                                         </a>
                                       </PopoverTrigger>
                                       <PopoverContent className="w-52">
-                                        <div onClick={() => handleSaveWishlist(video?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
-                                          <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">{t("save", { defaultValue: "Save" })} </p>
+                                        <div
+                                          onClick={() =>
+                                            handleSaveWishlist(
+                                              video?.mediaUpload?.id
+                                            )
+                                          }
+                                          className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                                        >
+                                          <Icon
+                                            icon="material-symbols:bookmark-outline"
+                                            fontSize={25}
+                                          />
+                                          <p className="text-base font-semibold mb-2">
+                                            {t("save", {
+                                              defaultValue: "Save",
+                                            })}{" "}
+                                          </p>
                                         </div>
-                                        <Link href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
-                                          <Icon icon="jam:write" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">Content Rewrite</p>
+                                        <Link
+                                          href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`}
+                                          className="flex flex-row hover:text-red-800 gap-2"
+                                        >
+                                          <Icon
+                                            icon="jam:write"
+                                            fontSize={25}
+                                          />
+                                          <p className="text-base font-semibold mb-2">
+                                            Content Rewrite
+                                          </p>
                                         </Link>
                                         <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
                                           <Popover>
                                             <PopoverTrigger asChild>
                                               <button className="w-full flex flex-row items-center gap-3">
-                                                <Icon icon="oi:share" fontSize={20} />
-                                                <p className="text-base font-semibold mb-1">{t("share", { defaultValue: "Share" })} </p>
+                                                <Icon
+                                                  icon="oi:share"
+                                                  fontSize={20}
+                                                />
+                                                <p className="text-base font-semibold mb-1">
+                                                  {t("share", {
+                                                    defaultValue: "Share",
+                                                  })}{" "}
+                                                </p>
                                               </button>
                                             </PopoverTrigger>
                                             <PopoverContent>
                                               <div className="flex flex-col">
-                                                <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })} </h1>
+                                                <h1 className="mb-2">
+                                                  {t("shareTo", {
+                                                    defaultValue: "Share To",
+                                                  })}{" "}
+                                                </h1>
                                                 <div className="flex flex-col mb-2">
-                                                  <p className="text-base font-semibold mb-1">{t("destinationEmail", { defaultValue: "Destination Email" })}</p>
-                                                  <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("shareTo", { defaultValue: "Share To" })} />
+                                                  <p className="text-base font-semibold mb-1">
+                                                    {t("destinationEmail", {
+                                                      defaultValue:
+                                                        "Destination Email",
+                                                    })}
+                                                  </p>
+                                                  <Input
+                                                    value={emailShareInput}
+                                                    onChange={(event) =>
+                                                      setEmailShareInput(
+                                                        event.target.value
+                                                      )
+                                                    }
+                                                    onKeyPress={handleEmailList}
+                                                    type="email"
+                                                    placeholder={t("shareTo", {
+                                                      defaultValue: "Share To",
+                                                    })}
+                                                  />
                                                 </div>
-                                                <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
-                                                  {t("send", { defaultValue: "Send" })}
+                                                <Button
+                                                  className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                                  onClick={() =>
+                                                    shareToEmail(
+                                                      video.mediaUploadId
+                                                    )
+                                                  }
+                                                >
+                                                  {t("send", {
+                                                    defaultValue: "Send",
+                                                  })}
                                                 </Button>
+
+                                                {/* <Button
+                                                  className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                                  onClick={() => shareToEmail()}
+                                                >
+                                                  {t("send", {
+                                                    defaultValue: "Send",
+                                                  })}
+                                                </Button> */}
                                               </div>
                                             </PopoverContent>
                                           </Popover>
@@ -392,33 +559,64 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
                 contentAudio?.length > 0 ? (
                   <div className=" grid grid-cols-1 gap-6 ">
                     {contentAudio?.map((audio: any) => (
-                      <div key={audio?.id} className="flex flex-col sm:flex-row items-center  bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                      <div
+                        key={audio?.id}
+                        className="flex flex-col sm:flex-row items-center  bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                      >
                         <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
-                          <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
+                          <svg
+                            width="32"
+                            height="34"
+                            viewBox="0 0 32 34"
+                            fill="null"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
                             <path
                               d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
                               fill="white"
                             />
                           </svg>
                         </div>
-                        <Link href={`/audio/detail/${audio?.mediaUpload?.slug}`} className="flex flex-col  flex-1">
-                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{audio?.mediaUpload?.title}</div>
+                        <Link
+                          href={`/audio/detail/${audio?.mediaUpload?.slug}`}
+                          className="flex flex-col  flex-1"
+                        >
+                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                            {audio?.mediaUpload?.title}
+                          </div>
                         </Link>
                         <div className="flex items-center justify-center gap-3">
                           <div className="mt-2">
                             <img src="/assets/wave.svg" className="w-80" />
                           </div>
                           <div className="flex flex-row items-center justify-center text-gray-500 dark:text-gray-400">
-                            <img src="/assets/audio-icon.png" alt="#" className="flex items-center justify-center" />
-                            <div className="flex mx-2 items-center justify-center">{audio?.mediaUpload?.duration}</div>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+                            <img
+                              src="/assets/audio-icon.png"
+                              alt="#"
+                              className="flex items-center justify-center"
+                            />
+                            <div className="flex mx-2 items-center justify-center">
+                              {audio?.mediaUpload?.duration}
+                            </div>
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="20"
+                              height="20"
+                              viewBox="0 0 20 20"
+                            >
                               <path
                                 fill="#f00"
                                 d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
@@ -427,38 +625,92 @@ const Galery = (props: any) => {
                           </div>
                         </div>
                         <Popover>
-                          <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                          <PopoverTrigger
+                            className="flex justify-end gap-1 cursor-pointer"
+                            asChild
+                          >
                             <a className="flex justify-end items-end place-items-end">
-                              <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                              <Icon
+                                className="text-white ml-1"
+                                fontSize={25}
+                                icon="tabler:dots"
+                              />
                             </a>
                           </PopoverTrigger>
                           <PopoverContent className="w-52">
-                            <div onClick={() => handleSaveWishlist(audio?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
-                              <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
-                              <p className="text-base font-semibold mb-2">{t("save", { defaultValue: "Save" })}</p>
+                            <div
+                              onClick={() =>
+                                handleSaveWishlist(audio?.mediaUpload?.id)
+                              }
+                              className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                            >
+                              <Icon
+                                icon="material-symbols:bookmark-outline"
+                                fontSize={25}
+                              />
+                              <p className="text-base font-semibold mb-2">
+                                {t("save", { defaultValue: "Save" })}
+                              </p>
                             </div>
-                            <Link href={`/content-management/rewrite/create/${audio?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                            <Link
+                              href={`/content-management/rewrite/create/${audio?.mediaUpload?.id}`}
+                              className="flex flex-row hover:text-red-800 gap-2"
+                            >
                               <Icon icon="jam:write" fontSize={25} />
-                              <p className="text-base font-semibold mb-2">Content Rewrite</p>
+                              <p className="text-base font-semibold mb-2">
+                                Content Rewrite
+                              </p>
                             </Link>
                             <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
                               <Popover>
                                 <PopoverTrigger asChild>
                                   <button className="w-full flex items-center gap-2">
                                     <Icon icon="oi:share" fontSize={20} />
-                                    <p className="text-base font-semibold mb-2">{t("share", { defaultValue: "Share" })}</p>
+                                    <p className="text-base font-semibold mb-2">
+                                      {t("share", { defaultValue: "Share" })}
+                                    </p>
                                   </button>
                                 </PopoverTrigger>
                                 <PopoverContent>
                                   <div className="flex flex-col">
-                                    <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                                    <h1 className="mb-2">
+                                      {t("shareTo", {
+                                        defaultValue: "Share To",
+                                      })}
+                                    </h1>
                                     <div className="flex flex-col mb-2">
-                                      <p className="text-base font-semibold mb-1">{t("destinationEmail", { defaultValue: "Destination Email" })}</p>
-                                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter", { defaultValue: "Press Enter" })} />
+                                      <p className="text-base font-semibold mb-1">
+                                        {t("destinationEmail", {
+                                          defaultValue: "Destination Email",
+                                        })}
+                                      </p>
+                                      <Input
+                                        value={emailShareInput}
+                                        onChange={(event) =>
+                                          setEmailShareInput(event.target.value)
+                                        }
+                                        onKeyPress={handleEmailList}
+                                        type="email"
+                                        placeholder={t("pressEnter", {
+                                          defaultValue: "Press Enter",
+                                        })}
+                                      />
                                     </div>
-                                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+
+                                    <Button
+                                      className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                      onClick={() =>
+                                        shareToEmail(audio.mediaUploadId)
+                                      }
+                                    >
                                       {t("send", { defaultValue: "Send" })}
                                     </Button>
+                                    {/* <Button
+                                      className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                      onClick={() => shareToEmail()}
+                                    >
+                                      {t("send", { defaultValue: "Send" })}
+                                    </Button> */}
                                   </div>
                                 </PopoverContent>
                               </Popover>
@@ -470,56 +722,148 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : selectedTab == "image" ? (
                 contentImage?.length > 0 ? (
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                     {contentImage?.map((image: any) => (
-                      <Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
+                      <Card
+                        key={image?.id}
+                        className="hover:scale-105 transition-transform duration-300"
+                      >
                         <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                           <div>
                             <div className="relative group overflow-hidden shadow-md hover:shadow-lg">
                               <div className="relative h-60 rounded-lg overflow-hidden">
-                                <ImageBlurry src={image?.mediaUpload?.thumbnailLink} alt={image?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
+                                <ImageBlurry
+                                  src={image?.mediaUpload?.thumbnailLink}
+                                  alt={image?.mediaUpload?.title}
+                                  style={{
+                                    objectFit: "cover",
+                                    width: "100%",
+                                    height: "100%",
+                                  }}
+                                />
                                 <div className="absolute bottom-0 left-0 right-0 bg-black text-white">
-                                  <Link href={`/video/detail/${image?.mediaUpload?.slug}`}>
-                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">{image?.mediaUpload?.title}</p>
+                                  <Link
+                                    href={`/video/detail/${image?.mediaUpload?.slug}`}
+                                  >
+                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">
+                                      {image?.mediaUpload?.title}
+                                    </p>
                                   </Link>
                                   <p className="flex text-[10px] mr-1 mb-2 items-center justify-end self-end">
                                     <Popover>
-                                      <PopoverTrigger className="flex cursor-pointer" asChild>
+                                      <PopoverTrigger
+                                        className="flex cursor-pointer"
+                                        asChild
+                                      >
                                         <a className="flex justify-end items-end place-items-end">
-                                          <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                                          <Icon
+                                            className="text-white ml-1"
+                                            fontSize={25}
+                                            icon="tabler:dots"
+                                          />
                                         </a>
                                       </PopoverTrigger>
                                       <PopoverContent className="w-52">
-                                        <div onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
-                                          <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">{t("save", { defaultValue: "Save" })}</p>
+                                        <div
+                                          onClick={() =>
+                                            handleSaveWishlist(
+                                              image?.mediaUpload?.id
+                                            )
+                                          }
+                                          className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                                        >
+                                          <Icon
+                                            icon="material-symbols:bookmark-outline"
+                                            fontSize={25}
+                                          />
+                                          <p className="text-base font-semibold mb-2">
+                                            {t("save", {
+                                              defaultValue: "Save",
+                                            })}
+                                          </p>
                                         </div>
-                                        <Link href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
-                                          <Icon icon="jam:write" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">Content Rewrite</p>
+                                        <Link
+                                          href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`}
+                                          className="flex flex-row hover:text-red-800 gap-2"
+                                        >
+                                          <Icon
+                                            icon="jam:write"
+                                            fontSize={25}
+                                          />
+                                          <p className="text-base font-semibold mb-2">
+                                            Content Rewrite
+                                          </p>
                                         </Link>
                                         <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
                                           <Popover>
                                             <PopoverTrigger asChild>
                                               <button className="w-full flex flex-row items-center gap-3">
-                                                <Icon icon="oi:share" fontSize={20} />
-                                                <p className="text-base font-semibold mb-1"> {t("share", { defaultValue: "Share" })}</p>
+                                                <Icon
+                                                  icon="oi:share"
+                                                  fontSize={20}
+                                                />
+                                                <p className="text-base font-semibold mb-1">
+                                                  {" "}
+                                                  {t("share", {
+                                                    defaultValue: "Share",
+                                                  })}
+                                                </p>
                                               </button>
                                             </PopoverTrigger>
                                             <PopoverContent>
                                               <div className="flex flex-col">
-                                                <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                                                <h1 className="mb-2">
+                                                  {t("shareTo", {
+                                                    defaultValue: "Share To",
+                                                  })}
+                                                </h1>
                                                 <div className="flex flex-col mb-2">
-                                                  <p className="text-base font-semibold mb-1">{t("destinationEmail", { defaultValue: "Destination Email" })}</p>
-                                                  <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter", { defaultValue: "Press Enter" })} />
+                                                  <p className="text-base font-semibold mb-1">
+                                                    {t("destinationEmail", {
+                                                      defaultValue:
+                                                        "Destination Email",
+                                                    })}
+                                                  </p>
+                                                  <Input
+                                                    value={emailShareInput}
+                                                    onChange={(event) =>
+                                                      setEmailShareInput(
+                                                        event.target.value
+                                                      )
+                                                    }
+                                                    onKeyPress={handleEmailList}
+                                                    type="email"
+                                                    placeholder={t(
+                                                      "pressEnter",
+                                                      {
+                                                        defaultValue:
+                                                          "Press Enter",
+                                                      }
+                                                    )}
+                                                  />
                                                 </div>
-                                                <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
-                                                  {t("send", { defaultValue: "Send" })}
+                                                <Button
+                                                  className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                                  onClick={() =>
+                                                    shareToEmail(
+                                                      image.mediaUploadId
+                                                    )
+                                                  }
+                                                >
+                                                  {t("send", {
+                                                    defaultValue: "Send",
+                                                  })}
                                                 </Button>
                                               </div>
                                             </PopoverContent>
@@ -538,15 +882,30 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : contentDocument.length > 0 ? (
                 <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
                   {contentDocument?.map((document: any) => (
-                    <div key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                    <div
+                      key={document?.id}
+                      className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                    >
                       <div className="flex items-center justify-center rounded-lg w-16 h-16">
-                        <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          width="28"
+                          height="34"
+                          viewBox="0 0 28 34"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <path
                             d="M5.6665 17.4167C5.6665 17.0851 5.7982 16.7672 6.03262 16.5328C6.26704 16.2984 6.58498 16.1667 6.9165 16.1667C7.24802 16.1667 7.56597 16.2984 7.80039 16.5328C8.03481 16.7672 8.1665 17.0851 8.1665 17.4167C8.1665 17.7482 8.03481 18.0661 7.80039 18.3005C7.56597 18.535 7.24802 18.6667 6.9165 18.6667C6.58498 18.6667 6.26704 18.535 6.03262 18.3005C5.7982 18.0661 5.6665 17.7482 5.6665 17.4167ZM6.9165 21.1667C6.58498 21.1667 6.26704 21.2984 6.03262 21.5328C5.7982 21.7672 5.6665 22.0851 5.6665 22.4167C5.6665 22.7482 5.7982 23.0661 6.03262 23.3005C6.26704 23.535 6.58498 23.6667 6.9165 23.6667C7.24802 23.6667 7.56597 23.535 7.80039 23.3005C8.03481 23.0661 8.1665 22.7482 8.1665 22.4167C8.1665 22.0851 8.03481 21.7672 7.80039 21.5328C7.56597 21.2984 7.24802 21.1667 6.9165 21.1667ZM5.6665 27.4167C5.6665 27.0851 5.7982 26.7672 6.03262 26.5328C6.26704 26.2984 6.58498 26.1667 6.9165 26.1667C7.24802 26.1667 7.56597 26.2984 7.80039 26.5328C8.03481 26.7672 8.1665 27.0851 8.1665 27.4167C8.1665 27.7482 8.03481 28.0661 7.80039 28.3005C7.56597 28.535 7.24802 28.6667 6.9165 28.6667C6.58498 28.6667 6.26704 28.535 6.03262 28.3005C5.7982 28.0661 5.6665 27.7482 5.6665 27.4167ZM11.9165 16.1667C11.585 16.1667 11.267 16.2984 11.0326 16.5328C10.7982 16.7672 10.6665 17.0851 10.6665 17.4167C10.6665 17.7482 10.7982 18.0661 11.0326 18.3005C11.267 18.535 11.585 18.6667 11.9165 18.6667H21.0832C21.4147 18.6667 21.7326 18.535 21.9671 18.3005C22.2015 18.0661 22.3332 17.7482 22.3332 17.4167C22.3332 17.0851 22.2015 16.7672 21.9671 16.5328C21.7326 16.2984 21.4147 16.1667 21.0832 16.1667H11.9165ZM10.6665 22.4167C10.6665 22.0851 10.7982 21.7672 11.0326 21.5328C11.267 21.2984 11.585 21.1667 11.9165 21.1667H21.0832C21.4147 21.1667 21.7326 21.2984 21.9671 21.5328C22.2015 21.7672 22.3332 22.0851 22.3332 22.4167C22.3332 22.7482 22.2015 23.0661 21.9671 23.3005C21.7326 23.535 21.4147 23.6667 21.0832 23.6667H11.9165C11.585 23.6667 11.267 23.535 11.0326 23.3005C10.7982 23.0661 10.6665 22.7482 10.6665 22.4167ZM11.9165 26.1667C11.585 26.1667 11.267 26.2984 11.0326 26.5328C10.7982 26.7672 10.6665 27.0851 10.6665 27.4167C10.6665 27.7482 10.7982 28.0661 11.0326 28.3005C11.267 28.535 11.585 28.6667 11.9165 28.6667H21.0832C21.4147 28.6667 21.7326 28.535 21.9671 28.3005C22.2015 28.0661 22.3332 27.7482 22.3332 27.4167C22.3332 27.0851 22.2015 26.7672 21.9671 26.5328C21.7326 26.2984 21.4147 26.1667 21.0832 26.1667H11.9165ZM26.3565 11.0233L16.6415 1.31C16.6157 1.28605 16.5885 1.26378 16.5598 1.24333C16.5392 1.22742 16.5192 1.21074 16.4998 1.19333C16.3852 1.08512 16.2632 0.984882 16.1348 0.893332C16.0922 0.865802 16.0476 0.841298 16.0015 0.819999L15.9215 0.779999L15.8382 0.731666C15.7482 0.679999 15.6565 0.626665 15.5615 0.586665C15.2296 0.454104 14.8783 0.376423 14.5215 0.356665C14.4885 0.354519 14.4557 0.350625 14.4232 0.344999C14.3779 0.338012 14.3323 0.334114 14.2865 0.333332H3.99984C3.11578 0.333332 2.26794 0.684521 1.64281 1.30964C1.01769 1.93476 0.666504 2.78261 0.666504 3.66667V30.3333C0.666504 31.2174 1.01769 32.0652 1.64281 32.6904C2.26794 33.3155 3.11578 33.6667 3.99984 33.6667H23.9998C24.8839 33.6667 25.7317 33.3155 26.3569 32.6904C26.982 32.0652 27.3332 31.2174 27.3332 30.3333V13.38C27.333 12.496 26.9817 11.6483 26.3565 11.0233ZM24.8332 30.3333C24.8332 30.5543 24.7454 30.7663 24.5891 30.9226C24.4328 31.0789 24.2208 31.1667 23.9998 31.1667H3.99984C3.77882 31.1667 3.56686 31.0789 3.41058 30.9226C3.2543 30.7663 3.1665 30.5543 3.1665 30.3333V3.66667C3.1665 3.44565 3.2543 3.23369 3.41058 3.07741C3.56686 2.92113 3.77882 2.83333 3.99984 2.83333H13.9998V10.3333C13.9998 11.2174 14.351 12.0652 14.9761 12.6904C15.6013 13.3155 16.4491 13.6667 17.3332 13.6667H24.8332V30.3333ZM16.4998 4.70166L22.9632 11.1667H17.3332C17.1122 11.1667 16.9002 11.0789 16.7439 10.9226C16.5876 10.7663 16.4998 10.5543 16.4998 10.3333V4.70166Z"
                             fill="black"
@@ -555,47 +914,103 @@ const Galery = (props: any) => {
                       </div>
 
                       <div className="flex flex-col flex-1 gap-2">
-                        <Link href={`/document/detail/${document?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                        <Link
+                          href={`/document/detail/${document?.mediaUpload?.slug}`}
+                          className="font-semibold text-gray-900 dark:text-white mt-1 text-sm"
+                        >
                           {document?.mediaUpload?.title}
                         </Link>
                         <div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
-                            <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 512 512"
+                          >
+                            <path
+                              fill="#f00"
+                              d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z"
+                            />
                           </svg>
                           Download {t("document", { defaultValue: "Document" })}
                         </div>
                       </div>
                       <Popover>
-                        <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                        <PopoverTrigger
+                          className="flex justify-end gap-1 cursor-pointer"
+                          asChild
+                        >
                           <a className="flex justify-end items-end place-items-end">
-                            <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                            <Icon
+                              className="text-white ml-1"
+                              fontSize={25}
+                              icon="tabler:dots"
+                            />
                           </a>
                         </PopoverTrigger>
                         <PopoverContent className="w-52">
-                          <div onClick={() => handleSaveWishlist(document?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
-                            <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
-                            <p className="text-base font-semibold mb-2">{t("save", { defaultValue: "Save" })}</p>
+                          <div
+                            onClick={() =>
+                              handleSaveWishlist(document?.mediaUpload?.id)
+                            }
+                            className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                          >
+                            <Icon
+                              icon="material-symbols:bookmark-outline"
+                              fontSize={25}
+                            />
+                            <p className="text-base font-semibold mb-2">
+                              {t("save", { defaultValue: "Save" })}
+                            </p>
                           </div>
-                          <Link href={`/content-management/rewrite/create/${document?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                          <Link
+                            href={`/content-management/rewrite/create/${document?.mediaUpload?.id}`}
+                            className="flex flex-row hover:text-red-800 gap-2"
+                          >
                             <Icon icon="jam:write" fontSize={25} />
-                            <p className="text-base font-semibold mb-2">Content Rewrite</p>
+                            <p className="text-base font-semibold mb-2">
+                              Content Rewrite
+                            </p>
                           </Link>
                           <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
                             <Popover>
                               <PopoverTrigger asChild>
                                 <button className="w-full flex items-center gap-2">
                                   <Icon icon="oi:share" fontSize={20} />
-                                  <p className="text-base font-semibold mb-2">{t("share", { defaultValue: "Share" })}</p>
+                                  <p className="text-base font-semibold mb-2">
+                                    {t("share", { defaultValue: "Share" })}
+                                  </p>
                                 </button>
                               </PopoverTrigger>
                               <PopoverContent>
                                 <div className="flex flex-col">
-                                  <h1 className="mb-2">{t("shareTo", { defaultValue: "Share To" })}</h1>
+                                  <h1 className="mb-2">
+                                    {t("shareTo", { defaultValue: "Share To" })}
+                                  </h1>
                                   <div className="flex flex-col mb-2">
-                                    <p className="text-base font-semibold mb-1">{t("destinationEmail", { defaultValue: "Destination Email" })}</p>
-                                    <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter", { defaultValue: "Press Enter" })} />
+                                    <p className="text-base font-semibold mb-1">
+                                      {t("destinationEmail", {
+                                        defaultValue: "Destination Email",
+                                      })}
+                                    </p>
+                                    <Input
+                                      value={emailShareInput}
+                                      onChange={(event) =>
+                                        setEmailShareInput(event.target.value)
+                                      }
+                                      onKeyPress={handleEmailList}
+                                      type="email"
+                                      placeholder={t("pressEnter", {
+                                        defaultValue: "Press Enter",
+                                      })}
+                                    />
                                   </div>
-                                  <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                  <Button
+                                    className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                    onClick={() =>
+                                      shareToEmail(document?.mediaUploadId)
+                                    }
+                                  >
                                     {t("send", { defaultValue: "Send" })}
                                   </Button>
                                 </div>
@@ -609,7 +1024,13 @@ const Galery = (props: any) => {
                 </div>
               ) : (
                 <p className="flex items-center justify-center">
-                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image
+                    width={1920}
+                    height={1080}
+                    src="/assets/empty-data.png"
+                    alt="empty"
+                    className="h-52 w-52 my-4"
+                  />
                 </p>
               )}
             </div>

app/[locale]/(public)/content-management/rewrite/page.tsx

@@ -29,6 +29,7 @@ import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking"
 import ImageBlurry from "@/components/ui/image-blurry";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
+import { sendMediaRewriteToEmail } from "@/service/content/content";
 
 const page = () => {
   const [, setProfile] = useState();
@@ -175,18 +176,16 @@ const page = () => {
     }
   };
 
-  async function shareToEmail() {
+  async function shareToEmail(uploadId: any) {
     if (Number(userRoleId) < 1 || userRoleId == undefined) {
       router.push("/auth/login");
     } else {
       const data = {
-        mediaUploadId: id?.split("-")?.[0],
+        id: uploadId,
         email: emailShareList || [emailShareInput],
-        message: emailMessageInput,
-        url: window.location.href,
       };
       loading();
-      const res = await sendMediaUploadToEmail(data);
+      const res = await sendMediaRewriteToEmail(data.id, data.email);
       if (res?.error) {
         error(res.message);
         return false;
@@ -196,6 +195,7 @@ const page = () => {
     }
   }
 
+
   const handleEmailList = (e: any) => {
     const arrayEmail: any = [];
     for (let i = 0; i < emailShareList?.length; i += 1) {
@@ -328,7 +328,7 @@ const page = () => {
                                             </div>
                                             <Button
                                               className="bg-blue-500 text-white p-2 w-fit rounded-lg"
-                                              onClick={() => shareToEmail()}
+                                              onClick={() => shareToEmail(image.id)}
                                             >
                                               {t("send", { defaultValue: "Send" })}
                                             </Button>

components/form/broadcast/content-blast-form.tsx

@@ -14,6 +14,7 @@ import Swal from "sweetalert2";
 
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 
 import {
   getLocaleTime,
@@ -24,7 +25,6 @@ import {
   detailMediaSummary,
   getMediaBlastCampaignList,
   saveMediaBlastBroadcast,
-  saveMediaBlastCampaign,
 } from "@/service/broadcast/broadcast";
 import { error } from "@/config/swal";
 import { Link, useRouter } from "@/i18n/routing";
@@ -44,27 +44,13 @@ import {
 import dynamic from "next/dynamic";
 
 const CustomEditor = dynamic(
-  () => {
-    return import("@/components/editor/custom-editor");
-  },
+  () => import("@/components/editor/custom-editor"),
   { ssr: false }
 );
 
 const animatedComponent = makeAnimated();
 
 const FormSchema = z.object({
-  title: z.string({
-    required_error: "Required",
-  }),
-  url: z.string({
-    required_error: "Required",
-  }),
-  thumbnail: z.string({
-    required_error: "Required",
-  }),
-  detail: z.string({
-    required_error: "Required",
-  }),
   selected: z
     .array(
       z.object({
@@ -73,9 +59,16 @@ const FormSchema = z.object({
         value: z.string(),
       })
     )
-    .refine((value) => value.length > 0, {
-      message: "Required",
-    }),
+    .min(1, "Pilih minimal satu campaign"),
+
+  title: z.string().min(1, "Required"),
+  url: z.string().min(1, "Required"),
+  thumbnail: z.string().min(1, "Required"),
+  detail: z.string().min(1, "Required"),
+
+  messageType: z
+    .array(z.string())
+    .min(1, "Pilih minimal satu tipe pesan (WA / Email)"),
 });
 
 interface Campaign {
@@ -83,71 +76,132 @@ interface Campaign {
   name: string;
 }
 
-export default function ContentBlast(props: { type: string }) {
+export default function ContentBlast() {
   const editor = useRef(null);
   const id = useParams()?.id;
   const MySwal = withReactContent(Swal);
   const router = useRouter();
-  const { type } = props;
 
   const [dataSelectCampaign, setDataSelectCampaign] = useState<Campaign[]>([]);
   const [openModal, setOpenModal] = useState(false);
 
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
-    defaultValues: { selected: [], detail: "" },
+    defaultValues: {
+      selected: [],
+      detail: "",
+      messageType: [],
+    },
   });
 
+  const selectedTypes = form.watch("messageType");
+
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
-    if (form.getValues("detail") == "") {
-      form.setError("detail", {
-        type: "manual",
-        message: "Required",
-      });
-    } else {
-      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);
-        }
-      });
-    }
+    MySwal.fire({
+      title: "Kirim Broadcast?",
+      text: "Pesan akan dikirim ke semua campaign yang dipilih",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Kirim",
+    }).then((result) => {
+      if (result.isConfirmed) save(data);
+    });
   };
 
+  function htmlToWaText(html: string) {
+    // Hilangkan link menjadi URL saja
+    html = html.replace(/<a [^>]*href="([^"]+)"[^>]*>(.*?)<\/a>/gi, "$1");
+
+    // Ambil gambar sebagai URL
+    html = html.replace(/<img [^>]*src="([^"]+)".*?>/gi, "$1");
+
+    // Hapus semua HTML tag
+    html = html.replace(/<\/?[^>]+>/gi, "");
+
+    // Decode HTML entities
+    html = html.replace(/&amp;/g, "&");
+
+    // Rapikan spasi
+    return html.replace(/\s+/g, " ").trim();
+  }
+
   const save = async (data: z.infer<typeof FormSchema>) => {
-    const selectedCampaign = form.getValues("selected");
+    const selectedCampaign = data.selected;
+    const mediaRes = await detailMediaSummary(String(id));
+    const details = mediaRes?.data?.data;
 
     for (let i = 0; i < selectedCampaign.length; i++) {
-      const reqData = {
-        mediaUploadId: id,
-        mediaBlastCampaignId: selectedCampaign[i].id,
-        subject: type == "wa" ? `*${data.title}*` : data.title,
-        body: data.detail?.replace(/\n/g, ""),
-        type: type,
-        isScheduled: false,
-        thumbnail: data?.thumbnail,
-        sendDate: getLocaleTimestamp(new Date()),
-        sendTime: getLocaleTime(new Date()),
-        contentUrl: data.url,
-      };
+      const campaignId = selectedCampaign[i].id;
 
-      console.log("req =>", reqData);
-      const response = await saveMediaBlastBroadcast(reqData);
+      for (let mt of data.messageType) {
+        let finalBody = data.detail;
+        if (mt === "wa") {
+          finalBody = textEllipsis(details?.description || "", 150);
+        }
+
+        const payload = {
+          mediaUploadId: id,
+          mediaBlastCampaignId: campaignId,
+          subject: mt === "wa" ? `*${data.title}*` : data.title,
+          body: mt === "wa" ? htmlToWaText(finalBody) : finalBody,
+          type: mt,
+          isScheduled: false,
+          thumbnail: data.thumbnail,
+          sendDate: getLocaleTimestamp(new Date()),
+          sendTime: getLocaleTime(new Date()),
+          contentUrl: data.url,
+        };
+
+        console.log("REQ =>", payload);
+        await saveMediaBlastBroadcast(payload);
+      }
     }
+
     setOpenModal(true);
   };
 
+  // const save = async (data: z.infer<typeof FormSchema>) => {
+  //   const selectedCampaign = data.selected;
+
+  //   for (let i = 0; i < selectedCampaign.length; i++) {
+  //     const campaignId = selectedCampaign[i].id;
+
+  //     // Loop WA / Email
+  //     for (let mt of data.messageType) {
+  //       const payload = {
+  //         mediaUploadId: id,
+  //         mediaBlastCampaignId: campaignId,
+  //         subject: mt === "wa" ? `*${data.title}*` : data.title,
+  //         // body: data.detail.replace(/\n/g, ""),
+  //         body: mt === "wa" ? htmlToWaText(data.detail) : data.detail,
+  //         type: mt, // <-- WA / email
+  //         isScheduled: false,
+  //         thumbnail: data.thumbnail,
+  //         sendDate: getLocaleTimestamp(new Date()),
+  //         sendTime: getLocaleTime(new Date()),
+  //         contentUrl: data.url,
+  //       };
+
+  //       console.log("REQ =>", payload);
+  //       await saveMediaBlastBroadcast(payload);
+  //     }
+  //   }
+
+  //   setOpenModal(true);
+  // };
+
   useEffect(() => {
-    async function initState() {
+    async function init() {
       const response = await detailMediaSummary(String(id));
       const details = response?.data?.data;
+
+      if (!details) return;
+
+      form.setValue("thumbnail", details.smallThumbnailLink);
+      form.setValue("title", details.title);
+      form.setValue("url", details.pageUrl);
       let pageUrl = details?.pageUrl || "";
       if (pageUrl.includes("mediahub.polri.go.id")) {
         pageUrl = pageUrl.replace(
@@ -157,59 +211,43 @@ export default function ContentBlast(props: { type: string }) {
           }
         );
       }
-      if (details != undefined) {
-        form.setValue("thumbnail", details.smallThumbnailLink);
-        let body = `<div><p>Berita hari ini !!!</p>
-  <div style='margin-top:20px;border:1px solid;border-radius:10px;width:500px;background-color:#f7f7f7'>
-    <div>
-      <img style='width:500px;height:auto;border-radius:10px;object-fit:cover' src='${
-        details?.smallThumbnailLink
-      }'>
-    </div>
-    <a style='padding:5px 20px;margin:0;text-decoration:none' href='${pageUrl}'>${pageUrl}</a>
-    <h3 style='padding:5px 20px;margin:0'>${details?.title}</h3>
-    <p style='padding:0 20px;margin:0;margin-bottom:10px'>
-      ${textEllipsis(details?.description, 150)}
-    </p>
-  </div>
-</div>`;
-        form.setValue("title", `${details?.title}`);
-        form.setValue(
-          "url",
-          details?.pageUrl || "https://mediahub.polri.go.id"
-        );
-        if (type == "wa") {
-          body = `${textEllipsis(details?.description, 150)}`;
-          form.setValue("detail", body);
-        } else {
-          form.setValue("detail", body);
-        }
-      }
+
+      const body = `<div><p>Berita hari ini !!!</p>
+      <div style='margin-top:20px;border:1px solid;border-radius:10px;width:500px;background-color:#f7f7f7'>
+        <div>
+          <img style='width:500px;height:auto;border-radius:10px;object-fit:cover' src='${
+            details.smallThumbnailLink
+          }'>
+        </div>
+             <a style='padding:5px 20px;margin:0;text-decoration:none' href='${pageUrl}'>${pageUrl}</a>
+
+        <h3 style='padding:5px 20px;margin:0'>${details.title}</h3>
+        <p style='padding:0 20px;margin:0;margin-bottom:10px'>
+          ${textEllipsis(details.description, 150)}
+        </p>
+      </div>
+    </div>`;
+
+      form.setValue("detail", body);
     }
 
-    async function getCampaign() {
+    async function loadCampaign() {
       const response = await getMediaBlastCampaignList();
       const campaign = response?.data?.data?.content;
       handleLabelCampaign(campaign);
-      console.log(campaign);
     }
 
-    initState();
-    getCampaign();
+    init();
+    loadCampaign();
   }, [id]);
 
   function handleLabelCampaign(data: any) {
-    const optionArr: any = [];
-
-    data.map((option: any) => {
-      optionArr.push({
-        id: option.id,
-        label: option.title,
-        value: option.title,
-      });
-    });
-    console.log("option arr", optionArr);
-    setDataSelectCampaign(optionArr);
+    const arr = data.map((item: any) => ({
+      id: item.id,
+      label: item.title,
+      value: item.title,
+    }));
+    setDataSelectCampaign(arr);
   }
 
   return (
@@ -218,104 +256,127 @@ export default function ContentBlast(props: { type: string }) {
         onSubmit={form.handleSubmit(onSubmit)}
         className="space-y-3 bg-white rounded-sm p-4"
       >
-        <p className="fonnt-semibold">Broadcast</p>
+        <p className="font-semibold">Broadcast</p>
+
+        {/* SELECT CAMPAIGN */}
         <FormField
           control={form.control}
           name="selected"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Subject</FormLabel>
+              <FormLabel>Pilih Campaign</FormLabel>
               <Select
-                className="z-50"
                 options={dataSelectCampaign}
                 closeMenuOnSelect={false}
                 components={animatedComponent}
-                onChange={field.onChange}
                 isMulti
+                onChange={field.onChange}
               />
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* CHECKBOX MESSAGE TYPE */}
+        <FormField
+          control={form.control}
+          name="messageType"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Kirim sebagai:</FormLabel>
+
+              <div className="flex gap-6">
+                <label className="flex items-center gap-2">
+                  <Checkbox
+                    checked={field.value.includes("wa")}
+                    onCheckedChange={(checked) => {
+                      checked
+                        ? field.onChange([...field.value, "wa"])
+                        : field.onChange(field.value.filter((v) => v !== "wa"));
+                    }}
+                  />
+                  WhatsApp
+                </label>
+
+                <label className="flex items-center gap-2">
+                  <Checkbox
+                    checked={field.value.includes("email")}
+                    onCheckedChange={(checked) => {
+                      checked
+                        ? field.onChange([...field.value, "email"])
+                        : field.onChange(
+                            field.value.filter((v) => v !== "email")
+                          );
+                    }}
+                  />
+                  Email
+                </label>
+              </div>
 
               <FormMessage />
             </FormItem>
           )}
         />
 
+        {/* TITLE */}
         <FormField
           control={form.control}
           name="title"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Subject</FormLabel>
-              <Input
-                value={field.value}
-                placeholder="Masukkan Judul"
-                onChange={field.onChange}
-              />
-
+              <FormLabel>Judul</FormLabel>
+              <Input {...field} placeholder="Masukkan judul" />
               <FormMessage />
             </FormItem>
           )}
         />
+
+        {/* DETAIL */}
         <FormField
           control={form.control}
           name="detail"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Detail Perencanaan</FormLabel>
-              {type === "wa" ? (
-                <Textarea value={field.value} onChange={field.onChange} />
-              ) : (
-                <CustomEditor
-                  onChange={field.onChange}
-                  initialData={field.value}
-                />
-              )}
+              <FormLabel>Isi Pesan</FormLabel>
+
+              <CustomEditor
+                onChange={field.onChange}
+                initialData={field.value}
+              />
+
               <FormMessage />
             </FormItem>
           )}
         />
-        <div className="flex flex-row gap-2 mt-4 pt-4">
-          <Button
-            size="md"
-            type="button"
-            variant="outline"
-            color="destructive"
-            className="text-xs"
-          >
+
+        {/* BUTTONS */}
+        <div className="flex gap-2 mt-4">
+          <Button variant="outline" type="button">
             Cancel
           </Button>
-          <Button size="md" type="submit" color="primary" className="text-xs">
+          <Button type="submit" color="primary">
             Submit
           </Button>
         </div>
+
+        {/* MODAL SENT */}
         <Dialog open={openModal}>
           <DialogContent>
             <DialogHeader>
-              <DialogTitle>Terkirim !!</DialogTitle>
+              <DialogTitle>Terkirim!</DialogTitle>
             </DialogHeader>
-            <div className="flex flex-col justify-center items-center gap-3 mb-3 text-sm">
+
+            <div className="flex flex-col items-center gap-3">
               <img
                 src="/assets/img/illust-for-broadcast-sent.png"
                 className="w-[70%]"
               />
-              Untuk melihat Email Terkirim silahkan cek menu “Sent”!
+              Pesan telah dikirim sesuai pilihan Anda.
             </div>
-            <DialogFooter className="flex justify-center">
-              {/* <Link
-                href={`/admin/broadcast/campaign-list/detail/${
-                  form.getValues("selected")[0]?.id
-                }`}
-              >
-                <Button type="button" color="success">
-                  Menu "Sent"
-                </Button>
-              </Link> */}
 
-              <Button
-                type="button"
-                onClick={() => router.push("/admin/broadcast")}
-                color="primary"
-              >
-                Okay
+            <DialogFooter className="flex justify-center">
+              <Button onClick={() => router.push("/admin/broadcast")}>
+                OK
               </Button>
             </DialogFooter>
           </DialogContent>
@@ -324,3 +385,330 @@ export default function ContentBlast(props: { type: string }) {
     </Form>
   );
 }
+
+// "use client";
+// import { z } from "zod";
+// import { useForm } from "react-hook-form";
+// import { zodResolver } from "@hookform/resolvers/zod";
+// import {
+//   Form,
+//   FormField,
+//   FormItem,
+//   FormLabel,
+//   FormMessage,
+// } from "@/components/ui/form";
+// import withReactContent from "sweetalert2-react-content";
+// import Swal from "sweetalert2";
+
+// import { Input } from "@/components/ui/input";
+// import { Button } from "@/components/ui/button";
+
+// import {
+//   getLocaleTime,
+//   getLocaleTimestamp,
+//   textEllipsis,
+// } from "@/utils/globals";
+// import {
+//   detailMediaSummary,
+//   getMediaBlastCampaignList,
+//   saveMediaBlastBroadcast,
+//   saveMediaBlastCampaign,
+// } from "@/service/broadcast/broadcast";
+// import { error } from "@/config/swal";
+// import { Link, useRouter } from "@/i18n/routing";
+
+// import { useEffect, useRef, useState } from "react";
+// import { useParams } from "next/navigation";
+// import Select from "react-select";
+// import makeAnimated from "react-select/animated";
+// import { Textarea } from "@/components/ui/textarea";
+// import {
+//   Dialog,
+//   DialogContent,
+//   DialogFooter,
+//   DialogHeader,
+//   DialogTitle,
+// } from "@/components/ui/dialog";
+// import dynamic from "next/dynamic";
+
+// const CustomEditor = dynamic(
+//   () => {
+//     return import("@/components/editor/custom-editor");
+//   },
+//   { ssr: false }
+// );
+
+// const animatedComponent = makeAnimated();
+
+// const FormSchema = z.object({
+//   title: z.string({
+//     required_error: "Required",
+//   }),
+//   url: z.string({
+//     required_error: "Required",
+//   }),
+//   thumbnail: z.string({
+//     required_error: "Required",
+//   }),
+//   detail: z.string({
+//     required_error: "Required",
+//   }),
+//   selected: z
+//     .array(
+//       z.object({
+//         id: z.number(),
+//         label: z.string(),
+//         value: z.string(),
+//       })
+//     )
+//     .refine((value) => value.length > 0, {
+//       message: "Required",
+//     }),
+// });
+
+// interface Campaign {
+//   id: string;
+//   name: string;
+// }
+
+// export default function ContentBlast(props: { type: string }) {
+//   const editor = useRef(null);
+//   const id = useParams()?.id;
+//   const MySwal = withReactContent(Swal);
+//   const router = useRouter();
+//   const { type } = props;
+
+//   const [dataSelectCampaign, setDataSelectCampaign] = useState<Campaign[]>([]);
+//   const [openModal, setOpenModal] = useState(false);
+
+//   const form = useForm<z.infer<typeof FormSchema>>({
+//     resolver: zodResolver(FormSchema),
+//     defaultValues: { selected: [], detail: "" },
+//   });
+
+//   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+//     if (form.getValues("detail") == "") {
+//       form.setError("detail", {
+//         type: "manual",
+//         message: "Required",
+//       });
+//     } else {
+//       MySwal.fire({
+//         title: "Simpan Data",
+//         text: "Apakah Anda yakin ingin menyimpan data ini?",
+//         icon: "warning",
+//         showCancelButton: true,
+//         cancelButtonColor: "#d33",
+//         confirmButtonColor: "#3085d6",
+//         confirmButtonText: "Simpan",
+//       }).then((result) => {
+//         if (result.isConfirmed) {
+//           save(data);
+//         }
+//       });
+//     }
+//   };
+
+//   const save = async (data: z.infer<typeof FormSchema>) => {
+//     const selectedCampaign = form.getValues("selected");
+
+//     for (let i = 0; i < selectedCampaign.length; i++) {
+//       const reqData = {
+//         mediaUploadId: id,
+//         mediaBlastCampaignId: selectedCampaign[i].id,
+//         subject: type == "wa" ? `*${data.title}*` : data.title,
+//         body: data.detail?.replace(/\n/g, ""),
+//         type: type,
+//         isScheduled: false,
+//         thumbnail: data?.thumbnail,
+//         sendDate: getLocaleTimestamp(new Date()),
+//         sendTime: getLocaleTime(new Date()),
+//         contentUrl: data.url,
+//       };
+
+//       console.log("req =>", reqData);
+//       const response = await saveMediaBlastBroadcast(reqData);
+//     }
+//     setOpenModal(true);
+//   };
+
+//   useEffect(() => {
+//     async function initState() {
+//       const response = await detailMediaSummary(String(id));
+//       const details = response?.data?.data;
+//       let pageUrl = details?.pageUrl || "";
+//       if (pageUrl.includes("mediahub.polri.go.id")) {
+//         pageUrl = pageUrl.replace(
+//           /(\.id)(\/|$)/,
+//           (match: any, p1: any, p2: any) => {
+//             return p2.startsWith("/in") ? match : `${p1}/in${p2}`;
+//           }
+//         );
+//       }
+//       if (details != undefined) {
+//         form.setValue("thumbnail", details.smallThumbnailLink);
+//         let body = `<div><p>Berita hari ini !!!</p>
+//   <div style='margin-top:20px;border:1px solid;border-radius:10px;width:500px;background-color:#f7f7f7'>
+//     <div>
+//       <img style='width:500px;height:auto;border-radius:10px;object-fit:cover' src='${
+//         details?.smallThumbnailLink
+//       }'>
+//     </div>
+//     <a style='padding:5px 20px;margin:0;text-decoration:none' href='${pageUrl}'>${pageUrl}</a>
+//     <h3 style='padding:5px 20px;margin:0'>${details?.title}</h3>
+//     <p style='padding:0 20px;margin:0;margin-bottom:10px'>
+//       ${textEllipsis(details?.description, 150)}
+//     </p>
+//   </div>
+// </div>`;
+//         form.setValue("title", `${details?.title}`);
+//         form.setValue(
+//           "url",
+//           details?.pageUrl || "https://mediahub.polri.go.id"
+//         );
+//         if (type == "wa") {
+//           body = `${textEllipsis(details?.description, 150)}`;
+//           form.setValue("detail", body);
+//         } else {
+//           form.setValue("detail", body);
+//         }
+//       }
+//     }
+
+//     async function getCampaign() {
+//       const response = await getMediaBlastCampaignList();
+//       const campaign = response?.data?.data?.content;
+//       handleLabelCampaign(campaign);
+//       console.log(campaign);
+//     }
+
+//     initState();
+//     getCampaign();
+//   }, [id]);
+
+//   function handleLabelCampaign(data: any) {
+//     const optionArr: any = [];
+
+//     data.map((option: any) => {
+//       optionArr.push({
+//         id: option.id,
+//         label: option.title,
+//         value: option.title,
+//       });
+//     });
+//     console.log("option arr", optionArr);
+//     setDataSelectCampaign(optionArr);
+//   }
+
+//   return (
+//     <Form {...form}>
+//       <form
+//         onSubmit={form.handleSubmit(onSubmit)}
+//         className="space-y-3 bg-white rounded-sm p-4"
+//       >
+//         <p className="fonnt-semibold">Broadcast</p>
+//         <FormField
+//           control={form.control}
+//           name="selected"
+//           render={({ field }) => (
+//             <FormItem>
+//               <FormLabel>Subject</FormLabel>
+//               <Select
+//                 className="z-50"
+//                 options={dataSelectCampaign}
+//                 closeMenuOnSelect={false}
+//                 components={animatedComponent}
+//                 onChange={field.onChange}
+//                 isMulti
+//               />
+
+//               <FormMessage />
+//             </FormItem>
+//           )}
+//         />
+
+//         <FormField
+//           control={form.control}
+//           name="title"
+//           render={({ field }) => (
+//             <FormItem>
+//               <FormLabel>Subject</FormLabel>
+//               <Input
+//                 value={field.value}
+//                 placeholder="Masukkan Judul"
+//                 onChange={field.onChange}
+//               />
+
+//               <FormMessage />
+//             </FormItem>
+//           )}
+//         />
+//         <FormField
+//           control={form.control}
+//           name="detail"
+//           render={({ field }) => (
+//             <FormItem>
+//               <FormLabel>Detail Perencanaan</FormLabel>
+//               {type === "wa" ? (
+//                 <Textarea value={field.value} onChange={field.onChange} />
+//               ) : (
+//                 <CustomEditor
+//                   onChange={field.onChange}
+//                   initialData={field.value}
+//                 />
+//               )}
+//               <FormMessage />
+//             </FormItem>
+//           )}
+//         />
+//         <div className="flex flex-row gap-2 mt-4 pt-4">
+//           <Button
+//             size="md"
+//             type="button"
+//             variant="outline"
+//             color="destructive"
+//             className="text-xs"
+//           >
+//             Cancel
+//           </Button>
+//           <Button size="md" type="submit" color="primary" className="text-xs">
+//             Submit
+//           </Button>
+//         </div>
+//         <Dialog open={openModal}>
+//           <DialogContent>
+//             <DialogHeader>
+//               <DialogTitle>Terkirim !!</DialogTitle>
+//             </DialogHeader>
+//             <div className="flex flex-col justify-center items-center gap-3 mb-3 text-sm">
+//               <img
+//                 src="/assets/img/illust-for-broadcast-sent.png"
+//                 className="w-[70%]"
+//               />
+//               Untuk melihat Email Terkirim silahkan cek menu “Sent”!
+//             </div>
+//             <DialogFooter className="flex justify-center">
+//               {/* <Link
+//                 href={`/admin/broadcast/campaign-list/detail/${
+//                   form.getValues("selected")[0]?.id
+//                 }`}
+//               >
+//                 <Button type="button" color="success">
+//                   Menu "Sent"
+//                 </Button>
+//               </Link> */}
+
+//               <Button
+//                 type="button"
+//                 onClick={() => router.push("/admin/broadcast")}
+//                 color="primary"
+//               >
+//                 Okay
+//               </Button>
+//             </DialogFooter>
+//           </DialogContent>
+//         </Dialog>
+//       </form>
+//     </Form>
+//   );
+// }

components/form/communication/escalation-forward-form.tsx

@@ -139,17 +139,27 @@ export default function FormQuestionsForward() {
     formState: { errors },
   } = useForm({
     resolver: zodResolver(taskSchema),
+    defaultValues: {
+      title: "",
+      description: "",
+    },
   });
 
   useEffect(() => {
     async function initState() {
       const response = await getQuestionTicket(id);
-      setDetail(response?.data?.data);
+      const data = response?.data?.data;
+      setDetail(data);
 
-      if (response?.data !== null) {
-        setDetailTickets(response?.data?.data);
+      if (data) {
+        reset({
+          title: data.message ?? "",
+          description: data.emergencyIssue?.description ?? "",
+        });
       }
 
+      setDetailTickets(data);
+
       if (detailTickets?.emergencyIssue) {
         reset({
           title: detailTickets.emergencyIssue.title || "",
@@ -301,14 +311,15 @@ export default function FormQuestionsForward() {
                     {` `}
                     mengirimkan pesan untuk{` `}
                     <Link
-                      href={
-                        detail?.feed
-                          ? detail?.feed?.permalink_url == undefined
-                            ? detail?.feedUrl
-                            : detail?.feed?.permalink_url
-                          : ""
-                      }
-                      target="_blank"
+                      // href={
+                      //   detail?.feed
+                      //     ? detail?.feed?.permalink_url == undefined
+                      //       ? detail?.feedUrl
+                      //       : detail?.feed?.permalink_url
+                      //     : ""
+                      // }
+                      // target="_blank"
+                      href={detail?.feedUrl}
                       className="font-bold"
                     >
                       {detail?.message}
@@ -334,7 +345,7 @@ export default function FormQuestionsForward() {
             <p className="mx-3 mt-3">Properties</p>
             <div className="space-y-2 px-3">
               <Label>Judul</Label>
-              <Controller
+              {/* <Controller
                 control={control}
                 name="title"
                 render={({ field }) => (
@@ -346,6 +357,18 @@ export default function FormQuestionsForward() {
                     placeholder="Masukkan judul"
                   />
                 )}
+              /> */}
+              <Controller
+                control={control}
+                name="title"
+                render={({ field }) => (
+                  <Input
+                    size="md"
+                    type="text"
+                    {...field}
+                    placeholder="Masukkan judul"
+                  />
+                )}
               />
             </div>
 

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

@@ -115,7 +115,7 @@ const ViewEditor = dynamic(
   () => {
     return import("@/components/editor/view-editor");
   },
-  { ssr: false }
+  { ssr: false },
 );
 
 interface Destination {
@@ -198,6 +198,12 @@ export default function FormAudioDetail() {
       satker: boolean;
     }>
   >([]);
+  const [creatorLevelNumber, setCreatorLevelNumber] = useState<number | null>(
+    null,
+  );
+  const isContentFromSatker = creatorLevelNumber === 3;
+  const isContentFromMabesOrPolda =
+    creatorLevelNumber === 1 || creatorLevelNumber === 2;
 
   useEffect(() => {
     if (Number(userLevelId) === 216 && Number(roleId) === 3) {
@@ -209,7 +215,7 @@ export default function FormAudioDetail() {
   const handleFileUnitChange = (
     fileIndex: number,
     key: keyof typeof unitSelection,
-    value: boolean
+    value: boolean,
   ) => {
     setFileUnitSelections((prev) => {
       const newSelections = [...prev];
@@ -229,7 +235,7 @@ export default function FormAudioDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[fileIndex] || new Set()
+            newArray[fileIndex] || new Set(),
           );
 
           if (value) {
@@ -260,12 +266,12 @@ export default function FormAudioDetail() {
               (item: any) =>
                 item.levelNumber === 2 &&
                 item.name !== "SATKER POLRI" &&
-                currentFileCheckedLevels.has(Number(item.id))
+                currentFileCheckedLevels.has(Number(item.id)),
             );
 
           if (!hasSelectedPolda) {
             alert(
-              "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
+              "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES.",
             );
             return prev; // Batalkan perubahan
           }
@@ -302,7 +308,7 @@ export default function FormAudioDetail() {
   useEffect(() => {
     if (detail?.assignedToTopLevel) {
       const outputSet = new Set(
-        detail.assignedToTopLevel.split(",").map(Number)
+        detail.assignedToTopLevel.split(",").map(Number),
       );
       setUnitSelection({
         semua: outputSet.has(0),
@@ -327,7 +333,7 @@ export default function FormAudioDetail() {
             acc[polda.id] = false;
             return acc;
           },
-          {}
+          {},
         );
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
@@ -362,7 +368,7 @@ export default function FormAudioDetail() {
 
   const handleUnitChange = (
     key: keyof typeof unitSelection,
-    value: boolean
+    value: boolean,
   ) => {
     if (key === "semua") {
       const newState = {
@@ -472,7 +478,7 @@ export default function FormAudioDetail() {
 
   const handleCheckboxChange = (id: number) => {
     setSelectedPublishers((prev) =>
-      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
     );
   };
 
@@ -494,7 +500,7 @@ export default function FormAudioDetail() {
 
       if (scheduleId && scheduleType === "3") {
         const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
+          o.name.toLowerCase().includes("pers rilis"),
         );
 
         if (findCategory) {
@@ -542,6 +548,9 @@ export default function FormAudioDetail() {
         const details = response?.data?.data;
         setFiles(details?.files);
         setDetail(details);
+        if (details?.uploadedBy?.userLevel?.levelNumber) {
+          setCreatorLevelNumber(details.uploadedBy.userLevel.levelNumber);
+        }
         setMain({
           type: details?.fileType.name,
           url: details?.files[0]?.url,
@@ -552,14 +561,14 @@ export default function FormAudioDetail() {
 
         if (details?.assignedToLevel) {
           const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
+            details.assignedToLevel.split(",").map(Number),
           );
           setCheckedLevels(levels);
         }
 
         if (details?.publishedForObject) {
           const publisherIds = details?.publishedForObject.map(
-            (obj: any) => obj.id
+            (obj: any) => obj.id,
           );
           setSelectedPublishers(publisherIds);
         }
@@ -709,7 +718,7 @@ export default function FormAudioDetail() {
   const setupPlacement = (
     index: number,
     placement: string,
-    checked: boolean
+    checked: boolean,
   ) => {
     let temp = [...filePlacements];
     if (checked) {
@@ -720,7 +729,7 @@ export default function FormAudioDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[index] || new Set()
+            newArray[index] || new Set(),
           );
 
           // Checklist semua item di modal
@@ -770,7 +779,7 @@ export default function FormAudioDetail() {
         // Hanya auto-checklist "all" jika polda, polres, dan mabes ter-checklist
         // JANGAN include satker dalam perhitungan auto "all"
         const nonSatkerItems = now.filter(
-          (item) => item !== "satker" && item !== "all"
+          (item) => item !== "satker" && item !== "all",
         );
         if (nonSatkerItems.length === 3 && !now.includes("all")) {
           now.push("all");
@@ -785,7 +794,7 @@ export default function FormAudioDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[index] || new Set()
+            newArray[index] || new Set(),
           );
 
           // Unchecklist semua item di modal
@@ -819,7 +828,7 @@ export default function FormAudioDetail() {
         // Hapus "all" jika tidak semua item ter-checklist
         if (now.includes("all")) {
           const nonSatkerItems = now.filter(
-            (item) => item !== "satker" && item !== "all"
+            (item) => item !== "satker" && item !== "all",
           );
           if (nonSatkerItems.length < 3) {
             const newData = now.filter((b) => b !== "all");
@@ -838,7 +847,7 @@ export default function FormAudioDetail() {
     type: string,
     url: string,
     names: string,
-    format: string
+    format: string,
   ) => {
     console.log("Test 3 :", type, url, names, format);
     setMain({
@@ -873,7 +882,7 @@ export default function FormAudioDetail() {
   const updateModalChecklistLevels = (
     fileIndex: number,
     placement: string,
-    checked: boolean
+    checked: boolean,
   ) => {
     if (!listDest || listDest.length === 0) return;
 
@@ -906,7 +915,7 @@ export default function FormAudioDetail() {
         } else if (placement === "satker") {
           // Checklist SATKER POLRI dan semua sub-item di bawahnya
           const satkerItem: any = listDest.find(
-            (item: any) => item.name === "SATKER POLRI"
+            (item: any) => item.name === "SATKER POLRI",
           );
           if (satkerItem) {
             currentFileLevels.add(Number(satkerItem.id));
@@ -942,7 +951,7 @@ export default function FormAudioDetail() {
         } else if (placement === "satker") {
           // Unchecklist SATKER POLRI dan semua sub-item di bawahnya
           const satkerItem: any = listDest.find(
-            (item: any) => item.name === "SATKER POLRI"
+            (item: any) => item.name === "SATKER POLRI",
           );
           if (satkerItem) {
             currentFileLevels.delete(Number(satkerItem.id));
@@ -975,7 +984,7 @@ export default function FormAudioDetail() {
   // Fungsi untuk mengupdate checklist levels untuk file tertentu
   const handleFileCheckboxChangePlacement = (
     fileIndex: number,
-    levelId: number
+    levelId: number,
   ) => {
     setFileCheckedLevels((prev) => {
       const newArray = [...prev];
@@ -987,7 +996,7 @@ export default function FormAudioDetail() {
 
         // Jika ini adalah POLDA yang di-unchecklist, unchecklist juga semua polres di bawahnya
         const poldaItem = listDest.find(
-          (item: any) => Number(item.id) === levelId
+          (item: any) => Number(item.id) === levelId,
         ) as any;
         if (
           poldaItem &&
@@ -1010,7 +1019,7 @@ export default function FormAudioDetail() {
 
         // Jika ini adalah SATKER POLRI yang di-checklist, checklist juga semua sub-item di bawahnya
         const satkerItem = listDest.find(
-          (item: any) => Number(item.id) === levelId
+          (item: any) => Number(item.id) === levelId,
         ) as any;
         if (satkerItem && satkerItem.name === "SATKER POLRI") {
           // Checklist semua sub-item di bawah SATKER POLRI (bukan POLRES)
@@ -1041,7 +1050,7 @@ export default function FormAudioDetail() {
 
       // Hitung total POLDA yang ada (bukan SATKER POLRI)
       const totalPoldaCount = listDest.filter(
-        (item: any) => item.levelNumber === 2 && item.name !== "SATKER POLRI"
+        (item: any) => item.levelNumber === 2 && item.name !== "SATKER POLRI",
       ).length;
 
       // Hitung berapa banyak POLDA yang ter-checklist (bukan SATKER POLRI)
@@ -1068,7 +1077,7 @@ export default function FormAudioDetail() {
           }
           return total;
         },
-        0
+        0,
       );
 
       // Hitung berapa banyak POLRES yang ter-checklist
@@ -1078,7 +1087,7 @@ export default function FormAudioDetail() {
           return (
             total +
             item.subDestination.filter((sub: any) =>
-              currentFileLevels.has(Number(sub.id))
+              currentFileLevels.has(Number(sub.id)),
             ).length
           );
         }
@@ -1087,7 +1096,7 @@ export default function FormAudioDetail() {
 
       // Cek apakah SATKER POLRI ter-checklist
       const satkerItem = listDest.find(
-        (item: any) => item.name === "SATKER POLRI"
+        (item: any) => item.name === "SATKER POLRI",
       );
       const isSatkerChecked =
         satkerItem && currentFileLevels.has(Number(satkerItem.id));
@@ -1121,7 +1130,7 @@ export default function FormAudioDetail() {
 
       // Cek apakah semua sub-items sudah ter-checklist
       const allSubItemsChecked = polda.subDestination?.every((sub: any) =>
-        currentFileLevels.has(Number(sub.id))
+        currentFileLevels.has(Number(sub.id)),
       );
 
       if (allSubItemsChecked) {
@@ -1204,7 +1213,7 @@ export default function FormAudioDetail() {
                         {detail &&
                           !categories.find(
                             (cat) =>
-                              String(cat.id) === String(detail.category.id)
+                              String(cat.id) === String(detail.category.id),
                           ) && (
                             <SelectItem
                               key={String(detail.category.id)}
@@ -1464,7 +1473,7 @@ export default function FormAudioDetail() {
                                     Tingkat Distribusi:
                                   </p>
                                   <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-                                    {[
+                                    {/* {[
                                       { key: "semua", label: "Semua" },
                                       { key: "nasional", label: "Nasional" },
                                       { key: "wilayah", label: "Wilayah" },
@@ -1472,6 +1481,39 @@ export default function FormAudioDetail() {
                                         key: "international",
                                         label: "Internasional",
                                       },
+                                    ] */}
+                                    {[
+                                      { key: "semua", label: "Semua" },
+
+                                      ...(isContentFromMabesOrPolda
+                                        ? [
+                                            {
+                                              key: "nasional",
+                                              label: "Nasional",
+                                            },
+                                            {
+                                              key: "international",
+                                              label: "Internasional",
+                                            },
+                                            {
+                                              key: "wilayah",
+                                              label: "Wilayah",
+                                            },
+                                          ]
+                                        : []),
+
+                                      ...(isContentFromSatker
+                                        ? [
+                                            {
+                                              key: "nasional",
+                                              label: "Nasional",
+                                            },
+                                            {
+                                              key: "international",
+                                              label: "Internasional",
+                                            },
+                                          ]
+                                        : []),
                                     ].map((item, idx) => (
                                       <div
                                         key={item.key}
@@ -1488,12 +1530,12 @@ export default function FormAudioDetail() {
                                             handleFileUnitChange(
                                               index,
                                               item.key as keyof typeof unitSelection,
-                                              value as boolean
+                                              value as boolean,
                                             );
                                             setupPlacement(
                                               index,
                                               item.key,
-                                              Boolean(value)
+                                              Boolean(value),
                                             );
                                           }}
                                         />
@@ -1509,251 +1551,262 @@ export default function FormAudioDetail() {
                                 </div>
 
                                 {/* Detail Wilayah */}
-                                {fileUnitSelections[index]?.wilayah && (
-                                  <div className="border-t border-gray-200 pt-2">
-                                    <p className="text-sm font-medium text-gray-700 mb-2">
-                                      Detail Wilayah:
-                                    </p>
+                                {/* {fileUnitSelections[index]?.wilayah && ( */}
+                                {!isContentFromSatker &&
+                                  fileUnitSelections[index]?.wilayah && (
+                                    <div className="border-t border-gray-200 pt-2">
+                                      <p className="text-sm font-medium text-gray-700 mb-2">
+                                        Detail Wilayah:
+                                      </p>
 
-                                    {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
-                                    <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-                                      {[
-                                        { key: "polda", label: "POLDA" },
-                                        { key: "polres", label: "POLRES" },
-                                        { key: "satker", label: "SATKER" },
-                                      ].map((item, idx) => (
-                                        <div
-                                          key={item.key}
-                                          className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
-                                        >
-                                          <Checkbox
-                                            id={`${item.key}-${index}`}
-                                            checked={
-                                              fileUnitSelections[index]?.[
-                                                item.key as keyof typeof unitSelection
-                                              ] || false
-                                            }
-                                            onCheckedChange={(value) => {
-                                              handleFileUnitChange(
-                                                index,
-                                                item.key as keyof typeof unitSelection,
-                                                value as boolean
-                                              );
-                                              setupPlacement(
-                                                index,
-                                                item.key,
-                                                Boolean(value)
-                                              );
-                                            }}
-                                          />
-                                          <Label
-                                            htmlFor={`${item.key}-${index}`}
-                                            className="text-sm font-medium cursor-pointer"
+                                      {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
+                                      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+                                        {[
+                                          { key: "polda", label: "POLDA" },
+                                          { key: "polres", label: "POLRES" },
+                                          { key: "satker", label: "SATKER" },
+                                        ].map((item, idx) => (
+                                          <div
+                                            key={item.key}
+                                            className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
                                           >
-                                            {item.label}
-                                          </Label>
-                                        </div>
-                                      ))}
-
-                                      {/* Tombol Kustom sejajar dengan checkbox */}
-                                      <div className="flex items-center justify-center p-3">
-                                        <Dialog>
-                                          <DialogTrigger asChild>
-                                            <Button
-                                              variant="outline"
-                                              size="sm"
-                                              className="gap-2"
+                                            <Checkbox
+                                              id={`${item.key}-${index}`}
+                                              checked={
+                                                fileUnitSelections[index]?.[
+                                                  item.key as keyof typeof unitSelection
+                                                ] || false
+                                              }
+                                              onCheckedChange={(value) => {
+                                                handleFileUnitChange(
+                                                  index,
+                                                  item.key as keyof typeof unitSelection,
+                                                  value as boolean,
+                                                );
+                                                setupPlacement(
+                                                  index,
+                                                  item.key,
+                                                  Boolean(value),
+                                                );
+                                              }}
+                                            />
+                                            <Label
+                                              htmlFor={`${item.key}-${index}`}
+                                              className="text-sm font-medium cursor-pointer"
                                             >
-                                              <Icon
-                                                icon="material-symbols:tune"
-                                                width={16}
-                                                height={16}
-                                              />
-                                              {t("custom", {
-                                                defaultValue: "Kustom",
-                                              })}
-                                            </Button>
-                                          </DialogTrigger>
-                                          <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
-                                            <DialogHeader className="border-b border-gray-200 pb-4">
-                                              <DialogTitle className="text-lg font-semibold">
-                                                Daftar Wilayah POLDA dan POLRES
-                                              </DialogTitle>
-                                            </DialogHeader>
-                                            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
-                                              {listDest.map((polda: any) => (
-                                                <div
-                                                  key={polda.id}
-                                                  className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
-                                                >
-                                                  {/* Header POLDA */}
-                                                  <div className="flex items-center justify-between">
-                                                    <Label className="flex items-center gap-3 flex-1 cursor-pointer">
-                                                      <Checkbox
-                                                        checked={
-                                                          fileCheckedLevels[
-                                                            index
-                                                          ]?.has(
-                                                            Number(polda.id)
-                                                          ) || false
-                                                        }
-                                                        onCheckedChange={() =>
-                                                          handleFileCheckboxChangePlacement(
-                                                            index,
-                                                            Number(polda.id)
-                                                          )
-                                                        }
-                                                      />
-                                                      <span className="font-semibold text-gray-900 text-sm">
-                                                        {polda.name}
-                                                      </span>
-                                                    </Label>
-                                                    {polda.subDestination && (
-                                                      <button
-                                                        onClick={(e) => {
-                                                          e.preventDefault();
-                                                          e.stopPropagation();
-                                                          toggleExpand(
-                                                            polda.id
-                                                          );
-                                                        }}
-                                                        className="p-1 hover:bg-gray-100 rounded-md transition-colors"
-                                                      >
-                                                        <Icon
-                                                          icon={
-                                                            expandedPolda[
-                                                              polda.id
-                                                            ]
-                                                              ? "mdi:chevron-up"
-                                                              : "mdi:chevron-down"
-                                                          }
-                                                          width={16}
-                                                          height={16}
-                                                        />
-                                                      </button>
-                                                    )}
-                                                  </div>
+                                              {item.label}
+                                            </Label>
+                                          </div>
+                                        ))}
 
-                                                  {/* Sub-items */}
-                                                  {polda.subDestination &&
-                                                    expandedPolda[polda.id] && (
-                                                      <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
-                                                        {/* Tombol Pilih Semua untuk sub-items */}
-                                                        <div className="mb-2 flex justify-start">
-                                                          {(() => {
-                                                            const allSubItemsChecked =
-                                                              polda.subDestination?.every(
-                                                                (sub: any) =>
-                                                                  fileCheckedLevels[
-                                                                    index
-                                                                  ]?.has(
-                                                                    Number(
-                                                                      sub.id
-                                                                    )
-                                                                  )
-                                                              );
-                                                            return (
-                                                              <Button
-                                                                size="sm"
-                                                                variant="outline"
-                                                                className="text-xs h-6 px-2"
-                                                                onClick={() =>
-                                                                  handleSelectAllSubItems(
-                                                                    index,
-                                                                    polda
-                                                                  )
-                                                                }
-                                                              >
-                                                                {allSubItemsChecked ? (
-                                                                  <>
-                                                                    <Icon
-                                                                      icon="material-symbols:check-indeterminate-small"
-                                                                      width={12}
-                                                                      height={
-                                                                        12
-                                                                      }
-                                                                      className="mr-1"
-                                                                    />
-                                                                    Batal Semua
-                                                                  </>
-                                                                ) : (
-                                                                  <>
-                                                                    <Icon
-                                                                      icon="material-symbols:check-all"
-                                                                      width={12}
-                                                                      height={
-                                                                        12
-                                                                      }
-                                                                      className="mr-1"
-                                                                    />
-                                                                    Pilih Semua
-                                                                  </>
-                                                                )}
-                                                              </Button>
+                                        {/* Tombol Kustom sejajar dengan checkbox */}
+                                        <div className="flex items-center justify-center p-3">
+                                          <Dialog>
+                                            <DialogTrigger asChild>
+                                              <Button
+                                                variant="outline"
+                                                size="sm"
+                                                className="gap-2"
+                                              >
+                                                <Icon
+                                                  icon="material-symbols:tune"
+                                                  width={16}
+                                                  height={16}
+                                                />
+                                                {t("custom", {
+                                                  defaultValue: "Kustom",
+                                                })}
+                                              </Button>
+                                            </DialogTrigger>
+                                            <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
+                                              <DialogHeader className="border-b border-gray-200 pb-4">
+                                                <DialogTitle className="text-lg font-semibold">
+                                                  Daftar Wilayah POLDA dan
+                                                  POLRES
+                                                </DialogTitle>
+                                              </DialogHeader>
+                                              <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
+                                                {listDest.map((polda: any) => (
+                                                  <div
+                                                    key={polda.id}
+                                                    className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
+                                                  >
+                                                    {/* Header POLDA */}
+                                                    <div className="flex items-center justify-between">
+                                                      <Label className="flex items-center gap-3 flex-1 cursor-pointer">
+                                                        <Checkbox
+                                                          checked={
+                                                            fileCheckedLevels[
+                                                              index
+                                                            ]?.has(
+                                                              Number(polda.id),
+                                                            ) || false
+                                                          }
+                                                          onCheckedChange={() =>
+                                                            handleFileCheckboxChangePlacement(
+                                                              index,
+                                                              Number(polda.id),
+                                                            )
+                                                          }
+                                                        />
+                                                        <span className="font-semibold text-gray-900 text-sm">
+                                                          {polda.name}
+                                                        </span>
+                                                      </Label>
+                                                      {polda.subDestination && (
+                                                        <button
+                                                          onClick={(e) => {
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                            toggleExpand(
+                                                              polda.id,
                                                             );
-                                                          })()}
-                                                        </div>
-                                                        <div className="space-y-1">
-                                                          {polda.subDestination.map(
-                                                            (sub: any) => (
-                                                              <Label
-                                                                key={sub.id}
-                                                                className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
-                                                              >
-                                                                <Checkbox
-                                                                  checked={
+                                                          }}
+                                                          className="p-1 hover:bg-gray-100 rounded-md transition-colors"
+                                                        >
+                                                          <Icon
+                                                            icon={
+                                                              expandedPolda[
+                                                                polda.id
+                                                              ]
+                                                                ? "mdi:chevron-up"
+                                                                : "mdi:chevron-down"
+                                                            }
+                                                            width={16}
+                                                            height={16}
+                                                          />
+                                                        </button>
+                                                      )}
+                                                    </div>
+
+                                                    {/* Sub-items */}
+                                                    {polda.subDestination &&
+                                                      expandedPolda[
+                                                        polda.id
+                                                      ] && (
+                                                        <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
+                                                          {/* Tombol Pilih Semua untuk sub-items */}
+                                                          <div className="mb-2 flex justify-start">
+                                                            {(() => {
+                                                              const allSubItemsChecked =
+                                                                polda.subDestination?.every(
+                                                                  (sub: any) =>
                                                                     fileCheckedLevels[
                                                                       index
                                                                     ]?.has(
                                                                       Number(
-                                                                        sub.id
-                                                                      )
-                                                                    ) || false
-                                                                  }
-                                                                  onCheckedChange={() =>
-                                                                    handleFileCheckboxChangePlacement(
+                                                                        sub.id,
+                                                                      ),
+                                                                    ),
+                                                                );
+                                                              return (
+                                                                <Button
+                                                                  size="sm"
+                                                                  variant="outline"
+                                                                  className="text-xs h-6 px-2"
+                                                                  onClick={() =>
+                                                                    handleSelectAllSubItems(
                                                                       index,
-                                                                      Number(
-                                                                        sub.id
-                                                                      )
+                                                                      polda,
                                                                     )
                                                                   }
-                                                                />
-                                                                <span className="text-gray-700">
-                                                                  {sub.name}
-                                                                </span>
-                                                              </Label>
-                                                            )
-                                                          )}
+                                                                >
+                                                                  {allSubItemsChecked ? (
+                                                                    <>
+                                                                      <Icon
+                                                                        icon="material-symbols:check-indeterminate-small"
+                                                                        width={
+                                                                          12
+                                                                        }
+                                                                        height={
+                                                                          12
+                                                                        }
+                                                                        className="mr-1"
+                                                                      />
+                                                                      Batal
+                                                                      Semua
+                                                                    </>
+                                                                  ) : (
+                                                                    <>
+                                                                      <Icon
+                                                                        icon="material-symbols:check-all"
+                                                                        width={
+                                                                          12
+                                                                        }
+                                                                        height={
+                                                                          12
+                                                                        }
+                                                                        className="mr-1"
+                                                                      />
+                                                                      Pilih
+                                                                      Semua
+                                                                    </>
+                                                                  )}
+                                                                </Button>
+                                                              );
+                                                            })()}
+                                                          </div>
+                                                          <div className="space-y-1">
+                                                            {polda.subDestination.map(
+                                                              (sub: any) => (
+                                                                <Label
+                                                                  key={sub.id}
+                                                                  className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
+                                                                >
+                                                                  <Checkbox
+                                                                    checked={
+                                                                      fileCheckedLevels[
+                                                                        index
+                                                                      ]?.has(
+                                                                        Number(
+                                                                          sub.id,
+                                                                        ),
+                                                                      ) || false
+                                                                    }
+                                                                    onCheckedChange={() =>
+                                                                      handleFileCheckboxChangePlacement(
+                                                                        index,
+                                                                        Number(
+                                                                          sub.id,
+                                                                        ),
+                                                                      )
+                                                                    }
+                                                                  />
+                                                                  <span className="text-gray-700">
+                                                                    {sub.name}
+                                                                  </span>
+                                                                </Label>
+                                                              ),
+                                                            )}
+                                                          </div>
                                                         </div>
-                                                      </div>
-                                                    )}
-                                                </div>
-                                              ))}
-                                            </div>
-                                            <div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
-                                              <DialogClose asChild>
-                                                <Button variant="outline">
-                                                  {t("cancel", {
-                                                    defaultValue: "Batal",
-                                                  })}
-                                                </Button>
-                                              </DialogClose>
-                                              <DialogClose asChild>
-                                                <Button>
-                                                  {/* {t("save", {
+                                                      )}
+                                                  </div>
+                                                ))}
+                                              </div>
+                                              <div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
+                                                <DialogClose asChild>
+                                                  <Button variant="outline">
+                                                    {t("cancel", {
+                                                      defaultValue: "Batal",
+                                                    })}
+                                                  </Button>
+                                                </DialogClose>
+                                                <DialogClose asChild>
+                                                  <Button>
+                                                    {/* {t("save", {
                                                     defaultValue: "Simpan",
                                                   })} */}
-                                                  Simpan
-                                                </Button>
-                                              </DialogClose>
-                                            </div>
-                                          </DialogContent>
-                                        </Dialog>
+                                                    Simpan
+                                                  </Button>
+                                                </DialogClose>
+                                              </div>
+                                            </DialogContent>
+                                          </Dialog>
+                                        </div>
                                       </div>
                                     </div>
-                                  </div>
-                                )}
+                                  )}
                               </div>
                             </div>
                           ) : (
@@ -1832,7 +1885,7 @@ export default function FormAudioDetail() {
                                   >
                                     {template}
                                   </Button>
-                                )
+                                ),
                               )}
                             </div>
                           </div>

components/form/content/audio-form.tsx

@@ -731,7 +731,7 @@ export default function FormAudio() {
     setIsStartUpload(true);
     setProgressList(progressInfoArr);
 
-    close();
+    // close();
     // showProgress();
     files.map(async (item: any, index: number) => {
       await uploadResumableFile(index, String(id), item, "0");
@@ -841,6 +841,8 @@ export default function FormAudio() {
     }
     if (counter == progressInfo.length) {
       setIsStartUpload(false);
+      close();
+
       // hideProgress();
       Cookies.remove("idCreate");
       successSubmit("/in/contributor/content/audio");
@@ -1804,7 +1806,7 @@ export default function FormAudio() {
           </Card>
           <div className="flex flex-row justify-end gap-3">
             <div className="mt-4">
-              {levelNumber !== "2" && levelNumber !== "3" && (
+              {levelNumber !== "2" && (
                 <Button type="submit" color="primary">
                   {t("submit", { defaultValue: "Submit" })}
                 </Button>

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

@@ -115,7 +115,7 @@ const ViewEditor = dynamic(
   () => {
     return import("@/components/editor/view-editor");
   },
-  { ssr: false }
+  { ssr: false },
 );
 
 interface Destination {
@@ -172,6 +172,12 @@ export default function FormImageDetail() {
       satker: boolean;
     }>
   >([]);
+  const [creatorLevelNumber, setCreatorLevelNumber] = useState<number | null>(
+    null,
+  );
+  const isContentFromSatker = creatorLevelNumber === 3;
+  const isContentFromMabesOrPolda =
+    creatorLevelNumber === 1 || creatorLevelNumber === 2;
 
   useEffect(() => {
     if (Number(userLevelId) === 216 && Number(roleId) === 3) {
@@ -200,7 +206,7 @@ export default function FormImageDetail() {
   const [files, setFiles] = useState<FileType[]>([]);
   const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
   const [expandedPolda, setExpandedPolda] = useState<Record<number, boolean>>(
-    {}
+    {},
   );
 
   // State untuk melacak apakah perubahan berasal dari checkbox utama
@@ -231,7 +237,7 @@ export default function FormImageDetail() {
   useEffect(() => {
     if (detail?.assignedToTopLevel) {
       const outputSet = new Set(
-        detail.assignedToTopLevel.split(",").map(Number)
+        detail.assignedToTopLevel.split(",").map(Number),
       );
       setUnitSelection({
         semua: outputSet.has(0),
@@ -260,7 +266,7 @@ export default function FormImageDetail() {
             acc[polda.id] = false;
             return acc;
           },
-          {}
+          {},
         );
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
@@ -299,7 +305,7 @@ export default function FormImageDetail() {
         (item: any) =>
           item.levelNumber === 2 &&
           item.name !== "SATKER POLRI" &&
-          checkedLevels.has(Number(item.id))
+          checkedLevels.has(Number(item.id)),
       ).length;
 
       const checkedPolresCount = listDest.reduce((total: number, item: any) => {
@@ -308,7 +314,7 @@ export default function FormImageDetail() {
           return (
             total +
             item.subDestination.filter((sub: any) =>
-              checkedLevels.has(Number(sub.id))
+              checkedLevels.has(Number(sub.id)),
             ).length
           );
         }
@@ -316,12 +322,12 @@ export default function FormImageDetail() {
       }, 0);
 
       const satkerItem: any = listDest.find(
-        (item: any) => item.name === "SATKER POLRI"
+        (item: any) => item.name === "SATKER POLRI",
       );
       const checkedSatkerCount = satkerItem
         ? (checkedLevels.has(Number(satkerItem.id)) ? 1 : 0) +
           (satkerItem.subDestination?.filter((sub: any) =>
-            checkedLevels.has(Number(sub.id))
+            checkedLevels.has(Number(sub.id)),
           ).length || 0)
         : 0;
 
@@ -391,7 +397,7 @@ export default function FormImageDetail() {
       } else if (mainCheckboxChangeType === "satker_checked") {
         // Checklist satker
         const satkerItem: any = listDest.find(
-          (item: any) => item.name === "SATKER POLRI"
+          (item: any) => item.name === "SATKER POLRI",
         );
         if (satkerItem) {
           newCheckedLevels.add(Number(satkerItem.id));
@@ -439,7 +445,7 @@ export default function FormImageDetail() {
       } else if (mainCheckboxChangeType === "satker_unchecked") {
         // Clear satker dan semua sub-item di bawahnya dari checkedLevels
         const satkerItem: any = listDest.find(
-          (item: any) => item.name === "SATKER POLRI"
+          (item: any) => item.name === "SATKER POLRI",
         );
         if (satkerItem) {
           newCheckedLevels.delete(Number(satkerItem.id));
@@ -466,7 +472,7 @@ export default function FormImageDetail() {
   const handleFileUnitChange = (
     fileIndex: number,
     key: keyof typeof unitSelection,
-    value: boolean
+    value: boolean,
   ) => {
     setFileUnitSelections((prev) => {
       const newSelections = [...prev];
@@ -486,7 +492,7 @@ export default function FormImageDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[fileIndex] || new Set()
+            newArray[fileIndex] || new Set(),
           );
 
           if (value) {
@@ -517,12 +523,12 @@ export default function FormImageDetail() {
               (item: any) =>
                 item.levelNumber === 2 &&
                 item.name !== "SATKER POLRI" &&
-                currentFileCheckedLevels.has(Number(item.id))
+                currentFileCheckedLevels.has(Number(item.id)),
             );
 
           if (!hasSelectedPolda) {
             alert(
-              "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
+              "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES.",
             );
             return prev; // Batalkan perubahan
           }
@@ -552,7 +558,7 @@ export default function FormImageDetail() {
   // Fungsi lama untuk kompatibilitas (akan dihapus nanti)
   const handleUnitChange = (
     key: keyof typeof unitSelection,
-    value: boolean
+    value: boolean,
   ) => {
     // Set flag bahwa perubahan berasal dari checkbox utama
     setIsUpdatingFromMainCheckbox(true);
@@ -578,13 +584,13 @@ export default function FormImageDetail() {
           (item: any) =>
             item.levelNumber === 2 &&
             item.name !== "SATKER POLRI" &&
-            checkedLevels.has(Number(item.id))
+            checkedLevels.has(Number(item.id)),
         );
 
         if (!hasSelectedPolda) {
           // Jika tidak ada POLDA yang dipilih, tampilkan peringatan dan batalkan
           alert(
-            "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
+            "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES.",
           );
           // Reset flag karena perubahan dibatalkan
           setIsUpdatingFromMainCheckbox(false);
@@ -640,14 +646,14 @@ export default function FormImageDetail() {
 
   const handleCheckboxChange = (id: number) => {
     setSelectedPublishers((prev) =>
-      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
     );
   };
 
   // Fungsi untuk mengupdate checklist levels untuk file tertentu
   const handleFileCheckboxChangePlacement = (
     fileIndex: number,
-    levelId: number
+    levelId: number,
   ) => {
     setFileCheckedLevels((prev) => {
       const newArray = [...prev];
@@ -659,7 +665,7 @@ export default function FormImageDetail() {
 
         // Jika ini adalah POLDA yang di-unchecklist, unchecklist juga semua polres di bawahnya
         const poldaItem = listDest.find(
-          (item: any) => Number(item.id) === levelId
+          (item: any) => Number(item.id) === levelId,
         ) as any;
         if (
           poldaItem &&
@@ -682,7 +688,7 @@ export default function FormImageDetail() {
 
         // Jika ini adalah SATKER POLRI yang di-checklist, checklist juga semua sub-item di bawahnya
         const satkerItem = listDest.find(
-          (item: any) => Number(item.id) === levelId
+          (item: any) => Number(item.id) === levelId,
         ) as any;
         if (satkerItem && satkerItem.name === "SATKER POLRI") {
           // Checklist semua sub-item di bawah SATKER POLRI (bukan POLRES)
@@ -710,7 +716,7 @@ export default function FormImageDetail() {
 
       // Cek apakah semua sub-items sudah ter-checklist
       const allSubItemsChecked = polda.subDestination?.every((sub: any) =>
-        currentFileLevels.has(Number(sub.id))
+        currentFileLevels.has(Number(sub.id)),
       );
 
       if (allSubItemsChecked) {
@@ -750,7 +756,7 @@ export default function FormImageDetail() {
 
       // Hitung total POLDA yang ada (bukan SATKER POLRI)
       const totalPoldaCount = listDest.filter(
-        (item: any) => item.levelNumber === 2 && item.name !== "SATKER POLRI"
+        (item: any) => item.levelNumber === 2 && item.name !== "SATKER POLRI",
       ).length;
 
       // Hitung berapa banyak POLDA yang ter-checklist (bukan SATKER POLRI)
@@ -777,7 +783,7 @@ export default function FormImageDetail() {
           }
           return total;
         },
-        0
+        0,
       );
 
       // Hitung berapa banyak POLRES yang ter-checklist
@@ -787,7 +793,7 @@ export default function FormImageDetail() {
           return (
             total +
             item.subDestination.filter((sub: any) =>
-              currentFileLevels.has(Number(sub.id))
+              currentFileLevels.has(Number(sub.id)),
             ).length
           );
         }
@@ -796,7 +802,7 @@ export default function FormImageDetail() {
 
       // Cek apakah SATKER POLRI ter-checklist
       const satkerItem = listDest.find(
-        (item: any) => item.name === "SATKER POLRI"
+        (item: any) => item.name === "SATKER POLRI",
       );
       const isSatkerChecked =
         satkerItem && currentFileLevels.has(Number(satkerItem.id));
@@ -833,7 +839,7 @@ export default function FormImageDetail() {
 
         // Jika ini adalah POLDA yang di-unchecklist, unchecklist juga semua polres di bawahnya
         const poldaItem = listDest.find(
-          (item: any) => Number(item.id) === levelId
+          (item: any) => Number(item.id) === levelId,
         ) as any;
         if (
           poldaItem &&
@@ -856,7 +862,7 @@ export default function FormImageDetail() {
 
         // Jika ini adalah SATKER POLRI yang di-checklist, checklist juga semua sub-item di bawahnya
         const satkerItem = listDest.find(
-          (item: any) => Number(item.id) === levelId
+          (item: any) => Number(item.id) === levelId,
         ) as any;
         if (satkerItem && satkerItem.name === "SATKER POLRI") {
           // Checklist semua sub-item di bawah SATKER POLRI (bukan POLRES)
@@ -887,7 +893,7 @@ export default function FormImageDetail() {
 
       if (scheduleId && scheduleType === "3") {
         const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
+          o.name.toLowerCase().includes("pers rilis"),
         );
 
         if (findCategory) {
@@ -936,6 +942,11 @@ export default function FormImageDetail() {
         console.log("detail", details);
         setFiles(details?.files);
         setDetail(details);
+
+        if (details?.uploadedBy?.userLevel?.levelNumber) {
+          setCreatorLevelNumber(details.uploadedBy.userLevel.levelNumber);
+        }
+
         setMain({
           type: details?.fileType.name,
           url: details?.files[0]?.url,
@@ -946,14 +957,14 @@ export default function FormImageDetail() {
 
         if (details?.assignedToLevel) {
           const levels = new Set<number>(
-            details.assignedToLevel.split(",").map(Number)
+            details.assignedToLevel.split(",").map(Number),
           );
           setCheckedLevels(levels);
         }
 
         if (details?.publishedForObject) {
           const publisherIds = details?.publishedForObject?.map(
-            (obj: any) => obj.id
+            (obj: any) => obj.id,
           );
           setSelectedPublishers(publisherIds);
         }
@@ -963,7 +974,7 @@ export default function FormImageDetail() {
 
         const filesData = details.files || [];
         const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) =>
-          file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg"
+          file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg",
         );
         setDetailThumb(fileUrls);
 
@@ -1083,7 +1094,7 @@ export default function FormImageDetail() {
   const setupPlacement = (
     index: number,
     placement: string,
-    checked: boolean
+    checked: boolean,
   ) => {
     let temp = [...filePlacements];
     if (checked) {
@@ -1094,7 +1105,7 @@ export default function FormImageDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[index] || new Set()
+            newArray[index] || new Set(),
           );
 
           // Checklist semua item di modal
@@ -1144,7 +1155,7 @@ export default function FormImageDetail() {
         // Hanya auto-checklist "all" jika polda, polres, dan mabes ter-checklist
         // JANGAN include satker dalam perhitungan auto "all"
         const nonSatkerItems = now.filter(
-          (item) => item !== "satker" && item !== "all"
+          (item) => item !== "satker" && item !== "all",
         );
         if (nonSatkerItems.length === 3 && !now.includes("all")) {
           now.push("all");
@@ -1159,7 +1170,7 @@ export default function FormImageDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[index] || new Set()
+            newArray[index] || new Set(),
           );
 
           // Unchecklist semua item di modal
@@ -1193,7 +1204,7 @@ export default function FormImageDetail() {
         // Hapus "all" jika tidak semua item ter-checklist
         if (now.includes("all")) {
           const nonSatkerItems = now.filter(
-            (item) => item !== "satker" && item !== "all"
+            (item) => item !== "satker" && item !== "all",
           );
           if (nonSatkerItems.length < 3) {
             const newData = now.filter((b) => b !== "all");
@@ -1212,7 +1223,7 @@ export default function FormImageDetail() {
   const updateModalChecklistLevels = (
     fileIndex: number,
     placement: string,
-    checked: boolean
+    checked: boolean,
   ) => {
     if (!listDest || listDest.length === 0) return;
 
@@ -1245,7 +1256,7 @@ export default function FormImageDetail() {
         } else if (placement === "satker") {
           // Checklist SATKER POLRI dan semua sub-item di bawahnya
           const satkerItem: any = listDest.find(
-            (item: any) => item.name === "SATKER POLRI"
+            (item: any) => item.name === "SATKER POLRI",
           );
           if (satkerItem) {
             currentFileLevels.add(Number(satkerItem.id));
@@ -1281,7 +1292,7 @@ export default function FormImageDetail() {
         } else if (placement === "satker") {
           // Unchecklist SATKER POLRI dan semua sub-item di bawahnya
           const satkerItem: any = listDest.find(
-            (item: any) => item.name === "SATKER POLRI"
+            (item: any) => item.name === "SATKER POLRI",
           );
           if (satkerItem) {
             currentFileLevels.delete(Number(satkerItem.id));
@@ -1311,7 +1322,7 @@ export default function FormImageDetail() {
     type: string,
     url: string,
     names: string,
-    format: string
+    format: string,
   ) => {
     console.log("Test 3 :", type, url, names, format);
     setMain({
@@ -1411,7 +1422,7 @@ export default function FormImageDetail() {
                         {detail &&
                           !categories.find(
                             (cat) =>
-                              String(cat.id) === String(detail.category.id)
+                              String(cat.id) === String(detail.category.id),
                           ) && (
                             <SelectItem
                               key={String(detail.category.id)}
@@ -1732,7 +1743,7 @@ export default function FormImageDetail() {
                                     Tingkat Distribusi:
                                   </p>
                                   <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-                                    {[
+                                    {/* {[
                                       { key: "semua", label: "Semua" },
                                       { key: "nasional", label: "Nasional" },
                                       { key: "wilayah", label: "Wilayah" },
@@ -1740,6 +1751,39 @@ export default function FormImageDetail() {
                                         key: "international",
                                         label: "Internasional",
                                       },
+                                    ] */}
+                                    {[
+                                      { key: "semua", label: "Semua" },
+
+                                      ...(isContentFromMabesOrPolda
+                                        ? [
+                                            {
+                                              key: "nasional",
+                                              label: "Nasional",
+                                            },
+                                            {
+                                              key: "international",
+                                              label: "Internasional",
+                                            },
+                                            {
+                                              key: "wilayah",
+                                              label: "Wilayah",
+                                            },
+                                          ]
+                                        : []),
+
+                                      ...(isContentFromSatker
+                                        ? [
+                                            {
+                                              key: "nasional",
+                                              label: "Nasional",
+                                            },
+                                            {
+                                              key: "international",
+                                              label: "Internasional",
+                                            },
+                                          ]
+                                        : []),
                                     ].map((item, idx) => (
                                       <div
                                         key={item.key}
@@ -1756,12 +1800,12 @@ export default function FormImageDetail() {
                                             handleFileUnitChange(
                                               index,
                                               item.key as keyof typeof unitSelection,
-                                              value as boolean
+                                              value as boolean,
                                             );
                                             setupPlacement(
                                               index,
                                               item.key,
-                                              Boolean(value)
+                                              Boolean(value),
                                             );
                                           }}
                                         />
@@ -1777,246 +1821,257 @@ export default function FormImageDetail() {
                                 </div>
 
                                 {/* Detail Wilayah */}
-                                {fileUnitSelections[index]?.wilayah && (
-                                  <div className="border-t border-gray-200 pt-2">
-                                    <p className="text-sm font-medium text-gray-700 mb-2">
-                                      Detail Wilayah:
-                                    </p>
+                                {/* {fileUnitSelections[index]?.wilayah && ( */}
+                                {!isContentFromSatker &&
+                                  fileUnitSelections[index]?.wilayah && (
+                                    <div className="border-t border-gray-200 pt-2">
+                                      <p className="text-sm font-medium text-gray-700 mb-2">
+                                        Detail Wilayah:
+                                      </p>
 
-                                    {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
-                                    <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-                                      {[
-                                        { key: "polda", label: "POLDA" },
-                                        { key: "polres", label: "POLRES" },
-                                        { key: "satker", label: "SATKER" },
-                                      ].map((item, idx) => (
-                                        <div
-                                          key={item.key}
-                                          className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
-                                        >
-                                          <Checkbox
-                                            id={`${item.key}-${index}`}
-                                            checked={
-                                              fileUnitSelections[index]?.[
-                                                item.key as keyof typeof unitSelection
-                                              ] || false
-                                            }
-                                            onCheckedChange={(value) => {
-                                              handleFileUnitChange(
-                                                index,
-                                                item.key as keyof typeof unitSelection,
-                                                value as boolean
-                                              );
-                                              setupPlacement(
-                                                index,
-                                                item.key,
-                                                Boolean(value)
-                                              );
-                                            }}
-                                          />
-                                          <Label
-                                            htmlFor={`${item.key}-${index}`}
-                                            className="text-sm font-medium cursor-pointer"
+                                      {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
+                                      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+                                        {[
+                                          { key: "polda", label: "POLDA" },
+                                          { key: "polres", label: "POLRES" },
+                                          { key: "satker", label: "SATKER" },
+                                        ].map((item, idx) => (
+                                          <div
+                                            key={item.key}
+                                            className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
                                           >
-                                            {item.label}
-                                          </Label>
-                                        </div>
-                                      ))}
-
-                                      {/* Tombol Kustom sejajar dengan checkbox */}
-                                      <div className="flex items-center justify-center p-3">
-                                        <Dialog>
-                                          <DialogTrigger asChild>
-                                            <Button
-                                              variant="outline"
-                                              size="sm"
-                                              className="gap-2"
+                                            <Checkbox
+                                              id={`${item.key}-${index}`}
+                                              checked={
+                                                fileUnitSelections[index]?.[
+                                                  item.key as keyof typeof unitSelection
+                                                ] || false
+                                              }
+                                              onCheckedChange={(value) => {
+                                                handleFileUnitChange(
+                                                  index,
+                                                  item.key as keyof typeof unitSelection,
+                                                  value as boolean,
+                                                );
+                                                setupPlacement(
+                                                  index,
+                                                  item.key,
+                                                  Boolean(value),
+                                                );
+                                              }}
+                                            />
+                                            <Label
+                                              htmlFor={`${item.key}-${index}`}
+                                              className="text-sm font-medium cursor-pointer"
                                             >
-                                              <Icon
-                                                icon="material-symbols:tune"
-                                                width={16}
-                                                height={16}
-                                              />
-                                              {t("custom", {
-                                                defaultValue: "Kustom",
-                                              })}
-                                            </Button>
-                                          </DialogTrigger>
-                                          <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
-                                            <DialogHeader className="border-b border-gray-200 pb-4">
-                                              <DialogTitle className="text-lg font-semibold">
-                                                Daftar Wilayah POLDA dan POLRES
-                                              </DialogTitle>
-                                            </DialogHeader>
-                                            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
-                                              {listDest.map((polda: any) => (
-                                                <div
-                                                  key={polda.id}
-                                                  className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
-                                                >
-                                                  {/* Header POLDA */}
-                                                  <div className="flex items-center justify-between">
-                                                    <Label className="flex items-center gap-3 flex-1 cursor-pointer">
-                                                      <Checkbox
-                                                        checked={
-                                                          fileCheckedLevels[
-                                                            index
-                                                          ]?.has(
-                                                            Number(polda.id)
-                                                          ) || false
-                                                        }
-                                                        onCheckedChange={() =>
-                                                          handleFileCheckboxChangePlacement(
-                                                            index,
-                                                            Number(polda.id)
-                                                          )
-                                                        }
-                                                      />
-                                                      <span className="font-semibold text-gray-900 text-sm">
-                                                        {polda.name}
-                                                      </span>
-                                                    </Label>
-                                                    {polda.subDestination && (
-                                                      <button
-                                                        onClick={(e) => {
-                                                          e.preventDefault();
-                                                          e.stopPropagation();
-                                                          toggleExpand(
-                                                            polda.id
-                                                          );
-                                                        }}
-                                                        className="p-1 hover:bg-gray-100 rounded-md transition-colors"
-                                                      >
-                                                        <Icon
-                                                          icon={
-                                                            expandedPolda[
-                                                              polda.id
-                                                            ]
-                                                              ? "mdi:chevron-up"
-                                                              : "mdi:chevron-down"
-                                                          }
-                                                          width={16}
-                                                          height={16}
-                                                        />
-                                                      </button>
-                                                    )}
-                                                  </div>
+                                              {item.label}
+                                            </Label>
+                                          </div>
+                                        ))}
 
-                                                  {/* Sub-items */}
-                                                  {polda.subDestination &&
-                                                    expandedPolda[polda.id] && (
-                                                      <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
-                                                        {/* Tombol Pilih Semua untuk sub-items */}
-                                                        <div className="mb-2 flex justify-start">
-                                                          {(() => {
-                                                            const allSubItemsChecked =
-                                                              polda.subDestination?.every(
-                                                                (sub: any) =>
-                                                                  fileCheckedLevels[
-                                                                    index
-                                                                  ]?.has(
-                                                                    Number(
-                                                                      sub.id
-                                                                    )
-                                                                  )
-                                                              );
-                                                            return (
-                                                              <Button
-                                                                size="sm"
-                                                                variant="outline"
-                                                                className="text-xs h-6 px-2"
-                                                                onClick={() =>
-                                                                  handleSelectAllSubItems(
-                                                                    index,
-                                                                    polda
-                                                                  )
-                                                                }
-                                                              >
-                                                                {allSubItemsChecked ? (
-                                                                  <>
-                                                                    <Icon
-                                                                      icon="material-symbols:check-indeterminate-small"
-                                                                      width={12}
-                                                                      height={
-                                                                        12
-                                                                      }
-                                                                      className="mr-1"
-                                                                    />
-                                                                    Batal Semua
-                                                                  </>
-                                                                ) : (
-                                                                  <>
-                                                                    <Icon
-                                                                      icon="material-symbols:check-all"
-                                                                      width={12}
-                                                                      height={
-                                                                        12
-                                                                      }
-                                                                      className="mr-1"
-                                                                    />
-                                                                    Pilih Semua
-                                                                  </>
-                                                                )}
-                                                              </Button>
+                                        {/* Tombol Kustom sejajar dengan checkbox */}
+                                        <div className="flex items-center justify-center p-3">
+                                          <Dialog>
+                                            <DialogTrigger asChild>
+                                              <Button
+                                                variant="outline"
+                                                size="sm"
+                                                className="gap-2"
+                                              >
+                                                <Icon
+                                                  icon="material-symbols:tune"
+                                                  width={16}
+                                                  height={16}
+                                                />
+                                                {t("custom", {
+                                                  defaultValue: "Kustom",
+                                                })}
+                                              </Button>
+                                            </DialogTrigger>
+                                            <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
+                                              <DialogHeader className="border-b border-gray-200 pb-4">
+                                                <DialogTitle className="text-lg font-semibold">
+                                                  Daftar Wilayah POLDA dan
+                                                  POLRES
+                                                </DialogTitle>
+                                              </DialogHeader>
+                                              <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
+                                                {listDest.map((polda: any) => (
+                                                  <div
+                                                    key={polda.id}
+                                                    className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
+                                                  >
+                                                    {/* Header POLDA */}
+                                                    <div className="flex items-center justify-between">
+                                                      <Label className="flex items-center gap-3 flex-1 cursor-pointer">
+                                                        <Checkbox
+                                                          checked={
+                                                            fileCheckedLevels[
+                                                              index
+                                                            ]?.has(
+                                                              Number(polda.id),
+                                                            ) || false
+                                                          }
+                                                          onCheckedChange={() =>
+                                                            handleFileCheckboxChangePlacement(
+                                                              index,
+                                                              Number(polda.id),
+                                                            )
+                                                          }
+                                                        />
+                                                        <span className="font-semibold text-gray-900 text-sm">
+                                                          {polda.name}
+                                                        </span>
+                                                      </Label>
+                                                      {polda.subDestination && (
+                                                        <button
+                                                          onClick={(e) => {
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                            toggleExpand(
+                                                              polda.id,
                                                             );
-                                                          })()}
-                                                        </div>
-                                                        <div className="space-y-1">
-                                                          {polda.subDestination.map(
-                                                            (sub: any) => (
-                                                              <Label
-                                                                key={sub.id}
-                                                                className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
-                                                              >
-                                                                <Checkbox
-                                                                  checked={
+                                                          }}
+                                                          className="p-1 hover:bg-gray-100 rounded-md transition-colors"
+                                                        >
+                                                          <Icon
+                                                            icon={
+                                                              expandedPolda[
+                                                                polda.id
+                                                              ]
+                                                                ? "mdi:chevron-up"
+                                                                : "mdi:chevron-down"
+                                                            }
+                                                            width={16}
+                                                            height={16}
+                                                          />
+                                                        </button>
+                                                      )}
+                                                    </div>
+
+                                                    {/* Sub-items */}
+                                                    {polda.subDestination &&
+                                                      expandedPolda[
+                                                        polda.id
+                                                      ] && (
+                                                        <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
+                                                          {/* Tombol Pilih Semua untuk sub-items */}
+                                                          <div className="mb-2 flex justify-start">
+                                                            {(() => {
+                                                              const allSubItemsChecked =
+                                                                polda.subDestination?.every(
+                                                                  (sub: any) =>
                                                                     fileCheckedLevels[
                                                                       index
                                                                     ]?.has(
                                                                       Number(
-                                                                        sub.id
-                                                                      )
-                                                                    ) || false
-                                                                  }
-                                                                  onCheckedChange={() =>
-                                                                    handleFileCheckboxChangePlacement(
+                                                                        sub.id,
+                                                                      ),
+                                                                    ),
+                                                                );
+                                                              return (
+                                                                <Button
+                                                                  size="sm"
+                                                                  variant="outline"
+                                                                  className="text-xs h-6 px-2"
+                                                                  onClick={() =>
+                                                                    handleSelectAllSubItems(
                                                                       index,
-                                                                      Number(
-                                                                        sub.id
-                                                                      )
+                                                                      polda,
                                                                     )
                                                                   }
-                                                                />
-                                                                <span className="text-gray-700">
-                                                                  {sub.name}
-                                                                </span>
-                                                              </Label>
-                                                            )
-                                                          )}
+                                                                >
+                                                                  {allSubItemsChecked ? (
+                                                                    <>
+                                                                      <Icon
+                                                                        icon="material-symbols:check-indeterminate-small"
+                                                                        width={
+                                                                          12
+                                                                        }
+                                                                        height={
+                                                                          12
+                                                                        }
+                                                                        className="mr-1"
+                                                                      />
+                                                                      Batal
+                                                                      Semua
+                                                                    </>
+                                                                  ) : (
+                                                                    <>
+                                                                      <Icon
+                                                                        icon="material-symbols:check-all"
+                                                                        width={
+                                                                          12
+                                                                        }
+                                                                        height={
+                                                                          12
+                                                                        }
+                                                                        className="mr-1"
+                                                                      />
+                                                                      Pilih
+                                                                      Semua
+                                                                    </>
+                                                                  )}
+                                                                </Button>
+                                                              );
+                                                            })()}
+                                                          </div>
+                                                          <div className="space-y-1">
+                                                            {polda.subDestination.map(
+                                                              (sub: any) => (
+                                                                <Label
+                                                                  key={sub.id}
+                                                                  className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
+                                                                >
+                                                                  <Checkbox
+                                                                    checked={
+                                                                      fileCheckedLevels[
+                                                                        index
+                                                                      ]?.has(
+                                                                        Number(
+                                                                          sub.id,
+                                                                        ),
+                                                                      ) || false
+                                                                    }
+                                                                    onCheckedChange={() =>
+                                                                      handleFileCheckboxChangePlacement(
+                                                                        index,
+                                                                        Number(
+                                                                          sub.id,
+                                                                        ),
+                                                                      )
+                                                                    }
+                                                                  />
+                                                                  <span className="text-gray-700">
+                                                                    {sub.name}
+                                                                  </span>
+                                                                </Label>
+                                                              ),
+                                                            )}
+                                                          </div>
                                                         </div>
-                                                      </div>
-                                                    )}
-                                                </div>
-                                              ))}
-                                            </div>
-                                            <div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
-                                              <DialogClose asChild>
-                                                <Button variant="outline">
-                                                  {t("cancel", {
-                                                    defaultValue: "Batal",
-                                                  })}
-                                                </Button>
-                                              </DialogClose>
-                                              <DialogClose asChild>
-                                                <Button>Simpan</Button>
-                                              </DialogClose>
-                                            </div>
-                                          </DialogContent>
-                                        </Dialog>
+                                                      )}
+                                                  </div>
+                                                ))}
+                                              </div>
+                                              <div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
+                                                <DialogClose asChild>
+                                                  <Button variant="outline">
+                                                    {t("cancel", {
+                                                      defaultValue: "Batal",
+                                                    })}
+                                                  </Button>
+                                                </DialogClose>
+                                                <DialogClose asChild>
+                                                  <Button>Simpan</Button>
+                                                </DialogClose>
+                                              </div>
+                                            </DialogContent>
+                                          </Dialog>
+                                        </div>
                                       </div>
                                     </div>
-                                  </div>
-                                )}
+                                  )}
                               </div>
                             </div>
                           ) : (
@@ -2095,7 +2150,7 @@ export default function FormImageDetail() {
                                   >
                                     {template}
                                   </Button>
-                                )
+                                ),
                               )}
                             </div>
                           </div>

components/form/content/image-form.tsx

@@ -82,7 +82,7 @@ const CustomEditor = dynamic(
   () => {
     return import("@/components/editor/custom-editor");
   },
-  { ssr: false }
+  { ssr: false },
 );
 
 export default function FormImage() {
@@ -117,7 +117,7 @@ export default function FormImage() {
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
   const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
+    null,
   );
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
   const [selectedWritingStyle, setSelectedWritingStyle] =
@@ -183,17 +183,17 @@ export default function FormImage() {
         .filter(
           (file) =>
             ["image/jpeg", "image/png", "image/jpg"].includes(file.type) &&
-            file.size <= MAX_FILE_SIZE
+            file.size <= MAX_FILE_SIZE,
         )
         .map((file) =>
           Object.assign(file, {
             preview: URL.createObjectURL(file),
-          })
+          }),
         );
 
       if (validFiles.length === 0) {
         toast.error(
-          "File tidak valid. Hanya .jpg, .jpeg, .png maksimal 100MB yang diperbolehkan."
+          "File tidak valid. Hanya .jpg, .jpeg, .png maksimal 100MB yang diperbolehkan.",
         );
         return;
       }
@@ -227,12 +227,12 @@ export default function FormImage() {
           files.every(
             (file: File) =>
               ["image/jpeg", "image/png", "image/jpg"].includes(file.type) &&
-              file.size <= 100 * 1024 * 1024
+              file.size <= 100 * 1024 * 1024,
           ),
         {
           message:
             "Hanya file .jpg, .jpeg, .png, maksimal 100MB yang diperbolehkan.",
-        }
+        },
       ),
     categoryId: z.string().min(1, { message: "Kategori wajib dipilih." }),
     tags: z
@@ -454,7 +454,7 @@ export default function FormImage() {
       const articleData = await waitForStatusUpdate();
       const cleanArticleBody = articleData?.articleBody?.replace(
         /<img[^>]*>/g,
-        ""
+        "",
       );
       const articleImagesData = articleData?.imagesUrl?.split(",");
       setArticleBody(cleanArticleBody || "");
@@ -507,7 +507,7 @@ export default function FormImage() {
 
       if (scheduleId && scheduleType === "3") {
         const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
+          o.name.toLowerCase().includes("pers rilis"),
         );
 
         if (findCategory) {
@@ -530,7 +530,7 @@ export default function FormImage() {
         setPublishedFor(
           options
             .filter((opt: any) => opt.id !== "all")
-            .map((opt: any) => opt.id)
+            .map((opt: any) => opt.id),
         );
       }
     } else {
@@ -594,11 +594,16 @@ export default function FormImage() {
     } else if (data.rewriteDescription && selectedFileType === "rewrite") {
       finalDescription = data.rewriteDescription;
       console.log("📤 Upload versi rewrite");
-    } else {
-      // fallback: gunakan versi Indonesia original
-      finalDescription = data.descriptionOri ?? "";
-      console.log("📤 Upload versi Indonesia (original)");
+    } else if (data.description?.trim()) {
+      finalDescription = data.description;
+    } else if (data.descriptionOri?.trim()) {
+      finalDescription = data.descriptionOri;
     }
+    // else {
+    //   // fallback: gunakan versi Indonesia original
+    //   finalDescription = data.descriptionOri ?? "";
+    //   console.log("📤 Upload versi Indonesia (original)");
+    // }
 
     if (!finalDescription?.trim()) {
       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
@@ -684,13 +689,13 @@ export default function FormImage() {
     setIsStartUpload(true);
     setProgressList(progressInfoArr);
 
-    close();
+    // close();
     files.map(async (item: any, index: number) => {
       await uploadResumableFile(
         index,
         String(id),
         item,
-        fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
+        fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0",
       );
     });
 
@@ -717,7 +722,7 @@ export default function FormImage() {
     idx: number,
     id: string,
     file: any,
-    duration: string
+    duration: string,
   ) {
     console.log(idx, id, file, duration);
 
@@ -753,7 +758,7 @@ export default function FormImage() {
       onChunkComplete: (
         chunkSize: any,
         bytesAccepted: any,
-        bytesTotal: any
+        bytesTotal: any,
       ) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
@@ -795,6 +800,7 @@ export default function FormImage() {
     }
     if (counter == progressInfo.length) {
       setIsStartUpload(false);
+      close();
       // hideProgress();
       Cookies.remove("idCreate");
       successSubmit("/in/contributor/content/image");

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

@@ -114,7 +114,7 @@ const ViewEditor = dynamic(
   () => {
     return import("@/components/editor/view-editor");
   },
-  { ssr: false }
+  { ssr: false },
 );
 
 interface Destination {
@@ -191,6 +191,12 @@ export default function FormTeksDetail() {
       satker: boolean;
     }>
   >([]);
+  const [creatorLevelNumber, setCreatorLevelNumber] = useState<number | null>(
+    null,
+  );
+  const isContentFromSatker = creatorLevelNumber === 3;
+  const isContentFromMabesOrPolda =
+    creatorLevelNumber === 1 || creatorLevelNumber === 2;
 
   useEffect(() => {
     if (Number(userLevelId) === 216 && Number(roleId) === 3) {
@@ -202,7 +208,7 @@ export default function FormTeksDetail() {
   const handleFileUnitChange = (
     fileIndex: number,
     key: keyof typeof unitSelection,
-    value: boolean
+    value: boolean,
   ) => {
     setFileUnitSelections((prev) => {
       const newSelections = [...prev];
@@ -222,7 +228,7 @@ export default function FormTeksDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[fileIndex] || new Set()
+            newArray[fileIndex] || new Set(),
           );
 
           if (value) {
@@ -253,12 +259,12 @@ export default function FormTeksDetail() {
               (item: any) =>
                 item.levelNumber === 2 &&
                 item.name !== "SATKER POLRI" &&
-                currentFileCheckedLevels.has(Number(item.id))
+                currentFileCheckedLevels.has(Number(item.id)),
             );
 
           if (!hasSelectedPolda) {
             alert(
-              "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
+              "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES.",
             );
             return prev; // Batalkan perubahan
           }
@@ -297,7 +303,7 @@ export default function FormTeksDetail() {
   useEffect(() => {
     if (detail?.assignedToTopLevel) {
       const outputSet = new Set(
-        detail.assignedToTopLevel.split(",").map(Number)
+        detail.assignedToTopLevel.split(",").map(Number),
       );
       setUnitSelection({
         semua: outputSet.has(0),
@@ -322,7 +328,7 @@ export default function FormTeksDetail() {
             acc[polda.id] = false;
             return acc;
           },
-          {}
+          {},
         );
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
@@ -357,7 +363,7 @@ export default function FormTeksDetail() {
 
   const handleUnitChange = (
     key: keyof typeof unitSelection,
-    value: boolean
+    value: boolean,
   ) => {
     if (key === "semua") {
       const newState = {
@@ -436,7 +442,7 @@ export default function FormTeksDetail() {
 
   const handleCheckboxChange = (id: number) => {
     setSelectedPublishers((prev) =>
-      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
     );
   };
 
@@ -458,7 +464,7 @@ export default function FormTeksDetail() {
 
       if (scheduleId && scheduleType === "3") {
         const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
+          o.name.toLowerCase().includes("pers rilis"),
         );
 
         if (findCategory) {
@@ -507,6 +513,9 @@ export default function FormTeksDetail() {
         console.log("detail", details);
         setFiles(details?.files);
         setDetail(details);
+        if (details?.uploadedBy?.userLevel?.levelNumber) {
+          setCreatorLevelNumber(details.uploadedBy.userLevel.levelNumber);
+        }
         setMain({
           type: details?.fileType.name,
           url: details?.files[0]?.url,
@@ -517,14 +526,14 @@ export default function FormTeksDetail() {
 
         if (details?.assignedToLevel) {
           const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
+            details.assignedToLevel.split(",").map(Number),
           );
           setCheckedLevels(levels);
         }
 
         if (details?.publishedForObject) {
           const publisherIds = details?.publishedForObject?.map(
-            (obj: any) => obj.id
+            (obj: any) => obj.id,
           );
           setSelectedPublishers(publisherIds);
         }
@@ -696,7 +705,7 @@ export default function FormTeksDetail() {
     type: string,
     url: string,
     names: string,
-    format: string
+    format: string,
   ) => {
     console.log("Test 3 :", type, url, names, format);
     setMain({
@@ -723,7 +732,7 @@ export default function FormTeksDetail() {
   const setupPlacement = (
     index: number,
     placement: string,
-    checked: boolean
+    checked: boolean,
   ) => {
     let temp = [...filePlacements];
     if (checked) {
@@ -734,7 +743,7 @@ export default function FormTeksDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[index] || new Set()
+            newArray[index] || new Set(),
           );
 
           // Checklist semua item di modal
@@ -784,7 +793,7 @@ export default function FormTeksDetail() {
         // Hanya auto-checklist "all" jika polda, polres, dan mabes ter-checklist
         // JANGAN include satker dalam perhitungan auto "all"
         const nonSatkerItems = now.filter(
-          (item) => item !== "satker" && item !== "all"
+          (item) => item !== "satker" && item !== "all",
         );
         if (nonSatkerItems.length === 3 && !now.includes("all")) {
           now.push("all");
@@ -799,7 +808,7 @@ export default function FormTeksDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[index] || new Set()
+            newArray[index] || new Set(),
           );
 
           // Unchecklist semua item di modal
@@ -833,7 +842,7 @@ export default function FormTeksDetail() {
         // Hapus "all" jika tidak semua item ter-checklist
         if (now.includes("all")) {
           const nonSatkerItems = now.filter(
-            (item) => item !== "satker" && item !== "all"
+            (item) => item !== "satker" && item !== "all",
           );
           if (nonSatkerItems.length < 3) {
             const newData = now.filter((b) => b !== "all");
@@ -851,7 +860,7 @@ export default function FormTeksDetail() {
   const updateModalChecklistLevels = (
     fileIndex: number,
     placement: string,
-    checked: boolean
+    checked: boolean,
   ) => {
     if (!listDest || listDest.length === 0) return;
 
@@ -884,7 +893,7 @@ export default function FormTeksDetail() {
         } else if (placement === "satker") {
           // Checklist SATKER POLRI dan semua sub-item di bawahnya
           const satkerItem: any = listDest.find(
-            (item: any) => item.name === "SATKER POLRI"
+            (item: any) => item.name === "SATKER POLRI",
           );
           if (satkerItem) {
             currentFileLevels.add(Number(satkerItem.id));
@@ -920,7 +929,7 @@ export default function FormTeksDetail() {
         } else if (placement === "satker") {
           // Unchecklist SATKER POLRI dan semua sub-item di bawahnya
           const satkerItem: any = listDest.find(
-            (item: any) => item.name === "SATKER POLRI"
+            (item: any) => item.name === "SATKER POLRI",
           );
           if (satkerItem) {
             currentFileLevels.delete(Number(satkerItem.id));
@@ -953,7 +962,7 @@ export default function FormTeksDetail() {
   // Fungsi untuk mengupdate checklist levels untuk file tertentu
   const handleFileCheckboxChangePlacement = (
     fileIndex: number,
-    levelId: number
+    levelId: number,
   ) => {
     setFileCheckedLevels((prev) => {
       const newArray = [...prev];
@@ -965,7 +974,7 @@ export default function FormTeksDetail() {
 
         // Jika ini adalah POLDA yang di-unchecklist, unchecklist juga semua polres di bawahnya
         const poldaItem = listDest.find(
-          (item: any) => Number(item.id) === levelId
+          (item: any) => Number(item.id) === levelId,
         ) as any;
         if (
           poldaItem &&
@@ -988,7 +997,7 @@ export default function FormTeksDetail() {
 
         // Jika ini adalah SATKER POLRI yang di-checklist, checklist juga semua sub-item di bawahnya
         const satkerItem = listDest.find(
-          (item: any) => Number(item.id) === levelId
+          (item: any) => Number(item.id) === levelId,
         ) as any;
         if (satkerItem && satkerItem.name === "SATKER POLRI") {
           // Checklist semua sub-item di bawah SATKER POLRI (bukan POLRES)
@@ -1019,7 +1028,7 @@ export default function FormTeksDetail() {
 
       // Hitung total POLDA yang ada (bukan SATKER POLRI)
       const totalPoldaCount = listDest.filter(
-        (item: any) => item.levelNumber === 2 && item.name !== "SATKER POLRI"
+        (item: any) => item.levelNumber === 2 && item.name !== "SATKER POLRI",
       ).length;
 
       // Hitung berapa banyak POLDA yang ter-checklist (bukan SATKER POLRI)
@@ -1046,7 +1055,7 @@ export default function FormTeksDetail() {
           }
           return total;
         },
-        0
+        0,
       );
 
       // Hitung berapa banyak POLRES yang ter-checklist
@@ -1056,7 +1065,7 @@ export default function FormTeksDetail() {
           return (
             total +
             item.subDestination.filter((sub: any) =>
-              currentFileLevels.has(Number(sub.id))
+              currentFileLevels.has(Number(sub.id)),
             ).length
           );
         }
@@ -1065,7 +1074,7 @@ export default function FormTeksDetail() {
 
       // Cek apakah SATKER POLRI ter-checklist
       const satkerItem = listDest.find(
-        (item: any) => item.name === "SATKER POLRI"
+        (item: any) => item.name === "SATKER POLRI",
       );
       const isSatkerChecked =
         satkerItem && currentFileLevels.has(Number(satkerItem.id));
@@ -1099,7 +1108,7 @@ export default function FormTeksDetail() {
 
       // Cek apakah semua sub-items sudah ter-checklist
       const allSubItemsChecked = polda.subDestination?.every((sub: any) =>
-        currentFileLevels.has(Number(sub.id))
+        currentFileLevels.has(Number(sub.id)),
       );
 
       if (allSubItemsChecked) {
@@ -1182,7 +1191,7 @@ export default function FormTeksDetail() {
                         {detail &&
                           !categories.find(
                             (cat) =>
-                              String(cat.id) === String(detail.category.id)
+                              String(cat.id) === String(detail.category.id),
                           ) && (
                             <SelectItem
                               key={String(detail.category.id)}
@@ -1465,7 +1474,7 @@ export default function FormTeksDetail() {
                                     Tingkat Distribusi:
                                   </p>
                                   <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-                                    {[
+                                    {/* {[
                                       { key: "semua", label: "Semua" },
                                       { key: "nasional", label: "Nasional" },
                                       { key: "wilayah", label: "Wilayah" },
@@ -1473,6 +1482,39 @@ export default function FormTeksDetail() {
                                         key: "international",
                                         label: "Internasional",
                                       },
+                                    ] */}
+                                    {[
+                                      { key: "semua", label: "Semua" },
+
+                                      ...(isContentFromMabesOrPolda
+                                        ? [
+                                            {
+                                              key: "nasional",
+                                              label: "Nasional",
+                                            },
+                                            {
+                                              key: "international",
+                                              label: "Internasional",
+                                            },
+                                            {
+                                              key: "wilayah",
+                                              label: "Wilayah",
+                                            },
+                                          ]
+                                        : []),
+
+                                      ...(isContentFromSatker
+                                        ? [
+                                            {
+                                              key: "nasional",
+                                              label: "Nasional",
+                                            },
+                                            {
+                                              key: "international",
+                                              label: "Internasional",
+                                            },
+                                          ]
+                                        : []),
                                     ].map((item, idx) => (
                                       <div
                                         key={item.key}
@@ -1489,12 +1531,12 @@ export default function FormTeksDetail() {
                                             handleFileUnitChange(
                                               index,
                                               item.key as keyof typeof unitSelection,
-                                              value as boolean
+                                              value as boolean,
                                             );
                                             setupPlacement(
                                               index,
                                               item.key,
-                                              Boolean(value)
+                                              Boolean(value),
                                             );
                                           }}
                                         />
@@ -1510,251 +1552,262 @@ export default function FormTeksDetail() {
                                 </div>
 
                                 {/* Detail Wilayah */}
-                                {fileUnitSelections[index]?.wilayah && (
-                                  <div className="border-t border-gray-200 pt-2">
-                                    <p className="text-sm font-medium text-gray-700 mb-2">
-                                      Detail Wilayah:
-                                    </p>
+                                {/* {fileUnitSelections[index]?.wilayah && ( */}
+                                {!isContentFromSatker &&
+                                  fileUnitSelections[index]?.wilayah && (
+                                    <div className="border-t border-gray-200 pt-2">
+                                      <p className="text-sm font-medium text-gray-700 mb-2">
+                                        Detail Wilayah:
+                                      </p>
 
-                                    {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
-                                    <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-                                      {[
-                                        { key: "polda", label: "POLDA" },
-                                        { key: "polres", label: "POLRES" },
-                                        { key: "satker", label: "SATKER" },
-                                      ].map((item, idx) => (
-                                        <div
-                                          key={item.key}
-                                          className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
-                                        >
-                                          <Checkbox
-                                            id={`${item.key}-${index}`}
-                                            checked={
-                                              fileUnitSelections[index]?.[
-                                                item.key as keyof typeof unitSelection
-                                              ] || false
-                                            }
-                                            onCheckedChange={(value) => {
-                                              handleFileUnitChange(
-                                                index,
-                                                item.key as keyof typeof unitSelection,
-                                                value as boolean
-                                              );
-                                              setupPlacement(
-                                                index,
-                                                item.key,
-                                                Boolean(value)
-                                              );
-                                            }}
-                                          />
-                                          <Label
-                                            htmlFor={`${item.key}-${index}`}
-                                            className="text-sm font-medium cursor-pointer"
+                                      {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
+                                      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+                                        {[
+                                          { key: "polda", label: "POLDA" },
+                                          { key: "polres", label: "POLRES" },
+                                          { key: "satker", label: "SATKER" },
+                                        ].map((item, idx) => (
+                                          <div
+                                            key={item.key}
+                                            className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
                                           >
-                                            {item.label}
-                                          </Label>
-                                        </div>
-                                      ))}
-
-                                      {/* Tombol Kustom sejajar dengan checkbox */}
-                                      <div className="flex items-center justify-center p-3">
-                                        <Dialog>
-                                          <DialogTrigger asChild>
-                                            <Button
-                                              variant="outline"
-                                              size="sm"
-                                              className="gap-2"
+                                            <Checkbox
+                                              id={`${item.key}-${index}`}
+                                              checked={
+                                                fileUnitSelections[index]?.[
+                                                  item.key as keyof typeof unitSelection
+                                                ] || false
+                                              }
+                                              onCheckedChange={(value) => {
+                                                handleFileUnitChange(
+                                                  index,
+                                                  item.key as keyof typeof unitSelection,
+                                                  value as boolean,
+                                                );
+                                                setupPlacement(
+                                                  index,
+                                                  item.key,
+                                                  Boolean(value),
+                                                );
+                                              }}
+                                            />
+                                            <Label
+                                              htmlFor={`${item.key}-${index}`}
+                                              className="text-sm font-medium cursor-pointer"
                                             >
-                                              <Icon
-                                                icon="material-symbols:tune"
-                                                width={16}
-                                                height={16}
-                                              />
-                                              {t("custom", {
-                                                defaultValue: "Kustom",
-                                              })}
-                                            </Button>
-                                          </DialogTrigger>
-                                          <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
-                                            <DialogHeader className="border-b border-gray-200 pb-4">
-                                              <DialogTitle className="text-lg font-semibold">
-                                                Daftar Wilayah POLDA dan POLRES
-                                              </DialogTitle>
-                                            </DialogHeader>
-                                            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
-                                              {listDest.map((polda: any) => (
-                                                <div
-                                                  key={polda.id}
-                                                  className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
-                                                >
-                                                  {/* Header POLDA */}
-                                                  <div className="flex items-center justify-between">
-                                                    <Label className="flex items-center gap-3 flex-1 cursor-pointer">
-                                                      <Checkbox
-                                                        checked={
-                                                          fileCheckedLevels[
-                                                            index
-                                                          ]?.has(
-                                                            Number(polda.id)
-                                                          ) || false
-                                                        }
-                                                        onCheckedChange={() =>
-                                                          handleFileCheckboxChangePlacement(
-                                                            index,
-                                                            Number(polda.id)
-                                                          )
-                                                        }
-                                                      />
-                                                      <span className="font-semibold text-gray-900 text-sm">
-                                                        {polda.name}
-                                                      </span>
-                                                    </Label>
-                                                    {polda.subDestination && (
-                                                      <button
-                                                        onClick={(e) => {
-                                                          e.preventDefault();
-                                                          e.stopPropagation();
-                                                          toggleExpand(
-                                                            polda.id
-                                                          );
-                                                        }}
-                                                        className="p-1 hover:bg-gray-100 rounded-md transition-colors"
-                                                      >
-                                                        <Icon
-                                                          icon={
-                                                            expandedPolda[
-                                                              polda.id
-                                                            ]
-                                                              ? "mdi:chevron-up"
-                                                              : "mdi:chevron-down"
-                                                          }
-                                                          width={16}
-                                                          height={16}
-                                                        />
-                                                      </button>
-                                                    )}
-                                                  </div>
+                                              {item.label}
+                                            </Label>
+                                          </div>
+                                        ))}
 
-                                                  {/* Sub-items */}
-                                                  {polda.subDestination &&
-                                                    expandedPolda[polda.id] && (
-                                                      <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
-                                                        {/* Tombol Pilih Semua untuk sub-items */}
-                                                        <div className="mb-2 flex justify-start">
-                                                          {(() => {
-                                                            const allSubItemsChecked =
-                                                              polda.subDestination?.every(
-                                                                (sub: any) =>
-                                                                  fileCheckedLevels[
-                                                                    index
-                                                                  ]?.has(
-                                                                    Number(
-                                                                      sub.id
-                                                                    )
-                                                                  )
-                                                              );
-                                                            return (
-                                                              <Button
-                                                                size="sm"
-                                                                variant="outline"
-                                                                className="text-xs h-6 px-2"
-                                                                onClick={() =>
-                                                                  handleSelectAllSubItems(
-                                                                    index,
-                                                                    polda
-                                                                  )
-                                                                }
-                                                              >
-                                                                {allSubItemsChecked ? (
-                                                                  <>
-                                                                    <Icon
-                                                                      icon="material-symbols:check-indeterminate-small"
-                                                                      width={12}
-                                                                      height={
-                                                                        12
-                                                                      }
-                                                                      className="mr-1"
-                                                                    />
-                                                                    Batal Semua
-                                                                  </>
-                                                                ) : (
-                                                                  <>
-                                                                    <Icon
-                                                                      icon="material-symbols:check-all"
-                                                                      width={12}
-                                                                      height={
-                                                                        12
-                                                                      }
-                                                                      className="mr-1"
-                                                                    />
-                                                                    Pilih Semua
-                                                                  </>
-                                                                )}
-                                                              </Button>
+                                        {/* Tombol Kustom sejajar dengan checkbox */}
+                                        <div className="flex items-center justify-center p-3">
+                                          <Dialog>
+                                            <DialogTrigger asChild>
+                                              <Button
+                                                variant="outline"
+                                                size="sm"
+                                                className="gap-2"
+                                              >
+                                                <Icon
+                                                  icon="material-symbols:tune"
+                                                  width={16}
+                                                  height={16}
+                                                />
+                                                {t("custom", {
+                                                  defaultValue: "Kustom",
+                                                })}
+                                              </Button>
+                                            </DialogTrigger>
+                                            <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
+                                              <DialogHeader className="border-b border-gray-200 pb-4">
+                                                <DialogTitle className="text-lg font-semibold">
+                                                  Daftar Wilayah POLDA dan
+                                                  POLRES
+                                                </DialogTitle>
+                                              </DialogHeader>
+                                              <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
+                                                {listDest.map((polda: any) => (
+                                                  <div
+                                                    key={polda.id}
+                                                    className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
+                                                  >
+                                                    {/* Header POLDA */}
+                                                    <div className="flex items-center justify-between">
+                                                      <Label className="flex items-center gap-3 flex-1 cursor-pointer">
+                                                        <Checkbox
+                                                          checked={
+                                                            fileCheckedLevels[
+                                                              index
+                                                            ]?.has(
+                                                              Number(polda.id),
+                                                            ) || false
+                                                          }
+                                                          onCheckedChange={() =>
+                                                            handleFileCheckboxChangePlacement(
+                                                              index,
+                                                              Number(polda.id),
+                                                            )
+                                                          }
+                                                        />
+                                                        <span className="font-semibold text-gray-900 text-sm">
+                                                          {polda.name}
+                                                        </span>
+                                                      </Label>
+                                                      {polda.subDestination && (
+                                                        <button
+                                                          onClick={(e) => {
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                            toggleExpand(
+                                                              polda.id,
                                                             );
-                                                          })()}
-                                                        </div>
-                                                        <div className="space-y-1">
-                                                          {polda.subDestination.map(
-                                                            (sub: any) => (
-                                                              <Label
-                                                                key={sub.id}
-                                                                className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
-                                                              >
-                                                                <Checkbox
-                                                                  checked={
+                                                          }}
+                                                          className="p-1 hover:bg-gray-100 rounded-md transition-colors"
+                                                        >
+                                                          <Icon
+                                                            icon={
+                                                              expandedPolda[
+                                                                polda.id
+                                                              ]
+                                                                ? "mdi:chevron-up"
+                                                                : "mdi:chevron-down"
+                                                            }
+                                                            width={16}
+                                                            height={16}
+                                                          />
+                                                        </button>
+                                                      )}
+                                                    </div>
+
+                                                    {/* Sub-items */}
+                                                    {polda.subDestination &&
+                                                      expandedPolda[
+                                                        polda.id
+                                                      ] && (
+                                                        <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
+                                                          {/* Tombol Pilih Semua untuk sub-items */}
+                                                          <div className="mb-2 flex justify-start">
+                                                            {(() => {
+                                                              const allSubItemsChecked =
+                                                                polda.subDestination?.every(
+                                                                  (sub: any) =>
                                                                     fileCheckedLevels[
                                                                       index
                                                                     ]?.has(
                                                                       Number(
-                                                                        sub.id
-                                                                      )
-                                                                    ) || false
-                                                                  }
-                                                                  onCheckedChange={() =>
-                                                                    handleFileCheckboxChangePlacement(
+                                                                        sub.id,
+                                                                      ),
+                                                                    ),
+                                                                );
+                                                              return (
+                                                                <Button
+                                                                  size="sm"
+                                                                  variant="outline"
+                                                                  className="text-xs h-6 px-2"
+                                                                  onClick={() =>
+                                                                    handleSelectAllSubItems(
                                                                       index,
-                                                                      Number(
-                                                                        sub.id
-                                                                      )
+                                                                      polda,
                                                                     )
                                                                   }
-                                                                />
-                                                                <span className="text-gray-700">
-                                                                  {sub.name}
-                                                                </span>
-                                                              </Label>
-                                                            )
-                                                          )}
+                                                                >
+                                                                  {allSubItemsChecked ? (
+                                                                    <>
+                                                                      <Icon
+                                                                        icon="material-symbols:check-indeterminate-small"
+                                                                        width={
+                                                                          12
+                                                                        }
+                                                                        height={
+                                                                          12
+                                                                        }
+                                                                        className="mr-1"
+                                                                      />
+                                                                      Batal
+                                                                      Semua
+                                                                    </>
+                                                                  ) : (
+                                                                    <>
+                                                                      <Icon
+                                                                        icon="material-symbols:check-all"
+                                                                        width={
+                                                                          12
+                                                                        }
+                                                                        height={
+                                                                          12
+                                                                        }
+                                                                        className="mr-1"
+                                                                      />
+                                                                      Pilih
+                                                                      Semua
+                                                                    </>
+                                                                  )}
+                                                                </Button>
+                                                              );
+                                                            })()}
+                                                          </div>
+                                                          <div className="space-y-1">
+                                                            {polda.subDestination.map(
+                                                              (sub: any) => (
+                                                                <Label
+                                                                  key={sub.id}
+                                                                  className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
+                                                                >
+                                                                  <Checkbox
+                                                                    checked={
+                                                                      fileCheckedLevels[
+                                                                        index
+                                                                      ]?.has(
+                                                                        Number(
+                                                                          sub.id,
+                                                                        ),
+                                                                      ) || false
+                                                                    }
+                                                                    onCheckedChange={() =>
+                                                                      handleFileCheckboxChangePlacement(
+                                                                        index,
+                                                                        Number(
+                                                                          sub.id,
+                                                                        ),
+                                                                      )
+                                                                    }
+                                                                  />
+                                                                  <span className="text-gray-700">
+                                                                    {sub.name}
+                                                                  </span>
+                                                                </Label>
+                                                              ),
+                                                            )}
+                                                          </div>
                                                         </div>
-                                                      </div>
-                                                    )}
-                                                </div>
-                                              ))}
-                                            </div>
-                                            <div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
-                                              <DialogClose asChild>
-                                                <Button variant="outline">
-                                                  {t("cancel", {
-                                                    defaultValue: "Batal",
-                                                  })}
-                                                </Button>
-                                              </DialogClose>
-                                              <DialogClose asChild>
-                                                <Button>
-                                                  {/* {t("save", {
+                                                      )}
+                                                  </div>
+                                                ))}
+                                              </div>
+                                              <div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
+                                                <DialogClose asChild>
+                                                  <Button variant="outline">
+                                                    {t("cancel", {
+                                                      defaultValue: "Batal",
+                                                    })}
+                                                  </Button>
+                                                </DialogClose>
+                                                <DialogClose asChild>
+                                                  <Button>
+                                                    {/* {t("save", {
                                                     defaultValue: "Simpan",
                                                   })} */}
-                                                  Simpan
-                                                </Button>
-                                              </DialogClose>
-                                            </div>
-                                          </DialogContent>
-                                        </Dialog>
+                                                    Simpan
+                                                  </Button>
+                                                </DialogClose>
+                                              </div>
+                                            </DialogContent>
+                                          </Dialog>
+                                        </div>
                                       </div>
                                     </div>
-                                  </div>
-                                )}
+                                  )}
                               </div>
                             </div>
                           ) : (
@@ -1833,7 +1886,7 @@ export default function FormTeksDetail() {
                                   >
                                     {template}
                                   </Button>
-                                )
+                                ),
                               )}
                             </div>
                           </div>

components/form/content/teks-form.tsx

@@ -749,7 +749,7 @@ export default function FormTeks() {
     setIsStartUpload(true);
     setProgressList(progressInfoArr);
 
-    close();
+    // close();
     files.map(async (item: any, index: number) => {
       await uploadResumableFile(
         index,
@@ -861,6 +861,7 @@ export default function FormTeks() {
     }
     if (counter == progressInfo.length) {
       setIsStartUpload(false);
+       close();
       // hideProgress();
       Cookies.remove("idCreate");
       successSubmit("/in/contributor/content/teks");
@@ -1775,7 +1776,7 @@ export default function FormTeks() {
               {/* <Button type="submit" color="primary">
                 {t("submit", { defaultValue: "Submit" })}
               </Button> */}
-              {levelNumber !== "2" && levelNumber !== "3" && (
+              {levelNumber !== "2" && (
                 <Button type="submit" color="primary">
                   {t("submit", { defaultValue: "Submit" })}
                 </Button>

components/form/content/video-detail-form.tsx

@@ -115,7 +115,7 @@ const ViewEditor = dynamic(
   () => {
     return import("@/components/editor/view-editor");
   },
-  { ssr: false }
+  { ssr: false },
 );
 
 interface Destination {
@@ -190,6 +190,12 @@ export default function FormVideoDetail() {
       satker: boolean;
     }>
   >([]);
+  const [creatorLevelNumber, setCreatorLevelNumber] = useState<number | null>(
+    null,
+  );
+  const isContentFromSatker = creatorLevelNumber === 3;
+  const isContentFromMabesOrPolda =
+    creatorLevelNumber === 1 || creatorLevelNumber === 2;
 
   useEffect(() => {
     if (Number(userLevelId) === 216 && Number(roleId) === 3) {
@@ -201,7 +207,7 @@ export default function FormVideoDetail() {
   const handleFileUnitChange = (
     fileIndex: number,
     key: keyof typeof unitSelection,
-    value: boolean
+    value: boolean,
   ) => {
     setFileUnitSelections((prev) => {
       const newSelections = [...prev];
@@ -221,7 +227,7 @@ export default function FormVideoDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[fileIndex] || new Set()
+            newArray[fileIndex] || new Set(),
           );
 
           if (value) {
@@ -252,12 +258,12 @@ export default function FormVideoDetail() {
               (item: any) =>
                 item.levelNumber === 2 &&
                 item.name !== "SATKER POLRI" &&
-                currentFileCheckedLevels.has(Number(item.id))
+                currentFileCheckedLevels.has(Number(item.id)),
             );
 
           if (!hasSelectedPolda) {
             alert(
-              "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
+              "Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES.",
             );
             return prev; // Batalkan perubahan
           }
@@ -296,7 +302,7 @@ export default function FormVideoDetail() {
   useEffect(() => {
     if (detail?.assignedToTopLevel) {
       const outputSet = new Set(
-        detail.assignedToTopLevel.split(",").map(Number)
+        detail.assignedToTopLevel.split(",").map(Number),
       );
       setUnitSelection({
         semua: outputSet.has(0),
@@ -321,7 +327,7 @@ export default function FormVideoDetail() {
             acc[polda.id] = false;
             return acc;
           },
-          {}
+          {},
         );
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
@@ -356,7 +362,7 @@ export default function FormVideoDetail() {
 
   const handleUnitChange = (
     key: keyof typeof unitSelection,
-    value: boolean
+    value: boolean,
   ) => {
     if (key === "semua") {
       const newState = {
@@ -435,7 +441,7 @@ export default function FormVideoDetail() {
 
   const handleCheckboxChange = (id: number) => {
     setSelectedPublishers((prev) =>
-      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
     );
   };
 
@@ -457,7 +463,7 @@ export default function FormVideoDetail() {
 
       if (scheduleId && scheduleType === "3") {
         const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
+          o.name.toLowerCase().includes("pers rilis"),
         );
 
         if (findCategory) {
@@ -480,6 +486,10 @@ export default function FormVideoDetail() {
         console.log("detail", details);
         setFiles(details?.files);
         setDetail(details);
+        if (details?.uploadedBy?.userLevel?.levelNumber) {
+          setCreatorLevelNumber(details.uploadedBy.userLevel.levelNumber);
+        }
+
         setMain({
           type: details?.fileType.name,
           url: details?.files[0]?.url,
@@ -489,14 +499,14 @@ export default function FormVideoDetail() {
 
         if (details?.assignedToLevel) {
           const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
+            details.assignedToLevel.split(",").map(Number),
           );
           setCheckedLevels(levels);
         }
 
         if (details?.publishedForObject) {
           const publisherIds = details?.publishedForObject?.map(
-            (obj: any) => obj.id
+            (obj: any) => obj.id,
           );
           setSelectedPublishers(publisherIds);
         }
@@ -506,7 +516,7 @@ export default function FormVideoDetail() {
 
         const filesData = details?.files || [];
         const fileUrls = filesData.map((files: { url: string }) =>
-          files.url ? files.url : "default-image.jpg"
+          files.url ? files.url : "default-image.jpg",
         );
         setDetailVideo(fileUrls);
 
@@ -684,7 +694,7 @@ export default function FormVideoDetail() {
   const setupPlacement = (
     index: number,
     placement: string,
-    checked: boolean
+    checked: boolean,
   ) => {
     let temp = [...filePlacements];
     if (checked) {
@@ -695,7 +705,7 @@ export default function FormVideoDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[index] || new Set()
+            newArray[index] || new Set(),
           );
 
           // Checklist semua item di modal
@@ -745,7 +755,7 @@ export default function FormVideoDetail() {
         // Hanya auto-checklist "all" jika polda, polres, dan mabes ter-checklist
         // JANGAN include satker dalam perhitungan auto "all"
         const nonSatkerItems = now.filter(
-          (item) => item !== "satker" && item !== "all"
+          (item) => item !== "satker" && item !== "all",
         );
         if (nonSatkerItems.length === 3 && !now.includes("all")) {
           now.push("all");
@@ -760,7 +770,7 @@ export default function FormVideoDetail() {
         setFileCheckedLevels((prevLevels) => {
           const newArray = [...prevLevels];
           const currentFileLevels = new Set<number>(
-            newArray[index] || new Set()
+            newArray[index] || new Set(),
           );
 
           // Unchecklist semua item di modal
@@ -794,7 +804,7 @@ export default function FormVideoDetail() {
         // Hapus "all" jika tidak semua item ter-checklist
         if (now.includes("all")) {
           const nonSatkerItems = now.filter(
-            (item) => item !== "satker" && item !== "all"
+            (item) => item !== "satker" && item !== "all",
           );
           if (nonSatkerItems.length < 3) {
             const newData = now.filter((b) => b !== "all");
@@ -812,7 +822,7 @@ export default function FormVideoDetail() {
   const updateModalChecklistLevels = (
     fileIndex: number,
     placement: string,
-    checked: boolean
+    checked: boolean,
   ) => {
     if (!listDest || listDest.length === 0) return;
 
@@ -845,7 +855,7 @@ export default function FormVideoDetail() {
         } else if (placement === "satker") {
           // Checklist SATKER POLRI dan semua sub-item di bawahnya
           const satkerItem: any = listDest.find(
-            (item: any) => item.name === "SATKER POLRI"
+            (item: any) => item.name === "SATKER POLRI",
           );
           if (satkerItem) {
             currentFileLevels.add(Number(satkerItem.id));
@@ -881,7 +891,7 @@ export default function FormVideoDetail() {
         } else if (placement === "satker") {
           // Unchecklist SATKER POLRI dan semua sub-item di bawahnya
           const satkerItem: any = listDest.find(
-            (item: any) => item.name === "SATKER POLRI"
+            (item: any) => item.name === "SATKER POLRI",
           );
           if (satkerItem) {
             currentFileLevels.delete(Number(satkerItem.id));
@@ -910,7 +920,7 @@ export default function FormVideoDetail() {
     type: string,
     url: string,
     names: string,
-    format: string
+    format: string,
   ) => {
     console.log("Test 3 :", type, url, names, format);
     setMain({
@@ -951,7 +961,7 @@ export default function FormVideoDetail() {
   // Fungsi untuk mengupdate checklist levels untuk file tertentu
   const handleFileCheckboxChangePlacement = (
     fileIndex: number,
-    levelId: number
+    levelId: number,
   ) => {
     setFileCheckedLevels((prev) => {
       const newArray = [...prev];
@@ -963,7 +973,7 @@ export default function FormVideoDetail() {
 
         // Jika ini adalah POLDA yang di-unchecklist, unchecklist juga semua polres di bawahnya
         const poldaItem = listDest.find(
-          (item: any) => Number(item.id) === levelId
+          (item: any) => Number(item.id) === levelId,
         ) as any;
         if (
           poldaItem &&
@@ -986,7 +996,7 @@ export default function FormVideoDetail() {
 
         // Jika ini adalah SATKER POLRI yang di-checklist, checklist juga semua sub-item di bawahnya
         const satkerItem = listDest.find(
-          (item: any) => Number(item.id) === levelId
+          (item: any) => Number(item.id) === levelId,
         ) as any;
         if (satkerItem && satkerItem.name === "SATKER POLRI") {
           // Checklist semua sub-item di bawah SATKER POLRI (bukan POLRES)
@@ -1017,7 +1027,7 @@ export default function FormVideoDetail() {
 
       // Hitung total POLDA yang ada (bukan SATKER POLRI)
       const totalPoldaCount = listDest.filter(
-        (item: any) => item.levelNumber === 2 && item.name !== "SATKER POLRI"
+        (item: any) => item.levelNumber === 2 && item.name !== "SATKER POLRI",
       ).length;
 
       // Hitung berapa banyak POLDA yang ter-checklist (bukan SATKER POLRI)
@@ -1044,7 +1054,7 @@ export default function FormVideoDetail() {
           }
           return total;
         },
-        0
+        0,
       );
 
       // Hitung berapa banyak POLRES yang ter-checklist
@@ -1054,7 +1064,7 @@ export default function FormVideoDetail() {
           return (
             total +
             item.subDestination.filter((sub: any) =>
-              currentFileLevels.has(Number(sub.id))
+              currentFileLevels.has(Number(sub.id)),
             ).length
           );
         }
@@ -1063,7 +1073,7 @@ export default function FormVideoDetail() {
 
       // Cek apakah SATKER POLRI ter-checklist
       const satkerItem = listDest.find(
-        (item: any) => item.name === "SATKER POLRI"
+        (item: any) => item.name === "SATKER POLRI",
       );
       const isSatkerChecked =
         satkerItem && currentFileLevels.has(Number(satkerItem.id));
@@ -1097,7 +1107,7 @@ export default function FormVideoDetail() {
 
       // Cek apakah semua sub-items sudah ter-checklist
       const allSubItemsChecked = polda.subDestination?.every((sub: any) =>
-        currentFileLevels.has(Number(sub.id))
+        currentFileLevels.has(Number(sub.id)),
       );
 
       if (allSubItemsChecked) {
@@ -1180,7 +1190,7 @@ export default function FormVideoDetail() {
                         {detail &&
                           !categories.find(
                             (cat) =>
-                              String(cat.id) === String(detail.category.id)
+                              String(cat.id) === String(detail.category.id),
                           ) && (
                             <SelectItem
                               key={String(detail.category.id)}
@@ -1465,7 +1475,7 @@ export default function FormVideoDetail() {
                                     Tingkat Distribusi:
                                   </p>
                                   <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-                                    {[
+                                    {/* {[
                                       { key: "semua", label: "Semua" },
                                       { key: "nasional", label: "Nasional" },
                                       { key: "wilayah", label: "Wilayah" },
@@ -1473,6 +1483,39 @@ export default function FormVideoDetail() {
                                         key: "international",
                                         label: "Internasional",
                                       },
+                                    ] */}
+                                    {[
+                                      { key: "semua", label: "Semua" },
+
+                                      ...(isContentFromMabesOrPolda
+                                        ? [
+                                            {
+                                              key: "nasional",
+                                              label: "Nasional",
+                                            },
+                                            {
+                                              key: "international",
+                                              label: "Internasional",
+                                            },
+                                            {
+                                              key: "wilayah",
+                                              label: "Wilayah",
+                                            },
+                                          ]
+                                        : []),
+
+                                      ...(isContentFromSatker
+                                        ? [
+                                            {
+                                              key: "nasional",
+                                              label: "Nasional",
+                                            },
+                                            {
+                                              key: "international",
+                                              label: "Internasional",
+                                            },
+                                          ]
+                                        : []),
                                     ].map((item, idx) => (
                                       <div
                                         key={item.key}
@@ -1489,12 +1532,12 @@ export default function FormVideoDetail() {
                                             handleFileUnitChange(
                                               index,
                                               item.key as keyof typeof unitSelection,
-                                              value as boolean
+                                              value as boolean,
                                             );
                                             setupPlacement(
                                               index,
                                               item.key,
-                                              Boolean(value)
+                                              Boolean(value),
                                             );
                                           }}
                                         />
@@ -1510,251 +1553,262 @@ export default function FormVideoDetail() {
                                 </div>
 
                                 {/* Detail Wilayah */}
-                                {fileUnitSelections[index]?.wilayah && (
-                                  <div className="border-t border-gray-200 pt-2">
-                                    <p className="text-sm font-medium text-gray-700 mb-2">
-                                      Detail Wilayah:
-                                    </p>
+                                {/* {fileUnitSelections[index]?.wilayah && ( */}
+                                {!isContentFromSatker &&
+                                  fileUnitSelections[index]?.wilayah && (
+                                    <div className="border-t border-gray-200 pt-2">
+                                      <p className="text-sm font-medium text-gray-700 mb-2">
+                                        Detail Wilayah:
+                                      </p>
 
-                                    {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
-                                    <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-                                      {[
-                                        { key: "polda", label: "POLDA" },
-                                        { key: "polres", label: "POLRES" },
-                                        { key: "satker", label: "SATKER" },
-                                      ].map((item, idx) => (
-                                        <div
-                                          key={item.key}
-                                          className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
-                                        >
-                                          <Checkbox
-                                            id={`${item.key}-${index}`}
-                                            checked={
-                                              fileUnitSelections[index]?.[
-                                                item.key as keyof typeof unitSelection
-                                              ] || false
-                                            }
-                                            onCheckedChange={(value) => {
-                                              handleFileUnitChange(
-                                                index,
-                                                item.key as keyof typeof unitSelection,
-                                                value as boolean
-                                              );
-                                              setupPlacement(
-                                                index,
-                                                item.key,
-                                                Boolean(value)
-                                              );
-                                            }}
-                                          />
-                                          <Label
-                                            htmlFor={`${item.key}-${index}`}
-                                            className="text-sm font-medium cursor-pointer"
+                                      {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
+                                      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+                                        {[
+                                          { key: "polda", label: "POLDA" },
+                                          { key: "polres", label: "POLRES" },
+                                          { key: "satker", label: "SATKER" },
+                                        ].map((item, idx) => (
+                                          <div
+                                            key={item.key}
+                                            className="flex items-center gap-2 p-3 border border-gray-200 rounded-md hover:bg-gray-50"
                                           >
-                                            {item.label}
-                                          </Label>
-                                        </div>
-                                      ))}
-
-                                      {/* Tombol Kustom sejajar dengan checkbox */}
-                                      <div className="flex items-center justify-center p-3">
-                                        <Dialog>
-                                          <DialogTrigger asChild>
-                                            <Button
-                                              variant="outline"
-                                              size="sm"
-                                              className="gap-2"
+                                            <Checkbox
+                                              id={`${item.key}-${index}`}
+                                              checked={
+                                                fileUnitSelections[index]?.[
+                                                  item.key as keyof typeof unitSelection
+                                                ] || false
+                                              }
+                                              onCheckedChange={(value) => {
+                                                handleFileUnitChange(
+                                                  index,
+                                                  item.key as keyof typeof unitSelection,
+                                                  value as boolean,
+                                                );
+                                                setupPlacement(
+                                                  index,
+                                                  item.key,
+                                                  Boolean(value),
+                                                );
+                                              }}
+                                            />
+                                            <Label
+                                              htmlFor={`${item.key}-${index}`}
+                                              className="text-sm font-medium cursor-pointer"
                                             >
-                                              <Icon
-                                                icon="material-symbols:tune"
-                                                width={16}
-                                                height={16}
-                                              />
-                                              {t("custom", {
-                                                defaultValue: "Kustom",
-                                              })}
-                                            </Button>
-                                          </DialogTrigger>
-                                          <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
-                                            <DialogHeader className="border-b border-gray-200 pb-4">
-                                              <DialogTitle className="text-lg font-semibold">
-                                                Daftar Wilayah POLDA dan POLRES
-                                              </DialogTitle>
-                                            </DialogHeader>
-                                            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
-                                              {listDest.map((polda: any) => (
-                                                <div
-                                                  key={polda.id}
-                                                  className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
-                                                >
-                                                  {/* Header POLDA */}
-                                                  <div className="flex items-center justify-between">
-                                                    <Label className="flex items-center gap-3 flex-1 cursor-pointer">
-                                                      <Checkbox
-                                                        checked={
-                                                          fileCheckedLevels[
-                                                            index
-                                                          ]?.has(
-                                                            Number(polda.id)
-                                                          ) || false
-                                                        }
-                                                        onCheckedChange={() =>
-                                                          handleFileCheckboxChangePlacement(
-                                                            index,
-                                                            Number(polda.id)
-                                                          )
-                                                        }
-                                                      />
-                                                      <span className="font-semibold text-gray-900 text-sm">
-                                                        {polda.name}
-                                                      </span>
-                                                    </Label>
-                                                    {polda.subDestination && (
-                                                      <button
-                                                        onClick={(e) => {
-                                                          e.preventDefault();
-                                                          e.stopPropagation();
-                                                          toggleExpand(
-                                                            polda.id
-                                                          );
-                                                        }}
-                                                        className="p-1 hover:bg-gray-100 rounded-md transition-colors"
-                                                      >
-                                                        <Icon
-                                                          icon={
-                                                            expandedPolda[
-                                                              polda.id
-                                                            ]
-                                                              ? "mdi:chevron-up"
-                                                              : "mdi:chevron-down"
-                                                          }
-                                                          width={16}
-                                                          height={16}
-                                                        />
-                                                      </button>
-                                                    )}
-                                                  </div>
+                                              {item.label}
+                                            </Label>
+                                          </div>
+                                        ))}
 
-                                                  {/* Sub-items */}
-                                                  {polda.subDestination &&
-                                                    expandedPolda[polda.id] && (
-                                                      <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
-                                                        {/* Tombol Pilih Semua untuk sub-items */}
-                                                        <div className="mb-2 flex justify-start">
-                                                          {(() => {
-                                                            const allSubItemsChecked =
-                                                              polda.subDestination?.every(
-                                                                (sub: any) =>
-                                                                  fileCheckedLevels[
-                                                                    index
-                                                                  ]?.has(
-                                                                    Number(
-                                                                      sub.id
-                                                                    )
-                                                                  )
-                                                              );
-                                                            return (
-                                                              <Button
-                                                                size="sm"
-                                                                variant="outline"
-                                                                className="text-xs h-6 px-2"
-                                                                onClick={() =>
-                                                                  handleSelectAllSubItems(
-                                                                    index,
-                                                                    polda
-                                                                  )
-                                                                }
-                                                              >
-                                                                {allSubItemsChecked ? (
-                                                                  <>
-                                                                    <Icon
-                                                                      icon="material-symbols:check-indeterminate-small"
-                                                                      width={12}
-                                                                      height={
-                                                                        12
-                                                                      }
-                                                                      className="mr-1"
-                                                                    />
-                                                                    Batal Semua
-                                                                  </>
-                                                                ) : (
-                                                                  <>
-                                                                    <Icon
-                                                                      icon="material-symbols:check-all"
-                                                                      width={12}
-                                                                      height={
-                                                                        12
-                                                                      }
-                                                                      className="mr-1"
-                                                                    />
-                                                                    Pilih Semua
-                                                                  </>
-                                                                )}
-                                                              </Button>
+                                        {/* Tombol Kustom sejajar dengan checkbox */}
+                                        <div className="flex items-center justify-center p-3">
+                                          <Dialog>
+                                            <DialogTrigger asChild>
+                                              <Button
+                                                variant="outline"
+                                                size="sm"
+                                                className="gap-2"
+                                              >
+                                                <Icon
+                                                  icon="material-symbols:tune"
+                                                  width={16}
+                                                  height={16}
+                                                />
+                                                {t("custom", {
+                                                  defaultValue: "Kustom",
+                                                })}
+                                              </Button>
+                                            </DialogTrigger>
+                                            <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
+                                              <DialogHeader className="border-b border-gray-200 pb-4">
+                                                <DialogTitle className="text-lg font-semibold">
+                                                  Daftar Wilayah POLDA dan
+                                                  POLRES
+                                                </DialogTitle>
+                                              </DialogHeader>
+                                              <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
+                                                {listDest.map((polda: any) => (
+                                                  <div
+                                                    key={polda.id}
+                                                    className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
+                                                  >
+                                                    {/* Header POLDA */}
+                                                    <div className="flex items-center justify-between">
+                                                      <Label className="flex items-center gap-3 flex-1 cursor-pointer">
+                                                        <Checkbox
+                                                          checked={
+                                                            fileCheckedLevels[
+                                                              index
+                                                            ]?.has(
+                                                              Number(polda.id),
+                                                            ) || false
+                                                          }
+                                                          onCheckedChange={() =>
+                                                            handleFileCheckboxChangePlacement(
+                                                              index,
+                                                              Number(polda.id),
+                                                            )
+                                                          }
+                                                        />
+                                                        <span className="font-semibold text-gray-900 text-sm">
+                                                          {polda.name}
+                                                        </span>
+                                                      </Label>
+                                                      {polda.subDestination && (
+                                                        <button
+                                                          onClick={(e) => {
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                            toggleExpand(
+                                                              polda.id,
                                                             );
-                                                          })()}
-                                                        </div>
-                                                        <div className="space-y-1">
-                                                          {polda.subDestination.map(
-                                                            (sub: any) => (
-                                                              <Label
-                                                                key={sub.id}
-                                                                className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
-                                                              >
-                                                                <Checkbox
-                                                                  checked={
+                                                          }}
+                                                          className="p-1 hover:bg-gray-100 rounded-md transition-colors"
+                                                        >
+                                                          <Icon
+                                                            icon={
+                                                              expandedPolda[
+                                                                polda.id
+                                                              ]
+                                                                ? "mdi:chevron-up"
+                                                                : "mdi:chevron-down"
+                                                            }
+                                                            width={16}
+                                                            height={16}
+                                                          />
+                                                        </button>
+                                                      )}
+                                                    </div>
+
+                                                    {/* Sub-items */}
+                                                    {polda.subDestination &&
+                                                      expandedPolda[
+                                                        polda.id
+                                                      ] && (
+                                                        <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
+                                                          {/* Tombol Pilih Semua untuk sub-items */}
+                                                          <div className="mb-2 flex justify-start">
+                                                            {(() => {
+                                                              const allSubItemsChecked =
+                                                                polda.subDestination?.every(
+                                                                  (sub: any) =>
                                                                     fileCheckedLevels[
                                                                       index
                                                                     ]?.has(
                                                                       Number(
-                                                                        sub.id
-                                                                      )
-                                                                    ) || false
-                                                                  }
-                                                                  onCheckedChange={() =>
-                                                                    handleFileCheckboxChangePlacement(
+                                                                        sub.id,
+                                                                      ),
+                                                                    ),
+                                                                );
+                                                              return (
+                                                                <Button
+                                                                  size="sm"
+                                                                  variant="outline"
+                                                                  className="text-xs h-6 px-2"
+                                                                  onClick={() =>
+                                                                    handleSelectAllSubItems(
                                                                       index,
-                                                                      Number(
-                                                                        sub.id
-                                                                      )
+                                                                      polda,
                                                                     )
                                                                   }
-                                                                />
-                                                                <span className="text-gray-700">
-                                                                  {sub.name}
-                                                                </span>
-                                                              </Label>
-                                                            )
-                                                          )}
+                                                                >
+                                                                  {allSubItemsChecked ? (
+                                                                    <>
+                                                                      <Icon
+                                                                        icon="material-symbols:check-indeterminate-small"
+                                                                        width={
+                                                                          12
+                                                                        }
+                                                                        height={
+                                                                          12
+                                                                        }
+                                                                        className="mr-1"
+                                                                      />
+                                                                      Batal
+                                                                      Semua
+                                                                    </>
+                                                                  ) : (
+                                                                    <>
+                                                                      <Icon
+                                                                        icon="material-symbols:check-all"
+                                                                        width={
+                                                                          12
+                                                                        }
+                                                                        height={
+                                                                          12
+                                                                        }
+                                                                        className="mr-1"
+                                                                      />
+                                                                      Pilih
+                                                                      Semua
+                                                                    </>
+                                                                  )}
+                                                                </Button>
+                                                              );
+                                                            })()}
+                                                          </div>
+                                                          <div className="space-y-1">
+                                                            {polda.subDestination.map(
+                                                              (sub: any) => (
+                                                                <Label
+                                                                  key={sub.id}
+                                                                  className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 transition-colors cursor-pointer text-xs"
+                                                                >
+                                                                  <Checkbox
+                                                                    checked={
+                                                                      fileCheckedLevels[
+                                                                        index
+                                                                      ]?.has(
+                                                                        Number(
+                                                                          sub.id,
+                                                                        ),
+                                                                      ) || false
+                                                                    }
+                                                                    onCheckedChange={() =>
+                                                                      handleFileCheckboxChangePlacement(
+                                                                        index,
+                                                                        Number(
+                                                                          sub.id,
+                                                                        ),
+                                                                      )
+                                                                    }
+                                                                  />
+                                                                  <span className="text-gray-700">
+                                                                    {sub.name}
+                                                                  </span>
+                                                                </Label>
+                                                              ),
+                                                            )}
+                                                          </div>
                                                         </div>
-                                                      </div>
-                                                    )}
-                                                </div>
-                                              ))}
-                                            </div>
-                                            <div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
-                                              <DialogClose asChild>
-                                                <Button variant="outline">
-                                                  {t("cancel", {
-                                                    defaultValue: "Batal",
-                                                  })}
-                                                </Button>
-                                              </DialogClose>
-                                              <DialogClose asChild>
-                                                <Button>
-                                                  {/* {t("save", {
+                                                      )}
+                                                  </div>
+                                                ))}
+                                              </div>
+                                              <div className="flex justify-end gap-3 border-t border-gray-200 pt-4">
+                                                <DialogClose asChild>
+                                                  <Button variant="outline">
+                                                    {t("cancel", {
+                                                      defaultValue: "Batal",
+                                                    })}
+                                                  </Button>
+                                                </DialogClose>
+                                                <DialogClose asChild>
+                                                  <Button>
+                                                    {/* {t("save", {
                                                     defaultValue: "Simpan",
                                                   })} */}
-                                                  Simpan
-                                                </Button>
-                                              </DialogClose>
-                                            </div>
-                                          </DialogContent>
-                                        </Dialog>
+                                                    Simpan
+                                                  </Button>
+                                                </DialogClose>
+                                              </div>
+                                            </DialogContent>
+                                          </Dialog>
+                                        </div>
                                       </div>
                                     </div>
-                                  </div>
-                                )}
+                                  )}
                               </div>
                             </div>
                           ) : (
@@ -1833,7 +1887,7 @@ export default function FormVideoDetail() {
                                   >
                                     {template}
                                   </Button>
-                                )
+                                ),
                               )}
                             </div>
                           </div>

components/form/content/video-form.tsx

@@ -59,7 +59,7 @@ const CustomEditor = dynamic(
   () => {
     return import("@/components/editor/custom-editor");
   },
-  { ssr: false }
+  { ssr: false },
 );
 
 interface FileWithPreview extends File {
@@ -111,11 +111,11 @@ export default function FormVideo() {
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
   const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
+    null,
   );
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
   const [publishedForError, setPublishedForError] = useState<string | null>(
-    null
+    null,
   );
   const [selectedSize, setSelectedSize] = useState("");
   const [detailData, setDetailData] = useState<any>(null);
@@ -184,7 +184,7 @@ export default function FormVideo() {
       }
 
       const filesWithPreview = acceptedFiles.map((file) =>
-        Object.assign(file, { preview: URL.createObjectURL(file) })
+        Object.assign(file, { preview: URL.createObjectURL(file) }),
       );
 
       setFiles((prev) => {
@@ -211,11 +211,11 @@ export default function FormVideo() {
       .refine(
         (files) =>
           files.every((file: File) => ACCEPTED_FILE_TYPES.includes(file.type)),
-        { message: "File harus berformat mp4 atau mov" }
+        { message: "File harus berformat mp4 atau mov" },
       )
       .refine(
         (files) => files.every((file: File) => file.size <= MAX_FILE_SIZE),
-        { message: "Ukuran file maksimal 100 MB" }
+        { message: "Ukuran file maksimal 100 MB" },
       ),
     publishedFor: z
       .array(z.string())
@@ -423,7 +423,7 @@ export default function FormVideo() {
       const articleData = await waitForStatusUpdate();
       const cleanArticleBody = articleData?.articleBody?.replace(
         /<img[^>]*>/g,
-        ""
+        "",
       );
       const articleImagesData = articleData?.imagesUrl?.split(",");
       setValue("description", cleanArticleBody || "");
@@ -479,7 +479,7 @@ export default function FormVideo() {
 
       if (scheduleId && scheduleType === "3") {
         const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
+          o.name.toLowerCase().includes("pers rilis"),
         );
 
         if (findCategory) {
@@ -502,7 +502,7 @@ export default function FormVideo() {
         setPublishedFor(
           options
             .filter((opt: any) => opt.id !== "all")
-            .map((opt: any) => opt.id)
+            .map((opt: any) => opt.id),
         );
       }
     } else {
@@ -561,8 +561,8 @@ export default function FormVideo() {
       translatedTitle && translatedTitle.trim() !== ""
         ? translatedTitle
         : isSwitchOn
-        ? title
-        : data.title;
+          ? title
+          : data.title;
 
     // Tentukan deskripsi final:
     // Jika ada hasil translate, kirim itu ke backend
@@ -570,10 +570,10 @@ export default function FormVideo() {
       translatedContent && translatedContent.trim() !== ""
         ? translatedContent
         : isSwitchOn
-        ? data.description
-        : selectedFileType === "rewrite"
-        ? data.rewriteDescription
-        : data.descriptionOri;
+          ? data.description
+          : selectedFileType === "rewrite"
+            ? data.rewriteDescription
+            : data.descriptionOri;
 
     if (!finalDescription?.trim()) {
       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
@@ -695,7 +695,7 @@ export default function FormVideo() {
     idx: number,
     id: string,
     file: any,
-    duration: string
+    duration: string,
   ) {
     console.log(idx, id, file, duration);
 
@@ -731,7 +731,7 @@ export default function FormVideo() {
       onChunkComplete: (
         chunkSize: any,
         bytesAccepted: any,
-        bytesTotal: any
+        bytesTotal: any,
       ) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
@@ -791,8 +791,8 @@ export default function FormVideo() {
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
-      setThumbnail(file); 
-      setPreview(URL.createObjectURL(file)); 
+      setThumbnail(file);
+      setPreview(URL.createObjectURL(file));
       console.log("Selected Thumbnail:", file);
     }
   };
@@ -823,7 +823,7 @@ export default function FormVideo() {
     <div
       key={file.name}
       className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    > 
+    >
       <div className="flex gap-3 items-center">
         {/* <div className="file-preview">{renderFilePreview(file)}</div> */}
         <svg
@@ -1732,7 +1732,7 @@ export default function FormVideo() {
                             type="button"
                             onClick={() => {
                               const updatedTags = field.value.filter(
-                                (_, i) => i !== index
+                                (_, i) => i !== index,
                               );
                               field.onChange(updatedTags);
                             }}
@@ -1825,7 +1825,7 @@ export default function FormVideo() {
               {/* <Button type="submit" color="primary">
                 {t("submit", { defaultValue: "Submit" })}
               </Button> */}
-              {levelNumber !== "2" && levelNumber !== "3" && (
+              {levelNumber !== "2" && (
                 <Button type="submit" color="primary">
                   {t("submit", { defaultValue: "Submit" })}
                 </Button>

components/form/schedule/live-report-detail-form.tsx

@@ -75,6 +75,7 @@ interface Detail {
   youtubeUrl: string;
   needApprovalFrom: number;
   uploadedById: number;
+  statusId?: number;
 }
 
 export default function FormDetailLiveReport() {
@@ -101,6 +102,11 @@ export default function FormDetailLiveReport() {
   const [status, setStatus] = useState("");
   const [description, setDescription] = useState("");
   const [modalOpen, setModalOpen] = useState(false);
+  const [uploaderLevelNumber, setUploaderLevelNumber] = useState<number | null>(
+    null,
+  );
+
+  const isScheduleFromSatker = uploaderLevelNumber === 3;
 
   const {
     control,
@@ -133,6 +139,11 @@ export default function FormDetailLiveReport() {
       const details = response?.data?.data;
 
       setDetail(details);
+
+      if (details?.uploaderLevelNumber !== undefined) {
+        setUploaderLevelNumber(details.uploaderLevelNumber);
+      }
+
       if (details) {
         setDate({
           from: parseISO(details.startDate),
@@ -176,21 +187,71 @@ export default function FormDetailLiveReport() {
       statusId: Number(status),
       message: description,
       isPublish: status === "2",
-      placements: schedulePlacements?.filter((val) => val != "all")?.join(","),
+      // placements: schedulePlacements?.filter((val) => val !== "all")?.join(","),
+      placements: isScheduleFromSatker
+        ? "satker"
+        : schedulePlacements?.filter((val) => val !== "all")?.join(","),
     };
 
     loading();
     const response = await postApprovalSchedule(data);
     close();
     setModalOpen(false);
+
     if (response?.error) {
-      error(response?.message);
-      return false;
+      error(response?.message || "Gagal menyimpan data");
+      return;
     }
-    initState();
-    return false;
+
+    // ✅ update UI lokal (optimistic)
+    setDetail((prev) =>
+      prev
+        ? {
+            ...prev,
+            statusId: Number(status),
+          }
+        : prev,
+    );
+
+    Swal.fire({
+      icon: "success",
+      title: "Berhasil",
+      text:
+        status === "2"
+          ? "Jadwal berhasil disetujui"
+          : status === "3"
+            ? "Jadwal dikembalikan untuk revisi"
+            : "Jadwal berhasil ditolak",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/contributor/schedule/live-report");
+      }
+    });
   }
 
+  // async function save() {
+  //   const data = {
+  //     scheduleId: Number(id),
+  //     statusId: Number(status),
+  //     message: description,
+  //     isPublish: status === "2",
+  //     placements: schedulePlacements?.filter((val) => val != "all")?.join(","),
+  //   };
+
+  //   loading();
+  //   const response = await postApprovalSchedule(data);
+  //   close();
+  //   setModalOpen(false);
+
+  //   if (response?.error) {
+  //     error(response?.message);
+  //     return false;
+  //   }
+  //   initState();
+  //   return false;
+  // }
+
   const [schedulePlacements, setSchedulePlacements] = useState<string[]>([]);
 
   const setupPlacement = (placement: string, checked: boolean) => {
@@ -224,6 +285,15 @@ export default function FormDetailLiveReport() {
     setSchedulePlacements(temp);
   };
 
+  const isCreator = Number(detail?.uploadedById) === Number(userId);
+
+  const isApprover =
+    Number(detail?.needApprovalFrom) === Number(userLevelId) &&
+    Number(userLevelNumber) < 2;
+
+  const isAlreadyProcessed =
+    detail?.statusId === 2 || detail?.statusId === 3 || detail?.statusId === 4;
+
   return (
     <div className="flex flex-col lg:flex-row gap-2">
       <Card className="w-full lg:w-9/12">
@@ -284,7 +354,7 @@ export default function FormDetailLiveReport() {
                         variant={"outline"}
                         className={cn(
                           "w-[280px] lg:w-[250px] justify-start text-left font-normal px-0 md:px-0 lg:px-4",
-                          !date && "text-muted-foreground"
+                          !date && "text-muted-foreground",
                         )}
                       >
                         <CalendarIcon size={15} className="mr-3" />
@@ -494,7 +564,38 @@ export default function FormDetailLiveReport() {
           </AccordionItem>
         </Accordion>
 
-        {Number(detail?.needApprovalFrom) == Number(userLevelId) &&
+        {(isApprover || isCreator) && !isAlreadyProcessed && (
+          <div className="flex flex-col gap-2 p-3">
+            <Button
+              onClick={() => actionApproval("2")}
+              color="primary"
+              type="button"
+            >
+              <Icon icon="fa:check" className="mr-3" />
+              {t("accept", { defaultValue: "Accept" })}
+            </Button>
+
+            <Button
+              onClick={() => actionApproval("3")}
+              className="bg-orange-400 hover:bg-orange-300"
+              type="button"
+            >
+              <Icon icon="fa:comment-o" className="mr-3" />
+              {t("revision", { defaultValue: "Revision" })}
+            </Button>
+
+            <Button
+              onClick={() => actionApproval("4")}
+              color="destructive"
+              type="button"
+            >
+              <Icon icon="fa:times" className="mr-3" />
+              {t("reject", { defaultValue: "Reject" })}
+            </Button>
+          </div>
+        )}
+
+        {/* {Number(detail?.needApprovalFrom) == Number(userLevelId) &&
         Number(userLevelNumber) < 2 ? (
           Number(detail?.uploadedById) == Number(userId) ? (
             ""
@@ -527,13 +628,15 @@ export default function FormDetailLiveReport() {
           )
         ) : (
           ""
-        )}
+        )} */}
       </Card>
 
       <Dialog open={modalOpen} onOpenChange={setModalOpen}>
         <DialogContent className="overflow-y-auto">
           <DialogHeader>
-            <DialogTitle>{t("leave-comment", { defaultValue: "Leave Comment" })}</DialogTitle>
+            <DialogTitle>
+              {t("leave-comment", { defaultValue: "Leave Comment" })}
+            </DialogTitle>
           </DialogHeader>
           <div className="flex flex-col gap-1 text-sm">
             <p>
@@ -544,18 +647,19 @@ export default function FormDetailLiveReport() {
                   status === "2"
                     ? "text-primary"
                     : status === "3"
-                    ? "text-warning"
-                    : "text-destructive"
+                      ? "text-warning"
+                      : "text-destructive"
                 }
               >
                 {status === "2"
                   ? "Disetujui"
                   : status === "3"
-                  ? "Revisi"
-                  : "Ditolak"}
+                    ? "Revisi"
+                    : "Ditolak"}
               </span>
             </p>
-            {status === "2" && (
+            {/* {status === "2" && ( */}
+            {status === "2" && !isScheduleFromSatker && (
               <div className="flex flex-row gap-2">
                 <div className="flex items-center space-x-2">
                   <Checkbox
@@ -630,9 +734,15 @@ export default function FormDetailLiveReport() {
               type="button"
               color="primary"
               onClick={() => submit()}
+              // disabled={
+              //   description.length < 1 ||
+              //   (schedulePlacements.length < 1 && status === "2")
+              // }
               disabled={
                 description.length < 1 ||
-                (schedulePlacements.length < 1 && status === "2")
+                (!isScheduleFromSatker &&
+                  schedulePlacements.length < 1 &&
+                  status === "2")
               }
             >
               {t("submit", { defaultValue: "Submit" })}

components/form/setting/form-add-iklan-detail.tsx

@@ -530,7 +530,7 @@ export function TambahIklanDetail() {
                 </p>
 
                 <Image
-                  src={`https://netidhub.com/api/advertisements/viewer/${id}`}
+                  src={`https://new.netidhub.com/api/advertisements/viewer/${id}`}
                   alt="Thumbnail Gambar Utama"
                   className=" rounded-md my-3"
                   width={300}

components/form/setting/form-add-iklan-update.tsx

@@ -296,7 +296,7 @@ export function TambahIklanUpdate() {
       formMedia.append("file", imageFiles[0]);
     } else if (detail?.id) {
       const existingFile = await fetchExistingImageAsFile(
-        `https://netidhub.com/api/advertisements/viewer/${detail.id}`,
+        `https://new.netidhub.com/api/advertisements/viewer/${detail.id}`,
         "existing-image.jpg"
       );
       formMedia.append("file", existingFile);
@@ -631,7 +631,7 @@ export function TambahIklanUpdate() {
                 ))}
 
                 <Image
-                  src={`https://netidhub.com/api/advertisements/viewer/${id}`}
+                  src={`https://new.netidhub.com/api/advertisements/viewer/${id}`}
                   alt="Thumbnail Gambar Utama"
                   className=" rounded-md my-3"
                   width={300}

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

@@ -19,6 +19,7 @@ import {
   finishTaskTa,
   getAcceptance,
   getAcceptanceAssignmentStatus,
+  getAcceptanceTa,
   getAssignmentResponseList,
   getMediaUpload,
   getMediaUploadTa,
@@ -102,6 +103,7 @@ export type taskDetail = {
   is_active: string;
   isAssignmentAccepted: boolean;
   isDone: any;
+  isAccept?: boolean;
 };
 
 interface ListData {
@@ -172,9 +174,16 @@ interface UploadResult {
   creatorGroup: string;
 }
 
+// interface FileUploaded {
+//   id: number;
+//   url: string;
+// }
+
 interface FileUploaded {
   id: number;
   url: string;
+  fileName: string;
+  fileTypeId: number;
 }
 
 export default function FormTaskTaDetail() {
@@ -244,18 +253,6 @@ export default function FormTaskTaDetail() {
   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);
-  const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]);
-  const [videoFiles, setVideoFiles] = useState<FileWithPreview[]>([]);
-  const [textFiles, setTextFiles] = useState<FileWithPreview[]>([]);
-  const [audioFiles, setAudioFiles] = useState<FileWithPreview[]>([]);
-  const [isImageUploadFinish, setIsImageUploadFinish] = useState(false);
-  const [isVideoUploadFinish, setIsVideoUploadFinish] = useState(false);
-  const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
-  const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
-  const [voiceNoteLink, setVoiceNoteLink] = useState("");
   const [statusAcceptance, setStatusAcceptance] = useState();
   const [modalType, setModalType] = useState<"terkirim" | "diterima" | "">("");
   const [Isloading, setLoading] = useState<boolean>(false);
@@ -265,10 +262,8 @@ export default function FormTaskTaDetail() {
   const [isRecording, setIsRecording] = useState(false);
   const [timer, setTimer] = useState<number>(120);
   const [search, setSearch] = React.useState<string>("");
-
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
   const [isPlaying, setIsPlaying] = useState(false);
-
   const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>(
     []
   );
@@ -293,6 +288,8 @@ export default function FormTaskTaDetail() {
   const [selectedAudio, setSelectedAudio] = useState<string | null>(
     audioUploadedFiles?.[0]?.url || null
   );
+  const [acceptLoading, setAcceptLoading] = useState(false);
+  const [isAccepted, setIsAccepted] = useState(false);
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -400,6 +397,31 @@ export default function FormTaskTaDetail() {
     fetchListExpert();
   }, []);
 
+  useEffect(() => {
+    async function fetchAcceptanceStatus() {
+      const res = await getAcceptanceAssignmentStatus(id);
+      // API: /assignment/acceptance?id=103&isAccept=true
+      const status = res?.data?.data?.isAccept === true;
+
+      setIsAccepted(status);
+    }
+
+    fetchAcceptanceStatus();
+  }, [id]);
+
+  const getViewerUrl = (url: string) => {
+    const ext = url.split(".").pop()?.toLowerCase();
+
+    if (ext === "pdf") {
+      return url; // langsung tampilkan PDF
+    }
+
+    // doc / docx → pakai Google Viewer, lebih compatible
+    return `https://docs.google.com/viewer?url=${encodeURIComponent(
+      url
+    )}&embedded=true`;
+  };
+
   useEffect(() => {
     const fetchExpertsForCompetencies = async () => {
       const allExperts: any[] = [];
@@ -501,7 +523,7 @@ export default function FormTaskTaDetail() {
           const urls = details.urls.map(
             (urlObj: any) => urlObj.attachmentUrl || ""
           );
-          setUrlInputs(urls); // Save the URLs to state
+          setUrlInputs(urls);
         }
 
         if (details?.assignedToLevel) {
@@ -743,28 +765,36 @@ export default function FormTaskTaDetail() {
   }
 
   const handleAcceptAcceptance = async () => {
-    loading();
-    console.log("Id user :", userId);
-    const response = await acceptAssignmentTa(id);
+    if (acceptLoading || isAccepted) return;
 
-    if (response?.error) {
-      error(response?.message);
-      return false;
+    setAcceptLoading(true);
+
+    loading();
+
+    const res = await acceptAssignmentTa(id);
+
+    close();
+    setAcceptLoading(false);
+
+    if (res?.error) {
+      error(res?.message || "Gagal menerima tugas");
+      return;
     }
 
+    // ini penting!
+    setIsAccepted(true);
+
     successCallback();
-    getDataAcceptance();
-    return false;
   };
 
   async function getListAcceptance(): Promise<void> {
     const isAccept = true;
 
     try {
-      const resSent = await getAcceptance(id, !isAccept);
-      setSentAcceptance(resSent?.data?.data);
+      const resSent = await getAcceptanceTa(id, !isAccept);
+      setSentAcceptance(resSent?.data?.data || []);
 
-      const resAccept = await getAcceptance(id, isAccept);
+      const resAccept = await getAcceptanceTa(id, isAccept);
 
       const acceptanceSort = resAccept?.data?.data?.sort(
         (a: AcceptanceData, b: AcceptanceData) =>
@@ -772,7 +802,7 @@ export default function FormTaskTaDetail() {
       );
 
       console.log("Data sort:", acceptanceSort);
-      setAcceptAcceptance(acceptanceSort);
+      setAcceptAcceptance(acceptanceSort || []);
     } catch (error) {
       console.error("Error fetching acceptance data:", error);
     }
@@ -951,14 +981,27 @@ export default function FormTaskTaDetail() {
 
   const onReady = (ws: any) => {
     setWavesurfer(ws);
-    setIsPlaying(false);
+
+    ws.on("play", () => setIsPlaying(true));
+    ws.on("pause", () => setIsPlaying(false));
   };
 
+  // const onReady = (ws: any) => {
+  //   setWavesurfer(ws);
+  //   setIsPlaying(false);
+  // };
+
   const onPlayPause = () => {
     wavesurfer && wavesurfer.playPause();
   };
 
-  const handleRemoveFile = (id: number) => {};
+  // const handleRemoveFile = (id: number) => {};
+  const handleRemoveFile = (file: FileUploaded) => {
+    console.log(file);
+
+    // contoh kalau kamu mau hapus dari state:
+    setVideoUploadedFiles((prev) => prev.filter((f) => f.id !== file.id));
+  };
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value); // Perbarui state search
@@ -970,8 +1013,10 @@ export default function FormTaskTaDetail() {
       {detail !== undefined ? (
         <div className="px-6 py-6">
           <div className="flex flex-col sm:flex-row lg:flex-row justify-between">
-            <p className="text-lg font-semibold mb-3">{t("detail-task", { defaultValue: "Detail Task" })}</p>
-            {/* <div
+            <p className="text-lg font-semibold mb-3">
+              {t("detail-task", { defaultValue: "Detail Task" })}
+            </p>
+            <div
               className="flex  gap-3"
               style={
                 detail?.createdBy?.id === Number(userId)
@@ -988,7 +1033,8 @@ export default function FormTaskTaDetail() {
                       color="primary"
                       onClick={() => setModalType("terkirim")}
                     >
-                      {sentAcceptance?.length} {t("sent", { defaultValue: "Sent" })}
+                      {sentAcceptance?.length}{" "}
+                      {t("sent", { defaultValue: "Sent" })}
                     </Button>
                   </DialogTrigger>
 
@@ -998,14 +1044,17 @@ export default function FormTaskTaDetail() {
                       onClick={() => setModalType("diterima")}
                       className="ml-3"
                     >
-                      {acceptAcceptance?.length} {t("accepted", { defaultValue: "Accepted" })}
+                      {acceptAcceptance?.length}{" "}
+                      {t("accepted", { defaultValue: "Accepted" })}
                     </Button>
                   </DialogTrigger>
 
                   <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px] overflow-y-auto max-h-[500px]">
                     <DialogHeader>
                       <DialogTitle>
-                        {t("assignment-status-details", { defaultValue: "Assignment Status Details" })}
+                        {t("assignment-status-details", {
+                          defaultValue: "Assignment Status Details",
+                        })}
                       </DialogTitle>
                     </DialogHeader>
 
@@ -1014,13 +1063,15 @@ export default function FormTaskTaDetail() {
                   </DialogContent>
                 </Dialog>
               </div>
-            </div> */}
+            </div>
           </div>
 
           <form>
             <div className="gap-5 mb-5">
               <div className="space-y-2">
-                <Label>{t("unique-code", { defaultValue: "Unique Code" })}</Label>
+                <Label>
+                  {t("unique-code", { defaultValue: "Unique Code" })}
+                </Label>
                 <Controller
                   control={control}
                   name="uniqueCode"
@@ -1072,7 +1123,9 @@ export default function FormTaskTaDetail() {
                 </RadioGroup>
               </div> */}
               <div className="mt-5 space-y-2">
-                <Label>{t("areas-expertise", { defaultValue: "Areas Expertise" })}</Label>
+                <Label>
+                  {t("areas-expertise", { defaultValue: "Areas Expertise" })}
+                </Label>
                 <div className="flex flex-wrap gap-4">
                   {userCompetencies?.map((item: any) => (
                     <div className="flex items-center gap-2" key={item.id}>
@@ -1171,7 +1224,9 @@ export default function FormTaskTaDetail() {
               <div></div>
 
               <div className="mt-6 space-y-2">
-                <Label>{t("description", { defaultValue: "Description" })}</Label>
+                <Label>
+                  {t("description", { defaultValue: "Description" })}
+                </Label>
                 <Controller
                   control={control}
                   name="naration"
@@ -1186,11 +1241,15 @@ export default function FormTaskTaDetail() {
                 )} */}
               </div>
               <div className=" mt-5 space-y-2">
-                <Label htmlFor="attachment">{t("attachment", { defaultValue: "Attachment" })}</Label>
+                <Label htmlFor="attachment">
+                  {t("attachment", { defaultValue: "Attachment" })}
+                </Label>
                 <div className="space-y-3">
                   <div>
                     {videoUploadedFiles?.length > 0 && (
-                      <Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
+                      <Label>
+                        {t("audio-visual", { defaultValue: "Audio Visual" })}
+                      </Label>
                     )}
                     <div>
                       {selectedVideo && (
@@ -1234,6 +1293,38 @@ export default function FormTaskTaDetail() {
                           </Button>
                         </div>
                       ))}
+                      {/* {videoUploadedFiles?.map((file, index) => (
+                        <div
+                          key={index}
+                          className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
+                        >
+                          <div
+                            className="flex gap-3 items-center cursor-pointer"
+                            onClick={() =>
+                              setSelectedVideo(
+                                `https://mediahub.polri.go.id/api/v2/assignment-expert/file/viewer?id=${file.id}`
+                              )
+                            }
+                          >
+                            <VideoIcon />
+                            <div>
+                              <div className="text-sm text-card-foreground">
+                                {file.fileName}
+                              </div>
+                            </div>
+                          </div>
+
+                          <Button
+                            size="icon"
+                            color="destructive"
+                            variant="outline"
+                            className="border-none rounded-full"
+                            onClick={() => handleRemoveFile(file)}
+                          >
+                            <Icon icon="tabler:x" className="h-5 w-5" />
+                          </Button>
+                        </div>
+                      ))} */}
                     </div>
                   </div>
                   <div>
@@ -1291,12 +1382,16 @@ export default function FormTaskTaDetail() {
                     <div>
                       {selectedText && (
                         <Card className="mt-2">
-                          <iframe
+                          {/* <iframe
                             className="w-full h-96 rounded-md"
                             src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
                               selectedText
                             )}`}
                             title={"Document"}
+                          /> */}
+                          <iframe
+                            className="w-full h-96"
+                            src={getViewerUrl(selectedText)}
                           />
                         </Card>
                       )}
@@ -1350,7 +1445,7 @@ export default function FormTaskTaDetail() {
                               onPause={() => setIsPlaying(false)}
                             />
                           </div>
-                          <Button
+                          {/* <Button
                             size="sm"
                             type="button"
                             onClick={onPlayPause}
@@ -1370,6 +1465,22 @@ export default function FormTaskTaDetail() {
                               }
                               className="h-5 w-5"
                             />
+                          </Button> */}
+                          <Button
+                            size="sm"
+                            type="button"
+                            onClick={onPlayPause}
+                            className="flex items-center gap-2 bg-primary text-white p-2 rounded"
+                          >
+                            {isPlaying ? "Pause" : "Play"}
+                            <Icon
+                              icon={
+                                isPlaying
+                                  ? "carbon:pause-outline"
+                                  : "famicons:play-sharp"
+                              }
+                              className="h-5 w-5"
+                            />
                           </Button>
                         </Card>
                       )}
@@ -1433,6 +1544,24 @@ export default function FormTaskTaDetail() {
                   )}
                   {isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
                   {/* Display remaining time */}
+                  <div className="mt-4">
+                    <Label>Link Url</Label>
+                    {urlInputs.map((url: any, index: any) => (
+                      <Link
+                        key={index}
+                        href={url}
+                        target="_blank"
+                        className="flex items-center gap-2 mt-2"
+                      >
+                        <input
+                          type="url"
+                          className="border rounded p-2 w-full cursor-pointer"
+                          value={url}
+                          placeholder={`Masukkan link berita ${index + 1}`}
+                        />
+                      </Link>
+                    ))}
+                  </div>
                 </div>
               </div>
             </div>
@@ -1466,7 +1595,7 @@ export default function FormTaskTaDetail() {
                   </Button>
                 </div> */}
                 <div className="">
-                  <Button
+                  {/* <Button
                     type="button"
                     className="btn btn-primary lg:mx-3"
                     style={
@@ -1481,6 +1610,21 @@ export default function FormTaskTaDetail() {
                     onClick={() => handleAcceptAcceptance()}
                   >
                     Terima Tugas
+                  </Button> */}
+                  <Button
+                    type="button"
+                    onClick={handleAcceptAcceptance}
+                    disabled={isAccepted || acceptLoading}
+                    className="
+    btn btn-primary lg:mx-3
+    disabled:opacity-50 disabled:cursor-not-allowed
+  "
+                  >
+                    {isAccepted
+                      ? "Tugas Sudah Diterima"
+                      : acceptLoading
+                      ? "Memproses..."
+                      : "Terima Tugas"}
                   </Button>
                 </div>
                 <div

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

@@ -58,10 +58,8 @@ import { getListCompetencies } from "@/service/management-user/management-user";
 
 const taskSchema = z.object({
   // uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
-  title: z.string().min(1, { message: "Judul diperlukan" }),
-  naration: z.string().min(2, {
-    message: "Narasi Penugasan harus lebih dari 2 karakter.",
-  }),
+  title: z.string().optional(),
+  naration: z.string().optional(),
 });
 
 export type taskDetail = {
@@ -585,10 +583,14 @@ export default function FormTaskTaEdit() {
       assignedToRole: selectedTarget,
       assignmentType: taskType,
       assignmentTypeId: type,
-      narration: data.naration,
+      // narration: data.naration,
+      narration: data.naration ?? detail?.narration ?? "",
       expertCompetencies: Array.from(selectedCompetencies).join(","),
-      title: data.title,
-      attachmentUrl: links,
+      // title: data.title,
+      title: data.title ?? detail?.title ?? "",
+      attachmentUrl: urlInputs
+        .map((url: any) => url.attachmentUrl || "")
+        .filter((url: string) => url.trim() !== ""),
     };
 
     const response = await createTaskTa(requestData);
@@ -802,7 +804,7 @@ export default function FormTaskTaEdit() {
       isAudioUploadFinish &&
       isTextUploadFinish
     ) {
-      successSubmit("/in/contributor/task");
+      successSubmit("/in/contributor/task-ta");
     }
   }
 
@@ -841,9 +843,11 @@ export default function FormTaskTaEdit() {
   };
 
   const handleLinkChange = (index: number, value: string) => {
-    const updatedLinks = [...links];
-    updatedLinks[index] = value;
-    setLinks(updatedLinks);
+    setUrlInputs((prev: any) =>
+      prev.map((url: any, idx: any) =>
+        idx === index ? { ...url, attachmentUrl: value } : url
+      )
+    );
   };
 
   const handleAddLink = () => {
@@ -882,7 +886,9 @@ export default function FormTaskTaEdit() {
                 )}
               </div>
               <div className="mt-5 space-y-2">
-                <Label>{t("areas-expertise", { defaultValue: "Areas Expertise" })}</Label>
+                <Label>
+                  {t("areas-expertise", { defaultValue: "Areas Expertise" })}
+                </Label>
                 <div className="flex flex-wrap gap-4">
                   {userCompetencies?.map((item: any) => (
                     <div className="flex items-center gap-2" key={item.id}>
@@ -897,7 +903,9 @@ export default function FormTaskTaEdit() {
                 </div>
               </div>
               <div className="mt-5 space-y-2">
-                <Label>{t("choose-expert", { defaultValue: "Choose Expert" })}</Label>
+                <Label>
+                  {t("choose-expert", { defaultValue: "Choose Expert" })}
+                </Label>
                 <div className="flex flex-wrap gap-4">
                   <Dialog>
                     <DialogTrigger asChild>
@@ -978,7 +986,9 @@ export default function FormTaskTaEdit() {
               </div>
 
               <div className="mt-5 space-y-2">
-                <Label>{t("description", { defaultValue: "Description" })}</Label>
+                <Label>
+                  {t("description", { defaultValue: "Description" })}
+                </Label>
                 <Controller
                   control={control}
                   name="naration"
@@ -996,10 +1006,14 @@ export default function FormTaskTaEdit() {
                 )}
               </div>
               <div className="space-y-2.5 mt-5">
-                <Label htmlFor="attachments">{t("attachment", { defaultValue: "Attachment" })}</Label>
+                <Label htmlFor="attachments">
+                  {t("attachment", { defaultValue: "Attachment" })}
+                </Label>
                 <div className="space-y-3">
                   <div className="space-y-2">
-                    <Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
+                    <Label>
+                      {t("audio-visual", { defaultValue: "Audio Visual" })}
+                    </Label>
                     <FileUploader
                       accept={{
                         "mp4/*": [],
@@ -1188,7 +1202,9 @@ export default function FormTaskTaEdit() {
                   {isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
                   {/* Display remaining time */}
                   <div className="mt-4 space-y-2">
-                    <h2 className="text-lg font-bold">{t("news-links", { defaultValue: "News Links" })}</h2>
+                    <h2 className="text-lg font-bold">
+                      {t("news-links", { defaultValue: "News Links" })}
+                    </h2>
                     {urlInputs.map((url: any, index: any) => (
                       <div
                         key={url.id}
@@ -1205,42 +1221,13 @@ export default function FormTaskTaEdit() {
                         />
                       </div>
                     ))}
-                    <div className="mt-4 space-y-2">
-                      <Label className="">{t("news-links", { defaultValue: "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", { defaultValue: "Add Links" })}
-                      </Button>
-                    </div>
+                    <button
+                      type="button"
+                      className="mt-4 bg-green-500 text-white px-4 py-2 rounded"
+                      onClick={handleAddLink}
+                    >
+                      {t("add-links", { defaultValue: "Add Links" })}
+                    </button>
                   </div>
                 </div>
               </div>

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

@@ -43,7 +43,7 @@ import { getCsrfToken } from "@/service/auth";
 import { loading } from "@/lib/swal";
 import { useTranslations } from "next-intl";
 import dynamic from "next/dynamic";
-import { cn } from "@/lib/utils";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   Popover,
   PopoverContent,
@@ -98,7 +98,7 @@ const CustomEditor = dynamic(
   () => {
     return import("@/components/editor/custom-editor");
   },
-  { ssr: false }
+  { ssr: false },
 );
 
 export default function FormTaskTa() {
@@ -136,7 +136,7 @@ export default function FormTaskTa() {
   const [userLevels, setUserLevels] = useState<any>();
   const [userCompetencies, setUserCompetencies] = useState<any[]>([]);
   const [selectedCompetencies, setSelectedCompetencies] = useState<Set<number>>(
-    new Set()
+    new Set(),
   );
   const [listExpert, setListExpert] = useState<any[]>([]);
   const [checkedLevels, setCheckedLevels] = useState<Set<number>>(new Set());
@@ -181,6 +181,33 @@ export default function FormTaskTa() {
     mode: "all",
   });
 
+  const [profile, setProfile] = useState<any>(null);
+  const userLevelId = Number(getCookiesDecrypt("ulie"));
+  const roleId = Number(getCookiesDecrypt("urie"));
+  const userId = Number(getCookiesDecrypt("uie"));
+
+  const MABES_LEVEL_ID = 216; // userLevelId Mabes Polri
+  const APPROVER_ROLE_ID = 3; // roleId Approver
+  const isMabes = userLevelId === MABES_LEVEL_ID;
+  const isApprover = roleId === APPROVER_ROLE_ID;
+
+  const isMabesApprover =
+    userLevelId === MABES_LEVEL_ID && roleId === APPROVER_ROLE_ID;
+
+  const shouldHideExpert = isMabes && isApprover;
+
+  useEffect(() => {
+    async function fetchUserLevel() {
+      try {
+        const res = await getUserLevelForAssignments();
+        setProfile(res?.data?.data);
+      } catch (e) {
+        console.error("Failed fetch user level", e);
+      }
+    }
+    fetchUserLevel();
+  }, []);
+
   useEffect(() => {
     getDataAdditional();
   }, []);
@@ -218,7 +245,7 @@ export default function FormTaskTa() {
       }
 
       const uniqueExperts = Array.from(
-        new Map(allExperts.map((e) => [e.id, e])).values()
+        new Map(allExperts.map((e) => [e.id, e])).values(),
       );
 
       setListExpert(uniqueExperts);
@@ -260,67 +287,216 @@ export default function FormTaskTa() {
     });
   };
 
+  // const save = async (data: TaskSchema) => {
+  //   const cleanedLinks = links
+  //     .map((link) => link.trim())
+  //     .filter((link) => link !== "" && link.startsWith("http"));
+
+  //   const requestData: {
+  //     id?: number;
+  //     title: string;
+  //     assignedToUsers: any;
+  //     assignmentTypeId: string;
+  //     narration: string;
+  //     assignmentType: string;
+  //     expertCompetencies: string;
+  //     attachmentUrl: string[];
+  //   } = {
+  //     ...data,
+  //     assignedToUsers: handleExpertChange(),
+  //     assignmentType: taskType,
+  //     assignmentTypeId: type,
+  //     narration: data.narration,
+  //     expertCompetencies: Array.from(selectedCompetencies).join(","),
+  //     title: data.title,
+  //     attachmentUrl: cleanedLinks,
+  //   };
+
+  //   const response = await createTaskTa(requestData);
+
+  //   localStorage.setItem("TA_UPLOAD_IN_PROGRESS", "true");
+
+  //   console.log("Form Data Submitted:", requestData);
+  //   console.log("response", response);
+
+  //   const id = response?.data?.data.id;
+  //   loading();
+  //   if (imageFiles?.length == 0) {
+  //     setIsImageUploadFinish(true);
+  //   }
+
+  //   const allUploads: Promise<any>[] = [];
+
+  //   imageFiles.forEach((item, index) => {
+  //     allUploads.push(uploadResumableFile(index, String(id), item, "1", "0"));
+  //   });
+
+  //   videoFiles.forEach((item, index) => {
+  //     allUploads.push(uploadResumableFile(index, String(id), item, "2", "0"));
+  //   });
+
+  //   textFiles.forEach((item, index) => {
+  //     allUploads.push(uploadResumableFile(index, String(id), item, "3", "0"));
+  //   });
+
+  //   audioFiles.forEach((item, index) => {
+  //     allUploads.push(uploadResumableFile(index, String(id), item, "4", "0"));
+  //   });
+
+  //   // ⬅ WAJIB
+  //   await Promise.all(allUploads);
+  //   localStorage.removeItem("TA_UPLOAD_IN_PROGRESS");
+
+  //   // imageFiles?.map(async (item: any, index: number) => {
+  //   //   await uploadResumableFile(index, String(id), item, "1", "0");
+  //   // });
+
+  //   // if (videoFiles?.length == 0) {
+  //   //   setIsVideoUploadFinish(true);
+  //   // }
+  //   // videoFiles?.map(async (item: any, index: number) => {
+  //   //   await uploadResumableFile(index, String(id), item, "2", "0");
+  //   // });
+
+  //   // if (textFiles?.length == 0) {
+  //   //   setIsTextUploadFinish(true);
+  //   // }
+  //   // textFiles?.map(async (item: any, index: number) => {
+  //   //   await uploadResumableFile(index, String(id), item, "3", "0");
+  //   // });
+
+  //   // if (audioFiles?.length == 0) {
+  //   //   setIsAudioUploadFinish(true);
+  //   // }
+  //   // audioFiles.map(async (item: FileWithPreview, index: number) => {
+  //   //   await uploadResumableFile(
+  //   //     index,
+  //   //     String(id),
+  //   //     item, // Use .file to access the actual File object
+  //   //     "4",
+  //   //     "0" // Optional: Replace with actual duration if available
+  //   //   );
+  //   // });
+  // };
+
+  // const save = async (data: TaskSchema) => {
+  //   const cleanedLinks = links
+  //     .map((link) => link.trim())
+  //     .filter((link) => link.startsWith("http"));
+
+  //   const requestData = {
+  //     ...data,
+  //     // assignedToUsers: handleExpertChange(),
+  //     assignedToUsers: isMabesApprover ? "464" : handleExpertChange(),
+  //     assignmentType: taskType,
+  //     assignmentTypeId: type,
+  //     expertCompetencies: Array.from(selectedCompetencies).join(","),
+  //     attachmentUrl: cleanedLinks,
+  //   };
+
+  //   console.log("FINAL ASSIGNED TO:", {
+  //     isMabesApprover,
+  //     assignedToUsers: isMabesApprover
+  //       ? String(roleId)
+  //       : handleExpertChange(),
+  //   });
+
+  //   const response = await createTaskTa(requestData);
+  //   const id = String(response?.data?.data.id);
+
+  //   // Set block table TA
+  //   localStorage.setItem("TA_UPLOAD_IN_PROGRESS", "true");
+
+  //   loading(); // SHOW SWAL LOADING
+
+  //   // Kumpulkan semua upload
+  //   const allUploads: Promise<any>[] = [];
+
+  //   imageFiles.forEach((item, idx) =>
+  //     allUploads.push(uploadResumableFile(idx, id, item, "1", "0"))
+  //   );
+
+  //   videoFiles.forEach((item, idx) =>
+  //     allUploads.push(uploadResumableFile(idx, id, item, "2", "0"))
+  //   );
+
+  //   textFiles.forEach((item, idx) =>
+  //     allUploads.push(uploadResumableFile(idx, id, item, "3", "0"))
+  //   );
+
+  //   audioFiles.forEach((item, idx) =>
+  //     allUploads.push(uploadResumableFile(idx, id, item, "4", "0"))
+  //   );
+
+  //   // Tunggu upload selesai
+  //   await Promise.all(allUploads);
+
+  //   // Hapus flag
+  //   localStorage.removeItem("TA_UPLOAD_IN_PROGRESS");
+
+  //   // Close loading + redirect
+  //   successSubmit("/in/contributor/task-ta");
+  // };
+
   const save = async (data: TaskSchema) => {
-    const requestData: {
-      id?: number;
-      title: string;
-      assignedToUsers: any;
-      assignmentTypeId: string;
-      narration: string;
-      assignmentType: string;
-      expertCompetencies: string;
-      // attachmentUrl: string[];
-    } = {
-      ...data,
-      assignedToUsers: handleExpertChange(),
-      assignmentType: taskType,
-      assignmentTypeId: type,
-      narration: data.narration,
-      expertCompetencies: Array.from(selectedCompetencies).join(","),
-      title: data.title,
-      // attachmentUrl: links,
-    };
+    try {
+      loading();
 
-    const response = await createTaskTa(requestData);
+      const cleanedLinks = links
+        .map((link) => link.trim())
+        .filter((link) => link.startsWith("http"));
 
-    console.log("Form Data Submitted:", requestData);
-    console.log("response", response);
+      const requestData = {
+        ...data,
+        // assignedToUsers: isMabesApprover ? "464" : handleExpertChange(),
+        assignedToUsers: isMabesApprover ? "464,8258" : handleExpertChange(),
+        assignmentType: taskType,
+        assignmentTypeId: type,
+        expertCompetencies: Array.from(selectedCompetencies).join(","),
+        attachmentUrl: cleanedLinks,
+      };
 
-    const id = response?.data?.data.id;
-    loading();
-    if (imageFiles?.length == 0) {
-      setIsImageUploadFinish(true);
-    }
-    imageFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "1", "0");
-    });
+      const response = await createTaskTa(requestData);
 
-    if (videoFiles?.length == 0) {
-      setIsVideoUploadFinish(true);
-    }
-    videoFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "2", "0");
-    });
+      if (!response?.data?.data?.id) {
+        throw new Error("Gagal membuat task");
+      }
 
-    if (textFiles?.length == 0) {
-      setIsTextUploadFinish(true);
-    }
-    textFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "3", "0");
-    });
+      const assignmentId = String(response.data.data.id);
 
-    if (audioFiles?.length == 0) {
-      setIsAudioUploadFinish(true);
-    }
-    audioFiles.map(async (item: FileWithPreview, index: number) => {
-      await uploadResumableFile(
-        index,
-        String(id),
-        item, // Use .file to access the actual File object
-        "4",
-        "0" // Optional: Replace with actual duration if available
+      const uploads: Promise<any>[] = [];
+
+      imageFiles.forEach((file, i) =>
+        uploads.push(uploadResumableFile(i, assignmentId, file, "1", "0")),
       );
-    });
+
+      videoFiles.forEach((file, i) =>
+        uploads.push(uploadResumableFile(i, assignmentId, file, "2", "0")),
+      );
+
+      textFiles.forEach((file, i) =>
+        uploads.push(uploadResumableFile(i, assignmentId, file, "3", "0")),
+      );
+
+      audioFiles.forEach((file, i) =>
+        uploads.push(uploadResumableFile(i, assignmentId, file, "4", "0")),
+      );
+
+      await Promise.all(uploads);
+
+      successSubmit("/in/contributor/task-ta");
+    } catch (err: any) {
+      console.error("SUBMIT ERROR:", err);
+
+      Swal.fire({
+        icon: "error",
+        title: "Gagal",
+        text:
+          err?.response?.data?.message ||
+          err?.message ||
+          "Terjadi kesalahan, data tidak tersimpan",
+      });
+    }
   };
 
   const onSubmit = (data: TaskSchema) => {
@@ -381,7 +557,7 @@ export default function FormTaskTa() {
     // Convert Blob to File and add preview
     const fileWithPreview: FileWithPreview = Object.assign(
       new File([blob], "voiceNote.webm", { type: "audio/webm" }),
-      { preview: url }
+      { preview: url },
     );
 
     // Add to state
@@ -393,75 +569,162 @@ export default function FormTaskTa() {
     setAudioFiles((prev) => prev.filter((_, idx) => idx !== index));
   };
 
-  async function uploadResumableFile(
+  // async function uploadResumableFile(
+  //   idx: number,
+  //   id: string,
+  //   file: any,
+  //   fileTypeId: string,
+  //   duration: string
+  // ) {
+  //   console.log("Tus Upload : ", idx, id, file, fileTypeId, duration);
+
+  //   const resCsrf = await getCsrfToken();
+  //   const csrfToken = resCsrf?.data?.token;
+  //   console.log("CSRF TOKEN : ", csrfToken);
+  //   const headers = {
+  //     "X-XSRF-TOKEN": csrfToken,
+  //   };
+
+  //   const upload = new Upload(file, {
+  //     endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
+  //     headers: headers,
+  //     retryDelays: [0, 3000, 6000, 12_000, 24_000],
+  //     chunkSize: 20_000,
+  //     metadata: {
+  //       assignmentId: id,
+  //       filename: file.name,
+  //       contentType: file.type,
+  //       fileTypeId: fileTypeId,
+  //       duration,
+  //     },
+  //     onBeforeRequest: function (req) {
+  //       var xhr = req.getUnderlyingObject();
+  //       xhr.withCredentials = true;
+  //     },
+  //     onError: async (e: any) => {
+  //       console.log("Error upload :", e);
+  //       error(e);
+  //     },
+  //     onChunkComplete: (
+  //       chunkSize: any,
+  //       bytesAccepted: any,
+  //       bytesTotal: any
+  //     ) => {
+  //       // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+  //       // progressInfo[idx].percentage = uploadPersen;
+  //       // counterUpdateProgress++;
+  //       // console.log(counterUpdateProgress);
+  //       // setProgressList(progressInfo);
+  //       // setCounterProgress(counterUpdateProgress);
+  //     },
+  //     onSuccess: async () => {
+  //       // uploadPersen = 100;
+  //       // progressInfo[idx].percentage = 100;
+  //       // counterUpdateProgress++;
+  //       // setCounterProgress(counterUpdateProgress);
+  //       successTodo();
+  //       if (fileTypeId == "1") {
+  //         setIsImageUploadFinish(true);
+  //       } else if (fileTypeId == "2") {
+  //         setIsVideoUploadFinish(true);
+  //       }
+  //       if (fileTypeId == "3") {
+  //         setIsTextUploadFinish(true);
+  //       }
+  //       if (fileTypeId == "4") {
+  //         setIsAudioUploadFinish(true);
+  //       }
+  //     },
+  //   });
+
+  //   upload.start();
+  // }
+  // function uploadResumableFile(
+  //   idx: number,
+  //   id: string,
+  //   file: any,
+  //   fileTypeId: string,
+  //   duration: string
+  // ) {
+  //   return new Promise(async (resolve, reject) => {
+  //     const resCsrf = await getCsrfToken();
+  //     const csrfToken = resCsrf?.data?.token;
+
+  //     const upload = new Upload(file, {
+  //       endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
+  //       headers: { "X-XSRF-TOKEN": csrfToken },
+  //       retryDelays: [0, 3000, 6000, 12000],
+  //       chunkSize: 20000,
+  //       metadata: {
+  //         assignmentId: id,
+  //         filename: file.name,
+  //         contentType: file.type,
+  //         fileTypeId,
+  //         duration,
+  //       },
+
+  //       onBeforeRequest(req) {
+  //         req.getUnderlyingObject().withCredentials = true;
+  //       },
+
+  //       onError(err) {
+  //         console.error("Upload error:", err);
+  //         reject(err);
+  //       },
+
+  //       onSuccess() {
+  //         console.log("Upload selesai:", file.name);
+  //         resolve(true);
+  //       },
+  //     });
+
+  //     upload.start();
+  //   });
+  // }
+
+  function uploadResumableFile(
     idx: number,
     id: string,
-    file: any,
+    file: File,
     fileTypeId: string,
-    duration: string
+    duration: string,
   ) {
-    console.log("Tus Upload : ", idx, id, file, fileTypeId, duration);
+    return new Promise(async (resolve, reject) => {
+      try {
+        const resCsrf = await getCsrfToken();
+        const csrfToken = resCsrf?.data?.token;
 
-    const resCsrf = await getCsrfToken();
-    const csrfToken = resCsrf?.data?.token;
-    console.log("CSRF TOKEN : ", csrfToken);
-    const headers = {
-      "X-XSRF-TOKEN": csrfToken,
-    };
+        const upload = new Upload(file, {
+          endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
+          headers: { "X-XSRF-TOKEN": csrfToken },
+          retryDelays: [0, 3000, 6000],
+          chunkSize: 20000,
+          metadata: {
+            assignmentId: id,
+            filename: file.name,
+            contentType: file.type,
+            fileTypeId,
+            duration,
+          },
 
-    const upload = new Upload(file, {
-      endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
-      headers: headers,
-      retryDelays: [0, 3000, 6000, 12_000, 24_000],
-      chunkSize: 20_000,
-      metadata: {
-        assignmentId: id,
-        filename: file.name,
-        contentType: file.type,
-        fileTypeId: fileTypeId,
-        duration,
-      },
-      onBeforeRequest: function (req) {
-        var xhr = req.getUnderlyingObject();
-        xhr.withCredentials = true;
-      },
-      onError: async (e: any) => {
-        console.log("Error upload :", e);
-        error(e);
-      },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
-        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
-        // progressInfo[idx].percentage = uploadPersen;
-        // counterUpdateProgress++;
-        // console.log(counterUpdateProgress);
-        // setProgressList(progressInfo);
-        // setCounterProgress(counterUpdateProgress);
-      },
-      onSuccess: async () => {
-        // uploadPersen = 100;
-        // progressInfo[idx].percentage = 100;
-        // counterUpdateProgress++;
-        // setCounterProgress(counterUpdateProgress);
-        successTodo();
-        if (fileTypeId == "1") {
-          setIsImageUploadFinish(true);
-        } else if (fileTypeId == "2") {
-          setIsVideoUploadFinish(true);
-        }
-        if (fileTypeId == "3") {
-          setIsTextUploadFinish(true);
-        }
-        if (fileTypeId == "4") {
-          setIsAudioUploadFinish(true);
-        }
-      },
+          onBeforeRequest(req) {
+            req.getUnderlyingObject().withCredentials = true;
+          },
+
+          onError(error) {
+            reject(error);
+          },
+
+          onSuccess() {
+            resolve(true);
+          },
+        });
+
+        upload.start();
+      } catch (err) {
+        reject(err);
+      }
     });
-
-    upload.start();
   }
 
   useEffect(() => {
@@ -514,7 +777,9 @@ export default function FormTaskTa() {
   return (
     <Card>
       <div className="px-6 py-6">
-        <p className="text-lg font-semibold mb-3">{t("form-task", { defaultValue: "Form Task" })}</p>
+        <p className="text-lg font-semibold mb-3">
+          {t("form-task", { defaultValue: "Form Task" })}
+        </p>
 
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="gap-5 mb-5">
@@ -540,17 +805,36 @@ export default function FormTaskTa() {
             </div>
 
             <div className="mt-5 space-y-2">
-              <Label>{t("assigment-type", { defaultValue: "Assigment Type" })} </Label>
+              <Label>
+                {t("assigment-type", { defaultValue: "Assigment Type" })}{" "}
+              </Label>
               <RadioGroup
                 value={taskType}
                 onValueChange={(value) => setTaskType(String(value))}
                 className="flex flex-wrap gap-3"
+              >
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="atensi-khusus" id="khusus" />
+                  <Label htmlFor="khusus">Atensi Khusus</Label>
+                </div>
+
+                {!isMabes && (
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="tugas-harian" id="harian" />
+                    <Label htmlFor="harian">Tugas Harian</Label>
+                  </div>
+                )}
+              </RadioGroup>
+              {/* <RadioGroup
+                value={taskType}
+                onValueChange={(value) => setTaskType(String(value))}
+                className="flex flex-wrap gap-3"
               >
                 <RadioGroupItem value="atensi-khusus" id="khusus" />
                 <Label htmlFor="atensi-khusus">Atensi Khusus</Label>
-                {/* <RadioGroupItem value="tugas-harian" id="harian" />
-                <Label htmlFor="tugas-harian">Tugas Harian</Label> */}
-              </RadioGroup>
+                <RadioGroupItem value="tugas-harian" id="harian" />
+                <Label htmlFor="tugas-harian">Tugas Harian</Label>
+              </RadioGroup> */}
             </div>
             <div className="flex flex-col space-y-2 mt-5">
               <Label className="mr-3 mb-1">Tanggal</Label>
@@ -562,7 +846,7 @@ export default function FormTaskTa() {
                     variant={"outline"}
                     className={cn(
                       "w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
-                      !date && "text-muted-foreground"
+                      !date && "text-muted-foreground",
                     )}
                   >
                     <CalendarIcon size={15} className="mr-3" />
@@ -592,97 +876,109 @@ export default function FormTaskTa() {
                 </PopoverContent>
               </Popover>
             </div>
-            <div className="mt-5 space-y-2">
-              <Label>{t("areas-expertise", { defaultValue: "Areas Expertise" })}</Label>
-              <div className="flex flex-wrap gap-4">
-                {userCompetencies?.map((item: any) => (
-                  <div className="flex items-center gap-2" key={item.id}>
-                    <Checkbox
-                      id={`comp-${item.id}`}
-                      checked={selectedCompetencies.has(item.id)}
-                      onCheckedChange={() => handleCompetencyChange(item.id)}
-                    />
-                    <Label htmlFor={`comp-${item.id}`}>{item.name}</Label>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="mt-5 space-y-2">
-              <Label>{t("choose-expert", { defaultValue: "Choose Expert" })}</Label>
-              <div className="flex flex-wrap gap-4">
-                <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>
-                      ))}
+            {!isMabesApprover && (
+              <div className="mt-5 space-y-2">
+                <Label>
+                  {t("areas-expertise", { defaultValue: "Areas Expertise" })}
+                </Label>
+                <div className="flex flex-wrap gap-4">
+                  {userCompetencies?.map((item: any) => (
+                    <div className="flex items-center gap-2" key={item.id}>
+                      <Checkbox
+                        id={`comp-${item.id}`}
+                        checked={selectedCompetencies.has(item.id)}
+                        onCheckedChange={() => handleCompetencyChange(item.id)}
+                      />
+                      <Label htmlFor={`comp-${item.id}`}>{item.name}</Label>
                     </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>
+            )}
+            {!isMabesApprover && (
+              <div className="mt-5 space-y-2">
+                <Label>
+                  {t("choose-expert", { defaultValue: "Choose Expert" })}
+                </Label>
+                <div className="flex flex-wrap gap-4">
+                  <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">
               <Label>{t("description", { defaultValue: "Description" })}</Label>
               <Controller
@@ -699,11 +995,23 @@ export default function FormTaskTa() {
               )}
             </div>
             <div className="space-y-2.5 mt-5">
-              <Label htmlFor="attachments">{t("attachment", { defaultValue: "Attachment" })}</Label>
+              <Label htmlFor="attachments">
+                {t("attachment", { defaultValue: "Attachment" })}
+              </Label>
               <div className="space-y-3">
                 <div>
-                  <Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
+                  <Label>
+                    {t("audio-visual", { defaultValue: "Audio Visual" })}
+                  </Label>
                   <FileUploader
+                    accept={{
+                      "video/*": [],
+                    }}
+                    maxSize={100}
+                    label="Upload file dengan format video."
+                    onDrop={(files) => setVideoFiles(files)}
+                  />
+                  {/* <FileUploader
                     accept={{
                       "mp4/*": [],
                       "mov/*": [],
@@ -711,7 +1019,7 @@ export default function FormTaskTa() {
                     maxSize={100}
                     label="Upload file dengan format .mp4 atau .mov."
                     onDrop={(files) => setVideoFiles(files)}
-                  />
+                  /> */}
                 </div>
                 <div className="space-y-2">
                   <Label>{t("image", { defaultValue: "Image" })}</Label>
@@ -727,13 +1035,21 @@ export default function FormTaskTa() {
                 <div className="space-y-2">
                   <Label>{t("text", { defaultValue: "Text" })}</Label>
                   <FileUploader
+                    accept={{
+                      "application/pdf": [],
+                    }}
+                    maxSize={100}
+                    label="Upload file PDF."
+                    onDrop={(files) => setTextFiles(files)}
+                  />
+                  {/* <FileUploader
                     accept={{
                       "pdf/*": [],
                     }}
                     maxSize={100}
                     label="Upload file dengan format .pdf."
                     onDrop={(files) => setTextFiles(files)}
-                  />
+                  /> */}
                 </div>
                 <div className="space-y-2">
                   <Label>{t("audio", { defaultValue: "Audio" })}</Label>
@@ -744,9 +1060,20 @@ export default function FormTaskTa() {
                       echoCancellation: true,
                     }}
                     downloadOnSavePress={true}
-                    downloadFileExtension="webm"
+                    downloadFileExtension="mp3"
                   />
                   <FileUploader
+                    accept={{
+                      "audio/*": [],
+                    }}
+                    maxSize={100}
+                    label="Upload file audio (mp3, wav, webm)."
+                    onDrop={(files) =>
+                      setAudioFiles((prev) => [...prev, ...files])
+                    }
+                    className="mt-2"
+                  />
+                  {/* <FileUploader
                     accept={{
                       "mp3/*": [],
                       "wav/*": [],
@@ -757,7 +1084,7 @@ export default function FormTaskTa() {
                       setAudioFiles((prev) => [...prev, ...files])
                     }
                     className="mt-2"
-                  />
+                  /> */}
                 </div>
                 {audioFiles?.map((audio: any, idx: any) => (
                   <div
@@ -775,15 +1102,19 @@ export default function FormTaskTa() {
                     </Button>
                   </div>
                 ))}
-                {/* {isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
+                {isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
                 <div className="mt-4 space-y-2">
-                  <Label className="">{t("news-links", { defaultValue: "News Links" })}</Label>
+                  <Label className="">
+                    {t("news-links", { defaultValue: "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}`}
+                        placeholder={`Masukkan link berita ${
+                          index + 1
+                        } | Contoh: https://www.detik.com`}
                         value={link}
                         onChange={(e) =>
                           handleLinkChange(index, e.target.value)
@@ -808,7 +1139,7 @@ export default function FormTaskTa() {
                   >
                     {t("add-links", { defaultValue: "Add Links" })}
                   </Button>
-                </div> */}
+                </div>
               </div>
             </div>
           </div>

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

@@ -87,9 +87,7 @@ const CustomEditor = dynamic(
 export default function FormTaskTaNew() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
-  const editor = useRef(null);
   type ImageSchema = z.infer<typeof imageSchema>;
-
   const t = useTranslations("Form");
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
@@ -97,33 +95,14 @@ export default function FormTaskTaNew() {
   const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
   const { id } = useParams() as { id: string };
-  console.log(id);
-
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<any>();
   const [tags, setTags] = useState<any[]>([]);
   const [thumbnail, setThumbnail] = useState<File | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
-  const [selectedLanguage, setSelectedLanguage] = useState("");
-
-  const [selectedSEO, setSelectedSEO] = useState<string>("");
   const [title, setTitle] = useState<string>("");
-  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
-  const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
-
-  const [articleIds, setArticleIds] = useState<string[]>([]);
-  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
-  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
-  );
-  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
-  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
-  const [selectedSize, setSelectedSize] = useState("");
-  const [detailData, setDetailData] = useState<any>(null);
-  const [articleImages, setArticleImages] = useState<string[]>([]);
   const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]);
@@ -139,26 +118,7 @@ export default function FormTaskTaNew() {
   const [links, setLinks] = useState<string[]>([""]);
   const [timer, setTimer] = useState<number>(120);
   const [fileTypeId, setFileTypeId] = useState<string>("");
-
-  const [content, setContent] = useState("");
-
-  const [selectedTarget, setSelectedTarget] = useState("");
-  const [unitSelection, setUnitSelection] = useState({
-    allUnit: false,
-    mabes: false,
-    polda: false,
-    polres: false,
-  });
-
-  let progressInfo: any = [];
-  let counterUpdateProgress = 0;
-  const [progressList, setProgressList] = useState<any>([]);
-  let uploadPersen = 0;
-  const [isStartUpload, setIsStartUpload] = useState(false);
-  const [counterProgress, setCounterProgress] = useState(0);
-
   const [files, setFiles] = useState<FileWithPreview[]>([]);
-  const [filesTemp, setFilesTemp] = useState<File[]>([]);
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
   const [detail, setDetail] = useState<taskDetail>();
   const [refresh] = useState(false);
@@ -178,7 +138,7 @@ export default function FormTaskTaNew() {
   });
 
   const imageSchema = z.object({
-    title: z.string().min(1, { message: "Judul diperlukan" }),
+    title: z.string().optional(),
     description: z
       .string()
       .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." })
@@ -336,16 +296,108 @@ export default function FormTaskTaNew() {
     initState();
   }, [id, refresh]);
 
+  // const save = async (data: ImageSchema) => {
+  //   loading();
+  //   const finalTags = tags.join(", ");
+  //   const finalTitle = data.title || detail?.title || "";
+  //   const finalDescription = articleBody || data.description;
+
+  //   if (!finalDescription.trim()) {
+  //     MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
+  //     return;
+  //   }
+
+  //   let requestData: {
+  //     assignmentExpertId: any;
+  //     title: string;
+  //     description: string;
+  //     htmlDescription: string;
+  //     fileTypeId: string;
+  //     categoryId: any;
+  //     subCategoryId: any;
+  //     uploadedBy: string;
+  //     statusId: string;
+  //     publishedFor: string;
+  //     creatorName: string;
+  //     tags: string;
+  //     isYoutube: boolean;
+  //     isInternationalMedia: boolean;
+  //     attachFromScheduleId?: number; // ✅ Tambahkan properti ini
+  //   } = {
+  //     ...data,
+  //     assignmentExpertId: detail?.id || null,
+  //     title: finalTitle,
+  //     description: finalDescription,
+  //     htmlDescription: finalDescription,
+  //     fileTypeId: fileTypeId,
+  //     categoryId: "235",
+  //     subCategoryId: "171",
+  //     uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+  //     statusId: "1",
+  //     publishedFor: "7",
+  //     creatorName: "Penugasan-Ta",
+  //     tags: "penugasan-Ta",
+  //     isYoutube: false,
+  //     isInternationalMedia: false,
+  //   };
+
+  //   let id = Cookies.get("idCreate");
+
+  //   if (scheduleId !== undefined) {
+  //     requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
+  //   }
+
+  //   if (id == undefined) {
+  //     const response = await createMedia(requestData);
+  //     console.log("Form Data Submitted:", requestData);
+
+  //     Cookies.set("idCreate", response?.data?.data, { expires: 1 });
+  //     id = response?.data?.data;
+
+  //     // Upload Thumbnail
+  //     loading();
+  //     if (imageFiles?.length == 0) {
+  //       setIsImageUploadFinish(true);
+  //     }
+  //     imageFiles?.map(async (item: any, index: number) => {
+  //       await uploadResumableFile(index, String(id), item, "1", "0");
+  //     });
+
+  //     if (videoFiles?.length == 0) {
+  //       setIsVideoUploadFinish(true);
+  //     }
+  //     videoFiles?.map(async (item: any, index: number) => {
+  //       await uploadResumableFile(index, String(id), item, "2", "0");
+  //     });
+
+  //     if (textFiles?.length == 0) {
+  //       setIsTextUploadFinish(true);
+  //     }
+  //     textFiles?.map(async (item: any, index: number) => {
+  //       await uploadResumableFile(index, String(id), item, "3", "0");
+  //     });
+
+  //     if (audioFiles?.length == 0) {
+  //       setIsAudioUploadFinish(true);
+  //     }
+  //     audioFiles.map(async (item: FileWithPreview, index: number) => {
+  //       await uploadResumableFile(
+  //         index,
+  //         String(id),
+  //         item, // Use .file to access the actual File object
+  //         "4",
+  //         "0" // Optional: Replace with actual duration if available
+  //       );
+  //     });
+  //   }
+  // };
+
   const save = async (data: ImageSchema) => {
     loading();
-    const finalTags = tags.join(", ");
-    const finalTitle = isSwitchOn ? title : data.title;
-    const finalDescription = articleBody || data.description;
 
-    if (!finalDescription.trim()) {
-      MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
-      return;
-    }
+    const finalTags = tags.join(", ");
+    const finalTitle = data.title || detail?.title || "";
+    const finalDescription = articleBody || data.description;
 
     let requestData: {
       assignmentExpertId: any;
@@ -362,74 +414,53 @@ export default function FormTaskTaNew() {
       tags: string;
       isYoutube: boolean;
       isInternationalMedia: boolean;
-      attachFromScheduleId?: number; // ✅ Tambahkan properti ini
+      attachFromScheduleId?: number;
     } = {
-      ...data,
       assignmentExpertId: detail?.id || null,
       title: finalTitle,
       description: finalDescription,
       htmlDescription: finalDescription,
       fileTypeId: fileTypeId,
-      categoryId: "235",
-      subCategoryId: selectedCategory,
+      categoryId: "171",
+      subCategoryId: "171",
       uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
       statusId: "1",
-      publishedFor: publishedFor.join(","),
+      publishedFor: "7",
       creatorName: "Penugasan-Ta",
       tags: "penugasan-Ta",
       isYoutube: false,
       isInternationalMedia: false,
     };
 
-    let id = Cookies.get("idCreate");
-
     if (scheduleId !== undefined) {
-      requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
+      requestData.attachFromScheduleId = Number(scheduleId);
     }
 
-    if (id == undefined) {
-      const response = await createMedia(requestData);
-      console.log("Form Data Submitted:", requestData);
+    // SELALU create baru
+    const response = await createMedia(requestData);
+    const id = String(response?.data?.data);
 
-      Cookies.set("idCreate", response?.data?.data, { expires: 1 });
-      id = response?.data?.data;
+    const allUploads: Promise<any>[] = [];
 
-      // Upload Thumbnail
-      loading();
-      if (imageFiles?.length == 0) {
-        setIsImageUploadFinish(true);
-      }
-      imageFiles?.map(async (item: any, index: number) => {
-        await uploadResumableFile(index, String(id), item, "1", "0");
-      });
+    imageFiles.forEach((file, idx) =>
+      allUploads.push(uploadResumableFile(idx, id, file, "1", "0"))
+    );
 
-      if (videoFiles?.length == 0) {
-        setIsVideoUploadFinish(true);
-      }
-      videoFiles?.map(async (item: any, index: number) => {
-        await uploadResumableFile(index, String(id), item, "2", "0");
-      });
+    videoFiles.forEach((file, idx) =>
+      allUploads.push(uploadResumableFile(idx, id, file, "2", "0"))
+    );
 
-      if (textFiles?.length == 0) {
-        setIsTextUploadFinish(true);
-      }
-      textFiles?.map(async (item: any, index: number) => {
-        await uploadResumableFile(index, String(id), item, "3", "0");
-      });
+    textFiles.forEach((file, idx) =>
+      allUploads.push(uploadResumableFile(idx, id, file, "3", "0"))
+    );
 
-      if (audioFiles?.length == 0) {
-        setIsAudioUploadFinish(true);
-      }
-      audioFiles.map(async (item: FileWithPreview, index: number) => {
-        await uploadResumableFile(
-          index,
-          String(id),
-          item, // Use .file to access the actual File object
-          "4",
-          "0" // Optional: Replace with actual duration if available
-        );
-      });
-    }
+    audioFiles.forEach((file, idx) =>
+      allUploads.push(uploadResumableFile(idx, id, file, "4", "0"))
+    );
+
+    await Promise.all(allUploads);
+
+    successSubmit("/in/contributor/task-ta");
   };
 
   const onSubmit = (data: ImageSchema) => {
@@ -448,76 +479,117 @@ export default function FormTaskTaNew() {
     });
   };
 
-  async function uploadResumableFile(
+  // async function uploadResumableFile(
+  //   idx: number,
+  //   id: string,
+  //   file: any,
+  //   fileTypeId: string,
+  //   duration: string
+  // ) {
+  //   console.log(idx, id, file, fileTypeId, duration);
+
+  //   const resCsrf = await getCsrfToken();
+  //   const csrfToken = resCsrf?.data?.token;
+  //   const headers = {
+  //     "X-XSRF-TOKEN": csrfToken,
+  //   };
+
+  //   const upload = new Upload(file, {
+  //     endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
+  //     headers: headers,
+  //     retryDelays: [0, 3000, 6000, 12_000, 24_000],
+  //     chunkSize: 20_000,
+  //     metadata: {
+  //       mediaid: id,
+  //       filename: file.name,
+  //       contentType: file.type,
+  //       fileTypeId: fileTypeId,
+  //       duration,
+  //       isWatermark: "true",
+  //     },
+  //     onBeforeRequest: function (req) {
+  //       var xhr = req.getUnderlyingObject();
+  //       xhr.withCredentials = true;
+  //     },
+  //     onError: async (e: any) => {
+  //       console.log("Error upload :", e);
+  //       error(e);
+  //     },
+  //     onChunkComplete: (
+  //       chunkSize: any,
+  //       bytesAccepted: any,
+  //       bytesTotal: any
+  //     ) => {
+  //       // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+  //       // progressInfo[idx].percentage = uploadPersen;
+  //       // counterUpdateProgress++;
+  //       // console.log(counterUpdateProgress);
+  //       // setProgressList(progressInfo);
+  //       // setCounterProgress(counterUpdateProgress);
+  //     },
+  //     onSuccess: async () => {
+  //       // uploadPersen = 100;
+  //       // progressInfo[idx].percentage = 100;
+  //       // counterUpdateProgress++;
+  //       // setCounterProgress(counterUpdateProgress);
+  //       successTodo();
+  //       if (fileTypeId == "1") {
+  //         setIsImageUploadFinish(true);
+  //       } else if (fileTypeId == "2") {
+  //         setIsVideoUploadFinish(true);
+  //       }
+  //       if (fileTypeId == "3") {
+  //         setIsTextUploadFinish(true);
+  //       }
+  //       if (fileTypeId == "4") {
+  //         setIsAudioUploadFinish(true);
+  //       }
+  //     },
+  //   });
+
+  //   upload.start();
+  // }
+
+  function uploadResumableFile(
     idx: number,
     id: string,
     file: any,
     fileTypeId: string,
     duration: string
   ) {
-    console.log(idx, id, file, fileTypeId, duration);
+    return new Promise(async (resolve, reject) => {
+      const resCsrf = await getCsrfToken();
+      const csrfToken = resCsrf?.data?.token;
 
-    const resCsrf = await getCsrfToken();
-    const csrfToken = resCsrf?.data?.token;
-    console.log("CSRF TOKEN : ", csrfToken);
-    const headers = {
-      "X-XSRF-TOKEN": csrfToken,
-    };
+      const upload = new Upload(file, {
+        endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
+        headers: { "X-XSRF-TOKEN": csrfToken },
+        retryDelays: [0, 3000, 6000, 12_000, 24_000],
+        chunkSize: 20_000,
+        metadata: {
+          mediaid: id,
+          filename: file.name,
+          contentType: file.type,
+          fileTypeId,
+          duration,
+          isWatermark: "true",
+        },
+        onBeforeRequest: function (req) {
+          req.getUnderlyingObject().withCredentials = true;
+        },
 
-    const upload = new Upload(file, {
-      endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
-      headers: headers,
-      retryDelays: [0, 3000, 6000, 12_000, 24_000],
-      chunkSize: 20_000,
-      metadata: {
-        mediaid: id,
-        filename: file.name,
-        contentType: file.type,
-        fileTypeId: fileTypeId,
-        duration,
-        isWatermark: "true",
-      },
-      onBeforeRequest: function (req) {
-        var xhr = req.getUnderlyingObject();
-        xhr.withCredentials = true;
-      },
-      onError: async (e: any) => {
-        console.log("Error upload :", e);
-        error(e);
-      },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
-        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
-        // progressInfo[idx].percentage = uploadPersen;
-        // counterUpdateProgress++;
-        // console.log(counterUpdateProgress);
-        // setProgressList(progressInfo);
-        // setCounterProgress(counterUpdateProgress);
-      },
-      onSuccess: async () => {
-        // uploadPersen = 100;
-        // progressInfo[idx].percentage = 100;
-        // counterUpdateProgress++;
-        // setCounterProgress(counterUpdateProgress);
-        successTodo();
-        if (fileTypeId == "1") {
-          setIsImageUploadFinish(true);
-        } else if (fileTypeId == "2") {
-          setIsVideoUploadFinish(true);
-        }
-        if (fileTypeId == "3") {
-          setIsTextUploadFinish(true);
-        }
-        if (fileTypeId == "4") {
-          setIsAudioUploadFinish(true);
-        }
-      },
+        onError: (e) => {
+          console.log("Error upload:", e);
+          reject(e);
+        },
+
+        onSuccess: () => {
+          resolve(true);
+        },
+      });
+
+      upload.start();
     });
-
-    upload.start();
   }
 
   useEffect(() => {
@@ -662,8 +734,7 @@ export default function FormTaskTaNew() {
                           size="md"
                           type="text"
                           defaultValue={detail?.title}
-                          onChange={field.onChange}
-                          placeholder="Enter Title"
+                          {...field}
                         />
                       )}
                     />
@@ -676,7 +747,11 @@ export default function FormTaskTaNew() {
 
                   <div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center gap-3">
                     <div className=" space-y-2 w-3/12">
-                      <Label>{t("assigment-type", { defaultValue: "Assigment Type" })}</Label>
+                      <Label>
+                        {t("assigment-type", {
+                          defaultValue: "Assigment Type",
+                        })}
+                      </Label>
                       <Select onValueChange={(val) => setFileTypeId(val)}>
                         <SelectTrigger size="md">
                           <SelectValue placeholder="Choose" />
@@ -717,7 +792,9 @@ export default function FormTaskTaNew() {
                   </div>
 
                   <div className="py-3 space-y-2">
-                    <Label>{t("description", { defaultValue: "Description" })}</Label>
+                    <Label>
+                      {t("description", { defaultValue: "Description" })}
+                    </Label>
                     <Controller
                       control={control}
                       name="description"
@@ -743,13 +820,21 @@ export default function FormTaskTaNew() {
                     )}
                   </div>
                   <div className="space-y-2.5 mt-5">
-                    <Label htmlFor="attachments">{t("attachment", { defaultValue: "Attachment" })}</Label>
+                    <Label htmlFor="attachments">
+                      {t("attachment", { defaultValue: "Attachment" })}
+                    </Label>
                     <div className="space-y-3">
                       {fileTypeId === "2" && (
                         <div>
-                          <Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
+                          <Label>
+                            {t("audio-visual", {
+                              defaultValue: "Audio Visual",
+                            })}
+                          </Label>
                           <FileUploader
-                            accept={{ "mp4/*": [], "mov/*": [] }}
+                            accept={{
+                              "video/*": [], // menerima mp4, mov, mkv, avi, dll (lebih aman)
+                            }}
                             maxSize={100}
                             label="Upload file dengan format .mp4 atau .mov."
                             onDrop={(files) => setVideoFiles(files)}
@@ -773,7 +858,9 @@ export default function FormTaskTaNew() {
                         <div className="space-y-2">
                           <Label>{t("text", { defaultValue: "Text" })}</Label>
                           <FileUploader
-                            accept={{ "pdf/*": [] }}
+                            accept={{
+                              "application/pdf": [], // lebih presisi
+                            }}
                             maxSize={100}
                             label="Upload file dengan format .pdf."
                             onDrop={(files) => setTextFiles(files)}
@@ -794,7 +881,9 @@ export default function FormTaskTaNew() {
                             downloadFileExtension="webm"
                           />
                           <FileUploader
-                            accept={{ "mp3/*": [], "wav/*": [] }}
+                            accept={{
+                              "audio/*": [], // menerima mp3, wav, webm (untuk hasil rekaman)
+                            }}
                             maxSize={100}
                             label="Upload file dengan format .mp3 atau .wav."
                             onDrop={(files) =>
@@ -811,7 +900,9 @@ export default function FormTaskTaNew() {
                             key={idx}
                             className="flex flex-row justify-between items-center"
                           >
-                            <p>{t("voice-note", { defaultValue: "Voice Note" })}</p>
+                            <p>
+                              {t("voice-note", { defaultValue: "Voice Note" })}
+                            </p>
                             <Button
                               type="button"
                               onClick={() => handleDeleteAudio(idx)}
@@ -837,7 +928,7 @@ export default function FormTaskTaNew() {
                     </Button>
                   </div>
                   <div className="mt-4">
-                    <Link href={"/contributor/content/image"}>
+                    <Link href={"/contributor/task-ta"}>
                       <Button type="submit" color="primary" variant="outline">
                         {t("cancel", { defaultValue: "Cancel" })}
                       </Button>

components/form/task/task-detail-form.tsx

@@ -811,12 +811,27 @@ export default function FormTaskDetail() {
     // getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
   };
 
+  const getViewerUrl = (url: string) => {
+    const ext = url.split(".").pop()?.toLowerCase();
+
+    if (ext === "pdf") {
+      return url; // langsung tampilkan PDF
+    }
+
+    // doc / docx → pakai Google Viewer, lebih compatible
+    return `https://docs.google.com/viewer?url=${encodeURIComponent(
+      url
+    )}&embedded=true`;
+  };
+
   return (
     <Card>
       {detail !== undefined ? (
         <div className="px-6 py-6">
           <div className="flex flex-col sm:flex-row lg:flex-row justify-between">
-            <p className="text-lg font-semibold mb-3">{t("detail-task", { defaultValue: "Detail Task" })}</p>
+            <p className="text-lg font-semibold mb-3">
+              {t("detail-task", { defaultValue: "Detail Task" })}
+            </p>
             <div
               className="flex  gap-3"
               style={
@@ -834,7 +849,8 @@ export default function FormTaskDetail() {
                       color="primary"
                       onClick={() => setModalType("terkirim")}
                     >
-                      {sentAcceptance?.length} {t("sent", { defaultValue: "Sent" })}
+                      {sentAcceptance?.length}{" "}
+                      {t("sent", { defaultValue: "Sent" })}
                     </Button>
                   </DialogTrigger>
 
@@ -844,14 +860,17 @@ export default function FormTaskDetail() {
                       onClick={() => setModalType("diterima")}
                       className="ml-3"
                     >
-                      {acceptAcceptance?.length} {t("accepted", { defaultValue: "Accepted" })}
+                      {acceptAcceptance?.length}{" "}
+                      {t("accepted", { defaultValue: "Accepted" })}
                     </Button>
                   </DialogTrigger>
 
                   <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px] overflow-y-auto max-h-[500px]">
                     <DialogHeader>
                       <DialogTitle>
-                        {t("assignment-status-details", { defaultValue: "Assignment Status Details" })}
+                        {t("assignment-status-details", {
+                          defaultValue: "Assignment Status Details",
+                        })}
                       </DialogTitle>
                     </DialogHeader>
 
@@ -866,7 +885,9 @@ export default function FormTaskDetail() {
           <form>
             <div className="gap-5 mb-5">
               <div className="space-y-2">
-                <Label>{t("unique-code", { defaultValue: "Unique Code" })}</Label>
+                <Label>
+                  {t("unique-code", { defaultValue: "Unique Code" })}
+                </Label>
                 <Controller
                   control={control}
                   name="uniqueCode"
@@ -903,7 +924,11 @@ export default function FormTaskDetail() {
               </div>
               <div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center">
                 <div className="mt-6 space-y-2">
-                  <Label>{t("assignment-selection", { defaultValue: "Assignment Selection" })}</Label>
+                  <Label>
+                    {t("assignment-selection", {
+                      defaultValue: "Assignment Selection",
+                    })}
+                  </Label>
                   <Select
                     onValueChange={setSelectedTarget}
                     value={detail.assignedToRole}
@@ -1040,7 +1065,9 @@ export default function FormTaskDetail() {
                 </RadioGroup>
               </div>
               <div className="mt-6 space-y-2">
-                <Label>{t("assigment-type", { defaultValue: "Assigment Type" })} </Label>
+                <Label>
+                  {t("assigment-type", { defaultValue: "Assigment Type" })}{" "}
+                </Label>
                 <RadioGroup
                   value={detail.taskType.toString()}
                   onValueChange={(value) => setTaskType(String(value))}
@@ -1054,7 +1081,9 @@ export default function FormTaskDetail() {
               </div>
               {/* RadioGroup Assignment Category */}
               <div className="mt-6 space-y-2">
-                <Label>{t("type-of-task", { defaultValue: "Type Of Task" })}</Label>
+                <Label>
+                  {t("type-of-task", { defaultValue: "Type Of Task" })}
+                </Label>
                 <RadioGroup
                   value={detail.assignmentType.id.toString()}
                   onValueChange={(value) => setType(value)}
@@ -1075,7 +1104,9 @@ export default function FormTaskDetail() {
                 </RadioGroup>
               </div>
               <div className="mt-6 space-y-2">
-                <Label>{t("output-task", { defaultValue: "Output Task" })}</Label>
+                <Label>
+                  {t("output-task", { defaultValue: "Output Task" })}
+                </Label>
                 <div className="flex flex-wrap gap-3">
                   {Object.keys(taskOutput).map((key) => (
                     <div className="flex items-center gap-2" key={key}>
@@ -1096,7 +1127,9 @@ export default function FormTaskDetail() {
               </div>
 
               <div className="mt-6 space-y-2">
-                <Label>{t("description", { defaultValue: "Description" })}</Label>
+                <Label>
+                  {t("description", { defaultValue: "Description" })}
+                </Label>
                 <Controller
                   control={control}
                   name="naration"
@@ -1111,11 +1144,15 @@ export default function FormTaskDetail() {
                 )} */}
               </div>
               <div className=" mt-5 space-y-2">
-                <Label htmlFor="attachment">{t("attachment", { defaultValue: "Attachment" })}</Label>
+                <Label htmlFor="attachment">
+                  {t("attachment", { defaultValue: "Attachment" })}
+                </Label>
                 <div className="space-y-3">
                   <div>
                     {videoUploadedFiles?.length > 0 && (
-                      <Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
+                      <Label>
+                        {t("audio-visual", { defaultValue: "Audio Visual" })}
+                      </Label>
                     )}
                     <div>
                       {selectedVideo && (
@@ -1216,12 +1253,16 @@ export default function FormTaskDetail() {
                     <div>
                       {selectedText && (
                         <Card className="mt-2">
-                          <iframe
+                          {/* <iframe
                             className="w-full h-96 rounded-md"
                             src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
                               selectedText
                             )}`}
                             title={"Document"}
+                          /> */}
+                          <iframe
+                            className="w-full h-96"
+                            src={getViewerUrl(selectedText)}
                           />
                         </Card>
                       )}

components/form/task/task-form.tsx

@@ -338,22 +338,48 @@ export default function FormTask() {
         .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
         .join(",");
 
+      let roleTargets = selectedTarget
+        ? selectedTarget.split(",").map((x) => Number(x))
+        : [];
+
+      if (!roleTargets.includes(11)) {
+        roleTargets.push(11);
+      }
+
+      const finalAssignedToRole = roleTargets.join(",");
+
       const requestData = {
         ...data,
+        assignedToRole: finalAssignedToRole,
         assignedToLevel: handlePoldaPolresChange(),
         assignmentPurpose: assignmentPurposeString,
-        assignedToRole: selectedTarget,
         taskType,
         broadcastType,
         assignmentMainTypeId: mainType,
-        assignmentTypeId: type,
         fileTypeOutput: selectedOutputs,
+        assignmentTypeId: type,
         narration: data.naration,
-        platformType: "",
         title: data.title,
         attachmentUrl: links,
+        platformType: "",
       };
 
+      // const requestData = {
+      //   ...data,
+      //   assignedToLevel: handlePoldaPolresChange(),
+      //   assignmentPurpose: assignmentPurposeString,
+      //   assignedToRole: selectedTarget,
+      //   taskType,
+      //   broadcastType,
+      //   assignmentMainTypeId: mainType,
+      //   assignmentTypeId: type,
+      //   fileTypeOutput: selectedOutputs,
+      //   narration: data.naration,
+      //   platformType: "",
+      //   title: data.title,
+      //   attachmentUrl: links,
+      // };
+
       const response = await createTask(requestData);
       const id = response?.data?.data.id;
 

components/landing-page/advertisement-placements.tsx

@@ -80,7 +80,8 @@
 // };
 
 // export default AdvertisementPlacements;
-import { listDataAdvertisements } from "@/service/broadcast/broadcast";
+"use client";
+
 import { useEffect, useState } from "react";
 import * as React from "react";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
@@ -93,35 +94,40 @@ interface Advertisement {
   [key: string]: any;
 }
 
-const AdvertisementPlacements = (props: {
+interface AdvertisementPlacementsProps {
   placement: string;
-  data: Advertisement[];
+  data?: Advertisement[]; // ⬅️ PENTING: optional
   loading: boolean;
-}) => {
-  const [ads, setAds] = useState<Advertisement[] | undefined[]>([]);
+}
+
+const AdvertisementPlacements = ({
+  placement,
+  data = [], // ⬅️ DEFAULT VALUE (KUNCI UTAMA)
+  loading,
+}: AdvertisementPlacementsProps) => {
+  const [ads, setAds] = useState<(Advertisement | undefined)[]>([]);
 
   useEffect(() => {
-    if (!props.loading && props.data.length > 0) {
-      const filtered = props.data.filter((a) =>
-        a.placements.includes(props.placement)
-      );
+    if (loading || data.length === 0) return;
 
-      let temps: Advertisement[] | undefined[] = [];
-      temps[0] = filtered.find((b) => b.placements.includes("top"));
-      temps[1] = filtered.find((b) => b.placements.includes("bottom"));
-      setAds(temps);
-    }
-  }, [props.data, props.loading, props.placement]);
+    const filtered = data.filter((a) => a.placements?.includes(placement));
+
+    const temps: (Advertisement | undefined)[] = [];
+    temps[0] = filtered.find((b) => b.placements?.includes("top"));
+    temps[1] = filtered.find((b) => b.placements?.includes("bottom"));
+
+    setAds(temps);
+  }, [data, loading, placement]);
 
   return (
     <div
       className={`sticky top-0 space-y-4 ${
-        props.placement === "left" ? "ml-14" : "mr-14"
+        placement === "left" ? "ml-14" : "mr-14"
       }`}
     >
-      {props.loading && <p className="text-sm text-gray-500">Loading...</p>}
+      {loading && <p className="text-sm text-gray-500">Loading...</p>}
 
-      {ads?.map(
+      {ads.map(
         (ad) =>
           ad && (
             <Dialog key={ad.id}>
@@ -132,6 +138,7 @@ const AdvertisementPlacements = (props: {
                   className="w-full cursor-pointer rounded-lg shadow-md hover:opacity-90 transition"
                 />
               </DialogTrigger>
+
               <DialogContent className="max-w-4xl p-0 bg-transparent border-0 shadow-none">
                 <img
                   src={ad.contentFileUrl || ad.imageUrl}

components/landing-page/content-category.tsx

@@ -1,22 +1,10 @@
-import {
-  getCategoryData,
-  getPublicCategoryData,
-  getPublicCategoryDataNew,
-} from "@/service/landing/landing";
+import { getPublicCategoryDataNew } from "@/service/landing/landing";
 import React, { useEffect, useState } from "react";
 import { Reveal } from "./Reveal";
 import { useTranslations } from "next-intl";
 import { usePathname } from "next/navigation";
 import { useParams } from "next/navigation";
-import Image from "next/image";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "../ui/carousel";
-import { useRouter } from "@/i18n/routing";
+import { Link, useRouter } from "@/i18n/routing";
 import { Button } from "../ui/button";
 import ImageBlurry from "../ui/image-blurry";
 
@@ -106,9 +94,10 @@ const ContentCategory = (props: { group?: string; type: string }) => {
               (category: any) => (
                 <div key={category?.id}>
                   <div
+                    // href={prefixPath + `/all/filter?category=${category?.id}`}
                     onClick={() =>
                       router.push(
-                        `${prefixPath}all/filter?category=${category?.id}`
+                        `${prefixPath + `/all/filter?category=${category?.id}`}`
                       )
                     }
                     className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block"

components/landing-page/filter-all/audio-filter-card.tsx

@@ -288,9 +288,18 @@ export default function FilterAudioComponent(props: {
 
                 {/* Caption */}
                 <div className="p-4">
-                  <p className="text-[12px] font-bold text-[#bb3523] uppercase mb-1">
-                    {audio?.categoryName?.toUpperCase() ?? "GIAT PIMPINAN"}
-                  </p>
+                  <div className="flex flex-row justify-between">
+                    <p className="text-[12px] font-bold text-[#bb3523] uppercase mb-1">
+                      {audio?.categoryName?.toUpperCase() ?? "GIAT PIMPINAN"}
+                    </p>
+
+                    <p className="flex flex-row items-center text-[10px] gap-2">
+                      {formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
+                      {audio?.timezone ? audio?.timezone : "WIB"} |{" "}
+                      <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                      {audio?.clickCount}{" "}
+                    </p>
+                  </div>
 
                   <p className="text-xl font-semibold text-black dark:text-white line-clamp-4">
                     {audio?.title}

components/landing-page/filter-all/document-filter-card.tsx

@@ -259,9 +259,18 @@ export default function FilterDocumentComponent(props: {
 
                 {/* Konten bawah */}
                 <div className="p-4 flex flex-col gap-2">
-                  {/* Kategori merah */}
-                  <div className="text-[12px] font-bold text-red-600 uppercase">
-                    {text?.categoryName?.toUpperCase() ?? "Text"}
+                  <div className="flex flex-row justify-between">
+                    {/* Kategori merah */}
+                    <div className="text-[12px] font-bold text-red-600 uppercase">
+                      {text?.categoryName?.toUpperCase() ?? "Text"}
+                    </div>
+
+                    <p className="flex flex-row items-center text-[10px] gap-2">
+                      {formatDateToIndonesian(new Date(text?.createdAt))}{" "}
+                      {text?.timezone ? text?.timezone : "WIB"} |{" "}
+                      <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                      {text?.clickCount}{" "}
+                    </p>
                   </div>
 
                   {/* Judul */}

components/landing-page/filter-all/image-filter-card.tsx

@@ -6,6 +6,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
+import { Icon } from "@/components/ui/icon";
 import { close, loading } from "@/config/swal";
 import { Link, usePathname, useRouter } from "@/i18n/routing";
 import { listData, listDataRegional } from "@/service/landing/landing";
@@ -259,9 +260,18 @@ export default function FilterImageComponent(props: {
                 {/* Caption section */}
                 <div className="p-4 h-full flex flex-col justify-between">
                   <div className="flex flex-col gap-1 flex-grow">
-                    <p className="text-[10px] font-bold text-[#bb3523] uppercase">
-                      {image?.categoryName?.toUpperCase() ?? "Giat Pimpinan"}
-                    </p>
+                    <div className="flex flex-row justify-between">
+                      <p className="text-[10px] font-bold text-[#bb3523] uppercase">
+                        {image?.categoryName?.toUpperCase() ?? "Giat Pimpinan"}
+                      </p>
+                      <p className="flex flex-row items-center text-[10px] gap-2">
+                        {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
+                        {image?.timezone ? image?.timezone : "WIB"}{" "}|{" "}
+                        <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                        {image?.clickCount}{" "}
+                      </p>
+                    </div>
+
                     <p
                       className="
                 text-sm lg:text-base font-semibold text-black dark:text-white

components/landing-page/filter-all/video-filter-card.tsx

@@ -234,9 +234,18 @@ export default function FilterVideoComponent(props: {
                 {/* Caption section */}
                 <div className="p-4 h-full flex flex-col justify-between">
                   <div className="flex flex-col gap-1 flex-grow">
-                    <p className="text-[10px] font-bold text-[#bb3523] uppercase">
-                      {video?.categoryName?.toUpperCase() ?? "Giat Pimpinan"}
-                    </p>
+                    <div className="flex flex-row justify-between">
+                      <p className="text-[10px] font-bold text-[#bb3523] uppercase">
+                        {video?.categoryName?.toUpperCase() ?? "Giat Pimpinan"}
+                      </p>
+                      <p className="flex flex-row items-center text-[10px] gap-2">
+                        {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
+                        {video?.timezone ? video?.timezone : "WIB"} |{" "}
+                        <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                        {video?.clickCount}{" "}
+                      </p>
+                    </div>
+
                     <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
                       {video?.title}
                     </p>

components/landing-page/hero-new-satker.tsx

@@ -63,7 +63,7 @@ type HeroModalProps = {
 
 //   useEffect(() => {
 //     async function fetchCategories() {
-//       const url = "https://netidhub.com/api/csrf";
+//       const url = "https://new.netidhub.com/api/csrf";
 
 //       try {
 //         const response = await fetch(url);

components/landing-page/hero.tsx

@@ -50,7 +50,7 @@ const HeroModal = ({ onClose }: { onClose: () => void }) => {
 
   useEffect(() => {
     async function fetchCategories() {
-      const url = "https://netidhub.com/api/csrf";
+      const url = "https://new.netidhub.com/api/csrf";
 
       try {
         const response = await fetch(url);
@@ -268,7 +268,7 @@ const Hero = (props: { group?: string }) => {
 
   useEffect(() => {
     async function fetchCategories() {
-      const url = "https://netidhub.com/api/csrf";
+      const url = "https://new.netidhub.com/api/csrf";
 
       try {
         const response = await fetch(url);

components/landing-page/navbar.tsx

@@ -99,7 +99,7 @@ const Navbar = () => {
     ? `/polda/${poldaName}`
     : satkerName
     ? `/satker/${satkerName}`
-    : "/";
+    : "";
 
   let menu = "";
 
@@ -209,7 +209,7 @@ const Navbar = () => {
     <div className="bg-[#f7f7f7] dark:bg-black shadow-md sticky top-0 z-50">
       <div className="flex items-center justify-between px-4 lg:px-16 py-2 gap-3">
         <div className="flex flex-row gap-2">
-          <Link href={prefixPath} className="flex items-center">
+          <Link href="/" className="flex items-center">
             <Image
               priority={true}
               src="/assets/mediahub-logo.gif"

components/landing-page/new-content.tsx

@@ -83,7 +83,7 @@ const NewContent = (props: { group: string; type: string }) => {
           ? "1"
           : selectedTab == "video"
           ? "2"
-          : selectedTab == "text"
+          : selectedTab == "document"
           ? "3"
           : selectedTab == "audio"
           ? "4"

components/landing-page/scrollable-content-polda.tsx

@@ -36,7 +36,7 @@ const ScrollableContentPolda = () => {
 
   useEffect(() => {
     async function fetchCategories() {
-      const url = "https://netidhub.com/api/csrf";
+      const url = "https://new.netidhub.com/api/csrf";
 
       try {
         const response = await fetch(url);

components/landing-page/scrollable-content-satker.tsx

@@ -35,7 +35,7 @@ const ScrollableContentSatker = () => {
     : "";
   useEffect(() => {
     async function fetchCategories() {
-      const url = "https://netidhub.com/api/csrf";
+      const url = "https://new.netidhub.com/api/csrf";
 
       try {
         const response = await fetch(url);

components/landing-page/search-section-new.tsx

@@ -39,7 +39,7 @@ const ScrollableContent = () => {
 
   useEffect(() => {
     async function fetchCategories() {
-      const url = "https://netidhub.com/api/csrf";
+      const url = "https://new.netidhub.com/api/csrf";
 
       try {
         const response = await fetch(url);

components/main/audio-detail.tsx

@@ -247,7 +247,16 @@ const DetailAudio = () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
         const contentType =
           xhr.getResponseHeader("content-type") || "application/octet-stream";
-        const extension = contentType.split("/")[1];
+        let extension = contentType.split("/")[1];
+
+        if (selectedSize === "MP3") {
+          extension = "mp3";
+        }
+
+        if (selectedSize === "WAV") {
+          extension = "wav";
+        }
+
         const filename = `${name}.${extension}`;
 
         const blob = new Blob([xhr.response], {
@@ -403,7 +412,7 @@ const DetailAudio = () => {
         const { default: WaveSurfer } = await import("wavesurfer.js");
 
         if (wavesurfer.current) {
-          wavesurfer.current.destroy(); 
+          wavesurfer.current.destroy();
         }
 
         setPlaying(false);
@@ -443,7 +452,7 @@ const DetailAudio = () => {
 
       return () => {
         if (wavesurfer.current) {
-          wavesurfer.current.destroy(); 
+          wavesurfer.current.destroy();
         }
       };
     }

components/main/document-detail.tsx

@@ -247,7 +247,19 @@ const DetailDocument = () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
         const contentType =
           xhr.getResponseHeader("content-type") || "application/octet-stream";
-        const extension = contentType.split("/")[1];
+       let extension = contentType.split("/")[1];
+
+        if (selectedSize === "DOC") {
+          extension = "doc";
+        }
+
+        if (selectedSize === "PPT") {
+          extension = "ppt";
+        }
+
+        if (selectedSize === "PDF") {
+          extension = "pdf";
+        }
         const filename = `${name}.${extension}`;
 
         const blob = new Blob([xhr.response], {

components/partials/footer/index.tsx

@@ -31,7 +31,7 @@ const DashCodeFooter = () => {
         >
           <div className="h-[50px] w-[50px] rounded-full relative left-[0px] top-[0px] custom-dropshadow">
             <Image
-              src={"https://netidhub.com/assets/img/user-avatar.png"}
+              src={"https://new.netidhub.com/assets/img/user-avatar.png"}
               alt={"Image"}
               width={50}
               height={50}

components/site-breadcrumb.tsx

@@ -1,64 +1,111 @@
-'use client';
-import React from 'react'
+"use client";
+import React from "react";
 import { Link, usePathname, useRouter } from "@/components/navigation";
 import {
-    Breadcrumb,
-    BreadcrumbEllipsis,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-import { Icon } from "@/components/ui/icon"
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Icon } from "@/components/ui/icon";
 import { ReactNode } from "react";
 
 const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
-    const location = usePathname();
-    const locations = location.split('/').filter(path => path)
+  const router = useRouter(); 
 
+  return (
+    <div className="flex justify-between gap-3 items-center mb-6">
+      <div className="flex-1">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <Link href="/dashboard">
+                <Icon icon="heroicons:home" className="h-5 w-5" />
+              </Link>
+            </BreadcrumbItem>
 
+            <BreadcrumbSeparator />
 
-    return (
-        <div className="flex justify-between gap-3 items-center mb-6">
-            <div className="flex-1">
-                <Breadcrumb>
-                    <BreadcrumbList>
+            <BreadcrumbItem>
+              <button
+                onClick={() => router.back()}
+                className="capitalize flex items-center gap-1"
+              >
+                Back
+                <BreadcrumbSeparator />
+              </button>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
 
-                        <BreadcrumbItem
-                        >
-                            <Link href="/dashboard">
-                                <Icon icon="heroicons:home" className=" h-5 w-5" />
-                            </Link>
-
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-
-                        {
-                            locations.map((link, index) => {
-                                let href = `/${locations.slice(0, index + 1).join('/')}`
-                                let itemLink = link
-                                const isLast = index === locations.length - 1;
-                                return (
-                                    <React.Fragment key={index}>
-                                        <BreadcrumbItem className=' capitalize'  >
-                                            {isLast ? (
-                                                itemLink?.replaceAll("-", " ")
-                                            ) : (
-                                                <Link href={href} >{itemLink?.replaceAll("-", "")}</Link>
-                                            )}
-                                        </BreadcrumbItem>
-                                        {locations.length !== index + 1 && <BreadcrumbSeparator />}
-                                    </React.Fragment>
-                                )
-                            })
-                        }
-                    </BreadcrumbList>
-                </Breadcrumb>
-            </div>
-            <div className=" flex-none flex  gap-2">{children}</div>
-        </div>
-    );
+      <div className="flex-none flex gap-2">{children}</div>
+    </div>
+  );
 };
 
-export default SiteBreadcrumb;
+export default SiteBreadcrumb;
+
+// 'use client';
+// import React from 'react'
+// import { Link, usePathname, useRouter } from "@/components/navigation";
+// import {
+//     Breadcrumb,
+//     BreadcrumbEllipsis,
+//     BreadcrumbItem,
+//     BreadcrumbLink,
+//     BreadcrumbList,
+//     BreadcrumbPage,
+//     BreadcrumbSeparator,
+// } from "@/components/ui/breadcrumb"
+// import { Icon } from "@/components/ui/icon"
+// import { ReactNode } from "react";
+
+// const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
+//     const location = usePathname();
+//     const locations = location.split('/').filter(path => path)
+
+//     return (
+//         <div className="flex justify-between gap-3 items-center mb-6">
+//             <div className="flex-1">
+//                 <Breadcrumb>
+//                     <BreadcrumbList>
+
+//                         <BreadcrumbItem
+//                         >
+//                             <Link href="/dashboard">
+//                                 <Icon icon="heroicons:home" className=" h-5 w-5" />
+//                             </Link>
+
+//                         </BreadcrumbItem>
+//                         <BreadcrumbSeparator />
+
+//                         {
+//                             locations.map((link, index) => {
+//                                 let href = `/${locations.slice(0, index + 1).join('/')}`
+//                                 let itemLink = link
+//                                 const isLast = index === locations.length - 1;
+//                                 return (
+//                                     <React.Fragment key={index}>
+//                                         <BreadcrumbItem className=' capitalize'  >
+//                                             {isLast ? (
+//                                                 itemLink?.replaceAll("-", " ")
+//                                             ) : (
+//                                                 <Link href={href} >{itemLink?.replaceAll("-", "")}</Link>
+//                                             )}
+//                                         </BreadcrumbItem>
+//                                         {locations.length !== index + 1 && <BreadcrumbSeparator />}
+//                                     </React.Fragment>
+//                                 )
+//                             })
+//                         }
+//                     </BreadcrumbList>
+//                 </Breadcrumb>
+//             </div>
+//             <div className=" flex-none flex  gap-2">{children}</div>
+//         </div>
+//     );
+// };
+
+// export default SiteBreadcrumb;

components/table/management-user/management-user-external-column-table.tsx

@@ -133,35 +133,35 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+            {/* <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
               <a>Aktivasi</a>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/management-user/external/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/management-user/external/edit/${row.original.id}`}
-              >
-                Edit
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              color="red"
-              className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none"
+            </DropdownMenuItem> */}
+            <Link
+              href={`/admin/management-user/external/detail/${row.original.id}`}
             >
-              <a
-                onClick={() => {
-                  handleDelete(row.original.id);
-                }}
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Detail
+              </DropdownMenuItem>
+            </Link>
+            <Link
+              href={`/admin/management-user/external/edit/${row.original.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Edit
+              </DropdownMenuItem>
+            </Link>
+            <a
+              onClick={() => {
+                handleDelete(row.original.id);
+              }}
+            >
+              <DropdownMenuItem
+                color="red"
+                className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none cursor-pointer"
               >
                 Hapus
-              </a>
-            </DropdownMenuItem>
+              </DropdownMenuItem>
+            </a>
           </DropdownMenuContent>
         </DropdownMenu>
       );

components/table/management-user/management-user-internal-column-table.tsx

@@ -130,32 +130,32 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/management-user/internal/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/management-user/internal/edit/${row.original.id}`}
-              >
-                Edit
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              color="red"
-              className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none"
+            <Link
+              href={`/admin/management-user/internal/detail/${row.original.id}`}
             >
-              <a
-                onClick={() => {
-                  handleDelete(row.original.id);
-                }}
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Detail
+              </DropdownMenuItem>
+            </Link>
+            <Link
+              href={`/admin/management-user/internal/edit/${row.original.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Edit
+              </DropdownMenuItem>
+            </Link>
+            <a
+              onClick={() => {
+                handleDelete(row.original.id);
+              }}
+            >
+              <DropdownMenuItem
+                color="red"
+                className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none cursor-pointer"
               >
                 Hapus
-              </a>
-            </DropdownMenuItem>
+              </DropdownMenuItem>
+            </a>
           </DropdownMenuContent>
         </DropdownMenu>
       );

lib/menus.ts

@@ -100,6 +100,13 @@ export function getMenuList(pathname: string, t: any): Group[] {
               },
               ...(!hideForRole14
                 ? [
+                    // {
+                    //   href: "/contributor/content/satker",
+                    //   label: "satker",
+                    //   active: pathname.includes("/content/satker"),
+                    //   icon: "heroicons:credit-card",
+                    //   children: [],
+                    // },
                     {
                       href: "/contributor/content/spit",
                       label: "spit",
@@ -161,6 +168,13 @@ export function getMenuList(pathname: string, t: any): Group[] {
                       icon: "heroicons:shopping-cart",
                       children: [],
                     },
+                    {
+                      href: "/contributor/task-ta",
+                      label: "penugasan TA",
+                      active: pathname.includes("/contributor/task-ta"),
+                      icon: "heroicons:shopping-cart",
+                      children: [],
+                    },
                   ],
                 },
               ],
@@ -2415,7 +2429,10 @@ export function getMenuList(pathname: string, t: any): Group[] {
         },
       ];
     }
-  } else if (Number(roleId) == 4 && Number(levelNumber) == 3) {
+  } else if (
+    Number(roleId) == 4 ||
+    (Number(roleId) == 3 && Number(levelNumber) == 3)
+  ) {
     menusSelected = [
       {
         groupLabel: t("apps"),
@@ -2502,35 +2519,35 @@ export function getMenuList(pathname: string, t: any): Group[] {
           },
         ],
       },
-      {
-        groupLabel: "",
-        id: "planning",
-        menus: [
-          {
-            id: "planning",
-            href: "/contributor/planning",
-            label: t("planning"),
-            active: pathname.includes("/planning"),
-            icon: "pajamas:planning",
-            submenus: [
-              {
-                href: "/contributor/planning/mediahub",
-                label: "mediaHub",
-                active: pathname.includes("/planning/mediahub"),
-                icon: "heroicons:arrow-trending-up",
-                children: [],
-              },
-              {
-                href: "/contributor/planning/medsos-mediahub",
-                label: "medsos mediahub",
-                active: pathname.includes("/planning/medsos-mediahub"),
-                icon: "heroicons:shopping-cart",
-                children: [],
-              },
-            ],
-          },
-        ],
-      },
+      // {
+      //   groupLabel: "",
+      //   id: "planning",
+      //   menus: [
+      //     {
+      //       id: "planning",
+      //       href: "/contributor/planning",
+      //       label: t("planning"),
+      //       active: pathname.includes("/planning"),
+      //       icon: "pajamas:planning",
+      //       submenus: [
+      //         {
+      //           href: "/contributor/planning/mediahub",
+      //           label: "mediaHub",
+      //           active: pathname.includes("/planning/mediahub"),
+      //           icon: "heroicons:arrow-trending-up",
+      //           children: [],
+      //         },
+      //         {
+      //           href: "/contributor/planning/medsos-mediahub",
+      //           label: "medsos mediahub",
+      //           active: pathname.includes("/planning/medsos-mediahub"),
+      //           icon: "heroicons:shopping-cart",
+      //           children: [],
+      //         },
+      //       ],
+      //     },
+      //   ],
+      // },
       {
         groupLabel: "",
         id: "task",
@@ -2557,44 +2574,51 @@ export function getMenuList(pathname: string, t: any): Group[] {
             icon: "uil:schedule",
             submenus: [
               {
-                href: "/contributor/schedule/press-conference",
-                label: t("press-conference"),
-                active: pathname.includes("/schedule/press-conference"),
+                href: "/contributor/schedule/live-report",
+                label: t("live-report"),
+                active: pathname.includes("/schedule/live-report"),
                 icon: "heroicons:arrow-trending-up",
                 children: [],
               },
-              {
-                href: "/contributor/schedule/event",
-                label: t("event"),
-                active: pathname.includes("/schedule/event"),
-                icon: "heroicons:shopping-cart",
-                children: [],
-              },
-              {
-                href: "/contributor/schedule/press-release",
-                label: t("press-release"),
-                active: pathname.includes("/schedule/press-release"),
-                icon: "heroicons:shopping-cart",
-                children: [],
-              },
+              // {
+              //   href: "/contributor/schedule/press-conference",
+              //   label: t("press-conference"),
+              //   active: pathname.includes("/schedule/press-conference"),
+              //   icon: "heroicons:arrow-trending-up",
+              //   children: [],
+              // },
+              // {
+              //   href: "/contributor/schedule/event",
+              //   label: t("event"),
+              //   active: pathname.includes("/schedule/event"),
+              //   icon: "heroicons:shopping-cart",
+              //   children: [],
+              // },
+              // {
+              //   href: "/contributor/schedule/press-release",
+              //   label: t("press-release"),
+              //   active: pathname.includes("/schedule/press-release"),
+              //   icon: "heroicons:shopping-cart",
+              //   children: [],
+              // },
             ],
           },
         ],
       },
-      {
-        groupLabel: "",
-        id: "blog",
-        menus: [
-          {
-            id: "blog",
-            href: "/contributor/blog",
-            label: t("blog"),
-            active: pathname.includes("/blog"),
-            icon: "fluent:clipboard-text-32-regular",
-            submenus: [],
-          },
-        ],
-      },
+      // {
+      //   groupLabel: "",
+      //   id: "blog",
+      //   menus: [
+      //     {
+      //       id: "blog",
+      //       href: "/contributor/blog",
+      //       label: t("blog"),
+      //       active: pathname.includes("/blog"),
+      //       icon: "fluent:clipboard-text-32-regular",
+      //       submenus: [],
+      //     },
+      //   ],
+      // },
       {
         groupLabel: "",
         id: "curatedcontent",
@@ -2642,8 +2666,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
     (Number(roleId) == 3 || Number(roleId) == 14 || Number(roleId) == 15) &&
     Number(levelNumber) == 3
   ) {
-    if (Number(userParentLevelId) != 761) 
-      {
+    if (Number(userParentLevelId) != 761) {
       menusSelected = [
         {
           groupLabel: t("apps"),
@@ -4183,20 +4206,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
-        {
-          groupLabel: "",
-          id: "management-user",
-          menus: [
-            {
-              id: "management-user-menu",
-              href: "/admin/management-user",
-              label: "Management User",
-              active: pathname.includes("/management-user"),
-              icon: "clarity:users-solid",
-              submenus: [],
-            },
-          ],
-        },
+        // {
+        //   groupLabel: "",
+        //   id: "management-user",
+        //   menus: [
+        //     {
+        //       id: "management-user-menu",
+        //       href: "/admin/management-user",
+        //       label: "Management User",
+        //       active: pathname.includes("/management-user"),
+        //       icon: "clarity:users-solid",
+        //       submenus: [],
+        //     },
+        //   ],
+        // },
         {
           groupLabel: "",
           id: "content-production",
@@ -4282,20 +4305,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
-        {
-          groupLabel: "",
-          id: "experts",
-          menus: [
-            {
-              id: "experts",
-              href: "/admin/add-experts",
-              label: t("add-experts"),
-              active: pathname.includes("/add-experts"),
-              icon: "majesticons:user",
-              submenus: [],
-            },
-          ],
-        },
+        // {
+        //   groupLabel: "",
+        //   id: "experts",
+        //   menus: [
+        //     {
+        //       id: "experts",
+        //       href: "/admin/add-experts",
+        //       label: t("add-experts"),
+        //       active: pathname.includes("/add-experts"),
+        //       icon: "majesticons:user",
+        //       submenus: [],
+        //     },
+        //   ],
+        // },
         {
           groupLabel: "",
           id: "settings",
@@ -4321,13 +4344,13 @@ export function getMenuList(pathname: string, t: any): Group[] {
                   icon: "heroicons:arrow-trending-up",
                   children: [],
                 },
-                {
-                  href: "/admin/settings/banner",
-                  label: "Banner",
-                  active: pathname === "/admin/settings/banner",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
+                // {
+                //   href: "/admin/settings/banner",
+                //   label: "Banner",
+                //   active: pathname === "/admin/settings/banner",
+                //   icon: "heroicons:arrow-trending-up",
+                //   children: [],
+                // },
                 // {
                 //   href: "/admin/settings/feedback",
                 //   label: "Feedback",
@@ -5202,7 +5225,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-area",
                   label: t("areaCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-area"
+                    "/charts/appex-charts/charts-appex-area",
                   ),
                   children: [],
                 },
@@ -5210,7 +5233,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-bar",
                   label: t("barCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-bar"
+                    "/charts/appex-charts/charts-appex-bar",
                   ),
                   children: [],
                 },
@@ -5218,7 +5241,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-boxplot",
                   label: t("boxplotCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-boxplot"
+                    "/charts/appex-charts/charts-appex-boxplot",
                   ),
                   children: [],
                 },
@@ -5226,7 +5249,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-bubble",
                   label: t("bubbleCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-bubble"
+                    "/charts/appex-charts/charts-appex-bubble",
                   ),
                   children: [],
                 },
@@ -5234,7 +5257,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-candlestick",
                   label: t("candlestickCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-candlestick"
+                    "/charts/appex-charts/charts-appex-candlestick",
                   ),
                   children: [],
                 },
@@ -5242,7 +5265,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-column",
                   label: t("columnCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-column"
+                    "/charts/appex-charts/charts-appex-column",
                   ),
                   children: [],
                 },
@@ -5250,7 +5273,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-combo",
                   label: t("comboCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-combo"
+                    "/charts/appex-charts/charts-appex-combo",
                   ),
                   children: [],
                 },
@@ -5259,7 +5282,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-funnel",
                   label: t("funnelCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-funnel"
+                    "/charts/appex-charts/charts-appex-funnel",
                   ),
                   children: [],
                 },
@@ -5267,7 +5290,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-heatmap",
                   label: t("heatmapCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-heatmap"
+                    "/charts/appex-charts/charts-appex-heatmap",
                   ),
                   children: [],
                 },
@@ -5275,7 +5298,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-line",
                   label: t("lineCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-line"
+                    "/charts/appex-charts/charts-appex-line",
                   ),
                   children: [],
                 },
@@ -5283,7 +5306,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-pie",
                   label: t("pieCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-pie"
+                    "/charts/appex-charts/charts-appex-pie",
                   ),
                   children: [],
                 },
@@ -5291,7 +5314,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-polararea",
                   label: t("ploarareaCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-polararea"
+                    "/charts/appex-charts/charts-appex-polararea",
                   ),
                   children: [],
                 },
@@ -5299,7 +5322,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-radar",
                   label: t("radarCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-radar"
+                    "/charts/appex-charts/charts-appex-radar",
                   ),
                   children: [],
                 },
@@ -5307,7 +5330,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-radialbars",
                   label: t("radialbarCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-radialbars"
+                    "/charts/appex-charts/charts-appex-radialbars",
                   ),
                   children: [],
                 },
@@ -5315,7 +5338,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-range",
                   label: t("rangeCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-range"
+                    "/charts/appex-charts/charts-appex-range",
                   ),
                   children: [],
                 },
@@ -5323,7 +5346,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-scatter",
                   label: t("scatterCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-scatter"
+                    "/charts/appex-charts/charts-appex-scatter",
                   ),
                   children: [],
                 },
@@ -5331,7 +5354,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-timeline",
                   label: t("timelineCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-timeline"
+                    "/charts/appex-charts/charts-appex-timeline",
                   ),
                   children: [],
                 },
@@ -5339,7 +5362,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/appex-charts/charts-appex-treemap",
                   label: t("treemapCharts"),
                   active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-treemap"
+                    "/charts/appex-charts/charts-appex-treemap",
                   ),
                   children: [],
                 },
@@ -5355,7 +5378,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/rechart/charts-rechart-area",
                   label: t("areaCharts"),
                   active: pathname.includes(
-                    "/charts/rechart/charts-rechart-area"
+                    "/charts/rechart/charts-rechart-area",
                   ),
                   children: [],
                 },
@@ -5363,7 +5386,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/rechart/charts-rechart-bar",
                   label: t("barCharts"),
                   active: pathname.includes(
-                    "/charts/rechart/charts-rechart-bar"
+                    "/charts/rechart/charts-rechart-bar",
                   ),
                   children: [],
                 },
@@ -5371,7 +5394,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/rechart/charts-rechart-composed",
                   label: t("composedCharts"),
                   active: pathname.includes(
-                    "/charts/rechart/charts-rechart-composed"
+                    "/charts/rechart/charts-rechart-composed",
                   ),
                   children: [],
                 },
@@ -5379,7 +5402,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/rechart/charts-rechart-line",
                   label: t("lineCharts"),
                   active: pathname.includes(
-                    "/charts/rechart/charts-rechart-line"
+                    "/charts/rechart/charts-rechart-line",
                   ),
                   children: [],
                 },
@@ -5387,7 +5410,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/rechart/charts-rechart-pie",
                   label: t("pieCharts"),
                   active: pathname.includes(
-                    "/charts/rechart/charts-rechart-pie"
+                    "/charts/rechart/charts-rechart-pie",
                   ),
                   children: [],
                 },
@@ -5395,7 +5418,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/rechart/charts-rechart-radar",
                   label: t("radarCharts"),
                   active: pathname.includes(
-                    "/charts/rechart/charts-rechart-radar"
+                    "/charts/rechart/charts-rechart-radar",
                   ),
                   children: [],
                 },
@@ -5403,7 +5426,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/rechart/charts-rechart-radialbar",
                   label: t("radialbarCharts"),
                   active: pathname.includes(
-                    "/charts/rechart/charts-rechart-radialbar"
+                    "/charts/rechart/charts-rechart-radialbar",
                   ),
                   children: [],
                 },
@@ -5411,7 +5434,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/rechart/charts-rechart-scatter",
                   label: t("scatterCharts"),
                   active: pathname.includes(
-                    "/charts/rechart/charts-rechart-scatter"
+                    "/charts/rechart/charts-rechart-scatter",
                   ),
                   children: [],
                 },
@@ -5419,7 +5442,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/rechart/charts-rechart-treemap",
                   label: t("treemapCharts"),
                   active: pathname.includes(
-                    "/charts/rechart/charts-rechart-treemap"
+                    "/charts/rechart/charts-rechart-treemap",
                   ),
                   children: [],
                 },
@@ -5435,7 +5458,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-area",
                   label: t("areaCharts"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-area"
+                    "/charts/chart-js/charts-chartjs-area",
                   ),
                   children: [],
                 },
@@ -5443,7 +5466,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-bar",
                   label: t("barCharts"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-bar"
+                    "/charts/chart-js/charts-chartjs-bar",
                   ),
                   children: [],
                 },
@@ -5451,7 +5474,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-line",
                   label: t("lineCharts"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-line"
+                    "/charts/chart-js/charts-chartjs-line",
                   ),
                   children: [],
                 },
@@ -5459,7 +5482,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-animations",
                   label: t("animationCharts"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-animations"
+                    "/charts/chart-js/charts-chartjs-animations",
                   ),
                   children: [],
                 },
@@ -5467,7 +5490,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-legend",
                   label: t("legendCharts"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-legend"
+                    "/charts/chart-js/charts-chartjs-legend",
                   ),
                   children: [],
                 },
@@ -5475,7 +5498,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-scaleoptions",
                   label: t("scaleOptionCharts"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-scaleoptions"
+                    "/charts/chart-js/charts-chartjs-scaleoptions",
                   ),
                   children: [],
                 },
@@ -5483,7 +5506,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-scales",
                   label: t("scaleCharts"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-scales"
+                    "/charts/chart-js/charts-chartjs-scales",
                   ),
                   children: [],
                 },
@@ -5491,7 +5514,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-scriptable",
                   label: t("scriptableCharts"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-scriptable"
+                    "/charts/chart-js/charts-chartjs-scriptable",
                   ),
                   children: [],
                 },
@@ -5499,7 +5522,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-title",
                   label: t("titleCharts"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-title"
+                    "/charts/chart-js/charts-chartjs-title",
                   ),
                   children: [],
                 },
@@ -5507,7 +5530,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-tooltip",
                   label: t("tooltipChart"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-tooltip"
+                    "/charts/chart-js/charts-chartjs-tooltip",
                   ),
                   children: [],
                 },
@@ -5515,7 +5538,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                   href: "/charts/chart-js/charts-chartjs-other",
                   label: t("otherCharts"),
                   active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-other"
+                    "/charts/chart-js/charts-chartjs-other",
                   ),
                   children: [],
                 },

middleware.ts

@@ -1,29 +1,73 @@
 import createMiddleware from "next-intl/middleware";
 import { NextRequest, NextResponse } from "next/server";
-import { locales } from "@/config";
 import { routing } from "./i18n/routing";
 
-// export default async function middleware(request: NextRequest) {
-//   // Step 1: Use the incoming request (example)
-//   const defaultLocale = "in";
-//   // const defaultLocale = request.headers.get("dashcode-locale") || "in";
+const intlMiddleware = createMiddleware(routing);
 
-//   // Step 2: Create and call the next-intl middleware (example)
-//   const handleI18nRouting = createMiddleware({
-//     locales: ["in", "en"],
-//     defaultLocale: "in",
-//   });
-//   const response = handleI18nRouting(request);
+export default function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
 
-//   // Step 3: Alter the response (example)
-//   response.headers.set("dashcode-locale", defaultLocale);
+  // --- IGNORE STATIC ASSET ---
+  const isStaticAsset =
+    pathname.startsWith("/api") ||
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/favicon") ||
+    pathname.startsWith("/assets") ||
+    pathname.startsWith("/static") ||
+    pathname.match(/\.(png|jpg|jpeg|gif|webp|svg|ico|css|js)$/);
 
-//   return response;
-// }
+  if (isStaticAsset) return NextResponse.next();
 
-export default createMiddleware(routing);
+  // --- LOCALES YANG VALID ---
+  const locales = ["in", "en"];
 
+  // Ambil locale utama dari URL
+  const firstSegment = pathname.split("/")[1];
+
+  const isLocaleURL = locales.includes(firstSegment);
+
+  // Jika URL sudah mengandung locale → JALANKAN next-intl
+  if (isLocaleURL) {
+    return intlMiddleware(request);
+  }
+
+  // Jika URL TIDAK ada locale → redirect ke /in/<path>
+  const url = request.nextUrl.clone();
+  url.pathname = `/in${pathname}`;
+  return NextResponse.redirect(url);
+}
+
+// Matcher untuk semua route kecuali static files
 export const config = {
-  // Match only internationalized pathnames
-  matcher: ["/", "/(in|en)/:path*"],
+  matcher: ["/((?!_next|api|favicon.ico|assets|static).*)"],
 };
+
+// import createMiddleware from "next-intl/middleware";
+// import { NextRequest, NextResponse } from "next/server";
+// import { locales } from "@/config";
+// import { routing } from "./i18n/routing";
+
+// // export default async function middleware(request: NextRequest) {
+// //   // Step 1: Use the incoming request (example)
+// //   const defaultLocale = "in";
+// //   // const defaultLocale = request.headers.get("dashcode-locale") || "in";
+
+// //   // Step 2: Create and call the next-intl middleware (example)
+// //   const handleI18nRouting = createMiddleware({
+// //     locales: ["in", "en"],
+// //     defaultLocale: "in",
+// //   });
+// //   const response = handleI18nRouting(request);
+
+// //   // Step 3: Alter the response (example)
+// //   response.headers.set("dashcode-locale", defaultLocale);
+
+// //   return response;
+// // }
+
+// export default createMiddleware(routing);
+
+// export const config = {
+//   // Match only internationalized pathnames
+//   matcher: ["/", "/(in|en)/:path*"],
+// };

next.config.mjs

@@ -20,6 +20,35 @@ const nextConfig = {
   //   locales: ["en", "in"],
   //   defaultLocale: "in",
   // },
+  // images: {
+  //   remotePatterns: [
+  //     {
+  //       protocol: "https",
+  //       hostname: "api.lorem.space",
+  //     },
+  //     {
+  //       protocol: "https",
+  //       hostname: "lh3.googleusercontent.com",
+  //     },
+  //     {
+  //       protocol: "https",
+  //       hostname: "a0.muscache.com",
+  //     },
+  //     {
+  //       protocol: "https",
+  //       hostname: "avatars.githubusercontent.com",
+  //     },
+  //     {
+  //       protocol: "https",
+  //       hostname: "i.pravatar.cc",
+  //     },
+  //     { protocol: "https", hostname: "netidhub.com" },
+  //     {
+  //       protocol: "https",
+  //       hostname: "netidhub.com",
+  //     },
+  //   ],
+  // },
   images: {
     remotePatterns: [
       {
@@ -42,11 +71,15 @@ const nextConfig = {
         protocol: "https",
         hostname: "i.pravatar.cc",
       },
-      { protocol: "https", hostname: "netidhub.com" },
       {
         protocol: "https",
         hostname: "netidhub.com",
       },
+      {
+        protocol: "https",
+        hostname: "new.netidhub.com",
+        pathname: "/**",
+      },
     ],
   },
   // eslint: {

package-lock.json

@@ -80,6 +80,7 @@
         "dayjs": "^1.11.11",
         "embla-carousel-autoplay": "^8.1.3",
         "embla-carousel-react": "^8.1.3",
+        "file-saver": "^2.0.5",
         "framer-motion": "^11.15.0",
         "geojson": "^0.5.0",
         "html-react-parser": "^5.2.0",
@@ -137,6 +138,7 @@
         "uuid": "^13.0.0",
         "vaul": "^0.9.1",
         "wavesurfer.js": "^7.8.16",
+        "xlsx": "^0.18.5",
         "yup": "^1.6.1",
         "zod": "^3.23.8"
       },
@@ -156,14 +158,15 @@
         "@types/react": "^18.3.13",
         "@types/react-geocode": "^0.2.4",
         "@types/rtl-detect": "^1.0.3",
+        "autoprefixer": "^10.4.24",
         "cross-env": "^7.0.3",
         "d3-shape": "^3.2.0",
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
         "jest": "^30.0.4",
         "jest-environment-jsdom": "^30.0.4",
-        "postcss": "^8",
-        "tailwindcss": "^3.4.1",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.19",
         "typescript": "^5"
       }
     },
@@ -23691,6 +23694,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@@ -24146,6 +24158,43 @@
         "npm": ">=6.4.1"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.24",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.24.tgz",
+      "integrity": "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001766",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -24338,6 +24387,18 @@
         }
       ]
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
+      "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -24421,9 +24482,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.25.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
-      "integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
       "funding": [
         {
           "type": "opencollective",
@@ -24438,11 +24499,13 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001726",
-        "electron-to-chromium": "^1.5.173",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.3"
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -24696,9 +24759,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001727",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
-      "integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
+      "version": "1.0.30001770",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001770.tgz",
+      "integrity": "sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==",
       "funding": [
         {
           "type": "opencollective",
@@ -24712,7 +24775,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/canvg": {
       "version": "3.0.11",
@@ -24742,6 +24806,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -25214,6 +25291,15 @@
       "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-12.0.0.tgz",
       "integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w=="
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
@@ -25417,6 +25503,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-env": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -26677,9 +26775,10 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.187",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.187.tgz",
-      "integrity": "sha512-cl5Jc9I0KGUoOoSbxvTywTa40uspGJt/BDBoDLoxJRSBpWh4FFXBsjNRHfQrONsV/OoEjDfHUmZQa2d6Ze4YgA=="
+      "version": "1.5.286",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
+      "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
+      "license": "ISC"
     },
     "node_modules/elkjs": {
       "version": "0.9.3",
@@ -27871,6 +27970,12 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+      "license": "MIT"
+    },
     "node_modules/file-selector": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
@@ -28101,6 +28206,29 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "11.18.2",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz",
@@ -34197,9 +34325,10 @@
       "dev": true
     },
     "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "license": "MIT"
     },
     "node_modules/non-layered-tidy-tree-layout": {
       "version": "2.0.2",
@@ -34972,6 +35101,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -38523,6 +38653,18 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -39231,9 +39373,10 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -39243,7 +39386,7 @@
         "fast-glob": "^3.3.2",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
+        "jiti": "^1.21.7",
         "lilconfig": "^3.1.3",
         "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
@@ -39252,7 +39395,7 @@
         "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
         "postcss-nested": "^6.2.0",
         "postcss-selector-parser": "^6.1.2",
         "resolve": "^1.22.8",
@@ -40319,9 +40462,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
-      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
       "funding": [
         {
           "type": "opencollective",
@@ -40336,6 +40479,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "escalade": "^3.2.0",
         "picocolors": "^1.1.1"
@@ -41270,6 +41414,24 @@
       "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
       "dev": true
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -41405,6 +41567,27 @@
         }
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",

package.json

@@ -89,6 +89,7 @@
     "dayjs": "^1.11.11",
     "embla-carousel-autoplay": "^8.1.3",
     "embla-carousel-react": "^8.1.3",
+    "file-saver": "^2.0.5",
     "framer-motion": "^11.15.0",
     "geojson": "^0.5.0",
     "html-react-parser": "^5.2.0",
@@ -146,6 +147,7 @@
     "uuid": "^13.0.0",
     "vaul": "^0.9.1",
     "wavesurfer.js": "^7.8.16",
+    "xlsx": "^0.18.5",
     "yup": "^1.6.1",
     "zod": "^3.23.8"
   },
@@ -165,14 +167,15 @@
     "@types/react": "^18.3.13",
     "@types/react-geocode": "^0.2.4",
     "@types/rtl-detect": "^1.0.3",
+    "autoprefixer": "^10.4.24",
     "cross-env": "^7.0.3",
     "d3-shape": "^3.2.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "jest": "^30.0.4",
     "jest-environment-jsdom": "^30.0.4",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
     "typescript": "^5"
   }
 }

pnpm-lock.yaml

@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@ckeditor/ckeditor5-react':
         specifier: ^6.2.0
-        version: 6.3.0(@ckeditor/ckeditor5-core@41.3.1)(@ckeditor/ckeditor5-editor-multi-root@47.1.0)(@ckeditor/ckeditor5-engine@41.3.1)(@ckeditor/ckeditor5-utils@41.3.1)(@ckeditor/ckeditor5-watchdog@41.3.1)(react@18.3.1)
+        version: 6.3.0(@ckeditor/ckeditor5-core@47.1.0)(@ckeditor/ckeditor5-editor-multi-root@47.1.0)(@ckeditor/ckeditor5-engine@47.1.0)(@ckeditor/ckeditor5-utils@47.1.0)(@ckeditor/ckeditor5-watchdog@47.1.0)(react@18.3.1)
       '@dnd-kit/core':
         specifier: ^6.1.0
         version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -224,6 +224,9 @@ importers:
       embla-carousel-react:
         specifier: ^8.1.3
         version: 8.6.0(react@18.3.1)
+      file-saver:
+        specifier: ^2.0.5
+        version: 2.0.5
       framer-motion:
         specifier: ^11.15.0
         version: 11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -395,6 +398,9 @@ importers:
       wavesurfer.js:
         specifier: ^7.8.16
         version: 7.11.0
+      xlsx:
+        specifier: ^0.18.5
+        version: 0.18.5
       yup:
         specifier: ^1.6.1
         version: 1.7.1
@@ -3033,6 +3039,10 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  adler-32@1.3.1:
+    resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
+    engines: {node: '>=0.8'}
+
   agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
@@ -3310,6 +3320,10 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
+  cfb@1.2.2:
+    resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
+    engines: {node: '>=0.8'}
+
   chalk@2.3.0:
     resolution: {integrity: sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==}
     engines: {node: '>=4'}
@@ -3421,6 +3435,10 @@ packages:
   code-block-writer@12.0.0:
     resolution: {integrity: sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==}
 
+  codepage@1.15.0:
+    resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
+    engines: {node: '>=0.8'}
+
   collect-v8-coverage@1.0.3:
     resolution: {integrity: sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==}
 
@@ -3542,6 +3560,11 @@ packages:
       typescript:
         optional: true
 
+  crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
   cross-env@7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@@ -4262,6 +4285,9 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
+  file-saver@2.0.5:
+    resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
+
   file-selector@2.1.2:
     resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
     engines: {node: '>= 12'}
@@ -4331,6 +4357,10 @@ packages:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
 
+  frac@1.1.2:
+    resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
+    engines: {node: '>=0.8'}
+
   framer-motion@11.18.2:
     resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
     peerDependencies:
@@ -6887,6 +6917,10 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  ssf@0.11.2:
+    resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
+    engines: {node: '>=0.8'}
+
   stable-hash@0.0.5:
     resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
 
@@ -7554,10 +7588,18 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  wmf@1.0.2:
+    resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
+    engines: {node: '>=0.8'}
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
+  word@0.3.0:
+    resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
+    engines: {node: '>=0.8'}
+
   wrap-ansi@6.2.0:
     resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
     engines: {node: '>=8'}
@@ -7601,6 +7643,11 @@ packages:
       utf-8-validate:
         optional: true
 
+  xlsx@0.18.5:
+    resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
@@ -7940,8 +7987,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.1.0
       '@ckeditor/ckeditor5-upload': 47.1.0
       ckeditor5: 47.1.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-alignment@41.3.1':
     dependencies:
@@ -8007,8 +8052,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.1.0
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-bookmark@47.1.0':
     dependencies:
@@ -8076,8 +8119,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.1.0
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-code-block@41.3.1':
     dependencies:
@@ -8144,8 +8185,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-editor-decoupled@47.1.0':
     dependencies:
@@ -8155,8 +8194,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-editor-inline@47.1.0':
     dependencies:
@@ -8166,8 +8203,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-editor-multi-root@47.1.0':
     dependencies:
@@ -8467,8 +8502,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.1.0
       '@ckeditor/ckeditor5-widget': 47.1.0
       ckeditor5: 47.1.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-mention@47.1.0':
     dependencies:
@@ -8527,13 +8560,13 @@ snapshots:
       '@ckeditor/ckeditor5-engine': 47.1.0
       ckeditor5: 47.1.0
 
-  '@ckeditor/ckeditor5-react@6.3.0(@ckeditor/ckeditor5-core@41.3.1)(@ckeditor/ckeditor5-editor-multi-root@47.1.0)(@ckeditor/ckeditor5-engine@41.3.1)(@ckeditor/ckeditor5-utils@41.3.1)(@ckeditor/ckeditor5-watchdog@41.3.1)(react@18.3.1)':
+  '@ckeditor/ckeditor5-react@6.3.0(@ckeditor/ckeditor5-core@47.1.0)(@ckeditor/ckeditor5-editor-multi-root@47.1.0)(@ckeditor/ckeditor5-engine@47.1.0)(@ckeditor/ckeditor5-utils@47.1.0)(@ckeditor/ckeditor5-watchdog@47.1.0)(react@18.3.1)':
     dependencies:
-      '@ckeditor/ckeditor5-core': 41.3.1
+      '@ckeditor/ckeditor5-core': 47.1.0
       '@ckeditor/ckeditor5-editor-multi-root': 47.1.0
-      '@ckeditor/ckeditor5-engine': 41.3.1
-      '@ckeditor/ckeditor5-utils': 41.3.1
-      '@ckeditor/ckeditor5-watchdog': 41.3.1
+      '@ckeditor/ckeditor5-engine': 47.1.0
+      '@ckeditor/ckeditor5-utils': 47.1.0
+      '@ckeditor/ckeditor5-watchdog': 47.1.0
       prop-types: 15.8.1
       react: 18.3.1
 
@@ -8544,8 +8577,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.1.0
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-restricted-editing@47.1.0':
     dependencies:
@@ -8593,8 +8624,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.1.0
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-special-characters@47.1.0':
     dependencies:
@@ -8761,8 +8790,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.1.0
       ckeditor5: 47.1.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@csstools/color-helpers@5.1.0': {}
 
@@ -10900,6 +10927,8 @@ snapshots:
 
   acorn@8.15.0: {}
 
+  adler-32@1.3.1: {}
+
   agent-base@7.1.4: {}
 
   ajv@6.12.6:
@@ -11240,6 +11269,11 @@ snapshots:
 
   ccount@2.0.1: {}
 
+  cfb@1.2.2:
+    dependencies:
+      adler-32: 1.3.1
+      crc-32: 1.2.2
+
   chalk@2.3.0:
     dependencies:
       ansi-styles: 3.2.1
@@ -11443,6 +11477,8 @@ snapshots:
 
   code-block-writer@12.0.0: {}
 
+  codepage@1.15.0: {}
+
   collect-v8-coverage@1.0.3: {}
 
   color-convert@1.9.3:
@@ -11551,6 +11587,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  crc-32@1.2.2: {}
+
   cross-env@7.0.3:
     dependencies:
       cross-spawn: 7.0.6
@@ -12094,7 +12132,7 @@ snapshots:
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.5(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -12124,7 +12162,7 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -12139,7 +12177,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -12460,6 +12498,8 @@ snapshots:
     dependencies:
       flat-cache: 3.2.0
 
+  file-saver@2.0.5: {}
+
   file-selector@2.1.2:
     dependencies:
       tslib: 2.8.1
@@ -12530,6 +12570,8 @@ snapshots:
 
   forwarded@0.2.0: {}
 
+  frac@1.1.2: {}
+
   framer-motion@11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       motion-dom: 11.18.1
@@ -16050,6 +16092,10 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
+  ssf@0.11.2:
+    dependencies:
+      frac: 1.1.2
+
   stable-hash@0.0.5: {}
 
   stack-utils@2.0.6:
@@ -16867,8 +16913,12 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  wmf@1.0.2: {}
+
   word-wrap@1.2.5: {}
 
+  word@0.3.0: {}
+
   wrap-ansi@6.2.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -16898,6 +16948,16 @@ snapshots:
 
   ws@8.18.3: {}
 
+  xlsx@0.18.5:
+    dependencies:
+      adler-32: 1.3.1
+      cfb: 1.2.2
+      codepage: 1.15.0
+      crc-32: 1.2.2
+      ssf: 0.11.2
+      wmf: 1.0.2
+      word: 0.3.0
+
   xml-name-validator@5.0.0: {}
 
   xmlchars@2.2.0: {}

service/auth.ts

@@ -45,7 +45,7 @@ export async function getCsrfToken() {
     "content-type": "application/json",
   };
   return httpGet(pathUrl, headers);
-  // const url = 'https://netidhub.com/api/csrf';
+  // const url = 'https://new.netidhub.com/api/csrf';
   //   try {
   //     const response = await fetch(url, {
   //       method: 'GET',

service/broadcast/broadcast.ts

@@ -96,7 +96,7 @@ export async function detailMediaSummary(id: string) {
 export async function saveMediaBlastAccount(data: {
   accountName: string;
   accountType: string;
-  accountCategory: string;
+  // accountCategory: string;
   emailAddress: string;
   whatsappNumber: string;
   id?: string;

service/communication/communication.ts

@@ -3,7 +3,6 @@ import {
   httpGetInterceptor,
   httpPostInterceptor,
 } from "../http-config/http-interceptor-service";
-import { title } from "process";
 
 export async function listTicketingInternal(
   page: number,
@@ -16,6 +15,7 @@ export async function listTicketingInternal(
   );
 }
 
+
 export async function getTicketingEscalationPagination(
   page: number,
   size: any,
@@ -64,6 +64,10 @@ export async function deleteTicket(id: any) {
   return httpDeleteInterceptor(url, id);
 }
 
+export async function deleteTicketInternal(id: number | string) {
+  return await httpDeleteInterceptor(`ticketing/internal?id=${id}`);
+}
+
 export async function closeTicket(id: any) {
   const url = `ticketing/close?id=${id}`;
   return httpPostInterceptor(url, id);

service/content/content.ts

@@ -46,6 +46,39 @@ export async function listDataAll(
   );
 }
 
+export async function listDataSatker(
+  isForSelf: any,
+  isApproval: any,
+  page: any,
+  limit: any,
+  search: any,
+  typeId: any,
+  statusFilter: any,
+  needApprovalFromLevel: any,
+  creator: any,
+  source: any,
+  startDate: any,
+  endDate: any,
+  title: string = ""
+) {
+  return await httpGetInterceptor(
+    `media/list?enablePage=1&sortBy=createdAt&sort=desc&isAllSatker=true` +
+      `&size=${limit}` +
+      `&page=${page}` +
+      `&isForSelf=${isForSelf}` +
+      `&isApproval=${isApproval}` +
+      `&typeId=${typeId || ""}` +
+      `&statusId=${statusFilter || ""}` +
+      `&needApprovalFromLevel=${needApprovalFromLevel || ""}` +
+      `&creator=${encodeURIComponent(creator || "")}` +
+      `&source=${encodeURIComponent(source || "")}` +
+      `&startDate=${startDate || ""}` +
+      `&endDate=${endDate || ""}` +
+      `&title=${encodeURIComponent(title || search || "")}`
+  );
+}
+
+
 export async function listDataImage(
   size: any = "",
   page: any = "",
@@ -222,6 +255,12 @@ export async function saveContentRewrite(data: any) {
   const url = "media/rewrite";
   return httpPostInterceptor(url, data);
 }
+
+export async function sendMediaRewriteToEmail(id: any, email: any) {
+  const url = `media/rewrite/share-to-email?id=${id}&email=${email}`;
+  return httpPostInterceptor(url, null);
+}
+
 export async function saveUserReports(data: any) {
   const url = "public/users/reports";
   return httpPostInterceptor(url, data);

service/http-config/axios-base-instance.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-const baseURL = "https://netidhub.com/api/";
+const baseURL = "https://new.netidhub.com/api/";
 
 const axiosBaseInstance = axios.create({
   baseURL,

service/http-config/axios-interceptor-instance.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 import Cookies from "js-cookie";
 import { getCsrfToken, login } from "../auth";
 
-const baseURL = "https://netidhub.com/api/";
+const baseURL = "https://new.netidhub.com/api/";
 
 const refreshToken = Cookies.get("refresh_token");
 

service/landing/landing.ts

@@ -12,7 +12,7 @@ export async function getCsrfToken() {
     "content-type": "application/json",
   };
   return httpGet(pathUrl, headers);
-  // const url = 'https://netidhub.com/api/csrf';
+  // const url = 'https://new.netidhub.com/api/csrf';
   //   try {
   //     const response = await fetch(url, {
   //       method: 'GET',

service/media-tracking/media-tracking.ts

@@ -1,6 +1,8 @@
+import api from "@/src/lib/api";
 import {
   httpGetInterceptor,
   httpPostInterceptor,
+  httpPutInterceptor,
 } from "../http-config/http-interceptor-service";
 
 export async function getMediaTrackingMonitoring(page: number, size: number) {
@@ -44,9 +46,21 @@ export async function getMediaTrackingResult(data: any) {
   return httpGetInterceptor(url);
 }
 
-export async function listDataTracking(size: any, page: any) {
+// export async function listDataTracking(size: any, page: any) {
+//   return await httpGetInterceptor(
+//     `media/public/list?enablePage=1&sort=desc&size=${size}&page=${page}`
+//   );
+// }
+
+export async function listDataTracking(
+  size: number,
+  page: number,
+  keyword = "",
+  categoryFilter = "",
+  statusFilter = ""
+) {
   return await httpGetInterceptor(
-    `media/public/list?enablePage=1&sort=desc&size=${size}&page=${page}`
+    `media/list?isForAdmin=true&title=${keyword}&enablePage=1&sortBy=createdAt&sort=desc&size=${size}&page=${page}&categoryId=${categoryFilter}&statusId=${statusFilter}`
   );
 }
 
@@ -55,3 +69,36 @@ export async function listDataAllNonPagination(search: string) {
     `media/public/list?enablePage=0&sort=desc&title=${search || ""}`
   );
 }
+
+export async function validateMediaLink(resultId: number, isRelevant: boolean) {
+  const url = "media/tracking/monitoring/results/relevant";
+
+  const payload = {
+    resultId,
+    isRelevant,
+  };
+
+  return httpPutInterceptor(url, payload);
+}
+
+// export const validateMediaLink = async (
+//   resultId: number,
+//   isRelevant: boolean
+// ) => {
+//   try {
+//     const res = await api.put(
+//       "/media/tracking/monitoring/results/relevant",
+//       {
+//         resultId,
+//         isRelevant,
+//       }
+//     );
+
+//     return res.data;
+//   } catch (error: any) {
+//     throw new Error(
+//       error?.response?.data?.messages?.[0] ||
+//         "Gagal memperbarui status relevansi"
+//     );
+//   }
+// };

service/task.ts

@@ -127,6 +127,11 @@ export async function getAcceptance(id: any, isAccept: any) {
   return httpGetInterceptor(url);
 }
 
+export async function getAcceptanceTa(id: any, isAccept: any) {
+  const url = `assignment-expert/acceptance?id=${id}&isAccept=${isAccept}`;
+  return httpGetInterceptor(url);
+}
+
 export async function acceptAssignment(id: any) {
   const url = `assignment/acceptance?id=${id}`;
   return httpPostInterceptor(url, id);

src/lib/api.ts

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "https://new.netidhub.com/api",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default api;
+

src/types/react-table.d.ts

@@ -0,0 +1,9 @@
+// src/types/react-table.d.ts
+import "@tanstack/react-table";
+
+declare module "@tanstack/react-table" {
+  interface TableMeta<TData> {
+    updateData: (rowIndex: number, value: Partial<TData>) => void;
+    refetchData?: () => void;
+  }
+}

types/file-saver.d.ts

@@ -0,0 +1,7 @@
+declare module "file-saver" {
+  export function saveAs(
+    data: Blob | File | string,
+    filename?: string,
+    options?: any
+  ): void;
+}

utils/export-media-tracking.ts

@@ -0,0 +1,73 @@
+import * as XLSX from "xlsx";
+import { getMediaTrackingResult } from "@/service/media-tracking/media-tracking";
+import { saveAs } from "file-saver";
+
+type ExportParams = {
+  mediaTrackingId: number;
+};
+
+export async function exportMediaTrackingToExcel({
+  mediaTrackingId,
+}: ExportParams) {
+  let page = 0;
+  let totalPages = 1;
+  const allData: any[] = [];
+
+  while (page < totalPages) {
+    const res = await getMediaTrackingResult({
+      id: mediaTrackingId,
+      page,
+    });
+
+    const data = res?.data?.data;
+    if (!data) break;
+
+    totalPages = data.totalPages;
+    allData.push(...data.content);
+
+    page++;
+  }
+
+  if (allData.length === 0) {
+    throw new Error("Tidak ada data untuk di-export");
+  }
+
+  function extractDomain(url?: string): string {
+    if (!url) return "-";
+    try {
+      return new URL(url).hostname;
+    } catch {
+      return "-";
+    }
+  }
+
+  const rows = allData.map((item, index) => ({
+    No: index + 1,
+    "Media Online": extractDomain(item.link),
+    "Judul Berita": item.title ?? "-",
+    "Link Berita": item.link ?? "-",
+    Validasi: item.validationStatus ?? "-",
+    View: item.viewCount ?? 0,
+    Share: item.shareCount ?? 0,
+    Komentar: item.commentCount ?? 0,
+    Tanggal: item.createdAt
+      ? new Date(item.createdAt).toLocaleString("id-ID")
+      : "-",
+  }));
+
+  const worksheet = XLSX.utils.json_to_sheet(rows);
+  const workbook = XLSX.utils.book_new();
+
+  XLSX.utils.book_append_sheet(workbook, worksheet, "Media Tracking");
+
+  const excelBuffer = XLSX.write(workbook, {
+    bookType: "xlsx",
+    type: "array",
+  });
+
+  const blob = new Blob([excelBuffer], {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  });
+
+  saveAs(blob, `media-tracking-${mediaTrackingId}.xlsx`);
+}