connect api to indeks and Konten

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

@@ -1,17 +1,10 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
-
+import { getListContent } from "@/service/landing/landing";
-const dummyDescription = [
+import { formatDateToIndonesian } from "@/utils/globals";
-  { 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 categories = [
   { id: 1, title: "HUT HUMAS KE - 73" },
@@ -33,6 +26,16 @@ const formatAudio = [
 ];
 
 const FilterPage = () => {
+  const [audioData, setAudioData] = useState<any>();
+  const [page, setPage] = useState(1);
+  useEffect(() => {
+    initFetch();
+  }, []);
+  const initFetch = async () => {
+    const response = await getListContent({ page: page - 1, size: 12, sortBy: "createdAt", contentTypeId: "4" });
+    console.log(response);
+    setAudioData(response?.data?.data?.content);
+  };
   return (
     <div className="flex flex-col">
       {/* Header */}
@@ -118,8 +121,8 @@ const FilterPage = () => {
           </div>
           {/* Card */}
           <div className=" grid grid-cols-1 gap-6 ">
-            {dummyDescription.map((description) => (
+            {audioData?.map((audio: any) => (
-              <a href="#" key={description.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">
+              <a href="#" 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">
                   <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
                     <path
@@ -131,9 +134,9 @@ const FilterPage = () => {
 
                 <div className="flex flex-col  flex-1">
                   <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
-                    {description.date} | <Icon icon="formkit:eye" width="15" height="15" /> 518
+                    {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518
                   </div>
-                  <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{description.title}</div>
+                  <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{audio?.title}</div>
                 </div>
                 <div className="flex items-center justify-center gap-3">
                   <div className="mt-2">
@@ -141,7 +144,7 @@ const FilterPage = () => {
                   </div>
                   <div className="flex flex-row items-center justify-center text-gray-500 dark:text-gray-400">
                     <img src="/assets/audio-icon.png" alt="#" className="flex items-center justify-center" />
-                    <div className="flex mx-2 items-center justify-center">{description.duration}</div>
+                    <div className="flex mx-2 items-center justify-center">{audio?.duration}</div>
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                       <path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
                     </svg>

app/[locale]/(public)/audio/layout.tsx

@@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/contact/layout.tsx

@@ -6,7 +6,7 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 import Footer from "@/components/landing-page/footer";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {

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

@@ -1,8 +1,10 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
+import { getListContent } from "@/service/landing/landing";
+import { formatDateToIndonesian } from "@/utils/globals";
 
 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" },
@@ -44,6 +46,16 @@ const formatAudio = [
 ];
 
 const DocumentPage = () => {
+  const [documentData, setDocumentData] = useState<any>();
+  const [page, setPage] = useState(1);
+  useEffect(() => {
+    initFetch();
+  }, []);
+  const initFetch = async () => {
+    const response = await getListContent({ page: page - 1, size: 12, sortBy: "createdAt", contentTypeId: "3" });
+    console.log(response);
+    setDocumentData(response?.data?.data?.content);
+  };
   return (
     <div className="flex flex-col">
       {/* Header */}
@@ -130,8 +142,8 @@ const DocumentPage = () => {
 
           {/* Card */}
           <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
-            {dummyDescription.map((description) => (
+            {documentData?.map((document: any) => (
-              <a href="#" key={description.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+              <a href="#" key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
                 <div className="flex items-center justify-center rounded-lg w-16 h-16">
                   <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
@@ -143,9 +155,9 @@ const DocumentPage = () => {
 
                 <div className="flex flex-col flex-1">
                   <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
-                    {description.date} | <Icon icon="formkit:eye" width="15" height="15" /> 518
+                  {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518
                   </div>
-                  <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{description.title}</div>
+                  <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.title}</div>
                   <div className="flex gap-2 items-center text-sm text-red-500 dark:text-red-500">
                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
                       <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />

app/[locale]/(public)/document/layout.tsx

@@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/faqs/layout.tsx

@@ -6,7 +6,7 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 import Footer from "@/components/landing-page/footer";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {

app/[locale]/(public)/feedback/layout.tsx

@@ -6,7 +6,7 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 import Footer from "@/components/landing-page/footer";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {

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

@@ -1,22 +1,22 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { generateLocalizedPath } from "@/utils/globals";
+import { formatDateToIndonesian, generateLocalizedPath } from "@/utils/globals";
 import { useParams, usePathname, useRouter } from "next/navigation";
+import { getListContent } from "@/service/landing/landing";
+import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import TablePagination from "@/components/table/table-pagination";
+import { Response } from "@dnd-kit/core/dist/sensors/types";
 
-const dummyImage = [
+const columns: ColumnDef<any>[] = [
-  { 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" },
+    accessorKey: "no",
-  { 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" },
+    header: "No",
-  { 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" },
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
-  { 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 categories = [
@@ -43,6 +43,54 @@ const FilterPage = () => {
   const pathname = usePathname();
   const params = useParams();
   const locale = params?.locale;
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [totalPage, setTotalPage] = useState(1);
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [imageData, setImageData] = useState<any>();
+  const [page, setPage] = useState(1);
+  useEffect(() => {
+    initFetch();
+  }, []);
+  const initFetch = async () => {
+    const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "1" });
+    console.log(response);
+
+    const data = response.data?.data;
+    const contentData = data?.content;
+    contentData.forEach((item: any, index: number) => {
+      item.no = (page - 1) * 6 + index + 1;
+    });
+    setImageData(contentData);
+  };
+  const table = useReactTable({
+    data: imageData,
+    columns: columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+  console.log("table", table);
 
   return (
     <div className="flex flex-col">
@@ -50,18 +98,16 @@ const FilterPage = () => {
       <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
         <p>
           {" "}
-          Foto {">"} <span className="font-bold">Semua Foto</span>
+          Audio Visual {">"} <span className="font-bold">Semua Audio Visual</span>
         </p>
         <p className="font-bold">|</p>
-        <p>Terdapat 32499 artikel berisi Foto yang dapat diunduh </p>
+        <p>Terdapat 324911 artikel berisi Audio Visual yang dapat diunduh </p>
       </div>
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        {/* Sidebar Kiri */}
         <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="space-y-6">
-            {/* Pencarian */}
             <div>
               <label htmlFor="search" className="block text-sm font-medium text-gray-700">
                 Pencarian
@@ -69,7 +115,6 @@ const FilterPage = () => {
               <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">
                 Tahun & Bulan
@@ -77,7 +122,6 @@ const FilterPage = () => {
               <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">
                 Tanggal
@@ -85,7 +129,6 @@ const FilterPage = () => {
               <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>
               <ul className="mt-2 space-y-2">
@@ -124,22 +167,23 @@ const FilterPage = () => {
             <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
             <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
               <option value="terbaru">Terbaru</option>
-              <option value="terlama">Terpopuler</option>
+              <option value="terlama">Terlama</option>
             </select>
           </div>
 
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-            {dummyImage.map((image) => (
+            {imageData?.map((image: any) => (
-              <Card key={image.id} className="hover:scale-110 transition-transform duration-300">
+              <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
-                <CardContent onClick={() => router.push(generateLocalizedPath(`/image/detail/${image.id}`, String(locale)))} className="flex flex-col text-xs lg:text-sm p-0">
+                <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
-                  <img src={image.thumbnail} className="h-60 object-cover w-full items-center justify-center cursor-pointer rounded-lg" />
+                  <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
-                  <div className="flex flex-row items-center gap-2 mx-2">
+                  <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                    {image.date} {image.time} | <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
+                    {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
+                    {image?.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 hover:whitespace-normal hover:overflow-visible w-full">{image.title}</div>
+                  <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image?.title}</div>
                 </CardContent>
               </Card>
             ))}

app/[locale]/(public)/image/layout.tsx

@@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/indeks/layout.tsx

@@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/indeks/page.tsx

@@ -1,107 +1,96 @@
 "use client";
 
+import { getIndeksData } from "@/service/landing/landing";
+import { formatDateToIndonesian } from "@/utils/globals";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import React from "react";
+import React, { useEffect, useState } from "react";
 
-interface ImageCardProps {
+const Indeks: React.FC = () => {
-  imageUrl: string;
-  label: string;
-  title: string;
-  date: string;
-}
-
-const ImageCard: React.FC<ImageCardProps> = ({ imageUrl, label, title, date }) => {
-  return (
-    <div className="relative rounded-lg overflow-hidden shadow-md">
-      <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
-      <div className="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-4 text-white">
-        <span className="bg-red-600 text-xs font-bold px-2 py-1 rounded">{label}</span>
-        <h3 className="text-sm font-semibold mt-2 line-clamp-2 w-fit ">{title}</h3>
-        <span className="text-xs mt-1">{date}</span>
-      </div>
-    </div>
-  );
-};
-
-const ImageGallery: React.FC = () => {
   const pathname = usePathname();
-
+  const [indeksData, setIndeksData] = useState<any>();
-  const images = [
+  useEffect(() => {
-    {
+    initFetch();
-      imageUrl: "/assets/banner-sample.png",
+  }, []);
-      label: "Giat Pimpinan",
+  const initFetch = async () => {
-      title: "Foto Kapolri Dorong Transformasi Polri Presisi",
+    const response = await getIndeksData();
-      date: "2024-11-12 10:09:20 WIB",
+    console.log(response);
-    },
+    setIndeksData(response?.data?.data?.content);
-    {
+  };
-      imageUrl: "/assets/hot-topik-1.jpg",
-      label: "Giat Polri",
-      title: "Foto Kapolri Tinjau Pengungsi Gunung",
-      date: "2024-11-19 09:35:27 WIB",
-    },
-    {
-      imageUrl: "/assets/hot-topik-2.jpg",
-      label: "Giat Polri",
-      title: "Foto Kapolri dalam Acara Bersama TNI",
-      date: "2024-11-20 15:45:00 WIB",
-    },
-  ];
-
-  const imageBottom = [
-    {
-      id: 1,
-      imageUrl: "/assets/hot-topik-1.jpg",
-      title: "Foto Kakorlantas Polri Tekankan Intervensi",
-      description:
-        "Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen. Pol. Dr. Drs. Aan Suhanan, M.Si. memimpin apel pagi di NTMC pada Senin (2/12/2024) dan menekankan pentingnya pengelolaan ekstra dalam pengamanan Natal dan Tahun Baru 2024.",
-    },
-    {
-      id: 2,
-      imageUrl: "/assets/hot-topik-1.jpg",
-      title: "Foto Kakorlantas Tinjau Jalur Tol, Jalur Wisata",
-      description: "Kakorlantas Polri Irjen.Pol. Dr. Drs. Aan Suhanan, M.Si. memimpin survei jalur tol dari Cikopo, Purwakarta hingga Kalikangkung, Jawa Tengah, untuk persiapan Operasi Lilin 2024.",
-    },
-    {
-      id: 3,
-      imageUrl: "/assets/hot-topik-2.jpg",
-      title: "Foto Kapolri Pastikan Kesiapan Polri Kawal Pilkada",
-      description: "Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo, M.Si menegaskan kesiapan Polri dalam mengawal Pilkada Serentak 2024 yang digelar Rabu, 27 November 2024.",
-    },
-  ];
 
   return (
-    <>
+    <div className="px-4 lg:px-14">
-      {/* Hero */}
+      {/* Hero Left */}
-      <div className="max-w-screen-xl  mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto">
-        <div className="md:col-span-2">
+        <div className="lg:w-[60%] w-full lg:h-full">
-          <ImageCard {...images[0]} />
+          {indeksData?.map((indeks: any) => (
-        </div>
+            <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
-        <div className="flex flex-col gap-4">
+              <img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg" />
-          <ImageCard {...images[1]} />
+              <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
-          <ImageCard {...images[2]} />
+                <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span>
-        </div>
+                <Link href="#">
-      </div>
+                  <h2 className="text-lg font-bold mt-2">{indeks?.title}</h2>
-      {/* Bottom */}
-      <div className="px-4 lg:px-24 py-4">
-        <div className="flex flex-col gap-4">
-          {imageBottom.map((image) => (
-            <div key={image.id} className="flex flex-col md:flex-row items-start p-4 bg-white rounded-lg shadow-md hover:shadow-lg">
-              <div className="w-full md:w-1/3">
-                <img src={image.imageUrl} alt="" className="h-40 md:h-32 object-cover rounded-lg" />
-              </div>
-              <div className="flex flex-col justify-between w-full">
-                <Link href={`${pathname}/detail/${image.id}`} className="text-lg font-semibold text-gray-800">
-                  {image.title}
                 </Link>
-                <p className="text-sm text-gray-600 mt-2">{image.description}</p>
+                <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
+                {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                    <path
+                      fill="currentColor"
+                      d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
+                    />
+                  </svg>{" "}
+                {indeks?.clickCount}
+                </p>
               </div>
             </div>
           ))}
         </div>
+
+        {/* Hero Right */}
+        {/* <div className="lg:w-[40%] w-full space-y-2">
+          {indeksData?.map((indeksRight: any) => (
+            <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
+              <img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg" />
+              <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
+                <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeksRight?.categoryName}</span>
+                <Link href="#">
+                  <h2 className="text-lg font-bold mt-2">{indeksRight?.title}</h2>
+                </Link>
+                <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
+                {formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "}
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                    <path
+                      fill="currentColor"
+                      d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
+                    />
+                  </svg>{" "}
+                  {indeksRight?.clickCount}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div> */}
       </div>
-    </>
+
+      {/* Bottom */}
+      {/* <div className="px-4 lg:px-7 py-4">
+        <div className="flex flex-col gap-4">
+          {indeksData?.map((indeksBottom: any) => (
+            <div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
+                <img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-[500px] lg:h-[300px]" />
+              <div className="flex flex-col justify-between w-full">
+                <p className="text-sm">{indeksBottom?.date}</p>
+                <Link href={`${pathname}/detail/${indeksBottom?.id}`} className="text-xl font-semibold text-gray-800">
+                  {indeksBottom?.title}
+                </Link>
+                <p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div> */}
+    </div>
   );
 };
 
-export default ImageGallery;
+export default Indeks;

app/[locale]/(public)/schedule/layout.tsx

@@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

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

@@ -1,9 +1,11 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
+import { getListContent, getVideoData } from "@/service/landing/landing";
+import { formatDateToIndonesian } from "@/utils/globals";
 
 const dummyImage = [
   { 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" },
@@ -39,6 +41,17 @@ const formatPicture = [
 ];
 
 const FilterPage = () => {
+  const [videoData, setVideoData] = useState<any>();
+  const [page, setPage] = useState(1);
+  useEffect(() => {
+    initFetch();
+  }, []);
+  const initFetch = async () => {
+    const response = await getListContent({page: page-1, size: 12, sortBy: "createdAt", contentTypeId: "2", });
+    console.log(response);
+    setVideoData(response?.data?.data?.content);
+  };
+
   return (
     <div className="flex flex-col">
       {/* Header */}
@@ -48,15 +61,13 @@ const FilterPage = () => {
           Audio Visual {">"} <span className="font-bold">Semua Audio Visual</span>
         </p>
         <p className="font-bold">|</p>
-        <p>Terdapat 32499 artikel berisi Audio Visual yang dapat diunduh </p>
+        <p>Terdapat 324911 artikel berisi Audio Visual yang dapat diunduh </p>
       </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">
           <h2 className="text-lg font-semibold mb-4">Filter</h2>
           <div className="space-y-6">
-          
             <div>
               <label htmlFor="search" className="block text-sm font-medium text-gray-700">
                 Pencarian
@@ -64,7 +75,6 @@ const FilterPage = () => {
               <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">
                 Tahun & Bulan
@@ -72,7 +82,6 @@ const FilterPage = () => {
               <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">
                 Tanggal
@@ -80,7 +89,6 @@ const FilterPage = () => {
               <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>
               <ul className="mt-2 space-y-2">
@@ -124,17 +132,18 @@ const FilterPage = () => {
           </div>
 
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-            {dummyImage.map((image) => (
+            {videoData?.map((video: any) => (
-              <Card key={image.id} className="hover:scale-110 transition-transform duration-300">
+              <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">
-                  <img src={image.thumbnail} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
+                  <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
                   <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                    {image.date} {image.time} | <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
+                    {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 hover:whitespace-normal hover:overflow-visible w-full">{image.title}</div>
+                  <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
                 </CardContent>
               </Card>
             ))}

app/[locale]/(public)/video/layout.tsx

@@ -7,7 +7,7 @@ import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/page.tsx

@@ -8,7 +8,7 @@ import Coverage from "@/components/landing-page/coverage";
 import Hero from "@/components/landing-page/hero";
 import Footer from "@/components/landing-page/footer";
 import Division from "@/components/landing-page/division";
-import Navbar from "@/components/landing-page/navbar";
+import Navbar from "@/components/landing-page/Navbar";
 
 const Home = ({ params: { locale } }: { params: { locale: string } }) => {
   return (

components/landing-page/Hero.tsx

@@ -6,8 +6,6 @@ import "swiper/css/navigation";
 import { getHeroData } from "@/service/landing/landing";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
-import { Navigation, Pagination } from "swiper/modules";
-import { Card, CardContent } from "@/components/ui/card";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 
 const Hero: React.FC = () => {
@@ -28,7 +26,6 @@ const Hero: React.FC = () => {
   return (
     <div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-20 py-4 mx-auto">
       {/* Section Gambar Utama */}
-     
         <Carousel className="lg:w-2/3 w-full lg:h-full">
           <CarouselContent>
             {heroData?.map((list: any) => (

components/landing-page/new-content.tsx

@@ -20,7 +20,7 @@ const NewContent = (props: { type: string }) => {
     initFetch();
   }, [selectedTab]);
   const initFetch = async () => {
-    const request = { sortBy: props.type == "popular" ? "clickCount" : "createdAt", contentTypeId: selectedTab == "image" ? "1" : selectedTab == "video" ? "2" : selectedTab == "text" ? "3" : selectedTab == "audio" ? "4" : "" };
+    const request = {page: 0, size: 5, sortBy: props.type == "popular" ? "clickCount" : "createdAt", contentTypeId: selectedTab == "image" ? "1" : selectedTab == "video" ? "2" : selectedTab == "text" ? "3" : selectedTab == "audio" ? "4" : "" };
     const response = await getListContent(request);
     console.log("category", response);
     setNewContent(response?.data?.data?.content);

service/landing/landing.ts

@@ -8,10 +8,16 @@ export async function getCategoryData() {
   return await httpGetInterceptor(`media/categories/list/publish?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=`);
 }
 
-export async function getListContent(data: { sortBy: string; contentTypeId: string }) {
+export async function getListContent(data: { sortBy: string; contentTypeId: string; size: number; page: number }) {
-  return await httpGetInterceptor(`media/public/list?enablePage=1&sort=desc&sortBy=${data.sortBy}&size=5&page=0&typeId=${data.contentTypeId}&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`);
+  return await httpGetInterceptor(
+    `media/public/list?enablePage=1&sort=desc&sortBy=${data.sortBy}&size=${data.size}&page=${data.page}&typeId=${data.contentTypeId}&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
+  );
 }
 
 export async function getPrivacy() {
   return await httpGetInterceptor(`general/privacy-policy/1`);
 }
+
+export async function getIndeksData() {
+  return await httpGetInterceptor(`blog/public/pagination?enablePage=1&page=0&size=20`);
+}