From 955f9b2b4e9bf901d9aee7e0f933d5c0c28e41e4 Mon Sep 17 00:00:00 2001
From: sabdayagra <msabdayagra@gmail.com>
Date: Mon, 23 Dec 2024 22:40:32 +0700
Subject: [PATCH] Feat: adjust ui in mobile version and add api

---
 app/[locale]/(public)/audio/filter/page.tsx   |  35 ++++--
 .../(public)/document/detail/[slug]/page.tsx  |  45 ++++----
 .../(public)/document/filter/page.tsx         |  30 ++---
 .../(public)/image/detail/[slug]/page.tsx     |  91 ++++-----------
 app/[locale]/(public)/image/filter/page.tsx   |  89 ++++++++++++---
 .../(public)/indeks/detail/[slug]/page.tsx    |  10 +-
 app/[locale]/(public)/schedule/page.tsx       |  20 ++--
 .../(public)/video/detail/[slug]/page.tsx     |  40 +++----
 app/[locale]/(public)/video/filter/page.tsx   |  55 +++++----
 components/landing-page/coverage.tsx          |  12 +-
 components/landing-page/division.tsx          |   2 +-
 components/landing-page/navbar.tsx            | 105 +++++++++---------
 components/landing-page/new-content.tsx       |  12 +-
 providers/mounted.provider.tsx                |  18 +--
 service/landing/landing.ts                    |   6 +
 15 files changed, 309 insertions(+), 261 deletions(-)

diff --git a/app/[locale]/(public)/audio/filter/page.tsx b/app/[locale]/(public)/audio/filter/page.tsx
index 72558a61..bcf720de 100644
--- a/app/[locale]/(public)/audio/filter/page.tsx
+++ b/app/[locale]/(public)/audio/filter/page.tsx
@@ -101,7 +101,7 @@ const FilterPage = () => {
   return (
     <div className="flex flex-col">
       {/* Header */}
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Audio {">"} <span className="font-bold">Semua Audio</span>
@@ -114,11 +114,14 @@ const FilterPage = () => {
         <Reveal>
           {/* Sidebar Kiri */}
           <div className="lg:w-1/4 w-max bg-white p-4 rounded-lg shadow-md">
-            <h2 className="text-lg font-semibold mb-4">Filter</h2>
+            <h2 className="text-lg font-semibold mb-4">
+              <Icon icon="stash:filter-light" fontSize={30} />
+              Filter
+            </h2>
             <div className="space-y-6">
               {/* Pencarian */}
               <div>
-                <label htmlFor="search" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Pencarian
                 </label>
                 <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
@@ -126,7 +129,7 @@ const FilterPage = () => {
 
               {/* Tahun & Bulan */}
               <div>
-                <label htmlFor="month" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Pilih Tahun & Bulan
                 </label>
                 <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
@@ -134,7 +137,7 @@ const FilterPage = () => {
 
               {/* Tanggal */}
               <div>
-                <label htmlFor="date" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Pilih Tanggal
                 </label>
                 <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
@@ -142,13 +145,13 @@ const FilterPage = () => {
 
               {/* Kategori */}
               <div>
-                <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
                 <ul className="mt-2 space-y-2">
                   {categories.map((category) => (
                     <li key={category?.id}>
                       <label className="inline-flex items-center">
                         <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700">{category.title}</span>
+                        <span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
                       </label>
                     </li>
                   ))}
@@ -158,18 +161,24 @@ const FilterPage = () => {
               <div className="border-t border-black my-4"></div>
               {/* Garis */}
               <div>
-                <h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
                 <ul className="mt-2 space-y-2">
                   {formatAudio.map((format) => (
                     <li key={format?.id}>
                       <label className="inline-flex items-center">
                         <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700">{format.title}</span>
+                        <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
                       </label>
                     </li>
                   ))}
                 </ul>
               </div>
+              <div className="border-t border-black dark:border-white my-4"></div>
+              <div className="text-center">
+                <a href="#" className="text-[#bb3523]">
+                  <b>Reset Filter</b>
+                </a>
+              </div>
             </div>
           </div>
         </Reveal>
@@ -187,8 +196,12 @@ const FilterPage = () => {
             {/* Card */}
             <div className=" grid grid-cols-1 gap-6 ">
               {audioData?.map((audio: any) => (
-                <Link href={`/audio/detail/${audio?.slug}`} key={audio?.id} className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
-                  <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-16">
+                <Link
+                  href={`/audio/detail/${audio?.slug}`}
+                  key={audio?.id}
+                  className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                >
+                  <div className="flex items-center justify-center bg-[#bb3523] text-white rounded-lg w-16 h-16">
                     <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
diff --git a/app/[locale]/(public)/document/detail/[slug]/page.tsx b/app/[locale]/(public)/document/detail/[slug]/page.tsx
index 3af6c306..039b88cd 100644
--- a/app/[locale]/(public)/document/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/document/detail/[slug]/page.tsx
@@ -18,6 +18,7 @@ const DetailDocument = () => {
   const params = useParams();
   const slug = params?.slug;
   const [detailDataDocument, setDetailDataDocument] = useState<any>();
+  const [selectedDocument, setSelectedDocument] = useState(0);
 
   useEffect(() => {
     initFetch();
@@ -39,19 +40,34 @@ const DetailDocument = () => {
 
   return (
     <>
-      <div className="min-h-screen px-4 md:px-24 py-4">
-        {/* Container Utama */}
+      <div className="px-4 md:px-24 py-4">
         <div className="rounded-md overflow-hidden md:flex">
           {/* Bagian Kiri */}
           <div className="md:w-3/4">
-            <div className="relative h-full rounded-lg bg-[#f7f7f7]">
-              <img src="/assets/text-icon.png" className="flex items-center self-center" width={40} height={40} />
+            <div className="relative">
+              <img src={detailDataDocument?.files[selectedDocument]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
               <div className="absolute top-4 left-4"></div>
             </div>
+            {/* Footer Informasi */}
+            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <p className="flex flex-row items-center">
+                oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
+                <Icon icon="formkit:eye" width="15" height="15" />
+                &nbsp;
+                {detailDataDocument?.clickCount}
+              </p>
+              <p>Kreator: {detailDataDocument?.creatorName}</p>
+            </div>
+
+            {/* Keterangan */}
+            <div className="md:w-3/4">
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataDocument?.title}</h1>
+              <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
+            </div>
           </div>
 
           {/* Bagian Kanan */}
-          <div className="md:w-1/4 p-4 bg-[#f7f7f7] rounded-lg mx-4">
+          <div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
             <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
               <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
                 <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@@ -74,9 +90,7 @@ const DetailDocument = () => {
 
             {/* Opsi Ukuran Foto */}
             <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
-
             <div className="border-t border-black my-4"></div>
-
             <div className="space-y-2">
               {sizes.map((size) => (
                 <label key={size.label} className="flex items-center space-x-2 cursor-pointer">
@@ -105,23 +119,6 @@ const DetailDocument = () => {
             </button>
           </div>
         </div>
-
-        {/* Footer Informasi */}
-        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <p className="flex flex-row items-center">
-            oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
-            <Icon icon="formkit:eye" width="15" height="15" />
-            &nbsp;
-            {detailDataDocument?.clickCount}
-          </p>
-          <p>Kreator: {detailDataDocument?.creatorName}</p>
-        </div>
-
-        {/* Keterangan */}
-        <div className="md:w-3/4">
-          <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataDocument?.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
-        </div>
       </div>
       <div className="w-full mb-8">
         {/* Comment */}
diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx
index 0ecfe914..8cd92fad 100644
--- a/app/[locale]/(public)/document/filter/page.tsx
+++ b/app/[locale]/(public)/document/filter/page.tsx
@@ -105,7 +105,7 @@ const DocumentPage = () => {
   return (
     <div className="flex flex-col">
       {/* Header */}
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7]">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Teks {">"} <span className="font-bold">Semua Teks</span>
@@ -116,66 +116,70 @@ const DocumentPage = () => {
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
         {/* Sidebar Kiri */}
-        <div className="lg:w-1/4 w-full bg-[#f7f7f7] p-4 rounded-lg shadow-md">
+        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
           <h2 className="text-xl font-semibold mb-4 flex items-center gap-1">
             <Icon icon="stash:filter-light" fontSize={30} />
             Filter
           </h2>
+          <div className="border-t border-black dark:border-white my-4"></div>
           <div className="space-y-6">
             {/* Pencarian */}
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pencarian
               </label>
               <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
-
             {/* Tahun & Bulan */}
             <div>
-              <label htmlFor="month" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pilih Tahun & Bulan
               </label>
               <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
-
             {/* Tanggal */}
             <div>
-              <label htmlFor="date" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pilih Tanggal
               </label>
               <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
-
             {/* Kategori */}
             <div>
-              <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center">
                       <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700">{category.title}</span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
             {/* Garis */}
-            <div className="border-t border-black my-4"></div>
+            <div className="border-t border-black dark:border-white my-4"></div>
             {/* Garis */}
             <div>
-              <h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
               <ul className="mt-2 space-y-2">
                 {formatAudio.map((format) => (
                   <li key={format?.id}>
                     <label className="inline-flex items-center">
                       <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700">{format.title}</span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
+            <div className="border-t border-black dark:border-white my-4"></div>
+            <div className="text-center">
+              <a href="#" className="text-[#bb3523]">
+                <b>Reset Filter</b>
+              </a>
+            </div>
           </div>
         </div>
 
diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx
index 44075dd7..a76d06a4 100644
--- a/app/[locale]/(public)/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx
@@ -1,56 +1,12 @@
 "use client";
-import { Card, CardContent } from "@/components/ui/card";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import { Textarea } from "@/components/ui/textarea";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { textEllipsis } from "@/utils/globals";
 import { getDetail } from "@/service/landing/landing";
 import NewContent from "@/components/landing-page/new-content";
-import { Reveal } from "@/components/landing-page/Reveal";
-
-const dummyImage = [
-  { id: 1, thumbnail: "/assets/banner-sample.png" },
-  { id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
-  { id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
-  { id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
-  { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
-];
-
-const dummyData = {
-  id: 12312,
-  title: "TITLE",
-  createdBy: "Mabes",
-  createdAt: "21-21-2021",
-  time: "18:23",
-  desc: "sdaasd",
-  htmlDescription:
-    '<p>Polres Kobar - Polres Kotawaringin Barat (Kobar) memberikan bantuan sosial kepada warga yang berada di Daerah Aliran Sungai (DAS) Arut khususnya yang terdampak banjir, Sabtu (30/11/2024) pagi.</p><p>Kapolda Kalteng Irjen Pol Drs. Djoko Poerwanto melalui Kapolres Kobar AKBP Yusfandi Usman, S.I.K., M.I.K., menjelaskan bahwa pihaknya membagikan 200 paket sembako sebagai bentuk kepedulian kepada masyarakat.</p><p>"Saya bersama personel turun langsung membagikan bantuan berupa paket sembako yang diserahkan kepada masyarakat sekaligus monitoring ke lokasi pinggiran sungai yang mulai sebagain terdampak banjir akibat curah hujan tinggi,” ungkap Kapolres.</p><p>Lebih lanjut, orang nomor satu di Polres Kobar ini, mengungkapkan kegiatan tersebut dilakukan dalam rangka tanggap waspada dan antisipasi bencana banjir di wilayah Kabupaten Kobar.</p><p>“Kami minta masyarakat tetap waspada banjir menyikapi cuaca yang berubah-ubah saat ini, tidak menutup kemungkinan bertambahnya volume air sungai, jika diguyur hujan terus menerus,” jelasnya.</p>',
-};
-
-const dummyImageContent = [
-  { id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 2, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 3, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 4, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 5, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 6, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 7, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 8, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 9, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-];
-
-const dummyDescription = [
-  { id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-];
 
 const DetailInfo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -85,8 +41,7 @@ const DetailInfo = () => {
       <div className="min-h-screen px-4 md:px-24 py-4">
         <div className="rounded-md overflow-hidden md:flex">
           {/* Bagian Kiri */}
-
-          <div className="md:w-[70%]">
+          <div className="md:w-3/4">
             {/* Gambar Besar */}
             <div className="relative">
               <img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
@@ -101,10 +56,26 @@ const DetailInfo = () => {
                 </a>
               ))}
             </div>
+
+            {/* Footer Informasi */}
+            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <div className="flex flex-row items-center">
+                oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
+                <Icon icon="formkit:eye" width="15" height="15" />
+                &nbsp; {detailDataImage?.clickCount} &nbsp;
+                <p className="flex text-end">Kreator: {detailDataImage?.creatorName}</p>
+              </div>
+            </div>
+
+            {/* Keterangan */}
+            <div className="w-full">
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataImage?.title}</h1>
+              <div dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+            </div>
           </div>
 
           {/* Bagian Kanan */}
-          <div className="md:w-[30%] p-4 bg-[#f7f7f7] rounded-lg mx-4">
+          <div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
             <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
               <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
                 <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@@ -133,10 +104,10 @@ const DetailInfo = () => {
 
             <div className="space-y-2">
               {sizes.map((size) => (
-                <label key={size.label} className="flex items-center space-x-2 cursor-pointer">
-                  <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                <label key={size?.label} className="flex items-center space-x-2 cursor-pointer">
+                  <input type="radio" name="size" value={size?.label} checked={selectedSize === size?.label} onChange={() => setSelectedSize(size?.label)} className="text-red-600 focus:ring-red-600" />
                   <div className="text-sm">
-                    {size.label}&nbsp;{size.value}
+                    {size?.label}&nbsp;{size?.value}
                   </div>
                 </label>
               ))}
@@ -159,27 +130,11 @@ const DetailInfo = () => {
             </button>
           </div>
         </div>
-
-        {/* Footer Informasi */}
-        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <div className="flex flex-row items-center">
-            oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
-            <Icon icon="formkit:eye" width="15" height="15" />
-            &nbsp; {detailDataImage?.clickCount} &nbsp;
-            <p className="flex text-end">Kreator: {detailDataImage?.creatorName}</p>
-          </div>
-        </div>
-
-        {/* Keterangan */}
-        <div className="md:w-3/4">
-          <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataImage?.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
-        </div>
       </div>
       <div className="w-full mb-8">
         {/* Comment */}
         <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
-          <div className="gap-5 flex flex-col px-4 lg:px-20">
+          <div className="gap-5 flex flex-col px-4 lg:px-16">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
             <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index 4fe764dc..1d4aecc4 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -5,11 +5,12 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { formatDateToIndonesian } from "@/utils/globals";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
-import { getListContent } from "@/service/landing/landing";
+import { getListContent, listCategory } from "@/service/landing/landing";
 import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
 import { Reveal } from "@/components/landing-page/Reveal";
 import { Link } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -40,7 +41,7 @@ const formatPicture = [
 
 const FilterPage = () => {
   const router = useRouter();
-  const pathname = usePathname();
+  const asPath = usePathname();
   const params = useParams();
   const searchParams = useSearchParams();
   const locale = params?.locale;
@@ -56,6 +57,13 @@ const FilterPage = () => {
     pageSize: 10,
   });
   const [page, setPage] = useState(1);
+  const [totalContent, setTotalContent] = useState();
+  const [contentImage, setContentImage] = useState([]);
+  const [, setGetTotalPage] = useState();
+  const [categories, setCategories] = useState<any>([]);
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+  const [search, setSearch] = useState();
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
@@ -100,11 +108,48 @@ const FilterPage = () => {
     },
   });
 
+  // async function getCategories() {
+  //   const category = await listCategory("1");
+  //   const resCategory = category?.data?.data?.content;
+  //   setCategories(resCategory);
+  // }
+
+  // function getSelectedCategory() {
+  //   const filter = [];
+
+  //   if (category) {
+  //     const categoryArr = category.split(",");
+
+  //     for (const element of categoryArr) {
+  //       filter.push(Number(element));
+  //     }
+
+  //     setCategoryFilter(filter);
+  //   }
+  // }
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  async function doneTyping() {
+    if (search == "" || search == undefined) {
+      router.push("");
+    } else {
+      router.push(`?title=${search}`);
+    }
+  }
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
   return (
     <div className="flex flex-col">
       {/* Header */}
 
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Foto {">"} <span className="font-bold">Semua Foto</span>
@@ -115,59 +160,69 @@ const FilterPage = () => {
 
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
-          <h2 className="text-lg font-semibold mb-4">Filter</h2>
+        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+          <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
+            <Icon icon="stash:filter-light" fontSize={30} />
+            Filter
+          </h2>
+          <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pencarian
               </label>
-              <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+              <Input onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
 
             <div>
-              <label htmlFor="month" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Tahun & Bulan
               </label>
               <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
 
             <div>
-              <label htmlFor="date" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Tanggal
               </label>
               <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
               <ul className="mt-2 space-y-2">
-                {categories.map((category) => (
+                {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center">
                       <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700">{category.title}</span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{category?.title}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
             {/* Garis */}
-            <div className="border-t border-black my-4"></div>
+            <div className="border-t border-black my-4 dark:border-white"></div>
             {/* Garis */}
             <div>
-              <h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
               <ul className="mt-2 space-y-2">
                 {formatPicture.map((format) => (
                   <li key={format?.id}>
                     <label className="inline-flex items-center">
                       <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700">{format.title}</span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
+            <div className="border-t border-black dark:border-white my-4"></div>
+            <div className="text-center">
+              <a href="#" className="text-[#bb3523]">
+                <b>Reset Filter</b>
+              </a>
+            </div>
           </div>
         </div>
 
@@ -186,8 +241,8 @@ const FilterPage = () => {
               {imageData?.map((image: any) => (
                 <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
                   <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
-                    <Link href={`/image/detail/${image?.slug}`} >
-                      <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
+                    <Link href={`/image/detail/${image?.slug}`}>
+                      <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
                       <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                         {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
                         {image?.clickCount}{" "}
diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
index 8d00a23e..3dcafa08 100644
--- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
@@ -54,10 +54,12 @@ const IndeksDetail = () => {
 
       <div className="w-full">
         {/* Comment */}
-        <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
-          <p className="flex items-start text-lg">Berikan Komentar</p>
-          <Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
-          <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+        <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
+          <div className="gap-5 flex flex-col px-4 lg:px-16">
+            <p className="flex items-start text-lg">Berikan Komentar</p>
+            <Textarea placeholder="Type your comments here." className="flex w-full" />
+            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+          </div>
         </div>
 
         {/* Konten Serupa */}
diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx
index b47d3328..df2bdc31 100644
--- a/app/[locale]/(public)/schedule/page.tsx
+++ b/app/[locale]/(public)/schedule/page.tsx
@@ -540,11 +540,11 @@ const Schedule = () => {
             </Collapsible> */}
             <Accordion type="single" collapsible className="w-full">
               <AccordionItem value="item-1">
-                <AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
-                {prevdayList?.map((list: any) => (
-                  <AccordionContent>
+                <AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
+                {todayList?.map((list: any) => (
+                  <AccordionContent className="flex flex-row gap-3">
                     <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
-                    <div className="flex flex-col">
+                    <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="iconamoon:clock-thin" />
@@ -565,11 +565,11 @@ const Schedule = () => {
               </AccordionItem>
 
               <AccordionItem value="item-2">
-                <AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
-                {todayList?.map((list: any) => (
-                  <AccordionContent>
+                <AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
+                {prevdayList?.map((list: any) => (
+                  <AccordionContent className="flex flex-row gap-3">
                     <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
-                    <div className="flex flex-col">
+                    <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="iconamoon:clock-thin" />
@@ -592,9 +592,9 @@ const Schedule = () => {
               <AccordionItem value="item-3">
                 <AccordionTrigger>Jadwal Selanjutnya</AccordionTrigger>
                 {nextdayList?.map((list: any) => (
-                  <AccordionContent>
+                  <AccordionContent className="flex flex-row gap-3">
                     <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
-                    <div className="flex flex-col">
+                    <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
                         <Icon icon="iconamoon:clock-thin" />
diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx
index c75b4776..32b952a4 100644
--- a/app/[locale]/(public)/video/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx
@@ -38,7 +38,7 @@ const DetailVideo = () => {
 
   return (
     <>
-      <div className="min-h-screen px-4 md:px-24 py-4">
+      <div className="px-4 md:px-24 py-4">
         {/* Container Utama */}
         <div className="rounded-md overflow-hidden md:flex">
           {/* Bagian Kiri */}
@@ -47,10 +47,27 @@ const DetailVideo = () => {
               <VideoPlayer url={detailDataVideo?.files[0]?.url} />
               <div className="absolute top-4 left-4"></div>
             </div>
+
+            {/* Footer Informasi */}
+            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <p className="flex flex-row items-center">
+                oleh&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
+                <Icon icon="formkit:eye" width="15" height="15" />
+                &nbsp;
+                {detailDataVideo?.clickCount}
+              </p>
+              <p>Kreator: {detailDataVideo?.creatorName}</p>
+            </div>
+
+            {/* Keterangan */}
+            <div className="w-full">
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataVideo?.title}</h1>
+              <div dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} />
+            </div>
           </div>
 
           {/* Bagian Kanan */}
-          <div className="md:w-1/4 p-4 bg-[#f7f7f7] rounded-lg mx-4">
+          <div className="md:w-1/4 p-4 bg-[#f7f7f7] rounded-lg mx-4 h-fit">
             <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
               <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
                 <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@@ -104,28 +121,11 @@ const DetailVideo = () => {
             </button>
           </div>
         </div>
-
-        {/* Footer Informasi */}
-        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <p className="flex flex-row items-center">
-            oleh&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
-            <Icon icon="formkit:eye" width="15" height="15" />
-            &nbsp;
-            {detailDataVideo?.clickCount}
-          </p>
-          <p>Kreator: {detailDataVideo?.creatorName}</p>
-        </div>
-
-        {/* Keterangan */}
-        <div className="md:w-3/4">
-          <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataVideo?.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} />
-        </div>
       </div>
       <div className="w-full mb-8">
         {/* Comment */}
         <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
-          <div className="gap-5 flex flex-col px-4 lg:px-20">
+          <div className="gap-5 flex flex-col px-4 lg:px-16">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
             <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index 5a3d1b78..3e173a11 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -102,10 +102,12 @@ const FilterPage = () => {
     setTotalPage(data?.totalPages);
   };
 
+  
+
   return (
     <div className="flex flex-col">
       {/* Header */}
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Audio Visual {">"} <span className="font-bold">Semua Audio Visual</span>
@@ -115,60 +117,70 @@ const FilterPage = () => {
       </div>
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
+        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
           <Reveal>
-            <h2 className="text-lg font-semibold mb-4">Filter</h2>
+            <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
+              <Icon icon="stash:filter-light" fontSize={30} />
+              Filter
+            </h2>
+            <div className="border-t border-black dark:border-white my-4"></div>
             <div className="space-y-6">
               <div>
-                <label htmlFor="search" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Pencarian
                 </label>
                 <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
               </div>
 
               <div>
-                <label htmlFor="month" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Tahun & Bulan
                 </label>
                 <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
               </div>
 
               <div>
-                <label htmlFor="date" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
                   Tanggal
                 </label>
                 <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
               </div>
 
               <div>
-                <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
                 <ul className="mt-2 space-y-2">
                   {categories.map((category) => (
                     <li key={category?.id}>
                       <label className="inline-flex items-center">
                         <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700">{category.title}</span>
+                        <span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
                       </label>
                     </li>
                   ))}
                 </ul>
               </div>
               {/* Garis */}
-              <div className="border-t border-black my-4"></div>
+              <div className="border-t border-black dark:border-white my-4"></div>
               {/* Garis */}
               <div>
-                <h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
                 <ul className="mt-2 space-y-2">
                   {formatPicture.map((format) => (
                     <li key={format?.id}>
                       <label className="inline-flex items-center">
                         <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700">{format.title}</span>
+                        <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
                       </label>
                     </li>
                   ))}
                 </ul>
               </div>
+              <div className="border-t border-black dark:border-white my-4"></div>
+              <div className="text-center">
+                <a href="#" className="text-[#bb3523]">
+                  <b>Reset Filter</b>
+                </a>
+              </div>
             </div>
           </Reveal>
         </div>
@@ -189,15 +201,18 @@ const FilterPage = () => {
                 <Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
                   <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                     <Link href={`/video/detail/${video?.slug}`}>
-                    <img src={video?.thumbnailLink} className="h-60 object-cover items-center w-full justify-center rounded-lg" />
-                    <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                      {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
-                      {video?.clickCount}{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
-                        <path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
-                      </svg>{" "}
-                    </div>
-                    <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate text-base hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
+                      <img src={video?.thumbnailLink} className=" h-60 object-cover items-center w-full justify-center rounded-lg" />
+                      <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
+                        {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
+                        {video?.clickCount}{" "}
+                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+                          <path
+                            fill="#f00"
+                            d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
+                          />
+                        </svg>{" "}
+                      </div>
+                      <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate text-base hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
                     </Link>
                   </CardContent>
                 </Card>
diff --git a/components/landing-page/coverage.tsx b/components/landing-page/coverage.tsx
index 18de4e74..8701aba2 100644
--- a/components/landing-page/coverage.tsx
+++ b/components/landing-page/coverage.tsx
@@ -57,14 +57,10 @@ const Coverage: React.FC = () => {
 
         {/* Pencarian */}
         <div className="flex items-center justify-center gap-4 mb-6">
-          <input
-            type="text"
-            placeholder="Pencarian"
-            className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-          <button className="px-2 w-1/5 lg:px-4 lg:py-2 bg-[#bb3523] text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} /></button>
+          <input type="text" placeholder="Pencarian" className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
+          <button className="px-2 w-1/5 lg:px-4 py-2 bg-[#bb3523] text-xs lg:text-base text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">
+            Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
+          </button>
         </div>
 
         {/* Grid Wilayah */}
diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx
index d36dfb44..6b59a642 100644
--- a/components/landing-page/division.tsx
+++ b/components/landing-page/division.tsx
@@ -60,7 +60,7 @@ const Division = () => {
         {/* Pencarian */}
         <div className="flex items-center justify-center gap-4 mb-6">
           <input type="text" placeholder="Pencarian" className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
-          <button className="px-2 w-1/5 lg:px-4 lg:py-2 bg-[#bb3523] flex justify-center items-center gap-2 text-white rounded-md hover:bg-red-700">
+          <button className="px-2 w-1/5 lg:px-4 py-2 bg-[#bb3523] text-xs lg:text-base flex justify-center items-center gap-2 text-white rounded-md hover:bg-red-700">
             Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
           </button>
         </div>
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 2877bab9..25f15b21 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -61,26 +61,26 @@ const Navbar = () => {
                   </a>
                 </NavigationMenuTrigger>
                 <NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full">
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white">
-                    <p className="text-slate-600 hover:text-[#bb3523]  flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 ">
+                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523]  flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiYoutube className="mr-2" />
                       Video
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                    <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 ">
+                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiMusic className="mr-2" />
                       Audio
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                    <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2">
+                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiImage className="mr-2" />
                       Foto
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                    <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
+                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2">
+                    <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiFile className="mr-2" />
                       Teks
                     </p>
@@ -164,7 +164,7 @@ const Navbar = () => {
           </div>
           <ThemeSwitcher />
           <div className="relative text-gray-600 dark:text-white">
-            <input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none" />
+            <input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" />
             <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
                 <path
@@ -187,7 +187,7 @@ const Navbar = () => {
 
       {/* Mobile Menu */}
       {menuOpen && (
-        <div className="lg:hidden absolute bg-[#f7f7f7] px-4  py-3 w-full space-y-3 z-50">
+        <div className="lg:hidden absolute bg-[#f7f7f7] px-4 py-3 w-full space-y-3 z-50">
           <NavigationMenu>
             <NavigationMenuList>
               <NavigationMenuItem>
@@ -263,50 +263,53 @@ const Navbar = () => {
               </NavigationMenuItem>
             </NavigationMenuList>
           </NavigationMenu>
-          <div className="flex items-center space-x-1 text-red-600">
-            <span className="w-2 h-2 bg-red-500 rounded-full"></span>
-            <span className="font-medium">Live</span>
-          </div>
-          <div className="flex items-center space-x-1 text-yellow-600 font-medium">
-            <a href="https://tvradio.polri.go.id/">
-              <img src="/assets/polriTv.png" className="w-32 h-11 flex items-center" />
-            </a>
-          </div>
-          <div className="relative inline-block text-left">
-            {/* Tombol Utama Bahasa */}
-            <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
-              <img
-                src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"}
-                alt={language === "id" ? "Ind" : "Eng"}
-                className="w-3 h-3"
-              />
-              <span>{language === "id" ? "Ind" : "Eng"}</span>
-              <span className="text-gray-500">
-                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32">
-                  <path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" />
-                </svg>
-              </span>
-            </button>
+          <div className="flex flex-row justify-between mx-3">
+            <div className="flex items-center space-x-1 mx-3 text-red-600">
+              <span className="w-2 h-2 bg-red-500 rounded-full"></span>
+              <span className="font-medium">Live</span>
+            </div>
+            <div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
+              <a href="https://tvradio.polri.go.id/">
+                <img src="/assets/polriTv.png" className="w-21 h-11 flex items-center" />
+              </a>
+            </div>
+            <div className="relative inline-block mx-3 text-left">
+              {/* Tombol Utama Bahasa */}
+              <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
+                <img
+                  src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"}
+                  alt={language === "id" ? "Ind" : "Eng"}
+                  className="w-3 h-3"
+                />
+                <span>{language === "id" ? "Ind" : "Eng"}</span>
+                <span className="text-gray-500">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32">
+                    <path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" />
+                  </svg>
+                </span>
+              </button>
 
-            {/* Dropdown Menu */}
-            {isOpen && (
-              <div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
-                <button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}>
-                  <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" />
-                  <span>Ind</span>
-                </button>
-                <button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}>
-                  <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" />
-                  <span>Eng</span>
-                </button>
-              </div>
-            )}
+              {/* Dropdown Menu */}
+              {isOpen && (
+                <div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
+                  <button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}>
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" />
+                    <span>Ind</span>
+                  </button>
+                  <button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}>
+                    <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" />
+                    <span>Eng</span>
+                  </button>
+                </div>
+              )}
+            </div>
           </div>
-          <div className=" py-1 w-24">
-            <input type="text" placeholder="Pencarian" className="border rounded-full text-sm text-center text-gray-600" />
+
+          <div className=" py-1 flex items-center mx-3">
+            <input type="text" placeholder="Pencarian" className="border rounded-full w-full text-sm text-center text-gray-600" />
           </div>
-          <div className="flex flex-row justify-between items-center space-y-2 ">
-            <Link href="/auth" className="w-fit px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">
+          <div className="flex flex-row justify-between items-center space-y-2 mx-3">
+            <Link href="/auth" className="w-fit px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">
               Masuk
             </Link>
             <Link href="#" className="w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index a4b85656..da266abe 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -42,7 +42,7 @@ const NewContent = (props: { type: string }) => {
               {props.type == "popular" ? "Populer" : props.type == "latest" ? "Terbaru" : "Serupa"}
             </h2>
             <Tabs value={selectedTab} onValueChange={setSelectedTab}>
-              <TabsList className="flex flex-col lg:flex-row ">
+              <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
                 <TabsTrigger
                   value="video"
                   className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
@@ -81,7 +81,7 @@ const NewContent = (props: { type: string }) => {
                     {newContent?.map((video: any) => (
                       <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
                         <Link href={`/video/detail/${video?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                          <img src={video?.thumbnailLink} className="w-full rounded-lg h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                          <img src={video?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
                           <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
                             <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</h1>
                             <p className="flex flex-row items-center text-[10px] gap-2">
@@ -139,7 +139,7 @@ const NewContent = (props: { type: string }) => {
                     {newContent?.map((image: any) => (
                       <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
                         <Link href={`/image/detail/${image?.slug}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                          <img src={image?.thumbnailLink} className="w-full h-32 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
+                          <img src={image?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
                           <div className="absolute bottom-0 rounded-lg left-0 right-0 border-l-4 border-[#bb3523] bg-gray-600 text-white p-2">
                             <h1 className="text-sm font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h1>
                             <p className="flex flex-row items-center text-sm gap-2">
@@ -173,8 +173,10 @@ const NewContent = (props: { type: string }) => {
                           </div>
 
                           <div className="flex w-full pr-10 flex-col flex-1">
-                            <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center text-xs gap-2 mt-1 lg:text-sm">
-                              {formatDateToIndonesian(new Date(text?.createdAt))} {text?.timezone ? text?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {text?.clickCount}{" "}
+                            <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center text-xs gap-0 lg:gap-1 mt-1 lg:text-sm">
+                              {formatDateToIndonesian(new Date(text?.createdAt))}
+                              {text?.timezone ? text?.timezone : "WIB"}|<Icon icon="formkit:eye" width="15" height="15" />
+                              {text?.clickCount}
                             </div>
                             <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible ">{text?.title}</div>
                             <div className="flex gap-2 items-center text-sm text-red-500 dark:text-red-500">
diff --git a/providers/mounted.provider.tsx b/providers/mounted.provider.tsx
index 3e92908d..240057cb 100644
--- a/providers/mounted.provider.tsx
+++ b/providers/mounted.provider.tsx
@@ -1,13 +1,13 @@
-"use client"
-import Loader from '@/components/loader'
+"use client";
+import Loader from "@/components/loader";
 
-import { useMounted } from '@/hooks/use-mounted'
-import React from 'react'
+import { useMounted } from "@/hooks/use-mounted";
+import React from "react";
 
 const MountedProvider = ({ children }: { children: React.ReactNode }) => {
-  const mounted = useMounted()
-  if (!mounted) return <Loader />
-  return children
-}
+  const mounted = useMounted();
+  // if (!mounted) return <Loader />
+  return children;
+};
 
-export default MountedProvider
\ No newline at end of file
+export default MountedProvider;
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index 1e693ed2..1d45a4d5 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -37,3 +37,9 @@ export async function getFeedback() {
 export async function postUserFeedback() {
   return await httpGetInterceptor(`feedback/user`);
 }
+
+export async function listCategory(type = "") {
+  return await httpGetInterceptor(`media/categories/list/enable?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=${type}`);
+}
+
+