From 1103f5f42f92f94fddccfc08d376856ab9c00180 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Sat, 21 Jun 2025 20:17:25 +0700
Subject: [PATCH] fixing

---
 components/form/content/audio-update-form.tsx | 124 +++---
 components/form/content/image-update-form.tsx | 131 ++++---
 components/form/content/teks-update-form.tsx  | 124 +++---
 components/form/content/video-update-form.tsx |  37 +-
 .../form/task-ta/task-ta-detail-form.tsx      |  10 +-
 components/landing-page/hero-new.tsx          |  40 +-
 .../landing-page/search-section-new.tsx       | 362 +++++++++++++-----
 service/landing/landing.ts                    |   4 +-
 8 files changed, 523 insertions(+), 309 deletions(-)

diff --git a/components/form/content/audio-update-form.tsx b/components/form/content/audio-update-form.tsx
index 4c9cb9a1..ee15183e 100644
--- a/components/form/content/audio-update-form.tsx
+++ b/components/form/content/audio-update-form.tsx
@@ -244,6 +244,11 @@ export default function FormAudioUpdate() {
         const details = response?.data?.data;
 
         setDetail(details);
+        setSelectedTarget(String(details.category.id));
+
+        setValue("title", details.title);
+        setValue("description", details.description);
+        setValue("creatorName", details.creatorName);
 
         if (details?.files) {
           setPrefFiles(details.files);
@@ -266,15 +271,15 @@ export default function FormAudioUpdate() {
           setTags(details.tags.split(",").map((tag: string) => tag.trim()));
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        // const matchingCategory = categories.find(
+        //   (category) => category.id === details.categoryId
+        // );
 
-        if (matchingCategory) {
-          setSelectedTarget(matchingCategory.name);
-        }
+        // if (matchingCategory) {
+        //   setSelectedTarget(matchingCategory.name);
+        // }
 
-        setSelectedTarget(details.categoryId);
+        // setSelectedTarget(details.categoryId);
 
         const filesData = details.files || [];
         const fileUrls = filesData.map((file: { secondaryUrl: string }) =>
@@ -350,6 +355,10 @@ export default function FormAudioUpdate() {
 
     const response = await createMedia(requestData);
     console.log("Form Data Submitted:", requestData);
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
 
     const formMedia = new FormData();
     const thumbnail = files[0];
@@ -403,48 +412,50 @@ export default function FormAudioUpdate() {
       "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,
-        filetype: file.type,
-        duration,
-        isWatermark: "false", // hardcode
-      },
-      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 (!file.secondaryUrl || file.secondaryUrl == "") {
+      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,
+          filetype: file.type,
+          duration,
+          isWatermark: "false", // hardcode
+        },
+        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();
+        },
+      });
 
-    upload.start();
+      upload.start();
+    }
   }
 
   const onSubmit = (data: AudioSchema) => {
@@ -659,7 +670,7 @@ export default function FormAudioUpdate() {
                       <Input
                         size="md"
                         type="text"
-                        defaultValue={detail?.title}
+                        value={field?.value}
                         onChange={field.onChange}
                         placeholder="Enter Title"
                       />
@@ -675,7 +686,7 @@ export default function FormAudioUpdate() {
                   <div className="py-3 w-full space-y-2">
                     <Label>{t("category")}</Label>
                     <Select
-                      defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
+                      value={selectedTarget}
                       onValueChange={(id) => {
                         console.log("Selected Category:", id);
                         setSelectedTarget(id);
@@ -686,7 +697,11 @@ export default function FormAudioUpdate() {
                       </SelectTrigger>
                       <SelectContent>
                         {categories.map((category) => (
-                          <SelectItem key={category.id} value={category.id}>
+                          <SelectItem
+                            key={String(category.id)}
+                            value={String(category.id)}
+                          >
+                            {" "}
                             {category.name}
                           </SelectItem>
                         ))}
@@ -701,10 +716,7 @@ export default function FormAudioUpdate() {
                     control={control}
                     name="description"
                     render={({ field: { onChange, value } }) => (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={detail?.description || value}
-                      />
+                      <CustomEditor onChange={onChange} initialData={value} />
                     )}
                   />
                   {errors.description?.message && (
@@ -929,7 +941,7 @@ export default function FormAudioUpdate() {
                       <Input
                         size="md"
                         type="text"
-                        defaultValue={detail?.creatorName}
+                        value={field?.value}
                         onChange={field.onChange}
                         placeholder="Enter Title"
                       />
diff --git a/components/form/content/image-update-form.tsx b/components/form/content/image-update-form.tsx
index 7391cf2c..1ab93172 100644
--- a/components/form/content/image-update-form.tsx
+++ b/components/form/content/image-update-form.tsx
@@ -266,6 +266,11 @@ export default function FormImageUpdate() {
         const details = response?.data?.data;
 
         setDetail(details);
+        setSelectedTarget(String(details.category.id));
+
+        setValue("title", details.title);
+        setValue("description", details.description);
+        setValue("creatorName", details.creatorName);
 
         if (details?.files) {
           setFiles(details.files);
@@ -288,15 +293,15 @@ export default function FormImageUpdate() {
           setTags(details.tags.split(",").map((tag: string) => tag.trim()));
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        // const matchingCategory = categories.find(
+        //   (category) => category.id === details.categoryId
+        // );
 
-        if (matchingCategory) {
-          setSelectedTarget(matchingCategory.name);
-        }
+        // if (matchingCategory) {
+        //   setSelectedTarget(matchingCategory.name);
+        // }
 
-        setSelectedTarget(details.categoryId); // Untuk dropdown
+        // setSelectedTarget(details.categoryId); // Untuk dropdown
       }
     }
     initState();
@@ -367,6 +372,10 @@ export default function FormImageUpdate() {
 
     const response = await createMedia(requestData);
     console.log("Form Data Submitted:", requestData);
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
 
     const formMedia = new FormData();
     const thumbnail = files[0];
@@ -387,6 +396,7 @@ export default function FormImageUpdate() {
 
     close();
     // showProgress();
+    console.log("files:", files);
     files.map(async (item: any, index: number) => {
       await uploadResumableFile(
         index,
@@ -425,48 +435,50 @@ export default function FormImageUpdate() {
       "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,
-        filetype: file.type,
-        duration,
-        isWatermark: "true", // hardcode
-      },
-      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 (!file.secondaryUrl || file.secondaryUrl == "") {
+      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,
+          filetype: file.type,
+          duration,
+          isWatermark: "true", // hardcode
+        },
+        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();
+        },
+      });
 
-    upload.start();
+      upload.start();
+    }
   }
 
   const onSubmit = (data: ImageSchema) => {
@@ -671,7 +683,7 @@ export default function FormImageUpdate() {
                       <Input
                         size="md"
                         type="text"
-                        defaultValue={detail?.title}
+                        value={field?.value}
                         onChange={field.onChange}
                         placeholder="Enter Title"
                       />
@@ -687,21 +699,21 @@ export default function FormImageUpdate() {
                   <div className="py-3 w-full space-y-2">
                     <Label>{t("category")}</Label>
                     <Select
-                      defaultValue={detail?.category.id} // Gunakan ID sebagai defaultValue
+                      value={selectedTarget}
                       onValueChange={(id) => {
                         console.log("Selected Category ID:", id);
-                        setSelectedTarget(id); // Perbarui ID kategori
+                        setSelectedTarget(id);
                       }}
                     >
                       <SelectTrigger size="md">
-                        <SelectValue placeholder="Pilih">
-                          {categories.find((cat) => cat.id === selectedTarget)
-                            ?.name || "Pilih"}
-                        </SelectValue>
+                        <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
                         {categories.map((category) => (
-                          <SelectItem key={category.id} value={category.id}>
+                          <SelectItem
+                            key={String(category.id)}
+                            value={String(category.id)}
+                          >
                             {category.name}
                           </SelectItem>
                         ))}
@@ -716,10 +728,7 @@ export default function FormImageUpdate() {
                     control={control}
                     name="description"
                     render={({ field: { onChange, value } }) => (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={detail?.description || value}
-                      />
+                      <CustomEditor onChange={onChange} initialData={value} />
                     )}
                   />
                   {errors.description?.message && (
@@ -892,7 +901,7 @@ export default function FormImageUpdate() {
                       <Input
                         size="md"
                         type="text"
-                        defaultValue={detail?.creatorName}
+                        value={field?.value}
                         onChange={field.onChange}
                         placeholder="Enter Title"
                       />
diff --git a/components/form/content/teks-update-form.tsx b/components/form/content/teks-update-form.tsx
index 7323b430..cf6c2894 100644
--- a/components/form/content/teks-update-form.tsx
+++ b/components/form/content/teks-update-form.tsx
@@ -239,6 +239,11 @@ export default function FormTeksUpdate() {
         const details = response?.data?.data;
 
         setDetail(details);
+        setSelectedTarget(String(details.category.id));
+
+        setValue("title", details.title);
+        setValue("description", details.description);
+        setValue("creatorName", details.creatorName);
 
         if (details?.files) {
           setFiles(details.files);
@@ -260,15 +265,15 @@ export default function FormTeksUpdate() {
           setTags(details.tags.split(",").map((tag: string) => tag.trim()));
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        // const matchingCategory = categories.find(
+        //   (category) => category.id === details.categoryId
+        // );
 
-        if (matchingCategory) {
-          setSelectedTarget(matchingCategory.name);
-        }
+        // if (matchingCategory) {
+        //   setSelectedTarget(matchingCategory.name);
+        // }
 
-        setSelectedTarget(details.categoryId); // Untuk dropdown
+        // setSelectedTarget(details.categoryId); // Untuk dropdown
       }
     }
     initState();
@@ -339,6 +344,10 @@ export default function FormTeksUpdate() {
 
     const response = await createMedia(requestData);
     console.log("Form Data Submitted:", requestData);
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
 
     const formMedia = new FormData();
     const thumbnail = files[0];
@@ -397,48 +406,50 @@ export default function FormTeksUpdate() {
       "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,
-        filetype: file.type,
-        duration,
-        isWatermark: "true", // hardcode
-      },
-      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 (!file.secondaryUrl || file.secondaryUrl == "") {
+      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,
+          filetype: file.type,
+          duration,
+          isWatermark: "true", // hardcode
+        },
+        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();
+        },
+      });
 
-    upload.start();
+      upload.start();
+    }
   }
 
   const onSubmit = (data: TeksSchema) => {
@@ -615,7 +626,7 @@ export default function FormTeksUpdate() {
                       <Input
                         size="md"
                         type="text"
-                        defaultValue={detail?.title}
+                        value={field?.value}
                         onChange={field.onChange}
                         placeholder="Enter Title"
                       />
@@ -631,7 +642,7 @@ export default function FormTeksUpdate() {
                   <div className="py-3 w-full space-y-2">
                     <Label>{t("category")}</Label>
                     <Select
-                      defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
+                      value={selectedTarget}
                       onValueChange={(id) => {
                         console.log("Selected Category:", id);
                         setSelectedTarget(id);
@@ -642,7 +653,11 @@ export default function FormTeksUpdate() {
                       </SelectTrigger>
                       <SelectContent>
                         {categories.map((category) => (
-                          <SelectItem key={category.id} value={category.id}>
+                          <SelectItem
+                            key={String(category.id)}
+                            value={String(category.id)}
+                          >
+                            {" "}
                             {category.name}
                           </SelectItem>
                         ))}
@@ -656,10 +671,7 @@ export default function FormTeksUpdate() {
                     control={control}
                     name="description"
                     render={({ field: { onChange, value } }) => (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={detail?.description || value}
-                      />
+                      <CustomEditor onChange={onChange} initialData={value} />
                     )}
                   />
                   {errors.description?.message && (
@@ -832,7 +844,7 @@ export default function FormTeksUpdate() {
                       <Input
                         size="md"
                         type="text"
-                        defaultValue={detail?.creatorName}
+                        value={field?.value}
                         onChange={field.onChange}
                         placeholder="Enter Title"
                       />
diff --git a/components/form/content/video-update-form.tsx b/components/form/content/video-update-form.tsx
index 959c6aae..64378831 100644
--- a/components/form/content/video-update-form.tsx
+++ b/components/form/content/video-update-form.tsx
@@ -262,6 +262,11 @@ export default function FormVideoUpdate() {
         const details = response?.data?.data;
 
         setDetail(details);
+        setSelectedTarget(String(details.category.id));
+
+        setValue("title", details.title);
+        setValue("description", details.description);
+        setValue("creatorName", details.creatorName);
 
         if (details?.files) {
           setFiles(details.files);
@@ -283,15 +288,15 @@ export default function FormVideoUpdate() {
           setTags(details.tags.split(",").map((tag: string) => tag.trim()));
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        // const matchingCategory = categories.find(
+        //   (category) => category.id === details.categoryId
+        // );
+        // console.log("LALALALAL", matchingCategory)
+        // if (matchingCategory) {
+        //   setSelectedTarget(String(matchingCategory.id));
+        // }
 
-        if (matchingCategory) {
-          setSelectedTarget(matchingCategory.name);
-        }
-
-        setSelectedTarget(details.categoryId); // Untuk dropdown
+        // setSelectedTarget(details.categoryId); // Untuk dropdown
 
         const filesData = details.files || [];
         const fileUrls = filesData.map((files: { url: string }) =>
@@ -727,7 +732,7 @@ export default function FormVideoUpdate() {
                       <Input
                         size="md"
                         type="text"
-                        defaultValue={detail?.title}
+                        value={field?.value}
                         onChange={field.onChange}
                         placeholder="Enter Title"
                       />
@@ -743,7 +748,7 @@ export default function FormVideoUpdate() {
                   <div className="py-3 w-full space-y-2">
                     <Label>{t("category")}</Label>
                     <Select
-                      defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
+                      value={selectedTarget} // Nilai default berdasarkan detail
                       onValueChange={(id) => {
                         console.log("Selected Category:", id);
                         setSelectedTarget(id);
@@ -754,7 +759,10 @@ export default function FormVideoUpdate() {
                       </SelectTrigger>
                       <SelectContent>
                         {categories.map((category) => (
-                          <SelectItem key={category.id} value={category.id}>
+                          <SelectItem
+                            key={String(category.id)}
+                            value={String(category.id)}
+                          >
                             {category.name}
                           </SelectItem>
                         ))}
@@ -769,10 +777,7 @@ export default function FormVideoUpdate() {
                     control={control}
                     name="description"
                     render={({ field: { onChange, value } }) => (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={detail?.description || value}
-                      />
+                      <CustomEditor onChange={onChange} initialData={value} />
                     )}
                   />
                   {errors.description?.message && (
@@ -945,7 +950,7 @@ export default function FormVideoUpdate() {
                       <Input
                         size="md"
                         type="text"
-                        defaultValue={detail?.creatorName}
+                        value={field?.value}
                         onChange={field.onChange}
                         placeholder="Enter Title"
                       />
diff --git a/components/form/task-ta/task-ta-detail-form.tsx b/components/form/task-ta/task-ta-detail-form.tsx
index c2554dc6..e667b7b8 100644
--- a/components/form/task-ta/task-ta-detail-form.tsx
+++ b/components/form/task-ta/task-ta-detail-form.tsx
@@ -113,6 +113,7 @@ export type taskDetail = {
   broadcastType: string;
   narration: string;
   is_active: string;
+  isAssignmentAccepted: boolean;
   isDone: any;
 };
 
@@ -1340,7 +1341,7 @@ export default function FormTaskTaDetail() {
                   ""
                 )}
               </div> */}
-              <div className="flex flex-wrap gap-2">
+              <div className="flex flex-wrap justify-end gap-2">
                 {/* <div className="">
                   <Button
                     type="button"
@@ -1351,13 +1352,14 @@ export default function FormTaskTaDetail() {
                     Beri Tanggapan
                   </Button>
                 </div> */}
-                {/* <div className="">
+                <div className="">
                   <Button
                     type="button"
                     className="btn btn-primary lg:mx-3"
                     style={
                       statusAcceptance ||
-                      detail?.createdBy?.id !== Number(userId)
+                      detail?.isAssignmentAccepted == true ||
+                      detail?.createdBy?.id == Number(userId)
                         ? {
                             display: "none",
                           }
@@ -1367,7 +1369,7 @@ export default function FormTaskTaDetail() {
                   >
                     Terima Tugas
                   </Button>
-                </div> */}
+                </div>
                 <div
                   className="task-response w-100 lg:px-3"
                   // style={
diff --git a/components/landing-page/hero-new.tsx b/components/landing-page/hero-new.tsx
index 88ae2bdd..4c7c8f12 100644
--- a/components/landing-page/hero-new.tsx
+++ b/components/landing-page/hero-new.tsx
@@ -8,7 +8,6 @@ import {
   listPopUp,
   listStaticBanner,
 } from "@/service/landing/landing";
-import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import {
   Carousel,
@@ -48,6 +47,7 @@ import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Link } from "@/i18n/routing";
 
 type HeroModalProps = {
   onClose: () => void;
@@ -67,6 +67,12 @@ const HeroModal = ({
   const locale = params?.locale;
   const swiperRef = useRef<SwiperClass | null>(null);
 
+  let prefixPath = poldaName
+    ? `/polda/${poldaName}`
+    : satkerName
+    ? `/satker/${satkerName}`
+    : "";
+
   useEffect(() => {
     async function fetchCategories() {
       const url = "https://netidhub.com/api/csrf";
@@ -167,7 +173,7 @@ const HeroModal = ({
                     {list?.categoryName || "Liputan Kegiatan"}
                   </span>
 
-                  <Link href={`${locale}/image/detail/${list?.slug}`}>
+                  <Link href={`${prefixPath}/image/detail/${list?.slug}`}>
                     <h2 className="text-lg leading-tight">{list?.title}</h2>
                   </Link>
 
@@ -226,6 +232,12 @@ const HeroNew = (props: { group?: string }) => {
   const [newContent, setNewContent] = useState<any>();
   const [selectedTab, setSelectedTab] = useState("image");
 
+  let prefixPath = poldaName
+    ? `/polda/${poldaName}`
+    : satkerName
+    ? `/satker/${satkerName}`
+    : "";
+
   useEffect(() => {
     fecthNewContent();
   }, [selectedTab]);
@@ -263,7 +275,6 @@ const HeroNew = (props: { group?: string }) => {
     setNewContent(response?.data?.data?.content);
   };
 
-
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);
@@ -415,7 +426,18 @@ const HeroNew = (props: { group?: string }) => {
                     <div className="absolute inset-0 bg-black/40 z-10" />
 
                     {/* Konten judul, dll */}
-                    <div className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%]">
+                    <Link
+                      href={
+                        Number(list?.fileTypeId) == 1
+                          ? `${prefixPath}/image/detail/${list?.slug}`
+                          : Number(list?.fileTypeId) == 2
+                          ? `${prefixPath}/video/detail/${list?.slug}`
+                          : Number(list?.fileTypeId) == 3
+                          ? `${prefixPath}/document/detail/${list?.slug}`
+                          : `${prefixPath}/audio/detail/${list?.slug}`
+                      }
+                      className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%] cursor-pointer"
+                    >
                       <span className="text-red-600 text-lg font-bold uppercase">
                         {list?.categoryName}
                       </span>
@@ -424,7 +446,7 @@ const HeroNew = (props: { group?: string }) => {
                         {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
                         {list?.timezone || "WIB"} | 👁 {list?.clickCount}
                       </p>
-                    </div>
+                    </Link>
 
                     {/* Tombol navigasi di atas gambar */}
                     <CarouselPrevious className="absolute left-6 top-[45%] z-30 -translate-y-1/2  hover:bg-black/70 text-white p-2 rounded-full">
@@ -458,12 +480,12 @@ const HeroNew = (props: { group?: string }) => {
                   <Link
                     href={
                       Number(item?.fileTypeId) == 1
-                        ? `${locale}/image/detail/${item?.slug}`
+                        ? `${prefixPath}/image/detail/${item?.slug}`
                         : Number(item?.fileTypeId) == 2
-                        ? `${locale}/video/detail/${item?.slug}`
+                        ? `${prefixPath}/video/detail/${item?.slug}`
                         : Number(item?.fileTypeId) == 3
-                        ? `${locale}/document/detail/${item?.slug}`
-                        : `${locale}/audio/detail/${item?.slug}`
+                        ? `${prefixPath}/document/detail/${item?.slug}`
+                        : `${prefixPath}/audio/detail/${item?.slug}`
                     }
                   >
                     <span className="py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit">
diff --git a/components/landing-page/search-section-new.tsx b/components/landing-page/search-section-new.tsx
index b1b27514..bc698988 100644
--- a/components/landing-page/search-section-new.tsx
+++ b/components/landing-page/search-section-new.tsx
@@ -4,7 +4,14 @@ import { useParams, useRouter } from "next/navigation";
 import router from "next/router";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
 import Image from "next/image";
 import { getHeroData } from "@/service/landing/landing";
 import { title } from "process";
@@ -21,7 +28,16 @@ const ScrollableContent = () => {
   const params = useParams();
   const locale = params?.locale;
   const t = useTranslations("LandingPage");
-  const [content, setContent] = useState<any>();
+  const [contentPolda, setContentPolda] = useState<any>();
+  const [contentSatker, setContentSatker] = useState<any>();
+  const poldaName = params?.polda_name;
+  const satkerName = params?.satker_name;
+
+  let prefixPath = poldaName
+    ? `/polda/${poldaName}`
+    : satkerName
+    ? `/satker/${satkerName}`
+    : "";
 
   useEffect(() => {
     async function fetchCategories() {
@@ -42,15 +58,23 @@ const ScrollableContent = () => {
     }
 
     fetchCategories();
-    initFetch();
+    initFetchPolda();
+    initFetchSatker();
   }, []);
 
-  const initFetch = async () => {
-    const response = await getHeroData(locale == "en");
+  const initFetchPolda = async () => {
+    const response = await getHeroData(locale == "en", "polda");
     console.log(response);
     let data = response?.data?.data?.content;
 
-    setContent(data);
+    setContentPolda(data);
+  };
+  const initFetchSatker = async () => {
+    const response = await getHeroData(locale == "en", "satker");
+    console.log(response);
+    let data = response?.data?.data?.content;
+
+    setContentSatker(data);
   };
 
   return (
@@ -66,14 +90,23 @@ const ScrollableContent = () => {
         </h1>
         <div className="w-[10%] h-1 bg-[#bb3523] mt-2"></div>
         <div className="w-full h-1 bg-[#bb3523] mx-auto"></div>
-        <p className="text-sm md:text-base text-black dark:text-gray-100 mt-4">{t("officialCoverage")}</p>
+        <p className="text-sm md:text-base text-black dark:text-gray-100 mt-4">
+          {t("officialCoverage")}
+        </p>
 
         <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
           <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
             <Select value={contentType} onValueChange={setContentType}>
               <SelectTrigger className="w-[180px] h-[55px]">
                 <span className="text-black">
-                  <svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <svg
+                    className="mx-2 dark:"
+                    width="25"
+                    height="24"
+                    viewBox="0 0 25 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
                     <path
                       d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
                       fill="currentColor"
@@ -94,17 +127,32 @@ const ScrollableContent = () => {
             </Select>
             <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
               <span className="material-icons text-black dark:text-white px-4">
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
                   <path
                     fill="currentColor"
                     d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
                   />
                 </svg>
               </span>
-              <input type="text" placeholder={t("searchCoverageHere")} className="w-full py-4 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
+              <input
+                type="text"
+                placeholder={t("searchCoverageHere")}
+                className="w-full py-4 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none"
+                onChange={(e) => setSearch(e.target.value)}
+              />
             </div>
           </div>
-          <button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-4 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
+          <button
+            onClick={() =>
+              router.push(`/${contentType}/filter?title=${search}`)
+            }
+            className="flex justify-center items-center px-6 w-full lg:w-[20%] py-4 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700"
+          >
             {t("searchCoverage")}
             <Icon icon="ri:arrow-right-s-line" fontSize={20} />
           </button>
@@ -113,82 +161,133 @@ const ScrollableContent = () => {
       <div className="flex flex-col md:flex-row gap-6 py-8">
         {/* Berita Polda */}
         <div className="w-full md:w-1/2 px-4">
-          <h2 className="text-lg md:text-xl font-bold text-[#bb3523] mb-2 uppercase">{t("regionNews")}</h2>
+          <h2 className="text-lg md:text-xl font-bold text-[#bb3523] mb-2 uppercase">
+            {t("regionNews")}
+          </h2>
           <div className="w-[10%] h-1 bg-[#bb3523]"></div>
           <div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
           <div className="grid gap-4">
-            {(seeAllValuePolda ? content : content?.slice(0, 3))?.map((item: any, index: number) => (
-              <div key={index} className={`bg-white rounded-lg shadow-md overflow-hidden ${index === 0 ? "" : "flex"}`}>
-                <div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}>
+            {(seeAllValuePolda ? contentPolda : contentPolda?.slice(0, 3))?.map(
+              (item: any, index: number) => (
+                <div
+                  key={index}
+                  className={`bg-white rounded-lg shadow-md overflow-hidden ${
+                    index === 0 ? "" : "flex"
+                  }`}
+                >
+                  <div
+                    className={`relative ${
+                      index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
+                    }`}
+                  >
+                    <Link
+                      href={
+                        Number(item?.fileTypeId) == 1
+                          ? `${prefixPath}/image/detail/${item?.slug}`
+                          : Number(item?.fileTypeId) == 2
+                          ? `${prefixPath}/video/detail/${item?.slug}`
+                          : Number(item?.fileTypeId) == 3
+                          ? `${prefixPath}/document/detail/${item?.slug}`
+                          : `${prefixPath}/audio/detail/${item?.slug}`
+                      }
+                    >
+                      <Image
+                        src={item?.smallThumbnailLink}
+                        alt={item?.title}
+                        layout="fill"
+                        objectFit="cover"
+                      />
+                      <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
+                        <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="white"
+                              d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3"
+                            />
+                          </g>
+                        </svg>
+                      </div>
+                    </Link>
+                  </div>
+                  {/* <Link
+                  href={
+                    Number(item?.fileTypeId) == 1
+                      ? `${prefixPath}/image/detail/${item?.slug}`
+                      : Number(item?.fileTypeId) == 2
+                      ? `${prefixPath}/video/detail/${item?.slug}`
+                      : Number(item?.fileTypeId) == 3
+                      ? `${prefixPath}/document/detail/${item?.slug}`
+                      : `${prefixPath}/audio/detail/${item?.slug}`
+                  }
+                > */}
                   <Link
                     href={
                       Number(item?.fileTypeId) == 1
-                        ? `${locale}/image/detail/${item?.slug}`
+                        ? `${prefixPath}/image/detail/${item?.slug}`
                         : Number(item?.fileTypeId) == 2
-                        ? `${locale}/video/detail/${item?.slug}`
+                        ? `${prefixPath}/video/detail/${item?.slug}`
                         : Number(item?.fileTypeId) == 3
-                        ? `${locale}/document/detail/${item?.slug}`
-                        : `${locale}/audio/detail/${item?.slug}`
+                        ? `${prefixPath}/document/detail/${item?.slug}`
+                        : `${prefixPath}/audio/detail/${item?.slug}`
                     }
+                    className={`${
+                      index === 0 ? "p-4" : "p-3 w-[50%] cursor-pointer"
+                    }`}
                   >
-                    <Image src={item?.smallThumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
-                    <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
-                      <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="white"
-                            d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3"
-                          />
-                        </g>
-                      </svg>
-                    </div>
+                    <p className="text-sm text-[#bb3523] font-bold mb-1">
+                      {item.categoryName}
+                    </p>
+                    <h3 className="text-sm font-semibold text-gray-800">
+                      {item.title}
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-1 truncate">
+                      {htmlToString(item.description)}
+                    </p>
                   </Link>
                 </div>
-                {/* <Link
-                  href={
-                    Number(item?.fileTypeId) == 1
-                      ? `${locale}/image/detail/${item?.slug}`
-                      : Number(item?.fileTypeId) == 2
-                      ? `${locale}/video/detail/${item?.slug}`
-                      : Number(item?.fileTypeId) == 3
-                      ? `${locale}/document/detail/${item?.slug}`
-                      : `${locale}/audio/detail/${item?.slug}`
-                  }
-                > */}
-                <div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
-                  <p className="text-sm text-[#bb3523] font-bold mb-1">{item.categoryName}</p>
-                  <h3 className="text-sm font-semibold text-gray-800">{item.title}</h3>
-                  <p className="text-xs text-gray-500 mt-1 truncate">{htmlToString(item.description)}</p>
-                </div>
+              )
+            )}
+            {contentPolda?.length > 3 && (
+              <div className="flex items-center flex-row justify-start mt-6">
+                <Button
+                  onClick={() => setSeeAllValuePolda(!seeAllValuePolda)}
+                  className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"
+                >
+                  {seeAllValuePolda ? t("seeLess") : t("seeMore")}{" "}
+                  <span className="text-[#bb3523] hover:text-white">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2.5"
+                        d="m10 17l5-5m0 0l-5-5"
+                      />
+                    </svg>
+                  </span>
+                </Button>
               </div>
-            ))}
-            {/* <button className="w-fit px-2 mt-2 py-2 border flex flex-row gap-2 border-[#bb3523] bg-white text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:border-white hover:text-white transition">
-              LEBIH SEDIKIT
-              <span className="text-[#bb3523] hover:text-white">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                  <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
-                </svg>
-              </span>
-            </button>{" "} */}
-            {/* Tombol See More / See Less */}
-                      {content?.length > 3 && (
-                        <div className="flex items-center flex-row justify-start mt-6">
-                          <Button onClick={() => setSeeAllValuePolda(!seeAllValuePolda)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
-                            {seeAllValuePolda ? t("seeLess") : t("seeMore")} <span className="text-[#bb3523] hover:text-white">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                  <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
-                </svg>
-              </span>
-                          </Button>
-                        </div>
-                      )}
+            )}
           </div>
         </div>
 
         {/* Berita SATKER */}
         <div className="w-full md:w-1/2 px-4">
-          <h2 className="text-lg md:text-xl font-bold mb-2 text-[#bb3523] uppercase">{t("divisionNews")}</h2>
+          <h2 className="text-lg md:text-xl font-bold mb-2 text-[#bb3523] uppercase">
+            {t("divisionNews")}
+          </h2>
           <div className="w-[10%] h-1 bg-[#bb3523]"></div>
           <div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
           <div className="grid gap-4">
@@ -201,12 +300,12 @@ const ScrollableContent = () => {
                     <Link
                       href={
                         Number(item?.fileTypeId) == 1
-                          ? `${locale}/image/detail/${item?.slug}`
+                          ? `${prefixPath}/image/detail/${item?.slug}`
                           : Number(item?.fileTypeId) == 2
-                          ? `${locale}/video/detail/${item?.slug}`
+                          ? `${prefixPath}/video/detail/${item?.slug}`
                           : Number(item?.fileTypeId) == 3
-                          ? `${locale}/document/detail/${item?.slug}`
-                          : `${locale}/audio/detail/${item?.slug}`
+                          ? `${prefixPath}/document/detail/${item?.slug}`
+                          : `${prefixPath}/audio/detail/${item?.slug}`
                       }
                     >
                       <Image src={item.thumbnailLink} alt={item.title} layout="fill" objectFit="cover" />
@@ -238,23 +337,45 @@ const ScrollableContent = () => {
                 </svg>
               </span>
             </button> */}
-            {(seeAllValueSatker ? content : content?.slice(0, 3))?.map((item: any, index: number) => (
-              <div key={index} className={`bg-white rounded-lg shadow-md overflow-hidden ${index === 0 ? "" : "flex"}`}>
-                <div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}>
+            {(seeAllValueSatker
+              ? contentSatker
+              : contentSatker?.slice(0, 3)
+            )?.map((item: any, index: number) => (
+              <div
+                key={index}
+                className={`bg-white rounded-lg shadow-md overflow-hidden ${
+                  index === 0 ? "" : "flex"
+                }`}
+              >
+                <div
+                  className={`relative ${
+                    index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
+                  }`}
+                >
                   <Link
                     href={
                       Number(item?.fileTypeId) == 1
-                        ? `${locale}/image/detail/${item?.slug}`
+                        ? `${prefixPath}/image/detail/${item?.slug}`
                         : Number(item?.fileTypeId) == 2
-                        ? `${locale}/video/detail/${item?.slug}`
+                        ? `${prefixPath}/video/detail/${item?.slug}`
                         : Number(item?.fileTypeId) == 3
-                        ? `${locale}/document/detail/${item?.slug}`
-                        : `${locale}/audio/detail/${item?.slug}`
+                        ? `${prefixPath}/document/detail/${item?.slug}`
+                        : `${prefixPath}/audio/detail/${item?.slug}`
                     }
                   >
-                    <Image src={item?.smallThumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
+                    <Image
+                      src={item?.smallThumbnailLink}
+                      alt={item?.title}
+                      layout="fill"
+                      objectFit="cover"
+                    />
                     <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                      <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
@@ -269,35 +390,66 @@ const ScrollableContent = () => {
                 {/* <Link
                   href={
                     Number(item?.fileTypeId) == 1
-                      ? `${locale}/image/detail/${item?.slug}`
+                      ? `${prefixPath}/image/detail/${item?.slug}`
                       : Number(item?.fileTypeId) == 2
-                      ? `${locale}/video/detail/${item?.slug}`
+                      ? `${prefixPath}/video/detail/${item?.slug}`
                       : Number(item?.fileTypeId) == 3
-                      ? `${locale}/document/detail/${item?.slug}`
-                      : `${locale}/audio/detail/${item?.slug}`
+                      ? `${prefixPath}/document/detail/${item?.slug}`
+                      : `${prefixPath}/audio/detail/${item?.slug}`
                   }
                 > */}
-                <div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
-                  <p className="text-sm text-[#bb3523] font-bold mb-1">{item.categoryName}</p>
-                  <h3 className="text-sm font-semibold text-gray-800">{item.title}</h3>
-                  <p className="text-xs text-gray-500 mt-1 truncate">{htmlToString(item.description)}</p>
-                </div>
+                <Link
+                  href={
+                    Number(item?.fileTypeId) == 1
+                      ? `${prefixPath}/image/detail/${item?.slug}`
+                      : Number(item?.fileTypeId) == 2
+                      ? `${prefixPath}/video/detail/${item?.slug}`
+                      : Number(item?.fileTypeId) == 3
+                      ? `${prefixPath}/document/detail/${item?.slug}`
+                      : `${prefixPath}/audio/detail/${item?.slug}`
+                  }
+                  className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}
+                >
+                  <p className="text-sm text-[#bb3523] font-bold mb-1">
+                    {item.categoryName}
+                  </p>
+                  <h3 className="text-sm font-semibold text-gray-800">
+                    {item.title}
+                  </h3>
+                  <p className="text-xs text-gray-500 mt-1 truncate">
+                    {htmlToString(item.description)}
+                  </p>
+                </Link>
               </div>
             ))}
-             {/* Tombol See More / See Less */}
-                      {content?.length > 3 && (
-                        <div className="flex items-center flex-row justify-start mt-6">
-                          <Button onClick={() => setSeeAllValueSatker(!seeAllValueSatker)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
-                      
-                    
-                            {seeAllValueSatker ? t("seeLess") : t("seeMore")} <span className="text-[#bb3523] hover:text-white">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                  <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
-                </svg>
-              </span>
-                          </Button>
-                        </div>
-                      )}
+            {/* Tombol See More / See Less */}
+            {contentSatker?.length > 3 && (
+              <div className="flex items-center flex-row justify-start mt-6">
+                <Button
+                  onClick={() => setSeeAllValueSatker(!seeAllValueSatker)}
+                  className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"
+                >
+                  {seeAllValueSatker ? t("seeLess") : t("seeMore")}{" "}
+                  <span className="text-[#bb3523] hover:text-white">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2.5"
+                        d="m10 17l5-5m0 0l-5-5"
+                      />
+                    </svg>
+                  </span>
+                </Button>
+              </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index d8e798e6..e61e8220 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -31,9 +31,9 @@ export async function getCsrfToken() {
   //   }
 }
 
-export async function getHeroData(isInt: Boolean = false) {
+export async function getHeroData(isInt: Boolean = false, unitType= "") {
   return await httpGetInterceptor(
-    `media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=&isInt=${isInt}`
+    `media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=&isInt=${isInt}${unitType==""?"":unitType=='polda'?'&isAllPolda=true':'&isAllSatker=true'}`
   );
 }