merge

2025-06-06 00:12:39 +08:00 · 2025-06-06 00:12:39 +08:00 · 43ae5c480a
parent d5f697ddfa 8741b08787
commit 43ae5c480a
43 changed files with 500 additions and 65 deletions
--- a/app/[locale]/(public)/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx
@ -43,5 +43,5 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
 }

 export default async function DetailInfo({ params }: Props) {
-  return <DetailImage />;
+  return <div className="w-full"><DetailImage /></div>;
 }
--- a/components/landing-page/content-category.tsx
+++ b/components/landing-page/content-category.tsx
@ -72,7 +72,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
            )}
          </h2>
          <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {(seeAllValue ? categories : categories?.slice(0, 8))?.map((category: any) => (
+            {(seeAllValue ? categories : categories?.slice(0, 4))?.map((category: any) => (
              <div key={category?.id}>
                <div onClick={() => router.push(`${prefixPath}all/filter?category=${category?.id}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block">
                  {/* Gambar */}
@ -98,7 +98,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
          </div>

          {/* Tombol See More / See Less */}
-          {categories?.length > 8 && (
+          {categories?.length > 4 && (
            <div className="flex items-center flex-row justify-center mt-6">
              <Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
                {seeAllValue ? t("seeLess") : t("seeMore")}
--- a/components/landing-page/coverage.tsx
+++ b/components/landing-page/coverage.tsx
@ -13,7 +13,7 @@ const regions = [
  {
    name: "Polda Bangka Belitung",
    slug: "bangka-belitung",
-    logo: "/logo/polda/polda-bangkabelitung.png",
+    logo: "/logo/polda/polda-bangka-belitung.png",
  },
  {
    name: "Polda Banten",
@ -27,7 +27,7 @@ const regions = [
  },
  {
    name: "Polda DIY",
-    slug: "di-yogyakarta",
+    slug: "jogja",
    logo: "/logo/polda/polda-jogja.png",
  },
  {
@ -39,17 +39,17 @@ const regions = [
  {
    name: "Polda Jawa Barat",
    slug: "jawa-barat",
-    logo: "/logo/polda/polda-jawabarat.png",
+    logo: "/logo/polda/polda-jawa-barat.png",
  },
  {
    name: "Polda Jawa Tengah",
    slug: "jawa-tengah",
-    logo: "/logo/polda/polda-jawatengah.png",
+    logo: "/logo/polda/polda-jawa-tengah.png",
  },
  {
    name: "Polda Jawa Timur",
    slug: "jawa-timur",
-    logo: "/logo/polda/polda-jawatimur.png",
+    logo: "/logo/polda/polda-jawa-timur.png",
  },
  {
    name: "Polda Kalimantan Barat",
@ -79,7 +79,7 @@ const regions = [
  {
    name: "Polda Kepulauan Riau",
    slug: "kepulauan-riau",
-    logo: "/logo/polda/polda-kepri.png",
+    logo: "/logo/polda/polda-kepulauan-riau.png",
  },
  {
    name: "Polda Lampung",
@ -99,7 +99,7 @@ const regions = [
  {
    name: "Polda Metro Jaya",
    slug: "metro-jaya",
-    logo: "/logo/polda/polda-metro.png",
+    logo: "/logo/polda/polda-metro-jaya.png",
  },
  {
    name: "Polda NTB",
@ -121,12 +121,12 @@ const regions = [
  {
    name: "Polda Sulawesi Barat",
    slug: "sulawesi-barat",
-    logo: "/logo/polda/polda-sulbar.png",
+    logo: "/logo/polda/polda-sulawesi-barat.png",
  },
  {
    name: "Polda Sulawesi Selatan",
    slug: "sulawesi-selatan",
-    logo: "/logo/polda/polda-sulsel.png",
+    logo: "/logo/polda/polda-sulawesi-selatan.png",
  },
  {
    name: "Polda Sulawesi Tengah",
@ -151,12 +151,12 @@ const regions = [
  {
    name: "Polda Sumatera Selatan",
    slug: "sumatera-selatan",
-    logo: "/logo/polda/polda-sumsel.png",
+    logo: "/logo/polda/polda-sumatera-selatan.png",
  },
  {
    name: "Polda Sumatera Utara",
    slug: "sumatera-utara",
-    logo: "/logo/polda/polda-sumut.png",
+    logo: "/logo/polda/polda-sumatera-utara.png",
  },
  // {
  //   name: "Satuan Kerja POLRI",
--- a/components/landing-page/division.tsx
+++ b/components/landing-page/division.tsx
@ -18,13 +18,13 @@ const regions = [
  { name: "STAMARENA POLRI", slug: "srena", logo: "/logo/satker/SRENA.png" },
  { name: "SSDM POLRI", slug: "ssdm", logo: "/logo/satker/SSDM.png" },
  { name: "SLOG POLRI", slug: "slog", logo: "/logo/satker/SLOG.png" },
-  { name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/logo/satker/STAFAHLI.png" },
+  { name: "SAHLI KAPOLRI", slug: "stafahli", logo: "/logo/satker/STAFAHLI.png" },
  { name: "DIVPROPRAM POLRI", slug: "divpropram", logo: "/logo/satker/DIVPROPAM.png" },
  { name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
  { name: "DIVHUBINTER POLRI", slug: "divhubinter", logo: "/logo/satker/DIVHUBINTER.png" },
  { name: "DIVTIK POLRI", slug: "div-tik", logo: "/logo/satker/DIV-TIK.png" },
  { name: "KORLANTAS POLRI", slug: "korlantas", logo: "/logo/satker/KORLANTAS.png" },
-  { name: "DENSUS 88 POLRI", slug: "densus-88", logo: "/logo/satker/DENSUS88.png" },
+  { name: "DENSUS 88 POLRI", slug: "densus-88", logo: "/logo/satker/DENSUS-88.png" },
  { name: "PUSDOKKES POLRI", slug: "pusdokkes", logo: "/logo/satker/PUSDOKKES.png" },
  { name: "PUSLITBANG POLRI", slug: "puslitbang", logo: "/logo/satker/PUSLITBANG.png" },
  { name: "PUSKEU POLRI", slug: "puskeu", logo: "/logo/satker/PUSKEU.png" },
@ -47,10 +47,10 @@ const regions = [
  { name: "STIK LEMDIKLAT POLRI", slug: "stik-ptik", logo: "/logo/satker/STIK-PTIK.png" },
  { name: "AKPOL LEMDIKLAT POLRI", slug: "akpol", logo: "/logo/satker/AKPOL.png" },
  { name: "SESPIM LEMDIKLAT POLRI", slug: "sespim-polri", logo: "/logo/satker/SESPIM-POLRI.png" },
-  { name: "SETUKPA LEMDIKLAT POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" },
-  { name: "SEPOLWAN LEMDIKLAT POLRI", slug: "sepolwan-polri", logo: "/assets/satker/sepolwan.png" },
-  { name: "SEBASA LEMDIKLAT POLRI", slug: "sebasa-polri", logo: "/assets/satker/sebasa.png" },
-  { name: "RUMKIT BHAYANGKARA TK I", slug: "rumkit-bhayangkara", logo: "/assets/satker/rumkit.png" },
+  { name: "SETUKPA LEMDIKLAT POLRI", slug: "setupa-polri", logo: "/logo/satker/SETUPA-POLRI.png" },
+  { name: "SEPOLWAN LEMDIKLAT POLRI", slug: "sepolwan-polri", logo: "/logo/satker/SEPOLWAN-POLRI.png" },
+  { name: "SEBASA LEMDIKLAT POLRI", slug: "sebasa-polri", logo: "/logo/satker/SEBASA-POLRI.png" },
+  { name: "RUMKIT BHAYANGKARA TK I", slug: "rumkit-bhayangkara", logo: "/logo/satker/RUMKIT-BHAYANGKARA.png" },
  { name: "POLAIR", slug: "polair", logo: "/logo/satker/POLAIR.png" },
  { name: "POLUDARA", slug: "poludara", logo: "/logo/satker/POLUDARA.png" },
  { name: "PUSINAFIS", slug: "pusinafis", logo: "/logo/satker/PUSINAFIS.png" },
@ -91,7 +91,6 @@ const Division = () => {

  return (
    <div className="mx-auto px-4 w-full">
-      {/* Header */}
      {/* <Reveal> */}
      {/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-3">
          {pathname?.split("/")[1] == "in" ? (
--- a/components/landing-page/dynamic-logo-polda.tsx
+++ b/components/landing-page/dynamic-logo-polda.tsx
@ -5,16 +5,8 @@ import { usePathname } from "next/navigation";

 export const DynamicLogoPolda = () => {
  const pathname = usePathname();
+  const polda = pathname?.split("/")[3];
+  console.log("polda", polda)

-  const getLogoSrc = () => {
-    if (pathname?.startsWith("/polda/aceh")) return "/logo/polda/polda-aceh.png";
-    if (pathname?.startsWith("/user")) return "/logos/user-logo.svg";
-    return "/logos/default-logo.svg";
-  };
-
-  return (
-    <div className="p-2">
-      <Image src={getLogoSrc()} alt="Logo" width={120} height={40} className="object-contain" />
-    </div>
-  );
+  return <div className="p-2">{pathname?.includes("/polda") && <Image src={`/logo/polda/polda-${polda}.png`} alt="Logo" width={1920} height={1080} className="object-contain h-[150px] w-[50px]" />}</div>;
 };
--- a/components/landing-page/dynamic-logo-satker.tsx
+++ b/components/landing-page/dynamic-logo-satker.tsx
@ -0,0 +1,22 @@
+"use client";
+
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+
+export const DynamicLogoSatker = () => {
+  const pathname = usePathname();
+  const satker = pathname?.split("/")[3];
+  console.log("satker", satker?.toUpperCase())
+
+  return <div className="p-2">
+      {pathname?.includes("/satker") && (
+        <Image
+          src={`/logo/satker/${satker?.toUpperCase()}.png`}
+          alt="Logo"
+          width={1920}
+          height={1080}
+          className="object-contain h-[150px] w-[50px]"
+        />
+      )}
+    </div>;
+};
--- a/components/landing-page/hero.tsx
+++ b/components/landing-page/hero.tsx
@ -114,7 +114,7 @@ const HeroModal = ({ onClose }: { onClose: () => void }) => {
                </button>
                <Image
                  src={list?.thumbnailLink}
-                  alt="gambar-utama"
+                  alt="gambar-utama "
                  width={1920}
                  height={1080}
                  placeholder={`data:image/svg+xml;base64,${toBase64(
--- a/components/landing-page/landing-polda-kaltara/welcome-polda-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/welcome-polda-kaltara.tsx
@ -0,0 +1,143 @@
+import { useParams, usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+const WelcomePoldaKaltara = () => {
+  const router = useRouter();
+  const asPath: any = usePathname();
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  const [categorySelect, setCategorySelect] = useState("0");
+  const t = useTranslations("LandingPage");
+  const [contentType, setContentType] = useState("all");
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    function initState() {
+      console.log(categorySelect);
+    }
+
+    initState();
+  }, [categorySelect]);
+
+  return (
+    <section className="w-full py-8 px-4">
+      <div className="">
+        {/* Heading */}
+        <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
+          <span className="text-[#bb3523] dark:text-white">{t("welcome")} Di Polda</span> <span className="capitalize text-[#bb3523] dark:text-white">{poldaName.replace("-", " ")}</span>
+        </h1>
+        <div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
+        <p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
+          {t("polda")} <span className="capitalize">{poldaName.replace("-", " ")}</span>
+        </p>
+
+        {/* Search Form */}
+        {/* <div className="mt-6 flex flex-col md:flex-row justify-center gap-4"> */}
+        {/* Dropdown */}
+        {/* <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
+                  <svg className="mx-2" 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"
+                    />
+                  </svg>
+                  {t("content")}
+                  <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                    <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
+                  </svg>
+                </a>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiYoutube className="mr-2" />
+                    {t("video")}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiMusic className="mr-2" />
+                    {t("audio")}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiImage className="mr-2" />
+                    {t("image")}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                  <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                    <FiFile className="mr-2" />
+                    {t("text")}
+                  </span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <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">
+                  <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("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
+            </div>
+          </div> */}
+
+        {/* Button */}
+        {/* <button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
+            {t("searchCoverage")}  <Icon icon="ri:arrow-right-s-line" fontSize={20} />
+          </button> */}
+        {/* </div> */}
+
+        <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
+          {/* Dropdown */}
+          <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
+            <Select value={contentType} onValueChange={setContentType}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value="all">{t("allContent")}</SelectItem>
+                  <SelectItem value="image">{t("image")}</SelectItem>
+                  <SelectItem value="video">{t("video")}</SelectItem>
+                  <SelectItem value="document">{t("text")}</SelectItem>
+                  <SelectItem value="audio">{t("audio")}</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </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">
+                  <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("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
+            </div>
+          </div>
+
+          {/* Search Input */}
+          <button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
+            {t("searchCoverage")}
+            <Icon icon="ri:arrow-right-s-line" fontSize={20} />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WelcomePoldaKaltara;
--- a/components/landing-page/left-banner.tsx
+++ b/components/landing-page/left-banner.tsx
@ -0,0 +1,83 @@
+import { listDataAdvertisements } from "@/service/broadcast/broadcast";
+import { useEffect, useState } from "react";
+import * as React from "react";
+
+interface Advertisement {
+  id: string;
+  imageUrl: string;
+  [key: string]: any; // Tambahan kalau ada properti lain
+}
+
+// // Simulasi fungsi API (replace dengan yang asli)
+// async function listDataAdvertisements(
+//   page: number,
+//   size: number,
+//   search: string,
+//   category: string,
+//   status: string
+// ) {
+//   // contoh struktur response dummy
+//   return {
+//     data: {
+//       data: {
+//         content: [
+//           { id: "1", imageUrl: "/images/all-img/kiri1.png" },
+//           { id: "2", imageUrl: "/images/all-img/kiri2.png" },
+//         ],
+//         totalElements: 2,
+//         totalPages: 1,
+//       },
+//     },
+//   };
+// }
+
+const LeftBanner = () => {
+  const [ads, setAds] = useState<Advertisement[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+ const [showData, setShowData] = React.useState("10");
+  const [categories, setCategories] = React.useState<any>();
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+    const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const res = await listDataAdvertisements( page - 1,
+        showData,
+        "",
+        categoryFilter?.sort().join(","),
+        statusFilter?.sort().join(","));
+      const data = res?.data?.data;
+      const contentData = data?.content;
+
+      contentData.forEach((item: Advertisement, index: number) => {
+        item.no = index + 1;
+      });
+
+      setAds(contentData);
+    } catch (error) {
+      console.error("Error fetching advertisements:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <div className="sticky top-0 space-y-4 ml-14">
+      {loading && <p className="text-sm text-gray-500">Loading...</p>}
+      {ads.map((ad) => (
+        <img key={ad.id} src={ad.imageUrl} alt={`Banner ${ad.id}`} width={180} />
+      ))}
+    </div>
+  );
+};
+
+export default LeftBanner;
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@ -23,6 +23,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import PoldaLogo from "./polda-logo";
 import { DynamicLogoPolda } from "./dynamic-logo-polda";
+import { DynamicLogoSatker } from "./dynamic-logo-satker";

 type Detail = {
  id: number;
@ -162,7 +163,7 @@ const Navbar = () => {
          <Link href={prefixPath} className="flex items-center">
            <Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={2560} height={1440} className=" w-[200px] h-full shrink-0 object-contain" />
          </Link>
-          <DynamicLogoPolda />
+          <DynamicLogoPolda /> <DynamicLogoSatker />
          {/* Nav Menu */}
          <div className="hidden custom-lg-button:flex items-center gap-5">
            <NavigationMenu>
--- a/components/landing-page/search-section-new.tsx
+++ b/components/landing-page/search-section-new.tsx
@ -10,10 +10,13 @@ import { getHeroData } from "@/service/landing/landing";
 import { title } from "process";
 import { htmlToString } from "@/utils/globals";
 import { Link } from "@/i18n/routing";
+import { Button } from "../ui/button";

 const ScrollableContent = () => {
  const [contentType, setContentType] = useState("all");
  const [search, setSearch] = useState("");
+  const [seeAllValueSatker, setSeeAllValueSatker] = useState(false);
+  const [seeAllValuePolda, setSeeAllValuePolda] = useState(false);
  const router = useRouter();
  const params = useParams();
  const locale = params?.locale;
@ -112,7 +115,7 @@ const ScrollableContent = () => {
          <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">
-            {content?.slice(0, 4).map((item: any, index: number) => (
+            {(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]"}`}>
                  <Link
@ -126,7 +129,7 @@ const ScrollableContent = () => {
                        : `${locale}/audio/detail/${item?.slug}`
                    }
                  >
-                    <Image src={item.thumbnailLink} alt={item.title} layout="fill" objectFit="cover" />
+                    <Image src={item?.thumbnailLink} 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">
@ -158,14 +161,26 @@ const ScrollableContent = () => {
                </div>
              </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">
+            {/* <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>{" "}
+            </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>

@ -175,9 +190,9 @@ const ScrollableContent = () => {
          <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">
-            {content
+            {/* {seeAllValue ? content : content
              ?.filter((item: any) => item.isPublishOnPolda === true)
-              .slice(0, 4)
+              .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]"}`}>
@ -212,15 +227,75 @@ const ScrollableContent = () => {
                    <p className="text-xs text-gray-500 mt-1 truncate">{htmlToString(item.description)}</p>
                  </div>
                </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:text-white transition">
+              ))} */}
+            {/* <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: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>
+            </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]"}`}>
+                  <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}`
+                    }
+                  >
+                    <Image src={item?.thumbnailLink} 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
+                      ? `${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>
+              </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>
+                      )}
          </div>
        </div>
      </div>
--- a/components/landing-page/search-section.tsx
+++ b/components/landing-page/search-section.tsx
@ -18,7 +18,6 @@ import ContentCategory from "./content-category";
 import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
 import EventCalender from "./event-calender";
 import UserSurveyBox from "./survey-box";
-import ScrollableContentPolda from "./scrollable-content-polda";

 const LeftBanner = () => (
  <div className="sticky top-0 space-y-4 ml-14">
--- a/components/landing-page/welcome-polda.tsx
+++ b/components/landing-page/welcome-polda.tsx
@ -25,7 +25,7 @@ const WelcomePolda = () => {
  }, [categorySelect]);

  return (
-    <section className="w-full py-8 px-4 ">
+    <section className="w-full py-8 px-4">
      <div className="">
        {/* Heading */}
        <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
--- a/components/main/image-detail.tsx
+++ b/components/main/image-detail.tsx
@ -513,29 +513,29 @@ const DetailImage = (data: any) => {

  return (
    <>
-      <div className="min-h-screen px-4 md:px-24 py-4">
-        <div className="rounded-md overflow-hidden md:flex">
+      <div className="w-full max-w-screen-xl mx-auto px-4 py-4">
+        <div className="rounded-md overflow-hidden md:flex flex-row justify-center">
          {/* Bagian Kiri */}
-          <div className="md:w-3/4">
+          <div className="">
            {/* Gambar Besar */}
            {isLoading ? (
              <div className="relative">
                <Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" />
              </div>
            ) : (
-              <div className="relative">
-                <Image
-                  placeholder={`data:image/svg+xml;base64,${toBase64(
-                    shimmer(700, 475)
-                  )}`}
-                  width={2560}
-                  height={1440}
-                  src={detailDataImage?.files[selectedImage]?.url}
-                  alt="Main"
-                  className="rounded-lg w-auto h-fit"
-                />
-                <div className="absolute top-4 left-4"></div>
-              </div>
+              <div className="relative self-end ml-auto">
+  <Image
+    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+    width={2560}
+    height={1440}
+    src={detailDataImage?.files[selectedImage]?.url}
+    alt="Main"
+    className="rounded-md w-full h-[670px] object-contain"
+  />
+
+  <div className="absolute top-4 right-4"></div>
+</div>
+
            )}

            {/* Gambar bawah Kecil */}
@ -616,7 +616,7 @@ const DetailImage = (data: any) => {
          </div>

          {/* Bagian Kanan */}
-          <div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
+          <div className="p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
            {isSaved ? (
              <a
                onClick={() => handleDeleteWishlist()}
@ -1135,7 +1135,7 @@ const DetailImage = (data: any) => {
        </div>

        {/* Konten Serupa */}
-        <div className="">
+        <div className="px-4 lg:px-[300px]">
          <NewContent group="mabes" type={"similar"} />
        </div>
      </div>
--- a/package-lock.json
+++ b/package-lock.json
@ -21565,6 +21565,7 @@
      }
    },
    "vendor/ckeditor5": {
+      "name": "ckeditor5-custom-build",
      "version": "0.0.1",
      "license": "SEE LICENSE IN LICENSE.md",
      "dependencies": {
--- a/public/assets/satker/RUMKIT-BHAYANGKARA.png
+++ b/public/assets/satker/RUMKIT-BHAYANGKARA.png
--- a/public/assets/satker/SEBASA-POLRI.png
+++ b/public/assets/satker/SEBASA-POLRI.png
--- a/public/assets/satker/SEPOLWAN-POLRI.png
+++ b/public/assets/satker/SEPOLWAN-POLRI.png
--- a/public/logo/polda/polda-bangka-belitung.png
+++ b/public/logo/polda/polda-bangka-belitung.png
--- a/public/logo/polda/polda-jawa-barat.png
+++ b/public/logo/polda/polda-jawa-barat.png
--- a/public/logo/polda/polda-jawa-tengah.png
+++ b/public/logo/polda/polda-jawa-tengah.png
--- a/public/logo/polda/polda-jawa-timur.png
+++ b/public/logo/polda/polda-jawa-timur.png
--- a/public/logo/polda/polda-kalimantan-barat.png
+++ b/public/logo/polda/polda-kalimantan-barat.png
--- a/public/logo/polda/polda-kalimantan-selatan.png
+++ b/public/logo/polda/polda-kalimantan-selatan.png
--- a/public/logo/polda/polda-kalimantan-tengah.png
+++ b/public/logo/polda/polda-kalimantan-tengah.png
--- a/public/logo/polda/polda-kalimantan-timur.png
+++ b/public/logo/polda/polda-kalimantan-timur.png
--- a/public/logo/polda/polda-kepulauan-riau.png
+++ b/public/logo/polda/polda-kepulauan-riau.png
--- a/public/logo/polda/polda-metro-jaya.png
+++ b/public/logo/polda/polda-metro-jaya.png
--- a/public/logo/polda/polda-sulawesi-barat.png
+++ b/public/logo/polda/polda-sulawesi-barat.png
--- a/public/logo/polda/polda-sulawesi-selatan.png
+++ b/public/logo/polda/polda-sulawesi-selatan.png
--- a/public/logo/polda/polda-sumatera-selatan.png
+++ b/public/logo/polda/polda-sumatera-selatan.png
--- a/public/logo/polda/polda-sumatera-utara.png
+++ b/public/logo/polda/polda-sumatera-utara.png
--- a/public/logo/satker/DENSUS-88.png
+++ b/public/logo/satker/DENSUS-88.png
--- a/public/logo/satker/RUMKIT-BHAYANGKARA.png
+++ b/public/logo/satker/RUMKIT-BHAYANGKARA.png
--- a/public/logo/satker/SEBASA-POLRI.png
+++ b/public/logo/satker/SEBASA-POLRI.png
--- a/public/logo/satker/SEPOLWAN-POLRI.png
+++ b/public/logo/satker/SEPOLWAN-POLRI.png
--- a/public/logo/satker/SETUPA-POLRI.png
+++ b/public/logo/satker/SETUPA-POLRI.png
--- a/vendor/ckeditor5/node_modules/.bin/tsc
+++ b/vendor/ckeditor5/node_modules/.bin/tsc
@ -1 +1,16 @@
-../typescript/bin/tsc
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else 
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi
--- a/vendor/ckeditor5/node_modules/.bin/tsc.cmd
+++ b/vendor/ckeditor5/node_modules/.bin/tsc.cmd
@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\typescript\bin\tsc" %*
--- a/vendor/ckeditor5/node_modules/.bin/tsc.ps1
+++ b/vendor/ckeditor5/node_modules/.bin/tsc.ps1
@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../typescript/bin/tsc" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../typescript/bin/tsc" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../typescript/bin/tsc" $args
+  } else {
+    & "node$exe"  "$basedir/../typescript/bin/tsc" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/vendor/ckeditor5/node_modules/.bin/tsserver
+++ b/vendor/ckeditor5/node_modules/.bin/tsserver
@ -1 +1,16 @@
-../typescript/bin/tsserver
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else 
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi
--- a/vendor/ckeditor5/node_modules/.bin/tsserver.cmd
+++ b/vendor/ckeditor5/node_modules/.bin/tsserver.cmd
@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\typescript\bin\tsserver" %*
--- a/vendor/ckeditor5/node_modules/.bin/tsserver.ps1
+++ b/vendor/ckeditor5/node_modules/.bin/tsserver.ps1
@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../typescript/bin/tsserver" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../typescript/bin/tsserver" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../typescript/bin/tsserver" $args
+  } else {
+    & "node$exe"  "$basedir/../typescript/bin/tsserver" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret